@frontkom/block-react-parser 0.1.0

package/.nvmrc

@@ -0,0 +1 @@
+16.16.0

package/dist/components/Block.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Block;
+var _Tree = _interopRequireDefault(require("./Tree"));
+var _innerNode = _interopRequireDefault(require("../utils/innerNode"));
+var _Context = require("./Context");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Block element.
+ *
+ * @param {object} componentProps - properties that includes the block object.
+ * @returns {JSX.Element | null | undefined}
+ */
+function Block(_ref) {
+  let {
+    block
+  } = _ref;
+  const {
+    blockName = null,
+    innerContent,
+    innerBlocks
+  } = block;
+  const CustomBlock = (0, _Context.useBlockComponent)(blockName);
+  if (CustomBlock) {
+    return /*#__PURE__*/React.createElement(CustomBlock, {
+      block: block
+    });
+  }
+
+  // Filter out empty blocks.
+  if (!blockName && innerContent.length === 0) {
+    return null;
+  }
+  // Filter out empty lines and orphaned closing tags.
+  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, {
+      node: node,
+      block: block
+    });
+  }
+  return null;
+}

package/dist/components/Context.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Provider = void 0;
+exports.useBlockComponent = useBlockComponent;
+exports.useComponentContext = useComponentContext;
+exports.useTagComponent = useTagComponent;
+var _react = require("react");
+var _elements = require("../elements");
+const TxContext = /*#__PURE__*/(0, _react.createContext)();
+const {
+  Provider
+} = TxContext;
+exports.Provider = Provider;
+function useComponentContext() {
+  return (0, _react.useContext)(TxContext);
+}
+function useBlockComponent(name) {
+  const {
+    CustomBlocks = _elements.coreBlocks
+  } = (0, _react.useContext)(TxContext);
+  return name && CustomBlocks[name];
+}
+function useTagComponent(tag) {
+  const {
+    CustomTags = _elements.coreTags
+  } = (0, _react.useContext)(TxContext);
+  return tag && CustomTags[tag];
+}

package/dist/components/Tree.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Tree;
+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);
+  (0, _attribsProps.default)(node.attribs);
+  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 node.data;
+  }
+
+  // Handle selfclosed elements (???)
+  if (CustomTag) {
+    return /*#__PURE__*/React.createElement(CustomTag, {
+      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
+  })));
+}

