codex-team / codex-team/editor.js

Inline toolbar usage and render data

Open
#2,745 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.