# EditorJs Html Viewer

Convert json elements that generated by [EditorJs](https://editorjs.io) to html content as string.



## Installing

```shell
npm i editorjs-html-viewer 
```


## Import

***JS***

```js
import HtmlViewer from 'editorjs-html-viewer';
```

From cdn :

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editorjs-html-viewer@latest">
```

And in nodejs environment :

```js
const HtmlViewer = require('editorjs-html-viewer/nodejs');
```


***CSS***

Import style from cdn :
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editorjs-html-viewer@latest/dist/css/main.min.css">
```

Import style from css file :
```css
@import 'editorjs-html-viewer/dist/css/main.min.css';
```

From js code :

```js
import 'editorjs-html-viewer/dist/css/main.min.css';
```



## Usage

```js
// your stored content blocks in database as an array.
let blocksElements = [{id: 1, type: "text", "data": {text: "Hello world"}}];

// create a new object from HtmlViewer class with blocks as a parameter.
let htmlViewer = new HtmlViewer(blocksElements);

// you can use the html code result in your way.
console.log(htmlViewer.html);   
```

```js
let htmlViewer = new HtmlViewer(blocksElements);

// you can render the html directly by passing the selector
htmlViewer.render("#contentLayout");
```

**Note** If you use the html result by your way, you need to call ***applyHandlers*** static function to let some features work correctly.

```js
HtmlViewer.applyHandlers(); 
```


Sometimes you would like to use a css framework witch built on removing the default styles (normalize), such as [Tailwindcss](https://tailwindcss.com/docs/preflight), so, you can prevent that happend for some tags like (h and list) tags through :
```js
let htmlViewer = new HtmlViewer(blocksElements, {withDefaultStyle: true});
```

If you prefer the dark mode in code blocks like me, don't change anything because it is default, but also you can use the light mode through changing the ***codeTheme*** option :
```js
let htmlViewer = new HtmlViewer(blocksElements, {codeTheme: 'light'});
```

## Reading Time
You can get the reading time of the content through :
```js
htmlViewer.getReadingTime();
```
the returned value is an object which contains :
- minutes
- wordsCount


## Supported plugins

- Text, Paragraph, Header
- Table
- Image
- Quote
- List
- Link
- Delimiter
- Inline code
- Code, and (editorjs-codeflask)
- Checklist
- Warning
- Embed
- Personality
- Attaches