package/dist/elements/index.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.customTags = exports.customBlocks = exports.coreTags = exports.coreBlocks = void 0;
+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, {
+      attribs: attribs
+    });
+  },
+  br: _ref2 => {
+    let {
+      attribs
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(_selfClosing.default, {
+      attribs: attribs,
+      tag: "br"
+    });
+  },
+  hr: _ref3 => {
+    let {
+      attribs
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(_selfClosing.default, {
+      attribs: attribs,
+      tag: "hr"
+    });
+  },
+  meta: _ref4 => {
+    let {
+      attribs
+    } = _ref4;
+    return null;
+  }
+  // area: ({attribs}) => <SelfClosing attribs={attribs} tag="area" />,
+  // base: ({attribs}) => <SelfClosing attribs={attribs} tag="base" />,
+  // col: ({attribs}) => <SelfClosing attribs={attribs} tag="col" />,
+  // embed: ({attribs}) => <SelfClosing attribs={attribs} tag="embed" />,
+  // input: ({attribs}) => <SelfClosing attribs={attribs} tag="input" />,
+  // link: ({attribs}) => <SelfClosing attribs={attribs} tag="link" />,
+  // meta: ({attribs}) => <SelfClosing attribs={attribs} tag="meta" />,
+  // param: ({attribs}) => <SelfClosing attribs={attribs} tag="param" />,
+  // source: ({attribs}) => <SelfClosing attribs={attribs} tag="source" />,
+  // track: ({attribs}) => <SelfClosing attribs={attribs} tag="track" />,
+  // wbr: ({attribs}) => <SelfClosing attribs={attribs} tag="wbr" />,
+};
+const coreBlocks = exports.coreBlocks = {
+  // 'core/archives': ({ block }) => doSomething(),
+  // 'core/audio': ({ block }) => doSomething(),
+  // 'core/avatar': ({ block }) => doSomething(),
+  // 'core/block': ({ block }) => doSomething(),
+  // 'core/button': ({ block }) => doSomething(),
+  // 'core/buttons': ({ block }) => doSomething(),
+  // 'core/calendar': ({ block }) => doSomething(),
+  // 'core/categories': ({ block }) => doSomething(),
+  // 'core/code': ({ block }) => doSomething(),
+  // 'core/column': ({ block }) => <p>Column</p>,
+  // 'core/columns': ({ block }) => doSomething(),
+  // 'core/comment-author-avatar': ({ block }) => doSomething(),
+  // 'core/comment-author-name': ({ block }) => doSomething(),
+  // 'core/comment-content': ({ block }) => doSomething(),
+  // 'core/comment-date': ({ block }) => doSomething(),
+  // 'core/comment-edit-link': ({ block }) => doSomething(),
+  // 'core/comment-reply-link': ({ block }) => doSomething(),
+  // 'core/comment-template': ({ block }) => doSomething(),
+  // 'core/comments': ({ block }) => doSomething(),
+  // 'core/comments-pagination': ({ block }) => doSomething(),
+  // 'core/comments-pagination-next': ({ block }) => doSomething(),
+  // 'core/comments-pagination-numbers': ({ block }) => doSomething(),
+  // 'core/comments-pagination-previous': ({ block }) => doSomething(),
+  // 'core/comments-title': ({ block }) => doSomething(),
+  // 'core/cover': ({ block }) => doSomething(),
+  // 'core/embed': ({ block }) => doSomething(),
+  // 'core/file': ({ block }) => doSomething(),
+  // 'core/freeform': ({ block }) => doSomething(),
+  // 'core/gallery': ({ block }) => doSomething(),
+  // 'core/group': ({ block }) => doSomething(),
+  // 'core/heading': ({ block }) => doSomething(),
+  // 'core/home-link': ({ block }) => doSomething(),
+  // 'core/html': ({ block }) => doSomething(),
+  // 'core/image': ({ block }) => doSomething(),
+  // 'core/latest-comments': ({ block }) => doSomething(),
+  // 'core/latest-posts': ({ block }) => doSomething(),
+  // 'core/list': ({ block }) => doSomething(),
+  // 'core/list-item': ({ block }) => doSomething(),
+  // 'core/loginout': ({ block }) => doSomething(),
+  // 'core/media-text': ({ block }) => doSomething(),
+  // 'core/missing': ({ block }) => doSomething(),
+  // 'core/more': ({ block }) => doSomething(),
+  // 'core/navigation': ({ block }) => doSomething(),
+  // 'core/navigation-link': ({ block }) => doSomething(),
+  // 'core/navigation-submenu': ({ block }) => doSomething(),
+  // 'core/nextpage': ({ block }) => doSomething(),
+  // 'core/page-list': ({ block }) => doSomething(),
+  // 'core/paragraph': ({ block }) => doSomething(),
+  // 'core/pattern': ({ block }) => doSomething(),
+  // 'core/post-author': ({ block }) => doSomething(),
+  // 'core/post-author-biography': ({ block }) => doSomething(),
+  // 'core/post-author-name': ({ block }) => doSomething(),
+  // 'core/post-comment': ({ block }) => doSomething(),
+  // 'core/post-comments-count': ({ block }) => doSomething(),
+  // 'core/post-comments-form': ({ block }) => doSomething(),
+  // 'core/post-comments-link': ({ block }) => doSomething(),
+  // 'core/post-content': ({ block }) => doSomething(),
+  // 'core/post-date': ({ block }) => doSomething(),
+  // 'core/post-excerpt': ({ block }) => doSomething(),
+  // 'core/post-featured-image': ({ block }) => doSomething(),
+  // 'core/post-navigation-link': ({ block }) => doSomething(),
+  // 'core/post-template': ({ block }) => doSomething(),
+  // 'core/post-terms': ({ block }) => doSomething(),
+  // 'core/post-title': ({ block }) => doSomething(),
+  // 'core/preformatted': ({ block }) => doSomething(),
+  // 'core/pullquote': ({ block }) => doSomething(),
+  // 'core/query': ({ block }) => doSomething(),
+  // 'core/query-no-results': ({ block }) => doSomething(),
+  // 'core/query-pagination': ({ block }) => doSomething(),
+  // 'core/query-pagination-next': ({ block }) => doSomething(),
+  // 'core/query-pagination-numbers': ({ block }) => doSomething(),
+  // 'core/query-pagination-previous': ({ block }) => doSomething(),
+  // 'core/query-title': ({ block }) => doSomething(),
+  // 'core/quote': ({ block }) => doSomething(),
+  // 'core/read-more': ({ block }) => doSomething(),
+  // 'core/rss': ({ block }) => doSomething(),
+  // 'core/search': ({ block }) => doSomething(),
+  // 'core/separator': ({ block }) => doSomething(),
+  // 'core/shortcode': ({ block }) => doSomething(),
+  // 'core/site-logo': ({ block }) => doSomething(),
+  // 'core/site-tagline': ({ block }) => doSomething(),
+  // 'core/site-title': ({ block }) => doSomething(),
+  // 'core/social-link': ({ block }) => doSomething(),
+  // 'core/social-links': ({ block }) => doSomething(),
+  // 'core/spacer': ({ block }) => doSomething(),
+  // 'core/table': ({ block }) => doSomething(),
+  // 'core/table-of-contents': ({ block }) => doSomething(),
+  // 'core/tag-cloud': ({ block }) => doSomething(),
+  // 'core/template-part': ({ block }) => doSomething(),
+  // 'core/term-description': ({ block }) => doSomething(),
+  // 'core/text-columns': ({ block }) => doSomething(),
+  // 'core/verse': ({ block }) => doSomething(),
+  // 'core/video': ({ block }) => doSomething(),
+};
+
+/**
+ * Helper function to setup custom tags definitions.
+ *
+ * @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
+  };
+};
+
+/**
+ * Helper function to setup custom blocks definitions.
+ *
+ * @param {object} blocks - Optional object with custom blocks definitions. Empty by default.
+ * @param {boolean} useDefaultBlocks - Optional boolean to use core blocks defaults. True by default.
+ * @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
+  };
+};
+exports.customBlocks = customBlocks;

package/dist/elements/tags/img.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Image;
+function Image(_ref) {
+  let {
+    attribs
+  } = _ref;
+  const {
+    alt = '',
+    class: className = '',
+    src,
+    height,
+    width
+  } = attribs;
+  return /*#__PURE__*/React.createElement("img", {
+    alt: alt,
+    className: className,
+    src: src,
+    width: width,
+    height: height
+  });
+}

