AI Text Tool for Editor.js

AI suggestion text Tool for the Editor.js based on the default Paragraph Tool.

While writing, you get an AI suggestion after a configurable delay. Accept or decline it with keyboard shortcuts.

Using an older version? See the 1.2.0 readme.

Installation

npm i @alkhipce/editorjs-aitext

import AIText from '@alkhipce/editorjs-aitext'

Usage

var editor = EditorJS({
  ...

  tools: {
    ...
      aiText: {
        // if you do not use TypeScript you need to remove "as unknown as ToolConstructable" construction
        // type ToolConstructable imported from @editorjs/editorjs package
        class: AIText as unknown as ToolConstructable,
        config: {
          // here you need to provide your own suggestion provider (e.g., request to your backend)
          // this callback function must accept a string and return a Promise<string>
          callback: (text: string) => {
            return new Promise(resolve => {
              setTimeout(() => {
                resolve('AI: ' + text)
              }, 1000)
            })
          },
          acceptKeys: ['AltLeft', 'AltRight', 'Tab'], // default
          declineKeys: ['Escape', 'Backspace'],      // default
          debounceTimeout: 2000,               // default
          icon: '<svg>...</svg>',
          loaderIcon: '<svg>...</svg>',
        }
      },
  }

  ...
});

Config

| Field | Type | Default | Description | | ----- | ---- | ------- | ----------- | | callback | (text: string) => Promise<string> | — | Required. Called with current block content, must return a suggestion string | | acceptKeys | string[] | ['AltLeft', 'AltRight', 'Tab'] | Keys that accept the suggestion (values are KeyboardEvent.code) | | declineKeys | string[] | ['Escape', 'Backspace'] | Keys that decline the suggestion | | debounceTimeout | number | 2000 | Delay in ms after last input before requesting a suggestion | | icon | string | built-in SVG | Custom SVG icon for the toolbox | | loaderIcon | string | built-in SVG | Custom SVG icon for the loader shown while fetching |

Output

{
  "type": "aiText",
  "data": {
    "text": "paragraph text here"
  }
}