Update README.md

Author: Edd-G

README.md

@@ -2,15 +2,38 @@
  [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
 # Simple PHP Parser for Editor.js
 
-Parse to HTML clean JSON Data from [Editor.js](https://editorjs.io/ "Editor.js Homepage")
+Parse data for [Editor.js](https://editorjs.io/ "Editor.js Homepage") with 2 way:
+1. Parse JSON data to HTML
+2. Parse HTML to JSON data
+## Supported Tools
+
+Package | Key | Main CSS Class<br>(with default prefix) | Additional / modificator CSS classes<br>(with default prefix)
+--- | --- | --- | ---
+`@editorjs/header`<br>`editorjs-header-with-alignment` | `header` | `.prs-header` | alignment:<br>`.prs_left`<br>`.prs_right`<br>`.prs_center`<br>`.prs_justify`
+`@editorjs/paragraph`<br>`editorjs-paragraph-with-alignment` | `paragraph` | `.prs-paragraph` | alignment:<br>`.prs_left`<br>`.prs_right`<br>`.prs_center`<br>`.prs_justify`
+`@editorjs/inline-code` |  |  |
+`@editorjs/marker` |  |  |
+`@editorjs/underline` |  |  |
+`@editorjs/list` | `list` | `.prs-list` | additional:<br>`.prs_ordered`
+`@editorjs/raw` | `raw` |  |
+`@editorjs/simple-image` | `simpleImage` | `.prs-image` | additional:<br>`.prs_withborder`<br>`.prs_withbackground`<br>`.prs_stretched`
+`@editorjs/embed` | `embed` | `.prs-embed` | additional:<br>`.prs_youtube`<br>`.prs_codepen`<br>`.prs_vimeo`
+`@editorjs/link` | `linkTool` | `.prs-linktool` | additional:<br>`.prs_title`<br>`.prs_description`
+`@editorjs/delimiter` | `delimiter` | `.prs-delimiter` |
+`editorjs-alert` | `alert` | `.prs-alert` | alignment:<br>`.prs_left`<br>`.prs_right`<br>`.prs_center`<br>additional:<br>`.prs_primary`<br>`.prs_secondary`<br>`.prs_info`<br>`.prs_success`<br>`.prs_warning`<br>`.prs_danger`<br>`.prs_light`<br>`.prs_dark`
+`@editorjs/warning` | `warning` | `.prs-warning` |
+`@editorjs/table` | `table` | `.prs-table` | additional:<br>`.prs_withheadings`
+`@editorjs/quote` | `quote` | `.prs-quote` | alignment:<br>`.prs_left`<br>`.prs_center`
+`@editorjs/code` | `code` | `.prs-code`
 
 ## Installation
 
 ```
-composer require boring-dragon/editorjs-simple-html-parser
+composer require edd-g/editorjs-simple-html-parser
 ```
+## 1. JSON to HTML Parser
 
-## Usage
+### Usage
 
 ```php
 use Durlecode\EJSParser\Parser;
@@ -47,26 +70,7 @@ $parser->setPrefix("cat");
 
 $parsed = $parser->toHtml();
 ```
-
-## Supported Tools
-
-Package | Key | Main CSS Class
---- | --- | ---
-`@editorjs/code` | `code` | `.prs-code`
-`@editorjs/embed` | `embed` | `.prs-embed`
-`@editorjs/delimiter` | `delimiter` | `.prs-delimiter`
-`@editorjs/header` | `header` | `.prs-h{header-level}`
-`@editorjs/inline-code` |  | 
-`@editorjs/link` | `link` | `.prs-link`
-`@editorjs/list` | `list` | `.prs-list`
-`@editorjs/marker` |  |
-`@editorjs/paragraph` | `paragraph` | `.prs-paragraph`
-`@editorjs/raw` | `raw` | 
-`@editorjs/simple-image` | `simpleImage` | `.prs-image`
-`@editorjs/warning` | `warning` | `.prs-warning`
-`@editorjs/quote` | `quote` | `.prs-quote`
-
-## Methods 
+### Methods 
 
 #### `toHtml()`
 Return generated HTML
@@ -88,87 +92,107 @@ Return Editor.js content blocks
 
 ### Generated HTML
 
-##### Code
+##### Header
 
 ```html
-<div class="prs-code">
-    <pre>
-        <code></code>
-    </pre>
-</div>
+<h2 class="prs-header prs_center">Lorem</h2>
 ```
 
-##### Embed 
-###### *(Actually working with Youtube, Codepen & Gfycat)*
+##### Paragraph
 
 ```html
-<div class="prs-embed">
-    <iframe src="" height="300"></iframe>
-</div>
+<p class="prs-paragraph prs_center">
+    <code class="inline-code">Pellentesque</code> 
+    <i>malesuada fames</i> 
+    <mark class="cdx-marker">tempus</mark>
+</p>
 ```
 
-##### Delimiter
+##### Ordered List
 
 ```html
-<hr class="prs-delimiter">
+<ol class="prs-list prs_ordered">
+    <li></li>
+</ol>
 ```
 
-##### Header
+##### Unordered List
 
 ```html
-<h2 class="prs-h2">Lorem</h2>
+<ul class="prs-list">
+    <li></li>
+</ul>
 ```
 
-##### Link
+##### Table
 
 ```html
-<a href="https://github.com/" target="_blank" class="prs-link">
-    <div class="prs-link-container-with-img">
-        <div class="prs-link-title">Title</div>
-        <div class="prs-link-description">Description</div>
-        <div class="prs-link-url">https://example.com/</div>
-    </div>
-    <div class="prs-link-img-container">
-        <img src="https://example.com/cat.png" alt="">
-    </div>
-</a>
+<table class="prs-table prs_withheadings">
+    <thead>
+        <tr>
+            <th>1</th><th>2</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>a</td><td>b</td>
+        </tr>
+    </tbody>
+</table>
 ```
 
-##### Ordered List
+##### Code
 
 ```html
-<div class="prs-list">
-    <ol>
-        <li></li>
-    </ol>
+<div class="prs-code">
+    <pre>
+        <code></code>
+    </pre>
 </div>
 ```
 
-##### Unordered List
+##### Embed 
+###### *(Actually working with Youtube, Codepen & Gfycat)*
 
 ```html
-<div class="prs-list">
-    <ul>
-        <li></li>
-    </ul>
-</div>
+<figure class="prs-embed prs_youtube">
+    <iframe width="580" height="320" src="https://www.youtube.com/embed/CwXOrWvPBPk" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="1"></iframe>
+    <figcaption>Shrek (2001) Trailer</figcaption>
+</figure>
 ```
 
-##### Paragraph
+##### Delimiter
 
 ```html
-<p class="prs-paragraph">
-    <code class="inline-code">Pellentesque</code> 
-    <i>malesuada fames</i> 
-    <mark class="cdx-marker">tempus</mark>
-</p>
+<hr class="prs-delimiter">
+```
+
+##### Link / LinkTool
+
+```html
+<figure class="prs-linkTool">
+    <a href="https://github.com/">
+       <img src="https://example.com/cat.png" alt="">
+       <p class="prs_title">Title</p>
+       <p class="prs_description">Description</p>
+    </a>
+</figure>
 ```
 
 ##### Image
 
 ```html
-<figure class="prs-image">
-    <img src="" class="prs-image-border prs-image-background" alt="">
+<figure class="prs-image prs_withborder prs_withbackground prs_stretched">
+    <img src="" alt="">
+    <figcaption></figcaption>
+</figure>
+```
+
+##### Quote
+
+```html
+<figure class="prs-quote prs_center">
+    <blockquote></blockquote>
     <figcaption></figcaption>
 </figure>
 ```
@@ -177,18 +201,89 @@ Return Editor.js content blocks
 
 ```html
 <div class="prs-warning">
-    <ion-icon name="information-outline" size="large" aria-label="information outline"></ion-icon>
-    <div>
-        <p>Title</p>
-        <p>Message</p>
-    </div>
+    <i></i>
+    <h4>Title</h4>
+    <p>Message</p>
 </div>
 ```
 
+##### Alert
+
+```html
+<p class="prs-alert prs_center prs_success">
+    Alert!
+</p>
+```
+
 ##### Raw
 
 ```html
 <div class="prs-raw">
     Raw HTML ...
 </div>
 ```
+
+## 2. HTML to JSON Parser
+
+### Usage
+
+```php
+use Durlecode\EJSParser\HtmlParser;
+
+$parser = new HtmlParser($html);
+
+$blocks = $parser->toBlocks();
+
+header("Content-Type: application/json");
+echo $blocks;
+```
+
+Where `$html` is the HTML specially tagged with CSS classes *See examples of the generated HTML code above*
+
+By default this will parse html with css classes with `prs` prefix, so if you want to change it, follow example below
+
+```php
+use Durlecode\EJSParser\HtmlParser;
+
+$parser = new HtmlParser($html);
+
+$parser->setPrefix("cat");
+
+$blocks = $parser->toBlocks();
+```
+
+You may set time and version EditorJS generated blocks *By default: time generate auto, EditorJS version pass from config.php*:
+
+```php
+use Durlecode\EJSParser\HtmlParser;
+
+$parser = new HtmlParser($html);
+
+$parser->setTime("1703787424242");
+$parser->setVersion("2.28.8");
+
+$blocks = $parser->toBlocks();
+```
+
+### Methods 
+
+#### `toBlocks()`
+Return generated EditorJS Blocks
+
+#### `setPrefix(string $prefix)`
+Set CSS classes Prefix
+
+#### `getPrefix()`
+Return current prefix
+
+#### `setVersion(string $version)`
+Set Editor.js content version
+
+#### `getVersion()`
+Return Editor.js content version
+
+#### `getTime()`
+Return Editor.js content timestamp
+
+#### `setTime(string $time)`
+Set Editor.js content timestamp