package/dist/elements/tags/selfClosing.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
+  return /*#__PURE__*/React.createElement(Component, attributes);
+}

package/dist/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Block", {
+  enumerable: true,
+  get: function () {
+    return _Block.default;
+  }
+});
+Object.defineProperty(exports, "Provider", {
+  enumerable: true,
+  get: function () {
+    return _Context.Provider;
+  }
+});
+Object.defineProperty(exports, "Tree", {
+  enumerable: true,
+  get: function () {
+    return _Tree.default;
+  }
+});
+Object.defineProperty(exports, "attribsProps", {
+  enumerable: true,
+  get: function () {
+    return _attribsProps.default;
+  }
+});
+Object.defineProperty(exports, "customBlocks", {
+  enumerable: true,
+  get: function () {
+    return _elements.customBlocks;
+  }
+});
+Object.defineProperty(exports, "customTags", {
+  enumerable: true,
+  get: function () {
+    return _elements.customTags;
+  }
+});
+Object.defineProperty(exports, "innerNode", {
+  enumerable: true,
+  get: function () {
+    return _innerNode.default;
+  }
+});
+Object.defineProperty(exports, "parseBlocks", {
+  enumerable: true,
+  get: function () {
+    return _parseBlocks.default;
+  }
+});
+var _Block = _interopRequireDefault(require("./components/Block"));
+var _Tree = _interopRequireDefault(require("./components/Tree"));
+var _Context = require("./components/Context");
+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 }; }

package/dist/utils/attribsProps.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 => {
+  if (attribs === undefined) {
+    return {};
+  }
+  const props = Object.fromEntries(Object.entries(attribs).map(attribute => {
+    if (attribute[0] === 'style') {
+      return [(0, _reactAttrConverter.default)(attribute[0]), (0, _styleToJs.default)(attribute[1])];
+    }
+    return [(0, _reactAttrConverter.default)(attribute[0]), attribute[1]];
+  }));
+  return props;
+};
+var _default = exports.default = attribsProps;

