Repository files navigation

A renderer for editorjs block data to react components

This project aims to simplify rendering correct semantic html tags out of editorjs output data to react elements

The goal is to support all block types and tunes specified in theawesome list, currently this project supports these block tools.

• @editorjs/paragraph
• @editorjs/header
• @editorjs/quote
• @editorjs/delimiter
• editorjs-alert
• @editorjs/list
• @editorjs/image
• @editorjs/table
• @editorjs/code
• @bomdi/codebox
• @calumk/editorjs-codeflask
• @rxpm/editor-js-code
• @calumk/editorjs-columns
• @editorjs/text-variant-tune
• @editorjs/raw

This whole component can function as both a server component or client component.

Installation ♥

npm i editor-react-parser

"content": ["./node_modules/editor-react-parser/dist/*/**.{js,ts}",]

This parser is built to be flexible but with a low bar of entry.

Add this component to any other component. And feed it with the complete output data object from editor js

<BlockParserdata={editorJsData}/>

This component allows all styles and default config to be overriden by a config object.If you are using typescript you can use the included type BlockParserConfig to get hints on what can be done.

[!NOTE] >Only the fields you override will override the default config

importReactfrom"react";importBlockParser,{OutputData}from"editor-react-parser";constExample=()=>{consteditorJsData:OutputData={version:"2.29.1",time:newDate().getTime(),blocks:[{id:"Kp5hXEi74T",type:"paragraph",data:{text:"test paragraph",},},],};return(<div><BlockParserdata={editorJsData}/></div>);};exportdefaultExample;

The Editor Js react parser relies on using tailwind styles to render some components,if you do not wish to use tailwind you should include classes for components through the configuration objectComponents such as columns rely on using grid-cols from tailwind in order to correctly render multiple columns.

We strongly recommend you to configure the syntax highlighting if you wish to use it.If this parser is used with@rxpm/editor-js-codeor other code tools providing languages you could add the following configurations

code:{  languages:[{language:"rust",displayText:"Rust",logoAlt:"rust logo",logoSrc:"/code-logos/rust.svg",shortName:"rs",},{language:"python",displayText:"Python",logoAlt:"Python logo",logoSrc:"/code-logos/python.svg",shortName:"py",},{language:"typescript",displayText:"Typescript",logoAlt:"Typescript logo",logoSrc:"/code-logos/typescript.svg",shortName:"ts",},{language:"java",displayText:"Java",logoAlt:"Java logo",logoSrc:"/code-logos/java.svg",shortName:"java",},{language:"typescript",displayText:"Typescript [tsx]",logoAlt:"tsx logo",logoSrc:"/code-logos/react.svg",shortName:"tsx",},];}

The logo src in this particular configuration will use the "./public" folder and produce something looking like this

Example of the tools object configuration

 code:{class:CodeTool,config:{modes:{'ts':'TypeScript','py':'Python','rs':'Rust','tsx':'TypeScriptXML','java' :"Java"},defaultMode:'ts'}},

You can add custom styles using react syntax highlighter styles. this can be done by adding the following configuration

import{idea}from"react-syntax-highlighter/dist/cjs/styles/hljs";constExample=()=>{constconfig:BlockParserConfig={code:{codeStyle:idea},};return(<div><BlockParserdata={editorJsData}config={config}/></div>);};

Since this parser uses html-react-parser in certain elements a lot of inline tools might work as intended.

We welcome all contributors.To contribute clone the repo, create a new branch. Add your code and tests and submit a pull request.

A big thank you to all who might want to contribute 💖