Editor JS Parser and Renderer for React with server-side SimpleSchema validation
npm install @nodsec/editorjs-parserThe package lets you render the content of Editor.js and lets you extend the functionality easily. Package is based on mobtakr/editorjs-parser and enhanced for support more editor blocks and schema validation for server side.
Run
``
npm install @klaucode/editorjs-parser
Editor.js is a great block-styled editor. It lets you embed a text editor in your application.
The output of Editor.js is a JSON Object like below:
`
{
"time": 1664376861686,
"blocks": [
{
"id": "9xynmGdBTA",
"type": "paragraph",
"data": {
"text": "I am a text generated from Editor.js"
}
},
{
"id": "IF6QCbnQQz",
"type": "paragraph",
"data": {
"text": "I am a text generated from Editor.js"
}
},
{
"id": "l4frEHcq2o",
"type": "list",
"data": {
"style": "ordered",
"items": [
"I am item one,",
"and I am two",
"three ",
"four"
]
}
}
],
"version": "2.23.2"
}
Below is an example of how you can integrate Editor.js Parser into your React.js or Next.js application.
First install the npm package
`
npm install @klaucode/editorjs-parser
Then create a component to render the content
`
import { EditorParser, EditorRenderer } from "@klaucode/editorjs-parser";
import styles from "./PostContent.module.css";
const PostContent = (props: { content: string }) => {
const content = JSON.parse(props.content);
const parser = new EditorParser(content.blocks);
const parsedBlocks = parser.parse();
return (
<>
);
};
export default PostContent;
`
In the example above you first, parse the JSON object then, create an instance of EditorParser and pass it content.blocks.
Now, you can get the parsed blocks by calling the parse method.
Finally, pass a parsedBlocks prop and a styles object to component.
Each Editor.js block has a type and an id.
`
{
"id": "9xynmGdBTA",
"type": "paragraph",
"data": {
"text": "I am a text generated from Editor.js"
}
}
The EditorRenderer component expects a style object that contains styles for each type.
For type paragraph you can pass a style object like this
`
.paragraph {
font-size: 1rem;
margin: 10px 0;
}
Besides that, each block has another class which is block.
So you can add some shared styles to your blocks.
`
.block {
position: relative;
margin-block: 10px;
}
You can extend the functionality of this package by adding new blocks.
The registerBlock method of the EditorParser class enables you to parse more blocks.
It expects two arguments
1. The type or the block.
2. A function that takes the block as an argument and returns a React component.
This is a React component that takes a block as an argument and returns a paragraph.
` {text}
const TextBlock = (props: { block: any }) => {
const block = props.block;
const text = block.data?.text;
return
};
export default TextBlock;
`
Now, you can create a function that takes a block as an argument and returns that component. TextBlock
`
export const paragraphMapFunc = (block: any) =>
Finally, you can add this block using the registerBlock method.
`
const parser = new EditorParser(content.blocks);
parser.registerBlock('paragraph', paragraphMapFunc)