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

Public getters

shortcut Optional sets a shortcut

Static getters

isInline Required specifies Tool as Inline Toolbar Tool
sanitize Optional sanitizer rules

render()

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

Parameters

This method has no arguments.

Return value

Button HTML Element with button for Inline Toolbar.

Example

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; } }

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; } /* ... */ }

shortcut()

Provides keyboard shortcut for your Tool

Return value

String Shortcut for Tool. Format described here.  

Example

class MyInlineTool { get shortcut() { return 'CMD+K'; } /* ... */ }

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' } } } /* ... */ }