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.
Accept suggestion: 'Right or Left ALT buttons'
Decline suggestion: 'Backspace or ESC buttons'
Get the package
npm i @alkhipce/editorjs-aitext
Include module at your application
import AIText from '@alkhipce/editorjs-aitext'
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)
})
},
}
},
}
...
});
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'
}
},
}
...
});
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 |
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>."
}
}
- Add types (done)
- Add styles file
- Improve loader icon