Table of contents
Documentation

Inline Tools API

In this article will be explained all available options for Inline Tools creation.

Public methods

render Required create UI of button
surround Required works with selected range
checkState Required get Tool's activated state by selected range
renderActions Optional create additional element below the buttons
clear Optional clear Tool's stuff on opening/closing of Inline Toolbar

Static getters

isInline Required specifies Tool as Inline Toolbar Tool
sanitize Optional sanitizer rules
title Optional Allows to define Tool's title that can be used in Helper Tooltip appearing on hover
shortcut Optional Allows to define a shortcut for tool

render()

Create Tool`s button for Inline Toolbar. Can either return MenuConfig or single HTML element with a button.

Parameters

This method has no arguments.

Return value

MenuConfig Configuration of the tune's appearance inside Inline Toolbar menu.
Button Advanced. HTML Element with button for Inline Toolbar.
☝️
Note
Custom HTML return value format is only recommended for corner cases when it's not possible to define Inline Tool with MenuConfig. In other cases use simple config format.

Example #1: MenuConfig return value

class MyInlineTool { render () { return { icon: '<svg>...</svg>', onActivate: () => { // Handle click } } } }

Example #2: HTMLElement return value

class MyInlineTool { render () { const button = document.createElement('button'); button.type = 'button'; button.innerHTML = '<svg>...</svg>'; return button; } }

surround()

This method is called when Tool button is pressed and accepts Range object with selected fragment as an argument.

Parameters

Range Range object with selected fragment

Return value

Void

Example

class MyInlineTool { /* ... */ surround(range) { /* Do something with the passed Range */ } }

checkState()

This method is called when Inline Toolbar is opened to update button`s state.

Parameters

Selection Selected fragment

Return value

Void

Example

class MyInlineTool { /* ... */ checkState(selection) { /* Check if selection contains your inline tool */ if (containsTool) { this.button.classList.add('active'); } else { this.button.classList.add('active'); } }

renderActions()

Returns additional elements to interact with the user.

Parameters

This method has no arguments

Return value

Element HTML Element with additional interface

Example

class MyInlineTool { /* ... */ renderActions() { const input = document.createElement('input'); return input; } }

clear()

This method is called when Inline Toolbar is closed. You can use it to reset some internal Tool`s states.

Parameters

This method has no parameters

Return value

Void

Example

class MyInlineTool { /* ... */ clear() { this.internalState = null; } }

isInline()

To mark Tool as inline this static getter should return true.

Return value

true

Example

class MyInlineTool { static get isInline() { return true; } /* ... */ }

sanitize()

To avoid your Inline Tool to be sanitized you need to provide sanitize configuration for it. It will be merged with Block Tool configuration where your Tool is allowed to use.

Return value

Object Sanitizer configuration rules.

Example

class MyInlineTool { static get sanitize() { return { a: { href: true, target: '_blank', ref: 'nofollow' } } } /* ... */ }

title()

You can pass your Tool's title via title static getter. It can be used, for example, in the Tooltip with icon description that appears by hover.

export default class BoldInlineTool implements InlineTool { /** * Specifies Tool as Inline Toolbar Tool */ public static isInline = true; /** * Title for hover-tooltip */ public static title: string = 'Bold'; // ... other methods }

(The example above is written on TypeScript. You can use native JS as well)

shortcut()

Provides keyboard shortcut for your Tool

Return value

String Shortcut for Tool. Format described here.  

Example

class MyInlineTool { static get shortcut() { return 'CMD+K'; } /* ... */ }
previous
Menu Config
next
Block Tunes API