package/dist/utils/innerNode.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _htmlparser = require("htmlparser2");
+const 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, {
+    lowerCaseTags: true,
+    recognizeSelfClosing: true
+  });
+  return (_tree$children$ = tree.children[0]) !== null && _tree$children$ !== void 0 ? _tree$children$ : null;
+};
+var _default = exports.default = innerNode;

package/dist/utils/parseBlocks.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 }; }
+/**
+ * Parse Gutenberg blocks from HTML markup.
+ *
+ * @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;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@frontkom/block-react-parser",
+  "version": "0.1.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"
+  },
+  "keywords": [
+    "html",
+    "react",
+    "parser",
+    "gutenberg"
+  ],
+  "author": "Roberto Ornelas <rob@frontkom.com>",
+  "license": "ISC",
+  "dependencies": {
+    "@wordpress/block-serialization-default-parser": "^4.21.0",
+    "htmlparser2": "^8.0.1",
+    "react-attr-converter": "^0.3.1",
+    "style-to-js": "^1.1.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  },
+  "browserslist": "> 0.25%, not dead"
+}

package/src/components/Block.jsx

@@ -0,0 +1,37 @@
+import Tree from "./Tree";
+import innerNode from "../utils/innerNode";
+import { useBlockComponent } from "./Context";
+
+/**
+ * Block element.
+ *
+ * @param {object} componentProps - properties that includes the block object.
+ * @returns {JSX.Element | null | undefined}
+ */
+export default function Block({ block }) {
+  const { blockName = null, innerContent, innerBlocks } = block;
+  const CustomBlock = useBlockComponent(blockName);
+
+  if (CustomBlock) {
+    return <CustomBlock block={block} />;
+  }
+
+  // Filter out empty blocks.
+  if (!blockName && innerContent.length === 0) {
+    return null;
+  }
+  // Filter out empty lines and orphaned closing tags.
+  if (
+    innerContent.length === 1 &&
+    (innerContent[0] === "\n" || innerContent[0].substring(0, 2) === "</")
+  ) {
+    return null;
+  }
+
+  const node = innerNode(innerBlocks, innerContent);
+  if (node) {
+    return <Tree node={node} block={block} />;
+  }
+
+  return null;
+}

package/src/components/Context.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+import { coreTags, coreBlocks } from '../elements';
+
+const TxContext = createContext();
+
+export const { Provider } = TxContext;
+
+export function useComponentContext() {
+  return useContext(TxContext);
+}
+
+export function useBlockComponent(name) {
+  const { CustomBlocks = coreBlocks } = useContext(TxContext);
+  return name && CustomBlocks[name];
+}
+
+export function useTagComponent(tag) {
+  const { CustomTags = coreTags } = useContext(TxContext);
+  return tag && CustomTags[tag];
+}

package/src/components/Tree.jsx

@@ -0,0 +1,37 @@
+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]") {
+      // eslint-disable-next-line react/no-array-index-key
+      return block.innerBlocks?.map((inner, index) => (
+        <Block block={inner} key={index} />
+      ));
+    }
+
+    return node.data;
+  }
+
+  // Handle selfclosed elements (???)
+  if (CustomTag) {
+    return <CustomTag attribs={node.attribs} />;
+  }
+
+  const Component = node.name;
+  const attrs = attribsProps(node.attribs);
+
+  return (
+    <Component {...attrs}>
+      {node.children?.map((child, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <Tree node={child} block={block} key={index} />
+      ))}
+    </Component>
+  );
+}

package/src/elements/index.js

@@ -0,0 +1,135 @@
+import Image from './tags/img';
+import SelfClosing from './tags/selfClosing';
+
+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;
+  },
+  // area: ({attribs}) => <SelfClosing attribs={attribs} tag="area" />,
+  // base: ({attribs}) => <SelfClosing attribs={attribs} tag="base" />,
+  // col: ({attribs}) => <SelfClosing attribs={attribs} tag="col" />,
+  // embed: ({attribs}) => <SelfClosing attribs={attribs} tag="embed" />,
+  // input: ({attribs}) => <SelfClosing attribs={attribs} tag="input" />,
+  // link: ({attribs}) => <SelfClosing attribs={attribs} tag="link" />,
+  // meta: ({attribs}) => <SelfClosing attribs={attribs} tag="meta" />,
+  // param: ({attribs}) => <SelfClosing attribs={attribs} tag="param" />,
+  // source: ({attribs}) => <SelfClosing attribs={attribs} tag="source" />,
+  // track: ({attribs}) => <SelfClosing attribs={attribs} tag="track" />,
+  // wbr: ({attribs}) => <SelfClosing attribs={attribs} tag="wbr" />,
+};
+
+export const coreBlocks = {
+  // 'core/archives': ({ block }) => doSomething(),
+  // 'core/audio': ({ block }) => doSomething(),
+  // 'core/avatar': ({ block }) => doSomething(),
+  // 'core/block': ({ block }) => doSomething(),
+  // 'core/button': ({ block }) => doSomething(),
+  // 'core/buttons': ({ block }) => doSomething(),
+  // 'core/calendar': ({ block }) => doSomething(),
+  // 'core/categories': ({ block }) => doSomething(),
+  // 'core/code': ({ block }) => doSomething(),
+  // 'core/column': ({ block }) => <p>Column</p>,
+  // 'core/columns': ({ block }) => doSomething(),
+  // 'core/comment-author-avatar': ({ block }) => doSomething(),
+  // 'core/comment-author-name': ({ block }) => doSomething(),
+  // 'core/comment-content': ({ block }) => doSomething(),
+  // 'core/comment-date': ({ block }) => doSomething(),
+  // 'core/comment-edit-link': ({ block }) => doSomething(),
+  // 'core/comment-reply-link': ({ block }) => doSomething(),
+  // 'core/comment-template': ({ block }) => doSomething(),
+  // 'core/comments': ({ block }) => doSomething(),
+  // 'core/comments-pagination': ({ block }) => doSomething(),
+  // 'core/comments-pagination-next': ({ block }) => doSomething(),
+  // 'core/comments-pagination-numbers': ({ block }) => doSomething(),
+  // 'core/comments-pagination-previous': ({ block }) => doSomething(),
+  // 'core/comments-title': ({ block }) => doSomething(),
+  // 'core/cover': ({ block }) => doSomething(),
+  // 'core/embed': ({ block }) => doSomething(),
+  // 'core/file': ({ block }) => doSomething(),
+  // 'core/freeform': ({ block }) => doSomething(),
+  // 'core/gallery': ({ block }) => doSomething(),
+  // 'core/group': ({ block }) => doSomething(),
+  // 'core/heading': ({ block }) => doSomething(),
+  // 'core/home-link': ({ block }) => doSomething(),
+  // 'core/html': ({ block }) => doSomething(),
+  // 'core/image': ({ block }) => doSomething(),
+  // 'core/latest-comments': ({ block }) => doSomething(),
+  // 'core/latest-posts': ({ block }) => doSomething(),
+  // 'core/list': ({ block }) => doSomething(),
+  // 'core/list-item': ({ block }) => doSomething(),
+  // 'core/loginout': ({ block }) => doSomething(),
+  // 'core/media-text': ({ block }) => doSomething(),
+  // 'core/missing': ({ block }) => doSomething(),
+  // 'core/more': ({ block }) => doSomething(),
+  // 'core/navigation': ({ block }) => doSomething(),
+  // 'core/navigation-link': ({ block }) => doSomething(),
+  // 'core/navigation-submenu': ({ block }) => doSomething(),
+  // 'core/nextpage': ({ block }) => doSomething(),
+  // 'core/page-list': ({ block }) => doSomething(),
+  // 'core/paragraph': ({ block }) => doSomething(),
+  // 'core/pattern': ({ block }) => doSomething(),
+  // 'core/post-author': ({ block }) => doSomething(),
+  // 'core/post-author-biography': ({ block }) => doSomething(),
+  // 'core/post-author-name': ({ block }) => doSomething(),
+  // 'core/post-comment': ({ block }) => doSomething(),
+  // 'core/post-comments-count': ({ block }) => doSomething(),
+  // 'core/post-comments-form': ({ block }) => doSomething(),
+  // 'core/post-comments-link': ({ block }) => doSomething(),
+  // 'core/post-content': ({ block }) => doSomething(),
+  // 'core/post-date': ({ block }) => doSomething(),
+  // 'core/post-excerpt': ({ block }) => doSomething(),
+  // 'core/post-featured-image': ({ block }) => doSomething(),
+  // 'core/post-navigation-link': ({ block }) => doSomething(),
+  // 'core/post-template': ({ block }) => doSomething(),
+  // 'core/post-terms': ({ block }) => doSomething(),
+  // 'core/post-title': ({ block }) => doSomething(),
+  // 'core/preformatted': ({ block }) => doSomething(),
+  // 'core/pullquote': ({ block }) => doSomething(),
+  // 'core/query': ({ block }) => doSomething(),
+  // 'core/query-no-results': ({ block }) => doSomething(),
+  // 'core/query-pagination': ({ block }) => doSomething(),
+  // 'core/query-pagination-next': ({ block }) => doSomething(),
+  // 'core/query-pagination-numbers': ({ block }) => doSomething(),
+  // 'core/query-pagination-previous': ({ block }) => doSomething(),
+  // 'core/query-title': ({ block }) => doSomething(),
+  // 'core/quote': ({ block }) => doSomething(),
+  // 'core/read-more': ({ block }) => doSomething(),
+  // 'core/rss': ({ block }) => doSomething(),
+  // 'core/search': ({ block }) => doSomething(),
+  // 'core/separator': ({ block }) => doSomething(),
+  // 'core/shortcode': ({ block }) => doSomething(),
+  // 'core/site-logo': ({ block }) => doSomething(),
+  // 'core/site-tagline': ({ block }) => doSomething(),
+  // 'core/site-title': ({ block }) => doSomething(),
+  // 'core/social-link': ({ block }) => doSomething(),
+  // 'core/social-links': ({ block }) => doSomething(),
+  // 'core/spacer': ({ block }) => doSomething(),
+  // 'core/table': ({ block }) => doSomething(),
+  // 'core/table-of-contents': ({ block }) => doSomething(),
+  // 'core/tag-cloud': ({ block }) => doSomething(),
+  // 'core/template-part': ({ block }) => doSomething(),
+  // 'core/term-description': ({ block }) => doSomething(),
+  // 'core/text-columns': ({ block }) => doSomething(),
+  // 'core/verse': ({ block }) => doSomething(),
+  // 'core/video': ({ block }) => doSomething(),
+};
+
+/**
+ * Helper function to setup custom tags definitions.
+ *
+ * @param {object} tags - Optional object with custom blocks definitions. Empty by default.
+ * @returns {object} Object with blocks definitions
+ */
+export const customTags = (tags = {}) => ({ ...coreTags, ...tags });
+
+/**
+ * Helper function to setup custom blocks definitions.
+ *
+ * @param {object} blocks - Optional object with custom blocks definitions. Empty by default.
+ * @param {boolean} useDefaultBlocks - Optional boolean to use core blocks defaults. True by default.
+ * @returns {object} Object with blocks definitions
+ */
+export const customBlocks = (blocks = {}) => ({ ...coreBlocks, ...blocks });

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/elements/tags/selfClosing.js

