editorjs-viewer - npm Package Compare versions

Comparing version 1.1.3 to 2.0.0

package.json

 {
   "name": "editorjs-viewer",
-  "version": "1.1.3",
-  "description": "easy change json data to html from editorjs",
+  "version": "2.0.0",
+  "description": "Extremly easy turn JSON data to HTML from editor.js dynamicly",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build" : "tsc"
   },
@@ -15,3 +16,6 @@ "repository": {
     "editorjs",
+    "editor.js",
     "parser",
+    "json to html",
+    "editorjs-viewer",
     "editorjs-parser",
@@ -29,3 +33,6 @@ "editor-html-parser",
     "node": ">=12.18.2"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.4"
   }
 }

README.Md

@@ -1,51 +0,108 @@
-# editorjs-viewer
+# Welcome
 
+`editorjs-viewer` is package to turn `JSON` data to `HTML` from [editor.js](https://editorjs.io/) dynamicly and extremly easy to use.
+
+by default this package can parse the following data:
+
+1. paragraph
+2. header
+3. ...whatever you want you can add more
+
+not too many right, it's because we want to provide you a `dynamic` return **easily** and it's up to you whatever data you want to return you can do that it's absolutly posible, by doing that you can parse any json data to any html tag.
+
+
+## Installation
+
 ```bash
 npm install editorjs-viewer
 ```
+## Usage
+#### 1. Using the default configuration
+```jsx
+import {parser} from 'editorjs-viewer'
 
-editorjs-viewer is tool to convert json data to html from [editorjs](https://editorjs.io/).
-<br/>
-suported component
+// example data from editor.js
+const example = {
+    blokcs: [
+        {
+            "id": "4VO1-bae5v",
+            "type": "header",
+            "data": {
+                "text": "Editor.js",
+                "level": 1
+            }
+        },
+        {
+            "id": "uF5EPBJ50g",
+            "type": "paragraph",
+            "data": {
+                "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
+            }
+        },
+    ]
+};
 
-1. checklist
-2. embed
-3. head
-4. link
-5. list
-6. paragraph
-7. quote
-8. raw
-9. table
-10. code
-11. warning
+// turn json to html
+const result = parser.toHTML(example.blocks)
+console.log(result)
+```
 
-for styling **quote** and **checklist** we use bootstrap so make sure you have install bootstrap on your project
+#### 2. Using custom configuration
 
-## example
+In this example below, i wan't to turn `image` block to `html` tag but in the default configuration there's no configuration for returning image block as html, so here's the benefit by using this package you can use custom configuration look at example below
 
-```javascript
-import { renderHTML } from 'editorjs-viewer'
-const data = {
-    time: 1605667704216,
-    version: "2.19.0"
-    blocks: [
+```jsx
+import {parser} from 'editorjs-viewer'
+
+// example from editor js
+const examples = {
+    blokcs: [
         {
-            data: {
-                text: "header example",
-                level: 2
+            "id": "4VO1-bae5v",
+            "type": "header",
+            "data": {
+                "text": "Editor.js",
+                "level": 1
             }
-            type: "header"
+        },
+        {
+            "id": "uF5EPBJ50g",
+            "type": "paragraph",
+            "data": {
+                "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
+            }
+        },
+        {
+            "id" : "mom8ixFY4s",
+            "type" : "image",
+            "data" : {
+                "file" : {
+                    "url" : "https://codex.so/public/app/img/external/codex2x.png"
+                },
+                "caption" : "",
+                "withBorder" : false,
+                "stretched" : false,
+                "withBackground" : false
+            }
         }
     ]
-    time: 1605667704216
-    version: "2.19.0"
+};
+
+// define custom configuration
+const conf = {
+
+    // naming must be in lower case and can not be combined
+    image : {
+        onReturn(value){
+            // value.data.file.url is the value from editor js image look at here https://github.com/editor-js/image
+            // if you want to use another tag such as link, iframe or etc then follow their return rules
+            return `<img src='${value.data.file.url}'`/>
+        }
+    },
+    // you can add more e.g iframe, code, raw and etc
 }
 
-const result = renderHTML(data.blocks)
+// passing the custom configuration as the second argument
+const result = parser.toHTML(example.blocks, conf)
 console.log(result)
-// outout
-// <h2>header example</h2>
 ```
-
-LICENCE MIT

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29073

increased by260.71%

Lines of code

312

increased by56%

Number of lines in readme file

109

increased by109.62%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of package files

14

decreased by-17.65%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes