miadabdi · Heriberto-Juarez · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022 · Sep 6, 2022
diff --git a/README.md b/README.md
@@ -1,22 +1,34 @@
 # Editorjs-parser
 
+This is a fork of https://github.com/miadabdi/editorjs-parser
+
+The original package seems to be now **inactive** and editorjs now includes blocks not contemplated before, the goal of this new package is to have an updated package that supports new blocks like: SimpleImage, linkTool (generated by linkTool), and others that could be added.
+
 editorjs-parser is a NPM package for parsing the output object of [EditorJs](https://github.com/codex-team/editor.js) to HTML.
 
-# Installation
 
-### CDN
 
-- https://cdn.jsdelivr.net/npm/editorjs-parser@1/build/Parser.node.min.js (Node only)
-- https://cdn.jsdelivr.net/npm/editorjs-parser@1/build/Parser.browser.min.js (Browser only)
+# This fork adds support for:
+* SimpleImage
+* Links from  editor-js/link (linkTool)
+
+
+# Installation
 
 ### NPM
 
-Use the package manager [npm](https://www.npmjs.com/) to install editorjs-parser.
+```bash
+npm install --save @herii/editorjs-parser
+```
+
+### Yarn
+
 
 ```bash
-npm install --save editorjs-parser
+yarn add @herii/editorjs-parser
 ```
 
+
 # Usage
 
 To use the package in browser, import Browser verison through CDN to your HTML file and just call `edjsParser` class:
@@ -63,8 +75,60 @@ const markup = parser.parseBlock(block);
 - Embed
 - Image
 - Simple-image
+- linkTool (From editorjs/link)
+
+
+## linkTool
+Now the parser supports linkTool and it will generate HTML for you, however you have to add your own styles.
+
+Lets think of the next block:
+
+```
+{
+  "id": "qvlrLvgUAO",
+  "data": {
+  "link": "https://www.freepik.com/",
+  "meta": {
+    "image": {
+      "URL": "https://freepik.cdnpk.net/img/logo-fb-en.png"
+    },
+    "title": "Free Vectors, Stock Photos & PSD Downloads | Freepik",
+    "description": "Millions of Free Graphic Resources. ✓ Vectors ✓ Stock Photos ✓ PSD ✓ Icons ✓ All that you need for your Creative Projects"
+    }
+  },
+  "type": "linkTool"
+}
+```
+
+The parser will generate the next HTML:
+
+```
+<a class=" link-tool-card" href="https://www.freepik.com/" target="_blank">
+        <div class=link-tool-main>
+          <div>
+            <p class=tl-title>Free Vectors, Stock Photos & PSD Downloads | Freepik</p>
+            <p class=tl-description>Millions of Free Graphic Resources. ✓ Vectors ✓ Stock Photos ✓ PSD ✓ Icons ✓ All that you need for your Creative Projects</p>
+            <p class="tl-link">freepik.com</p>
+          </div>
+        </div>
+        <div class="link-image-wrapper">
+        <div class="link-img-bg" style="background-image: url(https://freepik.cdnpk.net/img/logo-fb-en.png)"></div>
+      </div>
+</a>
+```
+
+You will need to add styles in order to make it look like the one of editorjs.
 
-**NOTE:** It is pointless to use both `image` and `simple-image` block types in the same editor insatnce, but this parser supports both of them and you can use any of them that fulfills your needs.
+
+[Here is an example](https://codesandbox.io/s/herii-editorjs-parser-linktool-7jdyk0?file=/index.html)
+of styles that I use.
+
+Result:
+
+![result of styled HTML](https://i.postimg.cc/4yggNG4y/Screenshot-2022-09-06-002313.png)
+
+
+---
 
 ## Custom or overriding parser methods
 
@@ -129,6 +193,22 @@ This is the default configuration. You can override any of these properties by p
     applyAlignment: false,
     // if set to true blockquote element will have text-align css property set
   },
+  simpleImage: {
+    use: "figure",
+    imgClass: "img-simple",
+    figureClass: "fig-img-simple",
+    figCapClass: "fig-cap-simple",
+    path: "absolute",
+  },
+  linkTool: {
+    linkCardClass: 'link-tool-card',
+    linkToolMainClass: 'link-tool-main',
+    titleClass: 'tl-title',
+    descriptionClass: 'tl-description',
+    linkClass: 'tl-link',
+    imgWrapperClass: 'link-image-wrapper',
+    imgBgClass: 'link-img-bg'
+  }
 };
 ```
 

diff --git a/build/Parser.browser.js b/build/Parser.browser.js
@@ -2,15 +2,23 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-var edjsParser = function () {
+var edjsParser = function (extractDomain) {
   'use strict';
 
+  function _interopDefaultLegacy(e) {
+    return e && _typeof(e) === 'object' && 'default' in e ? e : {
+      'default': e
+    };
+  }
+
+  var extractDomain__default = /*#__PURE__*/_interopDefaultLegacy(extractDomain);
+
   var isObject = function isObject(item) {
     return item && _typeof(item) === "object" && !Array.isArray(item);
   };
@@ -102,6 +110,32 @@ var edjsParser = function () {
         return "<figure class=\"".concat(figureClass, "\"><img class=\"").concat(imgClass, " ").concat(imageConditions, "\" src=\"").concat(imageSrc, "\" alt=\"").concat(data.caption, "\"><figcaption class=\"").concat(figCapClass, "\">").concat(data.caption, "</figcaption></figure>");
       }
     },
+    simpleImage: function simpleImage(data, config) {
+      var imageConditions = "".concat(data.stretched ? "img-fullwidth" : "", " ").concat(data.withBorder ? "img-border" : "", " ").concat(data.withBackground ? "img-bg" : "");
+      var imgClass = config.simpleImage.imgClass || "";
+      var imageSrc;
+
+      if (data.url) {
+        // simple-image was used and the image probably is not uploaded to this server
+        // therefore, we use the absolute path provided in data.url
+        // so, config.image.path property is useless in this case!
+        imageSrc = data.url;
+      } else if (config.simpleImage.path === "absolute") {
+        imageSrc = data.file.url;
+      } else {
+        imageSrc = config.simpleImage.path.replace(/<(.+)>/, function (match, p1) {
+          return data.file[p1];
+        });
+      }
+
+      if (config.image.use === "img") {
+        return "<img class=\"".concat(imageConditions, " ").concat(imgClass, "\" src=\"").concat(imageSrc, "\" alt=\"").concat(data.caption, "\">");
+      } else if (config.simpleImage.use === "figure") {
+        var figureClass = config.simpleImage.figureClass || "";
+        var figCapClass = config.simpleImage.figCapClass || "";
+        return "<figure class=\"".concat(figureClass, "\"><img class=\"").concat(imgClass, " ").concat(imageConditions, "\" src=\"").concat(imageSrc, "\" alt=\"").concat(data.caption, "\"><figcaption class=\"").concat(figCapClass, "\">").concat(data.caption, "</figcaption></figure>");
+      }
+    },
     code: function code(data, config) {
       var markup = sanitizeHtml(data.code);
       return "<pre><code class=\"".concat(config.code.codeBlockClass, "\">").concat(markup, "</code></pre>");
@@ -130,9 +164,31 @@ var edjsParser = function () {
           return data[p1];
         });
       }
+    },
+    linkTool: function linkTool(data, config) {
+      var _data$meta, _data$meta2, _data$meta3, _data$meta3$title, _data$meta4, _data$meta4$descripti;
+
+      var cfg = config.linkTool; // configurations for linkTool
+      // Display meta tags if available (title, description)
+
+      var imageLink = (data === null || data === void 0 ? void 0 : (_data$meta = data.meta) === null || _data$meta === void 0 ? void 0 : _data$meta.image.URL) || (data === null || data === void 0 ? void 0 : (_data$meta2 = data.meta) === null || _data$meta2 === void 0 ? void 0 : _data$meta2.image.url) || '';
+      var imageDiv = '';
+
+      if ((imageLink === null || imageLink === void 0 ? void 0 : imageLink.length) > 0) {
+        imageDiv = "<div class=\"".concat(cfg.imgWrapperClass, "\">\n        <div class=\"").concat(cfg.imgBgClass, "\" style=\"background-image: url(").concat(imageLink, ")\"></div>\n      </div>");
+      }
+
+      return "\n      <a class=\" ".concat(cfg.linkCardClass, "\" href=\"").concat(data.link, "\" target=\"_blank\">\n        <div class=").concat(cfg.linkToolMainClass, ">\n          <div>\n            ").concat((data === null || data === void 0 ? void 0 : (_data$meta3 = data.meta) === null || _data$meta3 === void 0 ? void 0 : (_data$meta3$title = _data$meta3.title) === null || _data$meta3$title === void 0 ? void 0 : _data$meta3$title.length) > 0 ? '<p class=' + cfg.titleClass + '>' + data.meta.title + '</p>' : '', "\n            ").concat((data === null || data === void 0 ? void 0 : (_data$meta4 = data.meta) === null || _data$meta4 === void 0 ? void 0 : (_data$meta4$descripti = _data$meta4.description) === null || _data$meta4$descripti === void 0 ? void 0 : _data$meta4$descripti.length) > 0 ? '<p class=' + cfg.descriptionClass + '>' + data.meta.description + '</p>' : '', "\n            <p class=\"").concat(cfg.linkClass, "\">").concat(extractDomain__default["default"](data.link), "</p>\n          </div>\n        </div>\n        ").concat(imageDiv, "\n      </a>");
     }
   };
   var defaultConfig = {
+    simpleImage: {
+      use: "figure",
+      imgClass: "img-simple",
+      figureClass: "fig-img-simple",
+      figCapClass: "fig-cap-simple",
+      path: "absolute"
+    },
     image: {
       use: "figure",
       // figure or img (figcaption will be used for caption of figure)
@@ -155,6 +211,15 @@ var edjsParser = function () {
     quote: {
       applyAlignment: false // if set to true blockquote element will have text-align css property set
 
+    },
+    linkTool: {
+      linkCardClass: 'link-tool-card',
+      linkToolMainClass: 'link-tool-main',
+      titleClass: 'tl-title',
+      descriptionClass: 'tl-description',
+      linkClass: 'tl-link',
+      imgWrapperClass: 'link-image-wrapper',
+      imgBgClass: 'link-img-bg'
     }
   };
 
@@ -206,4 +271,4 @@ var edjsParser = function () {
   }();
 
   return edjsParser;
-}();
+}(extractDomain);
diff --git a/build/Parser.esm.js b/build/Parser.esm.js
@@ -2,11 +2,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+import extractDomain from 'extract-domain';
 
 var isObject = function isObject(item) {
   return item && _typeof(item) === "object" && !Array.isArray(item);
@@ -99,6 +101,32 @@ var defaultParsers = {
       return "<figure class=\"".concat(figureClass, "\"><img class=\"").concat(imgClass, " ").concat(imageConditions, "\" src=\"").concat(imageSrc, "\" alt=\"").concat(data.caption, "\"><figcaption class=\"").concat(figCapClass, "\">").concat(data.caption, "</figcaption></figure>");
     }
   },
+  simpleImage: function simpleImage(data, config) {
+    var imageConditions = "".concat(data.stretched ? "img-fullwidth" : "", " ").concat(data.withBorder ? "img-border" : "", " ").concat(data.withBackground ? "img-bg" : "");
+    var imgClass = config.simpleImage.imgClass || "";
+    var imageSrc;
+
+    if (data.url) {
+      // simple-image was used and the image probably is not uploaded to this server
+      // therefore, we use the absolute path provided in data.url
+      // so, config.image.path property is useless in this case!
+      imageSrc = data.url;
+    } else if (config.simpleImage.path === "absolute") {
+      imageSrc = data.file.url;
+    } else {
+      imageSrc = config.simpleImage.path.replace(/<(.+)>/, function (match, p1) {
+        return data.file[p1];
+      });
+    }
+
+    if (config.image.use === "img") {
+      return "<img class=\"".concat(imageConditions, " ").concat(imgClass, "\" src=\"").concat(imageSrc, "\" alt=\"").concat(data.caption, "\">");
+    } else if (config.simpleImage.use === "figure") {
+      var figureClass = config.simpleImage.figureClass || "";
+      var figCapClass = config.simpleImage.figCapClass || "";
+      return "<figure class=\"".concat(figureClass, "\"><img class=\"").concat(imgClass, " ").concat(imageConditions, "\" src=\"").concat(imageSrc, "\" alt=\"").concat(data.caption, "\"><figcaption class=\"").concat(figCapClass, "\">").concat(data.caption, "</figcaption></figure>");
+    }
+  },
   code: function code(data, config) {
     var markup = sanitizeHtml(data.code);
     return "<pre><code class=\"".concat(config.code.codeBlockClass, "\">").concat(markup, "</code></pre>");
@@ -127,9 +155,31 @@ var defaultParsers = {
         return data[p1];
       });
     }
+  },
+  linkTool: function linkTool(data, config) {
+    var _data$meta, _data$meta2, _data$meta3, _data$meta3$title, _data$meta4, _data$meta4$descripti;
+
+    var cfg = config.linkTool; // configurations for linkTool
+    // Display meta tags if available (title, description)
+
+    var imageLink = (data === null || data === void 0 ? void 0 : (_data$meta = data.meta) === null || _data$meta === void 0 ? void 0 : _data$meta.image.URL) || (data === null || data === void 0 ? void 0 : (_data$meta2 = data.meta) === null || _data$meta2 === void 0 ? void 0 : _data$meta2.image.url) || '';
+    var imageDiv = '';
+
+    if ((imageLink === null || imageLink === void 0 ? void 0 : imageLink.length) > 0) {
+      imageDiv = "<div class=\"".concat(cfg.imgWrapperClass, "\">\n        <div class=\"").concat(cfg.imgBgClass, "\" style=\"background-image: url(").concat(imageLink, ")\"></div>\n      </div>");
+    }
+
+    return "\n      <a class=\" ".concat(cfg.linkCardClass, "\" href=\"").concat(data.link, "\" target=\"_blank\">\n        <div class=").concat(cfg.linkToolMainClass, ">\n          <div>\n            ").concat((data === null || data === void 0 ? void 0 : (_data$meta3 = data.meta) === null || _data$meta3 === void 0 ? void 0 : (_data$meta3$title = _data$meta3.title) === null || _data$meta3$title === void 0 ? void 0 : _data$meta3$title.length) > 0 ? '<p class=' + cfg.titleClass + '>' + data.meta.title + '</p>' : '', "\n            ").concat((data === null || data === void 0 ? void 0 : (_data$meta4 = data.meta) === null || _data$meta4 === void 0 ? void 0 : (_data$meta4$descripti = _data$meta4.description) === null || _data$meta4$descripti === void 0 ? void 0 : _data$meta4$descripti.length) > 0 ? '<p class=' + cfg.descriptionClass + '>' + data.meta.description + '</p>' : '', "\n            <p class=\"").concat(cfg.linkClass, "\">").concat(extractDomain(data.link), "</p>\n          </div>\n        </div>\n        ").concat(imageDiv, "\n      </a>");
   }
 };
 var defaultConfig = {
+  simpleImage: {
+    use: "figure",
+    imgClass: "img-simple",
+    figureClass: "fig-img-simple",
+    figCapClass: "fig-cap-simple",
+    path: "absolute"
+  },
   image: {
     use: "figure",
     // figure or img (figcaption will be used for caption of figure)
@@ -152,6 +202,15 @@ var defaultConfig = {
   quote: {
     applyAlignment: false // if set to true blockquote element will have text-align css property set
 
+  },
+  linkTool: {
+    linkCardClass: 'link-tool-card',
+    linkToolMainClass: 'link-tool-main',
+    titleClass: 'tl-title',
+    descriptionClass: 'tl-description',
+    linkClass: 'tl-link',
+    imgWrapperClass: 'link-image-wrapper',
+    imgBgClass: 'link-img-bg'
   }
 };
 
@@ -202,4 +261,4 @@ var edjsParser = /*#__PURE__*/function () {
   return edjsParser;
 }();
 
-export default edjsParser;
+export { edjsParser as default };