@frontkom/block-react-parser 0.1.0 → 1.1.0

package/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['airbnb', 'plugin:prettier/recommended', 'plugin:react/recommended'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {},
+};

package/.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+dist

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "arrowParens": "avoid",
+    "printWidth": 100,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "all"
+  }
+  

package/changelogs/CHANGELOG-1.0.0.md

@@ -0,0 +1,41 @@
+## [1.0.0](https://github.com/frontkom/block-react-parser/compare/v0.1.0...v1.0.0) (2024-03-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* cleanup changelog
+
+### Features
+
+* cleanup changelog ([31e66b9](https://github.com/frontkom/block-react-parser/commit/31e66b900b5994959569784ce04c85150c0f88e6))
+
+
+### Documentation
+
+* cleanup changelog ([834ab23](https://github.com/frontkom/block-react-parser/commit/834ab23d057090ccaf8f179b386f6aee684ced90))
+
+
+### Miscellaneous Chores
+
+* **DEVOPS-506:** add $schema and contributors to package.json ([8dc9883](https://github.com/frontkom/block-react-parser/commit/8dc98834c25dfdb0321c2ae41e3c877733466d5a))
+* **DEVOPS-506:** add id-token to permissions in GitHub actions ([8901401](https://github.com/frontkom/block-react-parser/commit/8901401a3d092c6ea18d8f5129c826a78f10225b))
+* **DEVOPS-506:** change build package action ([42c2035](https://github.com/frontkom/block-react-parser/commit/42c20356a96a6f664f46b4946bddf70a2838d8e0))
+* **DEVOPS-506:** change place of contributors in package.json (for test github actions ) ([ccb2b38](https://github.com/frontkom/block-react-parser/commit/ccb2b3818c10f6a7a861fcc93923dac699ffc1ee))
+* **DEVOPS-506:** cleanup semantic-release.yaml ([8775be9](https://github.com/frontkom/block-react-parser/commit/8775be980af665d4db3403ab80af9c642464a01f))
+* **DEVOPS-506:** fix build package action config ([0a99ae0](https://github.com/frontkom/block-react-parser/commit/0a99ae08358445e3e6f48e6621ed58f2f8d2e6a5))
+* **DEVOPS-506:** fix build package action config ([d9559e0](https://github.com/frontkom/block-react-parser/commit/d9559e015dfaffaee3590a5002cd6f540c6c850a))
+* **DEVOPS-506:** merge develop to beta ([637317e](https://github.com/frontkom/block-react-parser/commit/637317e40ba319374f162eb2d2b1b4f330649d7a))
+* **DEVOPS-506:** remove dist folder ([390ece7](https://github.com/frontkom/block-react-parser/commit/390ece75eb8bb66e789fa841e71ad6a309b7f5d7))
+* **DEVOPS-506:** remove dist folder from assets in @semantic-release/git ([ab67ce1](https://github.com/frontkom/block-react-parser/commit/ab67ce113828e7b4f471ef399740b4e64dd171c9))
+* **release:** 0.1.1 [skip ci] ([011f395](https://github.com/frontkom/block-react-parser/commit/011f39599ca5b94a5c3448aada36bd6d76d3f7ab))
+* **release:** 0.1.2 [skip ci] ([05be598](https://github.com/frontkom/block-react-parser/commit/05be59829e35a321b4bddbc4e0fd7789bcd36522))
+* **release:** 1.0.0 [skip ci] ([d6bea1a](https://github.com/frontkom/block-react-parser/commit/d6bea1a940a70b737c4dc9bd99d739bb8ce4fd63))
+* **release:** 1.0.0-beta.10 [skip ci] ([d69454f](https://github.com/frontkom/block-react-parser/commit/d69454f6b8c5e81ce32b6824fbc10747e8fe3476))
+* **release:** 1.0.0-beta.2 [skip ci] ([7e54ad1](https://github.com/frontkom/block-react-parser/commit/7e54ad166b46ada37a3865361ae7aa3d5bbd6164))
+* **release:** 1.0.0-beta.3 [skip ci] ([00ca556](https://github.com/frontkom/block-react-parser/commit/00ca556807d918ece4fbca575f402de3dd268d42))
+* **release:** 1.0.0-beta.4 [skip ci] ([89bfee0](https://github.com/frontkom/block-react-parser/commit/89bfee00d3841df58e59e2e86731d9d50fb72d57))
+* **release:** 1.0.0-beta.5 [skip ci] ([e475522](https://github.com/frontkom/block-react-parser/commit/e4755228758e91590431add3406743eff619a2bf))
+* **release:** 1.0.0-beta.6 [skip ci] ([be22f32](https://github.com/frontkom/block-react-parser/commit/be22f32c5082071d91a919f1e2149857c7a27c67))
+* **release:** 1.0.0-beta.7 [skip ci] ([dcd4a9b](https://github.com/frontkom/block-react-parser/commit/dcd4a9b9722a45174e2abd2e10df58860305819a))
+* **release:** 1.0.0-beta.8 [skip ci] ([8f5d9e1](https://github.com/frontkom/block-react-parser/commit/8f5d9e187b11e8fc90ed58ac38ebd12282f3c952))
+* **release:** 1.0.0-beta.9 [skip ci] ([63b7c61](https://github.com/frontkom/block-react-parser/commit/63b7c616db3145a15c4d80d871df3ed8dff7b5ba))

package/changelogs/CHANGELOG-1.1.0-beta.1.md

@@ -0,0 +1,6 @@
+## [1.1.0-beta.1](https://github.com/frontkom/block-react-parser/compare/v1.0.0...v1.1.0-beta.1) (2024-03-06)
+
+
+### Features
+
+* add dist folder to .gitignore ([15422a5](https://github.com/frontkom/block-react-parser/commit/15422a58a7a9c39bc450607b3fd8c46eb10e6d0e))

package/changelogs/CHANGELOG-1.1.0.md

@@ -0,0 +1,11 @@
+## [1.1.0](https://github.com/frontkom/block-react-parser/compare/v1.0.0...v1.1.0) (2024-03-06)
+
+
+### Features
+
+* add dist folder to .gitignore ([15422a5](https://github.com/frontkom/block-react-parser/commit/15422a58a7a9c39bc450607b3fd8c46eb10e6d0e))
+
+
+### Miscellaneous Chores
+
+* **release:** 1.1.0-beta.1 [skip ci] ([44a44a7](https://github.com/frontkom/block-react-parser/commit/44a44a7d90f2253118239681916ae26ba604113b))

package/dist/components/Block.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Block;
+var _react = _interopRequireDefault(require("react"));
 var _Tree = _interopRequireDefault(require("./Tree"));
 var _innerNode = _interopRequireDefault(require("../utils/innerNode"));
 var _Context = require("./Context");
+var _htmlAttribs = _interopRequireDefault(require("../utils/htmlAttribs"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Block element.
@@ -24,9 +26,14 @@ function Block(_ref) {
     innerBlocks
   } = block;
   const CustomBlock = (0, _Context.useBlockComponent)(blockName);
+  const htmlAttrs = (0, _htmlAttribs.default)(innerContent[0]);
+  const blockExtended = {
+    ...block,
+    htmlAttrs
+  };
   if (CustomBlock) {
-    return /*#__PURE__*/React.createElement(CustomBlock, {
-      block: block
+    return /*#__PURE__*/_react.default.createElement(CustomBlock, {
+      block: blockExtended
     });
   }
 
@@ -35,14 +42,14 @@ function Block(_ref) {
     return null;
   }
   // Filter out empty lines and orphaned closing tags.
-  if (innerContent.length === 1 && (innerContent[0] === "\n" || innerContent[0].substring(0, 2) === "</")) {
+  if (innerContent.length === 1 && (innerContent[0] === '\n' || innerContent[0].substring(0, 2) === '</')) {
     return null;
   }
   const node = (0, _innerNode.default)(innerBlocks, innerContent);
   if (node) {
-    return /*#__PURE__*/React.createElement(_Tree.default, {
+    return /*#__PURE__*/_react.default.createElement(_Tree.default, {
       node: node,
-      block: block
+      block: blockExtended
     });
   }
   return null;

package/dist/components/Tree.js

@@ -4,23 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Tree;
+var _react = _interopRequireDefault(require("react"));
 var _Context = require("./Context");
 var _Block = _interopRequireDefault(require("./Block"));
 var _attribsProps = _interopRequireDefault(require("../utils/attribsProps"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function Tree(_ref) {
-  var _node$children;
+  var _node$children2;
   let {
     node,
     block
   } = _ref;
   const CustomTag = (0, _Context.useTagComponent)(node.name);
   (0, _attribsProps.default)(node.attribs);
-  if (node.type === "text") {
-    if (node.data === "[innerBlocks]") {
+  if (node.type === 'text') {
+    if (node.data === '[innerBlocks]') {
       var _block$innerBlocks;
       // eslint-disable-next-line react/no-array-index-key
-      return (_block$innerBlocks = block.innerBlocks) === null || _block$innerBlocks === void 0 ? void 0 : _block$innerBlocks.map((inner, index) => /*#__PURE__*/React.createElement(_Block.default, {
+      return (_block$innerBlocks = block.innerBlocks) === null || _block$innerBlocks === void 0 ? void 0 : _block$innerBlocks.map((inner, index) => /*#__PURE__*/_react.default.createElement(_Block.default, {
         block: inner,
         key: index
       }));
@@ -30,16 +31,26 @@ function Tree(_ref) {
 
   // Handle selfclosed elements (???)
   if (CustomTag) {
-    return /*#__PURE__*/React.createElement(CustomTag, {
+    var _node$children;
+    const tagChildren = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.map((child, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    _react.default.createElement(Tree, {
+      node: child,
+      block: block,
+      key: index
+    }));
+    return /*#__PURE__*/_react.default.createElement(CustomTag, {
+      node: tagChildren,
       attribs: node.attribs
     });
   }
   const Component = node.name;
   const attrs = (0, _attribsProps.default)(node.attribs);
-  return /*#__PURE__*/React.createElement(Component, attrs, (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.map((child, index) =>
+  return /*#__PURE__*/_react.default.createElement(Component, attrs, (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.map((child, index) =>
   /*#__PURE__*/
   // eslint-disable-next-line react/no-array-index-key
-  React.createElement(Tree, {
+  _react.default.createElement(Tree, {
     node: child,
     block: block,
     key: index

package/dist/elements/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.customTags = exports.customBlocks = exports.coreTags = exports.coreBlocks = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _img = _interopRequireDefault(require("./tags/img"));
 var _selfClosing = _interopRequireDefault(require("./tags/selfClosing"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -12,7 +13,7 @@ const coreTags = exports.coreTags = {
     let {
       attribs
     } = _ref;
-    return /*#__PURE__*/React.createElement(_img.default, {
+    return /*#__PURE__*/_react.default.createElement(_img.default, {
       attribs: attribs
     });
   },
@@ -20,7 +21,7 @@ const coreTags = exports.coreTags = {
     let {
       attribs
     } = _ref2;
-    return /*#__PURE__*/React.createElement(_selfClosing.default, {
+    return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "br"
     });
@@ -29,7 +30,7 @@ const coreTags = exports.coreTags = {
     let {
       attribs
     } = _ref3;
-    return /*#__PURE__*/React.createElement(_selfClosing.default, {
+    return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "hr"
     });

package/dist/utils/htmlAttribs.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _htmlparser = require("htmlparser2");
+var _attribsProps2 = _interopRequireDefault(require("./attribsProps"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const htmlAttribs = html => {
+  const htmlFragment = html === null || html === void 0 ? void 0 : html.trim();
+  if (htmlFragment && htmlFragment.length > 1) {
+    var _parsedFragment$child;
+    const parsedFragment = (0, _htmlparser.parseDocument)(htmlFragment, {
+      lowerCaseTags: true,
+      recognizeSelfClosing: true
+    });
+    const attribs = parsedFragment === null || parsedFragment === void 0 || (_parsedFragment$child = parsedFragment.children[0]) === null || _parsedFragment$child === void 0 ? void 0 : _parsedFragment$child.attribs;
+    if (Object.keys(attribs).length !== 0) {
+      var _attribsProps;
+      return (_attribsProps = (0, _attribsProps2.default)(attribs)) !== null && _attribsProps !== void 0 ? _attribsProps : {};
+    }
+  }
+  return {};
+};
+var _default = exports.default = htmlAttribs;

package/dist/utils/innerNode.js

@@ -10,7 +10,7 @@ const innerNode = (innerBlocks, innerContent) => {
   // If no inner blocks, return the block markup.
   // If inner blocks, return the wrapping markup.
   const innerHtml = !innerBlocks.length ? innerContent[0] : "".concat(innerContent[0], "[innerBlocks]").concat(innerContent[innerContent.length - 1]);
-  const html = innerHtml ? innerHtml.trim() : "";
+  const html = innerHtml ? innerHtml.trim() : '';
   const tree = (0, _htmlparser.parseDocument)(html, {
     lowerCaseTags: true,
     recognizeSelfClosing: true

package/package.json

@@ -1,6 +1,7 @@
 {
+  "$schema": "https://json-schema.org/package.json",
   "name": "@frontkom/block-react-parser",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "description": "Gutenberg-generated HTML to React parser.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -14,6 +15,12 @@
     "gutenberg"
   ],
   "author": "Roberto Ornelas <rob@frontkom.com>",
+  "contributors": [
+    {
+      "name": "Krzysztof Branecki",
+      "email": "krzysztof.branecki@frontkom.com"
+    }
+  ],
   "license": "ISC",
   "dependencies": {
     "@wordpress/block-serialization-default-parser": "^4.21.0",

package/src/components/Block.jsx

@@ -1,6 +1,8 @@
-import Tree from "./Tree";
-import innerNode from "../utils/innerNode";
-import { useBlockComponent } from "./Context";
+import React from 'react';
+import Tree from './Tree';
+import innerNode from '../utils/innerNode';
+import { useBlockComponent } from './Context';
+import htmlAttribs from '../utils/htmlAttribs';
 
 /**
  * Block element.
@@ -12,8 +14,11 @@ export default function Block({ block }) {
   const { blockName = null, innerContent, innerBlocks } = block;
   const CustomBlock = useBlockComponent(blockName);
 
+  const htmlAttrs = htmlAttribs(innerContent[0]);
+  const blockExtended = { ...block, htmlAttrs };
+
   if (CustomBlock) {
-    return <CustomBlock block={block} />;
+    return <CustomBlock block={blockExtended} />;
   }
 
   // Filter out empty blocks.
@@ -23,14 +28,14 @@ export default function Block({ block }) {
   // Filter out empty lines and orphaned closing tags.
   if (
     innerContent.length === 1 &&
-    (innerContent[0] === "\n" || innerContent[0].substring(0, 2) === "</")
+    (innerContent[0] === '\n' || innerContent[0].substring(0, 2) === '</')
   ) {
     return null;
   }
 
   const node = innerNode(innerBlocks, innerContent);
   if (node) {
-    return <Tree node={node} block={block} />;
+    return <Tree node={node} block={blockExtended} />;
   }
 
   return null;

package/src/components/Tree.jsx

@@ -1,18 +1,17 @@
-import { useTagComponent } from "./Context";
-import Block from "./Block";
-import attribsProps from "../utils/attribsProps";
+import React from 'react';
+import { useTagComponent } from './Context';
+import Block from './Block';
+import attribsProps from '../utils/attribsProps';
 
 export default function Tree({ node, block }) {
   const CustomTag = useTagComponent(node.name);
 
   attribsProps(node.attribs);
 
-  if (node.type === "text") {
-    if (node.data === "[innerBlocks]") {
+  if (node.type === 'text') {
+    if (node.data === '[innerBlocks]') {
       // eslint-disable-next-line react/no-array-index-key
-      return block.innerBlocks?.map((inner, index) => (
-        <Block block={inner} key={index} />
-      ));
+      return block.innerBlocks?.map((inner, index) => <Block block={inner} key={index} />);
     }
 
     return node.data;
@@ -20,7 +19,12 @@ export default function Tree({ node, block }) {
 
   // Handle selfclosed elements (???)
   if (CustomTag) {
-    return <CustomTag attribs={node.attribs} />;
+    const tagChildren = node.children?.map((child, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <Tree node={child} block={block} key={index} />
+    ));
+
+    return <CustomTag node={tagChildren} attribs={node.attribs} />;
   }
 
   const Component = node.name;

package/src/elements/{index.js → index.jsx}

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Image from './tags/img';
 import SelfClosing from './tags/selfClosing';
 
@@ -5,9 +7,7 @@ export const coreTags = {
   img: ({ attribs }) => <Image attribs={attribs} />,
   br: ({ attribs }) => <SelfClosing attribs={attribs} tag="br" />,
   hr: ({ attribs }) => <SelfClosing attribs={attribs} tag="hr" />,
-  meta: ({ attribs }) => {
-    return null;
-  },
+  meta: ({ attribs }) => null,
   // area: ({attribs}) => <SelfClosing attribs={attribs} tag="area" />,
   // base: ({attribs}) => <SelfClosing attribs={attribs} tag="base" />,
   // col: ({attribs}) => <SelfClosing attribs={attribs} tag="col" />,

package/src/elements/tags/img.jsx

@@ -0,0 +1,5 @@
+export default function Image({ attribs }) {
+  const { alt = '', class: className = '', src, height, width } = attribs;
+
+  return <img alt={alt} className={className} src={src} width={width} height={height} />;
+}

package/src/utils/attribsProps.js

@@ -1,18 +1,18 @@
 import convert from 'react-attr-converter';
 import parseStyle from 'style-to-js';
 
-const attribsProps = (attribs) => {
+const attribsProps = attribs => {
   if (attribs === undefined) {
     return {};
   }
 
   const props = Object.fromEntries(
-    Object.entries(attribs).map((attribute) => {
+    Object.entries(attribs).map(attribute => {
       if (attribute[0] === 'style') {
         return [convert(attribute[0]), parseStyle(attribute[1])];
       }
       return [convert(attribute[0]), attribute[1]];
-    })
+    }),
   );
 
   return props;

package/src/utils/htmlAttribs.js

@@ -0,0 +1,22 @@
+import { parseDocument } from 'htmlparser2';
+import attribsProps from './attribsProps';
+
+const htmlAttribs = html => {
+  const htmlFragment = html?.trim();
+
+  if (htmlFragment && htmlFragment.length > 1) {
+    const parsedFragment = parseDocument(htmlFragment, {
+      lowerCaseTags: true,
+      recognizeSelfClosing: true,
+    });
+    const attribs = parsedFragment?.children[0]?.attribs;
+
+    if (Object.keys(attribs).length !== 0) {
+      return attribsProps(attribs) ?? {};
+    }
+  }
+
+  return {};
+};
+
+export default htmlAttribs;

package/src/utils/innerNode.jsx

@@ -1,4 +1,4 @@
-import { parseDocument } from "htmlparser2";
+import { parseDocument } from 'htmlparser2';
 
 const innerNode = (innerBlocks, innerContent) => {
   // If no inner blocks, return the block markup.
@@ -6,7 +6,7 @@ const innerNode = (innerBlocks, innerContent) => {
   const innerHtml = !innerBlocks.length
     ? innerContent[0]
     : `${innerContent[0]}[innerBlocks]${innerContent[innerContent.length - 1]}`;
-  const html = innerHtml ? innerHtml.trim() : "";
+  const html = innerHtml ? innerHtml.trim() : '';
 
   const tree = parseDocument(html, {
     lowerCaseTags: true,

package/src/utils/parseBlocks.jsx

@@ -1,5 +1,5 @@
-import { parse } from "@wordpress/block-serialization-default-parser";
-import Block from "../components/Block";
+import { parse } from '@wordpress/block-serialization-default-parser';
+import Block from '../components/Block';
 
 /**
  * Parse Gutenberg blocks from HTML markup.
@@ -7,7 +7,7 @@ import Block from "../components/Block";
  * @param {string} html - markup rendered by Gutenberg editor.
  * @returns {JSX.Element[]}
  */
-const parseBlocks = (html) =>
+const parseBlocks = html =>
   parse(html.trim()).map((block, key) => <Block block={block} key={key} />);
 
 export default parseBlocks;

package/src/elements/tags/img.js

@@ -1,13 +0,0 @@
-export default function Image({ attribs }) {
-  const { alt = '', class: className = '', src, height, width } = attribs;
-
-  return (
-    <img
-      alt={alt}
-      className={className}
-      src={src}
-      width={width}
-      height={height}
-    />
-  );
-}