@frontkom/block-react-parser 1.2.0-beta.1 → 1.3.0

package/.nvmrc

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

package/dist/components/Block.js

@@ -4,15 +4,10 @@ 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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Block element.
  *
@@ -20,19 +15,18 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @returns {JSX.Element | null | undefined}
  */
 function Block(_ref) {
-  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
-  });
+  let {
+    block
+  } = _ref;
+  const {
+    blockName = null,
+    innerContent,
+    innerBlocks
+  } = block;
+  const CustomBlock = (0, _Context.useBlockComponent)(blockName);
   if (CustomBlock) {
-    return /*#__PURE__*/_react.default.createElement(CustomBlock, {
-      block: blockExtended
+    return /*#__PURE__*/React.createElement(CustomBlock, {
+      block: block
     });
   }
 
@@ -41,14 +35,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;
   }
-  var node = (0, _innerNode.default)(innerBlocks, innerContent);
+  const node = (0, _innerNode.default)(innerBlocks, innerContent);
   if (node) {
-    return /*#__PURE__*/_react.default.createElement(_Tree.default, {
+    return /*#__PURE__*/React.createElement(_Tree.default, {
       node: node,
-      block: blockExtended
+      block: block
     });
   }
   return null;

package/dist/components/Context.js

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

package/dist/components/Tree.js

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

package/dist/elements/index.js

@@ -4,36 +4,40 @@ 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 }; }
-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, {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const coreTags = exports.coreTags = {
+  img: _ref => {
+    let {
+      attribs
+    } = _ref;
+    return /*#__PURE__*/React.createElement(_img.default, {
       attribs: attribs
     });
   },
-  br: function br(_ref2) {
-    var attribs = _ref2.attribs;
-    return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
+  br: _ref2 => {
+    let {
+      attribs
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "br"
     });
   },
-  hr: function hr(_ref3) {
-    var attribs = _ref3.attribs;
-    return /*#__PURE__*/_react.default.createElement(_selfClosing.default, {
+  hr: _ref3 => {
+    let {
+      attribs
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(_selfClosing.default, {
       attribs: attribs,
       tag: "hr"
     });
   },
-  meta: function meta(_ref4) {
-    var attribs = _ref4.attribs;
+  meta: _ref4 => {
+    let {
+      attribs
+    } = _ref4;
     return null;
   }
   // area: ({attribs}) => <SelfClosing attribs={attribs} tag="area" />,
@@ -48,8 +52,7 @@ var coreTags = {
   // track: ({attribs}) => <SelfClosing attribs={attribs} tag="track" />,
   // wbr: ({attribs}) => <SelfClosing attribs={attribs} tag="wbr" />,
 };
-exports.coreTags = coreTags;
-var coreBlocks = {
+const coreBlocks = exports.coreBlocks = {
   // 'core/archives': ({ block }) => doSomething(),
   // 'core/audio': ({ block }) => doSomething(),
   // 'core/avatar': ({ block }) => doSomething(),
@@ -151,10 +154,12 @@ var coreBlocks = {
  * @param {object} tags - Optional object with custom blocks definitions. Empty by default.
  * @returns {object} Object with blocks definitions
  */
-exports.coreBlocks = coreBlocks;
-var customTags = function customTags() {
-  var tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return _objectSpread(_objectSpread({}, coreTags), tags);
+const customTags = function () {
+  let tags = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    ...coreTags,
+    ...tags
+  };
 };
 
 /**
@@ -165,8 +170,11 @@ var customTags = function customTags() {
  * @returns {object} Object with blocks definitions
  */
 exports.customTags = customTags;
-var customBlocks = function customBlocks() {
-  var blocks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return _objectSpread(_objectSpread({}, coreBlocks), blocks);
+const customBlocks = function () {
+  let blocks = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    ...coreBlocks,
+    ...blocks
+  };
 };
 exports.customBlocks = customBlocks;

package/dist/elements/tags/img.js

@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Image;
 function Image(_ref) {
-  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;
+  let {
+    attribs
+  } = _ref;
+  const {
+    alt = '',
+    class: className = '',
+    src,
+    height,
+    width
+  } = attribs;
   return /*#__PURE__*/React.createElement("img", {
     alt: alt,
     className: className,

package/dist/elements/tags/selfClosing.js

@@ -5,11 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = SelfClosing;
 var _attribsProps = _interopRequireDefault(require("../../utils/attribsProps"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function SelfClosing(_ref) {
-  var attribs = _ref.attribs,
-    tag = _ref.tag;
-  var Component = tag;
-  var attributes = (0, _attribsProps.default)(attribs);
+  let {
+    attribs,
+    tag
+  } = _ref;
+  const Component = tag;
+  const 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() {
+  get: function () {
     return _Block.default;
   }
 });
 Object.defineProperty(exports, "Provider", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Context.Provider;
   }
 });
 Object.defineProperty(exports, "Tree", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tree.default;
   }
 });
 Object.defineProperty(exports, "attribsProps", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _attribsProps.default;
   }
 });
 Object.defineProperty(exports, "customBlocks", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _elements.customBlocks;
   }
 });
 Object.defineProperty(exports, "customTags", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _elements.customTags;
   }
 });
 Object.defineProperty(exports, "innerNode", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _innerNode.default;
   }
 });
 Object.defineProperty(exports, "parseBlocks", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _parseBlocks.default;
   }
 });
@@ -58,4 +58,4 @@ var _elements = require("./elements");
 var _attribsProps = _interopRequireDefault(require("./utils/attribsProps"));
 var _innerNode = _interopRequireDefault(require("./utils/innerNode"));
 var _parseBlocks = _interopRequireDefault(require("./utils/parseBlocks"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/utils/attribsProps.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 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 }; }
-var attribsProps = function attribsProps(attribs) {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const attribsProps = attribs => {
   if (attribs === undefined) {
     return {};
   }
-  var props = Object.fromEntries(Object.entries(attribs).map(function (attribute) {
+  const props = Object.fromEntries(Object.entries(attribs).map(attribute => {
     if (attribute[0] === 'style') {
       return [(0, _reactAttrConverter.default)(attribute[0]), (0, _styleToJs.default)(attribute[1])];
     }
@@ -19,5 +19,4 @@ var attribsProps = function attribsProps(attribs) {
   }));
   return props;
 };
-var _default = attribsProps;
-exports.default = _default;
+var _default = exports.default = attribsProps;

package/dist/utils/innerNode.js

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

package/dist/utils/parseBlocks.js

@@ -6,20 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _blockSerializationDefaultParser = require("@wordpress/block-serialization-default-parser");
 var _Block = _interopRequireDefault(require("../components/Block"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Parse Gutenberg blocks from HTML markup.
  *
  * @param {string} html - markup rendered by Gutenberg editor.
  * @returns {JSX.Element[]}
  */
-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;
+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;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@frontkom/block-react-parser",
-  "version": "1.2.0-beta.1",
+  "version": "1.3.0",
   "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",
-    "format": "prettier --write \"**/*.{js,jsx,md}\"",
-    "lint": "eslint --quiet src/"
+    "test": "node --test"
   },
   "keywords": [
     "html",
@@ -18,7 +17,7 @@
   "author": "Roberto Ornelas <rob@frontkom.com>",
   "license": "ISC",
   "dependencies": {
-    "@wordpress/block-serialization-default-parser": "^4.21.0",
+    "@wordpress/block-serialization-default-parser": "^5.37.0",
     "htmlparser2": "^8.0.1",
     "react-attr-converter": "^0.3.1",
     "style-to-js": "^1.1.1"
@@ -28,21 +27,12 @@
     "@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"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0"
+    "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0"
   },
   "babel": {
     "presets": [

package/src/components/Block.jsx

@@ -1,8 +1,6 @@
-import React from 'react';
-import Tree from './Tree';
-import innerNode from '../utils/innerNode';
-import { useBlockComponent } from './Context';
-import htmlAttribs from '../utils/htmlAttribs';
+import Tree from "./Tree";
+import innerNode from "../utils/innerNode";
+import { useBlockComponent } from "./Context";
 
 /**
  * Block element.
@@ -14,11 +12,8 @@ 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={blockExtended} />;
+    return <CustomBlock block={block} />;
   }
 
   // Filter out empty blocks.
@@ -28,14 +23,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={blockExtended} />;
+    return <Tree node={node} block={block} />;
   }
 
   return null;

package/src/components/Tree.jsx

@@ -1,17 +1,18 @@
-import React from 'react';
-import { useTagComponent } from './Context';
-import Block from './Block';
-import attribsProps from '../utils/attribsProps';
+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;
@@ -19,12 +20,7 @@ export default function Tree({ node, block }) {
 
   // Handle selfclosed elements (???)
   if (CustomTag) {
-    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} />;
+    return <CustomTag attribs={node.attribs} />;
   }
 
   const Component = node.name;

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

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

@@ -0,0 +1,13 @@
+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/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/test/parser.test.mjs

@@ -0,0 +1,61 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { parse } from '@wordpress/block-serialization-default-parser';
+
+const html = `
+<!-- wp:columns {"columns":3} -->
+<div class="wp-block-columns has-3-columns">
+    <!-- wp:column -->
+    <div class="wp-block-column">
+        <!-- wp:paragraph -->
+        <p>Left</p>
+        <!-- /wp:paragraph -->
+    </div>
+    <!-- /wp:column -->
+
+    <!-- wp:column -->
+    <div class="wp-block-column">
+        <!-- wp:paragraph -->
+        <p><strong>Middle</strong></p>
+        <!-- /wp:paragraph -->
+    </div>
+    <!-- /wp:column -->
+
+    <!-- wp:column -->
+    <div class="wp-block-column"></div>
+    <!-- /wp:column -->
+</div>
+<!-- /wp:columns -->
+`;
+
+test('parses columns block structure', () => {
+  const blocks = parse(html.trim());
+  assert.equal(blocks.length, 1);
+
+  const [columns] = blocks;
+  assert.equal(columns.blockName, 'core/columns');
+  assert.deepStrictEqual(columns.attrs, { columns: 3 });
+  assert.equal(columns.innerBlocks.length, 3);
+
+  const [first, second, third] = columns.innerBlocks;
+
+  assert.equal(first.blockName, 'core/column');
+  assert.deepStrictEqual(first.attrs ?? {}, {});
+  assert.equal(first.innerBlocks.length, 1);
+  assert.equal(first.innerBlocks[0].blockName, 'core/paragraph');
+  assert.deepStrictEqual(first.innerBlocks[0].attrs ?? {}, {});
+  assert.equal(first.innerBlocks[0].innerBlocks.length, 0);
+  assert.equal(first.innerBlocks[0].innerHTML.trim(), '<p>Left</p>');
+
+  assert.equal(second.blockName, 'core/column');
+  assert.deepStrictEqual(second.attrs ?? {}, {});
+  assert.equal(second.innerBlocks.length, 1);
+  assert.equal(second.innerBlocks[0].blockName, 'core/paragraph');
+  assert.deepStrictEqual(second.innerBlocks[0].attrs ?? {}, {});
+  assert.equal(second.innerBlocks[0].innerBlocks.length, 0);
+  assert.equal(second.innerBlocks[0].innerHTML.trim(), '<p><strong>Middle</strong></p>');
+
+  assert.equal(third.blockName, 'core/column');
+  assert.deepStrictEqual(third.attrs ?? {}, {});
+  assert.equal(third.innerBlocks.length, 0);
+});

package/.eslintrc.js

@@ -1,15 +0,0 @@
-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

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

package/.prettierrc

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

package/changelogs/CHANGELOG-1.0.0.md

@@ -1,41 +0,0 @@
-## [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

@@ -1,6 +0,0 @@
-## [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

@@ -1,6 +0,0 @@
-## [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/changelogs/CHANGELOG-1.1.0.md

@@ -1,11 +0,0 @@
-## [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/changelogs/CHANGELOG-1.2.0-beta.1.md

@@ -1,11 +0,0 @@
-## [1.2.0-beta.1](https://github.com/frontkom/block-react-parser/compare/v1.1.0...v1.2.0-beta.1) (2024-03-13)
-
-
-### Features
-
-* merge beta to develop ([1144e9e](https://github.com/frontkom/block-react-parser/commit/1144e9e79a7171c4524e4fdbaa0fa1cc90d77378))
-
-
-### Miscellaneous Chores
-
-* **release:** 1.1.0-beta.2 [skip ci] ([f1df280](https://github.com/frontkom/block-react-parser/commit/f1df280d56c1d7c5ceb91c67b3dfbd15d109d575))

package/dist/utils/htmlAttribs.js

@@ -1,27 +0,0 @@
-"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/src/elements/tags/img.jsx

@@ -1,5 +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} />;
-}

package/src/utils/htmlAttribs.js

@@ -1,22 +0,0 @@
-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;