Table of contents

Inline Tools API

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

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
shortcut Optional sets a shortcut
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

Create Tool`s button for Inline Toolbar. Should return single HTML Element with your icon.

This method has no arguments.

Button HTML Element with button for Inline Toolbar.
import toolIcon from './icon.svg'; // should be handled with webpack or the familiar tool class MyInlineTool { render () { const button = document.createElement('button'); button.type = 'button'; button.innerHTML = toolIcon; return button; } }

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

Range Range object with selected fragment


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

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

Selection Selected fragment


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

Returns additional elements to interact with the user.

This method has no arguments

Element HTML Element with additional interface
class MyInlineTool { /* ... */ renderActions() { const input = document.createElement('input'); return input; } }

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

This method has no parameters


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

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


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

Provides keyboard shortcut for your Tool

String Shortcut for Tool. Format described here.  
class MyInlineTool { get shortcut() { return 'CMD+K'; } /* ... */ }

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.

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

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)