@@ -0,0 +1,8 @@
+import attribsProps from '../../utils/attribsProps';
+
+export default function SelfClosing({ attribs, tag }) {
+  const Component = tag;
+  const attributes = attribsProps(attribs);
+
+  return <Component {...attributes} />;
+}

package/src/index.js

@@ -0,0 +1,7 @@
+export { default as Block } from './components/Block';
+export { default as Tree } from './components/Tree';
+export { Provider } from './components/Context';
+export { customBlocks, customTags } from './elements';
+export { default as attribsProps } from './utils/attribsProps';
+export { default as innerNode } from './utils/innerNode';
+export { default as parseBlocks } from './utils/parseBlocks';

package/src/utils/attribsProps.js

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

package/src/utils/innerNode.jsx

@@ -0,0 +1,19 @@
+import { parseDocument } from "htmlparser2";
+
+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]
+    : `${innerContent[0]}[innerBlocks]${innerContent[innerContent.length - 1]}`;
+  const html = innerHtml ? innerHtml.trim() : "";
+
+  const tree = parseDocument(html, {
+    lowerCaseTags: true,
+    recognizeSelfClosing: true,
+  });
+
+  return tree.children[0] ?? null;
+};
+
+export default innerNode;

package/src/utils/parseBlocks.jsx

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