@frontkom/block-react-parser 0.1.0 → 1.1.0-beta.2

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/.nvmrc

@@ -1 +1 @@
-16.16.0
+v20.10.0

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-beta.2.md

@@ -0,0 +1,6 @@
+## [1.1.0-beta.2](https://github.com/frontkom/block-react-parser/compare/v1.1.0-beta.1...v1.1.0-beta.2) (2024-03-13)
+
+
+### Features
+
+* merge beta to develop ([1144e9e](https://github.com/frontkom/block-react-parser/commit/1144e9e79a7171c4524e4fdbaa0fa1cc90d77378))

package/dist/components/Block.js

@@ -4,10 +4,15 @@ 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 }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 /**
  * Block element.
  *
@@ -15,18 +20,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @returns {JSX.Element | null | undefined}
  */
 function Block(_ref) {
-  let {
-    block
-  } = _ref;
-  const {
-    blockName = null,
-    innerContent,
-    innerBlocks
-  } = block;
-  const CustomBlock = (0, _Context.useBlockComponent)(blockName);
+  var block = _ref.block;
+  var _block$blockName = block.blockName,
+    blockName = _block$blockName === void 0 ? null : _block$blockName,
+    innerContent = block.innerContent,
+    innerBlocks = block.innerBlocks;
+  var CustomBlock = (0, _Context.useBlockComponent)(blockName);
+  var htmlAttrs = (0, _htmlAttribs.default)(innerContent[0]);
+  var blockExtended = _objectSpread(_objectSpread({}, block), {}, {
+    htmlAttrs: htmlAttrs
+  });
   if (CustomBlock) {
-    return /*#__PURE__*/React.createElement(CustomBlock, {
-      block: block
+    return /*#__PURE__*/_react.default.createElement(CustomBlock, {
+      block: blockExtended
     });
   }
 
@@ -35,14 +41,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);
+  var 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/Context.js

@@ -9,23 +9,21 @@ exports.useComponentContext = useComponentContext;
 exports.useTagComponent = useTagComponent;
 var _react = require("react");
 var _elements = require("../elements");
-const TxContext = /*#__PURE__*/(0, _react.createContext)();
-const {
-  Provider
-} = TxContext;
+var TxContext = /*#__PURE__*/(0, _react.createContext)();
+var Provider = TxContext.Provider;
 exports.Provider = Provider;
 function useComponentContext() {
   return (0, _react.useContext)(TxContext);
 }
 function useBlockComponent(name) {
-  const {
-    CustomBlocks = _elements.coreBlocks
-  } = (0, _react.useContext)(TxContext);
+  var _useContext = (0, _react.useContext)(TxContext),
+    _useContext$CustomBlo = _useContext.CustomBlocks,
+    CustomBlocks = _useContext$CustomBlo === void 0 ? _elements.coreBlocks : _useContext$CustomBlo;
   return name && CustomBlocks[name];
 }
 function useTagComponent(tag) {
-  const {
-    CustomTags = _elements.coreTags
-  } = (0, _react.useContext)(TxContext);
+  var _useContext2 = (0, _react.useContext)(TxContext),
+    _useContext2$CustomTa = _useContext2.CustomTags,
+    CustomTags = _useContext2$CustomTa === void 0 ? _elements.coreTags : _useContext2$CustomTa;
   return tag && CustomTags[tag];
 }

package/dist/components/Tree.js

@@ -4,44 +4,61 @@ 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;
-  let {
-    node,
-    block
-  } = _ref;
-  const CustomTag = (0, _Context.useTagComponent)(node.name);
+  var _node$children2;
+  var node = _ref.node,
+    block = _ref.block;
+  var 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, {
-        block: inner,
-        key: index
-      }));
+      return (_block$innerBlocks = block.innerBlocks) === null || _block$innerBlocks === void 0 ? void 0 : _block$innerBlocks.map(function (inner, index) {
+        return /*#__PURE__*/_react.default.createElement(_Block.default, {
+          block: inner,
+          key: index
+        });
+      });
     }
     return node.data;
   }
 
   // Handle selfclosed elements (???)
   if (CustomTag) {
-    return /*#__PURE__*/React.createElement(CustomTag, {
+    var _node$children;
+    var tagChildren = (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.map(function (child, index) {
+      return (
+        /*#__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) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  React.createElement(Tree, {
-    node: child,
-    block: block,
-    key: index
-  })));
+  var Component = node.name;
+  var attrs = (0, _attribsProps.default)(node.attribs);
+  return /*#__PURE__*/_react.default.createElement(Component, attrs, (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.map(function (child, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement(Tree, {
+        node: child,
+        block: block,
+        key: index
+      })
+    );
+  }));
 }

package/dist/elements/index.js

@@ -4,40 +4,36 @@ 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 }; }
-const coreTags = exports.coreTags = {
-  img: _ref => {
-    let {
-      attribs
-    } = _ref;
-    return /*#__PURE__*/React.createElement(_img.default, {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
+var coreTags = {
+  img: function img(_ref) {
+    var attribs = _ref.attribs;
+    return /*#__PURE__*/_react.default.createElement(_img.default, {
       attribs: attribs
     });
   },
-  br: _ref2 => {
-    let {
-      attribs
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(_selfClosing.default, {
+  br: function br(_ref2) {
+    var attribs = _ref2.attribs;
+    return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "br"
     });
   },
-  hr: _ref3 => {
-    let {
-      attribs
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(_selfClosing.default, {
+  hr: function hr(_ref3) {
+    var attribs = _ref3.attribs;
+    return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "hr"
     });
   },
-  meta: _ref4 => {
-    let {
-      attribs
-    } = _ref4;
+  meta: function meta(_ref4) {
+    var attribs = _ref4.attribs;
     return null;
   }
   // area: ({attribs}) => <SelfClosing attribs={attribs} tag="area" />,
@@ -52,7 +48,8 @@ const coreTags = exports.coreTags = {
   // track: ({attribs}) => <SelfClosing attribs={attribs} tag="track" />,
   // wbr: ({attribs}) => <SelfClosing attribs={attribs} tag="wbr" />,
 };
-const coreBlocks = exports.coreBlocks = {
+exports.coreTags = coreTags;
+var coreBlocks = {
   // 'core/archives': ({ block }) => doSomething(),
   // 'core/audio': ({ block }) => doSomething(),
   // 'core/avatar': ({ block }) => doSomething(),
@@ -154,12 +151,10 @@ const coreBlocks = exports.coreBlocks = {
  * @param {object} tags - Optional object with custom blocks definitions. Empty by default.
  * @returns {object} Object with blocks definitions
  */
-const customTags = function () {
-  let tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return {
-    ...coreTags,
-    ...tags
-  };
+exports.coreBlocks = coreBlocks;
+var customTags = function customTags() {
+  var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread(_objectSpread({}, coreTags), tags);
 };
 
 /**
@@ -170,11 +165,8 @@ const customTags = function () {
  * @returns {object} Object with blocks definitions
  */
 exports.customTags = customTags;
-const customBlocks = function () {
-  let blocks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return {
-    ...coreBlocks,
-    ...blocks
-  };
+var customBlocks = function customBlocks() {
+  var blocks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return _objectSpread(_objectSpread({}, coreBlocks), blocks);
 };
 exports.customBlocks = customBlocks;

package/dist/elements/tags/img.js

@@ -5,16 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Image;
 function Image(_ref) {
-  let {
-    attribs
-  } = _ref;
-  const {
-    alt = '',
-    class: className = '',
-    src,
-    height,
-    width
-  } = attribs;
+  var attribs = _ref.attribs;
+  var _attribs$alt = attribs.alt,
+    alt = _attribs$alt === void 0 ? '' : _attribs$alt,
+    _attribs$class = attribs.class,
+    className = _attribs$class === void 0 ? '' : _attribs$class,
+    src = attribs.src,
+    height = attribs.height,
+    width = attribs.width;
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     className: className,

package/dist/elements/tags/selfClosing.js

@@ -7,11 +7,9 @@ exports.default = SelfClosing;
 var _attribsProps = _interopRequireDefault(require("../../utils/attribsProps"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function SelfClosing(_ref) {
-  let {
-    attribs,
-    tag
-  } = _ref;
-  const Component = tag;
-  const attributes = (0, _attribsProps.default)(attribs);
+  var attribs = _ref.attribs,
+    tag = _ref.tag;
+  var Component = tag;
+  var attributes = (0, _attribsProps.default)(attribs);
   return /*#__PURE__*/React.createElement(Component, attributes);
 }

package/dist/index.js

@@ -5,49 +5,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Block", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Block.default;
   }
 });
 Object.defineProperty(exports, "Provider", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Context.Provider;
   }
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _Tree.default;
   }
 });
 Object.defineProperty(exports, "attribsProps", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _attribsProps.default;
   }
 });
 Object.defineProperty(exports, "customBlocks", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _elements.customBlocks;
   }
 });
 Object.defineProperty(exports, "customTags", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _elements.customTags;
   }
 });
 Object.defineProperty(exports, "innerNode", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _innerNode.default;
   }
 });
 Object.defineProperty(exports, "parseBlocks", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _parseBlocks.default;
   }
 });

package/dist/utils/attribsProps.js

@@ -7,11 +7,11 @@ exports.default = void 0;
 var _reactAttrConverter = _interopRequireDefault(require("react-attr-converter"));
 var _styleToJs = _interopRequireDefault(require("style-to-js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const attribsProps = attribs => {
+var attribsProps = function attribsProps(attribs) {
   if (attribs === undefined) {
     return {};
   }
-  const props = Object.fromEntries(Object.entries(attribs).map(attribute => {
+  var props = Object.fromEntries(Object.entries(attribs).map(function (attribute) {
     if (attribute[0] === 'style') {
       return [(0, _reactAttrConverter.default)(attribute[0]), (0, _styleToJs.default)(attribute[1])];
     }
@@ -19,4 +19,5 @@ const attribsProps = attribs => {
   }));
   return props;
 };
-var _default = exports.default = attribsProps;
+var _default = attribsProps;
+exports.default = _default;

package/dist/utils/htmlAttribs.js

@@ -0,0 +1,27 @@
+"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 }; }
+var htmlAttribs = function htmlAttribs(html) {
+  var htmlFragment = html === null || html === void 0 ? void 0 : html.trim();
+  if (htmlFragment && htmlFragment.length > 1) {
+    var _parsedFragment$child;
+    var parsedFragment = (0, _htmlparser.parseDocument)(htmlFragment, {
+      lowerCaseTags: true,
+      recognizeSelfClosing: true
+    });
+    var attribs = parsedFragment === null || parsedFragment === void 0 ? 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 = htmlAttribs;
+exports.default = _default;

package/dist/utils/innerNode.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _htmlparser = require("htmlparser2");
-const innerNode = (innerBlocks, innerContent) => {
+var innerNode = function innerNode(innerBlocks, innerContent) {
   var _tree$children$;
   // 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 tree = (0, _htmlparser.parseDocument)(html, {
+  var innerHtml = !innerBlocks.length ? innerContent[0] : "".concat(innerContent[0], "[innerBlocks]").concat(innerContent[innerContent.length - 1]);
+  var html = innerHtml ? innerHtml.trim() : '';
+  var tree = (0, _htmlparser.parseDocument)(html, {
     lowerCaseTags: true,
     recognizeSelfClosing: true
   });
   return (_tree$children$ = tree.children[0]) !== null && _tree$children$ !== void 0 ? _tree$children$ : null;
 };
-var _default = exports.default = innerNode;
+var _default = innerNode;
+exports.default = _default;

package/dist/utils/parseBlocks.js

@@ -13,8 +13,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} html - markup rendered by Gutenberg editor.
  * @returns {JSX.Element[]}
  */
-const parseBlocks = html => (0, _blockSerializationDefaultParser.parse)(html.trim()).map((block, key) => /*#__PURE__*/React.createElement(_Block.default, {
-  block: block,
-  key: key
-}));
-var _default = exports.default = parseBlocks;
+var parseBlocks = function parseBlocks(html) {
+  return (0, _blockSerializationDefaultParser.parse)(html.trim()).map(function (block, key) {
+    return /*#__PURE__*/React.createElement(_Block.default, {
+      block: block,
+      key: key
+    });
+  });
+};
+var _default = parseBlocks;
+exports.default = _default;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@frontkom/block-react-parser",
-  "version": "0.1.0",
+  "version": "1.1.0-beta.2",
   "description": "Gutenberg-generated HTML to React parser.",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files"
+    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files",
+    "format": "prettier --write \"**/*.{js,jsx,md}\"",
+    "lint": "eslint --quiet src/"
   },
   "keywords": [
     "html",
@@ -26,12 +28,21 @@
     "@babel/core": "^7.20.2",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "eslint": "^8.31.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "babel": {
     "presets": [

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}
-    />
-  );
-}