codex-team / codex-team/editor.js
💡TOOL: Add an autocomplete tool type
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
1. Describe a problem.
When typing a text, I'm used to the github workflow where I can type `#` to refer to an issue, `@` to mention someone or `:` to open the emoji panel. These kind of interactions are widely used in modern forums/chat, but as far as I've seen, are not possible with editor.js right now.
2. Describe the solution you'd like. Mockups are welcome.
Autocomplete tools would be triggered by typing its marker, and can be discarded using the escape key.
The autocomplete tool API could look something like this : (10 seconds thinking, might need some adjustments)
```
class MentionTool {
static get isAutocomplete() {
return true;
}
static get trigger() {
return '@';
}
complete(text) {
return [
{// Each auto complete item has a free form, and is given as-is to the makeListItem/itemSelected functions
id: 16060815,
text: "CodeX-Team",
profilePicture: "https://avatars.githubusercontent.com/u/16060815?s=200&v=4"
}
].filter(i => i.text.startsWith(text));
}
makeListItem(item) { // Creates a list item to show in the autocomplete list
return ` ${item.text}`;
}
itemSelected(selectedItem) { // Creates the code to put in the editor
return `#${selectedItem.text}`;
}
}
```
3. Are there any alternatives?
There is the "inline tool" type, but you need to select a text and apply the inline tool, which breaks the natural flow of typing.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.