Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/etozhealkhipce/editorjs-aitext
https://github.com/etozhealkhipce/editorjs-aitext
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/etozhealkhipce/editorjs-aitext
- Owner: etozhealkhipce
- License: mit
- Created: 2023-11-10T08:16:25.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-03-31T20:02:41.000Z (7 months ago)
- Last Synced: 2024-08-01T04:26:39.269Z (3 months ago)
- Language: TypeScript
- Size: 76.2 KB
- Stars: 27
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-editorjs - editorjs-aitext - ai suggestions tool based on paragraph tool and openai node lib (Tools / Block Tools)
README
[](https://www.npmjs.com/package/@alkhipce/editorjs-aitext)
[](https://github.com/etozhealkhipce/editorjs-aitext)
# AI Text Tool for Editor.js
AI suggestion text Tool for the [Editor.js](https://ifmo.su/editor) based on the default [Paragraph Tool](https://github.com/editor-js/paragraph/tree/master) and [OpenAI Node.js library](https://github.com/openai/openai-node).
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
```shell
npm i @alkhipce/editorjs-aitext
```
Include module at your application
```javascript
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.
```javascript
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
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.
```javascript
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 |
```json
{
"type": "aiText",
"data": {
"text": "Check out our projects on a GitHub page."
}
}
```
## Roadmap
1. Add types (done)
2. Add styles file
3. Improve loader icon