etozhealkhipce/editorjs-aitext

AI Text Tool for Editor.js

AI suggestion text Tool for the Editor.js based on the default Paragraph Tool and OpenAI Node.js library.

While writing with this tool you will get some OpenAI suggestion after 2 seconds delay. You can accept or decline it.

Bindings:

Accept suggestion: 'Right or Left ALT buttons'
Decline suggestion: 'Backspace or ESC buttons'

Installation

Get the package

npm i @alkhipce/editorjs-aitext

Include module at your application

import AIText from '@alkhipce/editorjs-aitext'

Usage for ver >= 1.2.0

If your project uses versions lower than 1.2.0, please read the old tutorial below

Add a new Tool to the tools property of the Editor.js initial config.

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)
            })
          },
        }
      },
  }

  ...
});

Usage for ver < 1.2.0

Add a new Tool to the tools property of the Editor.js initial config.

var editor = EditorJS({
  ...

  tools: {
    ...
      aiText: {
        // if you do not use TypeScript you need to remove "as unknown as ToolConstructable" construction
        class: AIText as unknown as ToolConstructable,
        config: {
          openaiKey: 'YOUR_OPEN_AI_KEY'
        }
      },
  }

  ...
});

Config Params

The AI Text Tool supports these configuration parameters:

Field	Type	Description
placeholder	string	The placeholder. Will be shown only in the first paragraph when the whole editor is empty.
preserveBlank	boolean	(default: false) Whether or not to keep blank paragraphs when saving editor data
(DEPRECATED) openaiKey	string	Required parameter
callback	function	Required parameter. This callback function has to accept a string and return Promise

Output data

Field	Type	Description
text	string	paragraph's text

{
  "type": "aiText",
  "data": {
    "text": "Check out our projects on a <a href=\"https://github.com/codex-team\">GitHub page</a>."
  }
}

Roadmap

1. Add types (done)
2. Add styles file
3. Improve loader icon