codex-team / codex-team/editor.js
Inline toolbar usage and render data
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
Hello everyone, I'm new to EditorJs and I'm really interested in this awesome editor. However, I encountered some problems when working with it.
First, I am really confused with the usage of **inline toolbar**. Does EditorJs support default inline toolbar? I try to config **inlineToolbar: true** but it doesn't work or show up.
Second, I have a list of notes. When I click on a note, I want to re-render editor data with `editor.current.blocks.render(content)` But when I first render component, it throws me error: **Can't find a Block to remove** although I've set init data before rendering.
Here is my editor:
```
const initData = {
time: 1719246341883,
blocks: [
{
id: "wqGx4FfRpe",
data: {
text: "",
},
type: "paragraph",
},
],
version: "2.29.1",
};
useEffect(() => {
if (!editor.current) {
editor.current = new EditorJS({
holder: "editorjs",
inlineToolbar: true,
tools: {
header: {
class: Header,
inlineToolbar: true,
},
marker: {
class: Marker,
inlineToolbar: true,
},
list: List,
checklist: Checklist,
paragraph: Paragraph,
quote: {
class: Quote,
inlineToolbar: true,
},
code: {
class: Code,
inlineToolbar: true,
},
bold: StrongInlineTool,
italic: ItalicInlineTool,
underline: UnderlineInlineTool,
},
data: initData,
onChange: (api, event) => {
api.saver
.save()
.then((data) => {
onSave(data);
})
.catch((error) => {
console.log("Saving failed: ", error);
});
},
});
}
}, []);
useEffect(() => {
pageRef.current = page;
}, [page]);
useEffect(() => {
editor.current.isReady
.then(() => {
editor.current.blocks.render(content);
})
.catch((error) => {
console.log("Editor.js failed to initialize", error);
});
}, [content]);
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.