11# editorjs-html
2- A utility to parse editorjs clean data to HTML.
3- - Use it with plain Javascript/Typescript, React, Angular, Vue or any templating engine/framework of your choice.
4- - Fast, Efficient and Lightweight.
5- - Fully customizable to the core.
6- - Supports basic editorjs blocks which are customizable as well.
7- - Extend to parse your own blocks.
2+
3+ A utility to parse editorjs clean data to HTML.
4+
5+ - Use it with plain Javascript/Typescript, React, Angular, Vue or any templating engine/framework of your choice.
6+ - Fast, Efficient and Lightweight.
7+ - Fully customizable to the core.
8+ - Supports basic editorjs blocks which are customizable as well.
9+ - Extend to parse your own blocks.
810
911### Whats' new in v4?
10- - Complete Rewrite, latest dependencies with minimal API changes.
11- - Redundant ` parseStrict() ` and ` validate() ` functions are removed.
12- - Strict mode is configurable via options.
13- - Console errors if parser functions for block is not avaiable. Strict Mode throws errors.
14- - Code is more readable, modular. It would make it easier to contribute and track changes.
15- - Type definitions directly fetched from Editor.js, so development becomes easier.
16- - Unit Testing with Jest.
12+
13+ - Complete Rewrite, latest dependencies with minimal API changes.
14+ - Redundant ` parseStrict() ` and ` validate() ` functions are removed.
15+ - Strict mode is configurable via options.
16+ - Console errors if parser functions for block is not avaiable. Strict Mode throws errors.
17+ - Code is more readable, modular. It would make it easier to contribute and track changes.
18+ - Type definitions directly fetched from Editor.js, so development becomes easier.
19+ - Unit Testing with Jest.
1720
1821# Installation
22+
1923### Self Host, precompiled versions.
20- * ** Browser** - [ Get /.build/edjsHTML.browser.js] ( ./.build/edjsHTML.browser.js )
2124
22- * ** NodeJs** - [ Get /.build/edjsHTML.node.js] ( ./.build/edjsHTML.node.js )
25+ - ** Browser** - [ Get /.build/edjsHTML.browser.js] ( ./.build/edjsHTML.browser.js )
26+
27+ - ** NodeJs** - [ Get /.build/edjsHTML.node.js] ( ./.build/edjsHTML.node.js )
2328
24- * ** For Both Browser & Node** - [ Get /.build/edjsHTML.js] ( ./.build/edjsHTML.js )
29+ - ** For Both Browser & Node** - [ Get /.build/edjsHTML.js] ( ./.build/edjsHTML.js )
2530
26- ### NPM
31+ ### NPM
2732
2833``` shell
2934npm install editorjs-html
3035```
3136
3237### CDN
33- * https://cdn.jsdelivr.net/npm/editorjs-html@4.0.0/.build/edjsHTML.js
34- * (Browser Only Build): https://cdn.jsdelivr.net/npm/editorjs-html@4.0.0/.build/edjsHTML.browser.js
38+
39+ - https://cdn.jsdelivr.net/npm/editorjs-html@4.0.0/.build/edjsHTML.js
40+ - (Browser Only Build): https://cdn.jsdelivr.net/npm/editorjs-html@4.0.0/.build/edjsHTML.browser.js
3541
3642## Usage
3743
3844### Browser
45+
3946``` js
40- const edjsParser = edjsHTML ();
41- let html = edjsParser .parse (editorjs_clean_data);
42- console .log (html);
47+ const edjsParser = edjsHTML ();
48+ let html = edjsParser .parse (editorjs_clean_data);
49+ console .log (html);
4350```
4451
4552### Nodejs
4653
4754``` js
48- const edjsHTML = require (" editorjs-html" );
49- const edjsParser = edjsHTML ();
50- const html = edjsParser .parse (editorjs_clean_data);
55+ const edjsHTML = require (" editorjs-html" );
56+ const edjsParser = edjsHTML ();
57+ const html = edjsParser .parse (editorjs_clean_data);
5158
52- console .log (html);
59+ console .log (html);
5360```
5461
55- ## Updates
62+ ## Updates
5663
5764See [ Releases] ( https://github.com/pavittarx/editorjs-html/releases )
5865
5966## Docs
6067
61- ### Supported Block Types
62- * Header (H1-H6)
63- * Lists (Ordered & Unordered)
64- * Nested Lists
65- * Image
66- * Delimiter
67- * Paragraph
68- * Quote
69- * Code
70- * Embed
68+ ### Supported Block Types
69+
70+ - Header (H1-H6)
71+ - Lists (Ordered & Unordered)
72+ - Nested Lists
73+ - Image
74+ - Delimiter
75+ - Paragraph
76+ - Quote
77+ - Code
78+ - Embed
7179
7280## Parse Entire EditorJS Data Object
7381
7482``` js
75- const edjsParser = edjsHTML ();
76- const HTML = edjsParser .parse (editorjs_data);
77- // returns array of html strings per block
78- console .log (HTML );
83+ const edjsParser = edjsHTML ();
84+ const HTML = edjsParser .parse (editorjs_data);
85+ // returns array of html strings per block
86+ console .log (HTML );
7987```
8088
8189## Parse Entire EditorJS Data Object (Strict Mode)
8290
8391``` js
84- const edjsParser = edjsHTML ();
85- const HTML = edjsParser .parse (editorjs_data);
86- // returns an error
87- if (HTML instanceof Error ) throw HTML ;
92+ const edjsParser = edjsHTML ();
93+ const HTML = edjsParser .parse (editorjs_data);
94+ // returns an error
95+ if (HTML instanceof Error ) throw HTML ;
8896
89- // in case of success, returns an array of strings
90- console .log (HTML );
97+ // in case of success, returns an array of strings
98+ console .log (HTML );
9199```
92100
93101## Parse Single Clean Data Block
94102
95103``` js
96- const edjsParser = edjsHTML ();
97- const blockHTML = edjsParser .parseBlock (editorjs_data_block);
98- // returns string of html for this block
99- console .log (blockHTML);
104+ const edjsParser = edjsHTML ();
105+ const blockHTML = edjsParser .parseBlock (editorjs_data_block);
106+ // returns string of html for this block
107+ console .log (blockHTML);
100108```
109+
101110## Strict Mode
102111
103112``` js
104- const edjsParser = edjsHTML ({}, {strict: true });
105- // returns the list of missing parser functions
106- const blockHTML = edjsParser .parse (editorjs_data);
107- console .log (blockHTML);
113+ const edjsParser = edjsHTML ({}, { strict: true });
114+ // returns the list of missing parser functions
115+ const blockHTML = edjsParser .parse (editorjs_data);
116+ console .log (blockHTML);
108117```
109118
110- ### Extend For Custom Blocks
119+ ### Extend For Custom Blocks
120+
111121` editorjs-html ` supports extending and overriding parser functions for blocks.
112122
113123``` js
@@ -122,38 +132,43 @@ See [Releases](https://github.com/pavittarx/editorjs-html/releases)
122132```
123133
124134``` js
125- // Parse this block in editorjs-html
126- function customParser (block ){
127- return ` <custom-tag> ${ block .data .text } </custom-tag>` ;
128- }
129-
130- const plugins = {
131- // The keyname must match with the type of block you want to parse with this funcion
132- custom: customParser
133- // ... add more or overwrite
134- }
135-
136- const edjsParser = edjsHTML (plugins);
135+ // Parse this block in editorjs-html
136+ function customParser (block ) {
137+ return ` <custom-tag> ${ block .data .text } </custom-tag>` ;
138+ }
139+
140+ const plugins = {
141+ // The keyname must match with the type of block you want to parse with this funcion
142+ custom: customParser,
143+ // ... add more or overwrite
144+ };
145+
146+ const edjsParser = edjsHTML (plugins);
137147```
138148
139- ## Contribution
140- Please add an issue, or open a PR for any bugs, review or suggestions.
149+ ## Contribution
150+
151+ Please add an issue, or open a PR for any bugs, review or suggestions.
141152
142153### New Parser Functions
154+
1431551 . For additional parser functions, please add them to ` parsers/block-name ` . Check existing functions for suggestions.
144- 2 . Test everyting works fine, with ` pnpm test ` && ` pnpm build ` .
156+ 2 . Test everyting works fine, with ` pnpm test ` && ` pnpm build ` .
1451573 . Open a PR, for review.
1461584 . Add tests in ` tests ` directory. Make sure your tests pass with appropriate coverage.
147159
148160## Suggestions & Recommendations
149- I would love to have your feedback and any suggestions. You can also let me know, if you need support for any more editorjs blocks.
150161
151- ## Support
162+ I would love to have your feedback and any suggestions. You can also let me know, if you need support for any more editorjs blocks.
163+
164+ ## Support
165+
152166If you find this helpful, consider giving this repository a Star. You can also buy me a coffee [ here] ( https://www.buymeacoffee.com/pavittarx )
153167
154- ## License
168+ ## License
169+
155170MIT Public License
156171
157- ## Author
158- [ @pavittarx ] ( https://github.com/pavittarx )
172+ ## Author
159173
174+ [ @pavittarx ] ( https://github.com/pavittarx )
0 commit comments