@alkhipce/editorjs-aitext v1.2.0

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:

Output data

{
  "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