@nixxie-cms/document-renderer 1.0.0 → 1.0.1

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,71 @@
+import { type JSX, type ReactNode } from 'react';
+export type Node = Element | Text;
+export type Element = {
+    children: Node[];
+    [key: string]: unknown;
+};
+export type Text = {
+    text: string;
+    [key: string]: unknown;
+};
+type Mark = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'superscript' | 'subscript' | 'keyboard';
+type Component<Props> = (props: Props) => ReactNode;
+type OnlyChildrenComponent = Component<{
+    children: ReactNode;
+}> | keyof JSX.IntrinsicElements;
+type MarkRenderers = {
+    [Key in Mark]: OnlyChildrenComponent;
+};
+interface Renderers {
+    inline: {
+        link: Component<{
+            children: ReactNode;
+            href: string;
+        }> | 'a';
+        relationship: Component<{
+            relationship: string;
+            data: {
+                id: string;
+                label: string | undefined;
+                data: Record<string, any> | undefined;
+            } | null;
+        }>;
+    } & MarkRenderers;
+    block: {
+        block: OnlyChildrenComponent;
+        paragraph: Component<{
+            children: ReactNode;
+            textAlign: 'center' | 'end' | undefined;
+        }>;
+        blockquote: OnlyChildrenComponent;
+        code: Component<{
+            children: string;
+        }> | keyof JSX.IntrinsicElements;
+        layout: Component<{
+            layout: [number, ...number[]];
+            children: ReactNode[];
+        }>;
+        divider: Component<unknown> | keyof JSX.IntrinsicElements;
+        heading: Component<{
+            level: 1 | 2 | 3 | 4 | 5 | 6;
+            children: ReactNode;
+            textAlign: 'center' | 'end' | undefined;
+        }>;
+        list: Component<{
+            type: 'ordered' | 'unordered';
+            children: ReactNode[];
+        }>;
+    };
+}
+export declare const defaultRenderers: Renderers;
+export type DocumentRendererProps<ComponentBlocks extends Record<string, Component<any>> = Record<string, Component<any>>> = {
+    document: Element[];
+    renderers?: {
+        inline?: Partial<Renderers['inline']>;
+        block?: Partial<Renderers['block']>;
+    };
+    componentBlocks?: ComponentBlocks;
+};
+export declare function DocumentRenderer<ComponentBlocks extends Record<string, Component<any>>>(props: DocumentRendererProps<ComponentBlocks>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/declarations/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"../../../src","sources":["index.tsx"],"names":[],"mappings":"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"}

package/dist/nixxie-cms-document-renderer.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../src/index.js";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibml4eGllLWNtcy1kb2N1bWVudC1yZW5kZXJlci5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibml4eGllLWNtcy1kb2N1bWVudC1yZW5kZXJlci5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/dist/nixxie-cms-document-renderer.cjs.js

@@ -1,16 +1,239 @@
-"use strict";
-// this file might look strange and you might be wondering what it's for
-// it's lets you import your source files by importing this entrypoint
-// as you would import it if it was built with preconstruct build
-// this file is slightly different to some others though
-// it has a require hook which compiles your code with Babel
-// this means that you don't have to set up @babel/register or anything like that
-// but you can still require this module and it'll be compiled
+'use strict';
 
-// this bit of code imports the require hook and registers it
-let unregister = require("../../../node_modules/.pnpm/@preconstruct+hook@0.4.0/node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+Object.defineProperty(exports, '__esModule', { value: true });
 
-// this re-exports the source file
-module.exports = require("../src/index.tsx");
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
-unregister();
+const defaultRenderers = {
+  inline: {
+    bold: 'strong',
+    code: 'code',
+    keyboard: 'kbd',
+    strikethrough: 's',
+    italic: 'em',
+    link: 'a',
+    subscript: 'sub',
+    superscript: 'sup',
+    underline: 'u',
+    relationship: ({
+      data
+    }) => {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: (data === null || data === void 0 ? void 0 : data.label) || (data === null || data === void 0 ? void 0 : data.id)
+      });
+    }
+  },
+  block: {
+    block: 'div',
+    blockquote: 'blockquote',
+    paragraph: ({
+      children,
+      textAlign
+    }) => {
+      return /*#__PURE__*/jsxRuntime.jsx("p", {
+        style: {
+          textAlign
+        },
+        children: children
+      });
+    },
+    divider: 'hr',
+    heading: ({
+      level,
+      children,
+      textAlign
+    }) => {
+      const Heading = `h${level}`;
+      return /*#__PURE__*/jsxRuntime.jsx(Heading, {
+        style: {
+          textAlign
+        },
+        children: children
+      });
+    },
+    code: 'pre',
+    list: ({
+      children,
+      type
+    }) => {
+      const List = type === 'ordered' ? 'ol' : 'ul';
+      return /*#__PURE__*/jsxRuntime.jsx(List, {
+        children: children.map((x, i) => /*#__PURE__*/jsxRuntime.jsx("li", {
+          children: x
+        }, i))
+      });
+    },
+    layout: ({
+      children,
+      layout
+    }) => {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          display: 'grid',
+          gridTemplateColumns: layout.map(x => `${x}fr`).join(' ')
+        },
+        children: children.map((element, i) => /*#__PURE__*/jsxRuntime.jsx("div", {
+          children: element
+        }, i))
+      });
+    }
+  }
+};
+function DocumentNode({
+  node: _node,
+  componentBlocks,
+  renderers
+}) {
+  if (typeof _node.text === 'string') {
+    let child = /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+      children: _node.text
+    });
+    Object.keys(renderers.inline).forEach(markName => {
+      if (markName !== 'link' && markName !== 'relationship' && _node[markName]) {
+        const Mark = renderers.inline[markName];
+        child = /*#__PURE__*/jsxRuntime.jsx(Mark, {
+          children: child
+        });
+      }
+    });
+    return child;
+  }
+  const node = _node;
+  const children = node.children.map((x, i) => /*#__PURE__*/jsxRuntime.jsx(DocumentNode, {
+    node: x,
+    componentBlocks: componentBlocks,
+    renderers: renderers
+  }, i));
+  switch (node.type) {
+    case 'blockquote':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.block.blockquote, {
+          children: children
+        });
+      }
+    case 'paragraph':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.block.paragraph, {
+          textAlign: node.textAlign,
+          children: children
+        });
+      }
+    case 'code':
+      {
+        if (node.children.length === 1 && node.children[0] && typeof node.children[0].text === 'string') {
+          return /*#__PURE__*/jsxRuntime.jsx(renderers.block.code, {
+            children: node.children[0].text
+          });
+        }
+        break;
+      }
+    case 'layout':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.block.layout, {
+          layout: node.layout,
+          children: children
+        });
+      }
+    case 'divider':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.block.divider, {});
+      }
+    case 'heading':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.block.heading, {
+          textAlign: node.textAlign,
+          level: node.level,
+          children: children
+        });
+      }
+    case 'component-block':
+      {
+        const Comp = componentBlocks[node.component];
+        if (Comp) {
+          const props = createComponentBlockProps(node, children);
+          return /*#__PURE__*/jsxRuntime.jsx(renderers.block.block, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+              ...props
+            })
+          });
+        }
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(`[@nixxie-cms/document-renderer] No component block named "${node.component}" was provided; ` + `rendering its children only. Pass it via the \`componentBlocks\` prop.`);
+        }
+        break;
+      }
+    case 'ordered-list':
+    case 'unordered-list':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.block.list, {
+          children: children,
+          type: node.type === 'ordered-list' ? 'ordered' : 'unordered'
+        });
+      }
+    case 'relationship':
+      {
+        const data = node.data;
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.inline.relationship, {
+          relationship: node.relationship,
+          data: data ? {
+            id: data.id,
+            label: data.label,
+            data: data.data
+          } : null
+        });
+      }
+    case 'link':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(renderers.inline.link, {
+          href: node.href,
+          children: children
+        });
+      }
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+    children: children
+  });
+}
+function set(obj, propPath, value) {
+  if (propPath.length === 1) {
+    obj[propPath[0]] = value;
+  } else {
+    const firstElement = propPath.shift();
+    set(obj[firstElement], propPath, value);
+  }
+}
+function createComponentBlockProps(node, children) {
+  const formProps = JSON.parse(JSON.stringify(node.props));
+  node.children.forEach((child, i) => {
+    if (child.propPath) {
+      const propPath = [...child.propPath];
+      set(formProps, propPath, children[i]);
+    }
+  });
+  return formProps;
+}
+function DocumentRenderer(props) {
+  var _props$renderers, _props$renderers2;
+  const renderers = {
+    inline: {
+      ...defaultRenderers.inline,
+      ...((_props$renderers = props.renderers) === null || _props$renderers === void 0 ? void 0 : _props$renderers.inline)
+    },
+    block: {
+      ...defaultRenderers.block,
+      ...((_props$renderers2 = props.renderers) === null || _props$renderers2 === void 0 ? void 0 : _props$renderers2.block)
+    }
+  };
+  const componentBlocks = props.componentBlocks || {};
+  return /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+    children: props.document.map((x, i) => /*#__PURE__*/jsxRuntime.jsx(DocumentNode, {
+      node: x,
+      componentBlocks: componentBlocks,
+      renderers: renderers
+    }, i))
+  });
+}
+
+exports.DocumentRenderer = DocumentRenderer;
+exports.defaultRenderers = defaultRenderers;

package/dist/nixxie-cms-document-renderer.esm.js

@@ -0,0 +1,234 @@
+import { Fragment } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const defaultRenderers = {
+  inline: {
+    bold: 'strong',
+    code: 'code',
+    keyboard: 'kbd',
+    strikethrough: 's',
+    italic: 'em',
+    link: 'a',
+    subscript: 'sub',
+    superscript: 'sup',
+    underline: 'u',
+    relationship: ({
+      data
+    }) => {
+      return /*#__PURE__*/jsx("span", {
+        children: (data === null || data === void 0 ? void 0 : data.label) || (data === null || data === void 0 ? void 0 : data.id)
+      });
+    }
+  },
+  block: {
+    block: 'div',
+    blockquote: 'blockquote',
+    paragraph: ({
+      children,
+      textAlign
+    }) => {
+      return /*#__PURE__*/jsx("p", {
+        style: {
+          textAlign
+        },
+        children: children
+      });
+    },
+    divider: 'hr',
+    heading: ({
+      level,
+      children,
+      textAlign
+    }) => {
+      const Heading = `h${level}`;
+      return /*#__PURE__*/jsx(Heading, {
+        style: {
+          textAlign
+        },
+        children: children
+      });
+    },
+    code: 'pre',
+    list: ({
+      children,
+      type
+    }) => {
+      const List = type === 'ordered' ? 'ol' : 'ul';
+      return /*#__PURE__*/jsx(List, {
+        children: children.map((x, i) => /*#__PURE__*/jsx("li", {
+          children: x
+        }, i))
+      });
+    },
+    layout: ({
+      children,
+      layout
+    }) => {
+      return /*#__PURE__*/jsx("div", {
+        style: {
+          display: 'grid',
+          gridTemplateColumns: layout.map(x => `${x}fr`).join(' ')
+        },
+        children: children.map((element, i) => /*#__PURE__*/jsx("div", {
+          children: element
+        }, i))
+      });
+    }
+  }
+};
+function DocumentNode({
+  node: _node,
+  componentBlocks,
+  renderers
+}) {
+  if (typeof _node.text === 'string') {
+    let child = /*#__PURE__*/jsx(Fragment, {
+      children: _node.text
+    });
+    Object.keys(renderers.inline).forEach(markName => {
+      if (markName !== 'link' && markName !== 'relationship' && _node[markName]) {
+        const Mark = renderers.inline[markName];
+        child = /*#__PURE__*/jsx(Mark, {
+          children: child
+        });
+      }
+    });
+    return child;
+  }
+  const node = _node;
+  const children = node.children.map((x, i) => /*#__PURE__*/jsx(DocumentNode, {
+    node: x,
+    componentBlocks: componentBlocks,
+    renderers: renderers
+  }, i));
+  switch (node.type) {
+    case 'blockquote':
+      {
+        return /*#__PURE__*/jsx(renderers.block.blockquote, {
+          children: children
+        });
+      }
+    case 'paragraph':
+      {
+        return /*#__PURE__*/jsx(renderers.block.paragraph, {
+          textAlign: node.textAlign,
+          children: children
+        });
+      }
+    case 'code':
+      {
+        if (node.children.length === 1 && node.children[0] && typeof node.children[0].text === 'string') {
+          return /*#__PURE__*/jsx(renderers.block.code, {
+            children: node.children[0].text
+          });
+        }
+        break;
+      }
+    case 'layout':
+      {
+        return /*#__PURE__*/jsx(renderers.block.layout, {
+          layout: node.layout,
+          children: children
+        });
+      }
+    case 'divider':
+      {
+        return /*#__PURE__*/jsx(renderers.block.divider, {});
+      }
+    case 'heading':
+      {
+        return /*#__PURE__*/jsx(renderers.block.heading, {
+          textAlign: node.textAlign,
+          level: node.level,
+          children: children
+        });
+      }
+    case 'component-block':
+      {
+        const Comp = componentBlocks[node.component];
+        if (Comp) {
+          const props = createComponentBlockProps(node, children);
+          return /*#__PURE__*/jsx(renderers.block.block, {
+            children: /*#__PURE__*/jsx(Comp, {
+              ...props
+            })
+          });
+        }
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(`[@nixxie-cms/document-renderer] No component block named "${node.component}" was provided; ` + `rendering its children only. Pass it via the \`componentBlocks\` prop.`);
+        }
+        break;
+      }
+    case 'ordered-list':
+    case 'unordered-list':
+      {
+        return /*#__PURE__*/jsx(renderers.block.list, {
+          children: children,
+          type: node.type === 'ordered-list' ? 'ordered' : 'unordered'
+        });
+      }
+    case 'relationship':
+      {
+        const data = node.data;
+        return /*#__PURE__*/jsx(renderers.inline.relationship, {
+          relationship: node.relationship,
+          data: data ? {
+            id: data.id,
+            label: data.label,
+            data: data.data
+          } : null
+        });
+      }
+    case 'link':
+      {
+        return /*#__PURE__*/jsx(renderers.inline.link, {
+          href: node.href,
+          children: children
+        });
+      }
+  }
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+}
+function set(obj, propPath, value) {
+  if (propPath.length === 1) {
+    obj[propPath[0]] = value;
+  } else {
+    const firstElement = propPath.shift();
+    set(obj[firstElement], propPath, value);
+  }
+}
+function createComponentBlockProps(node, children) {
+  const formProps = JSON.parse(JSON.stringify(node.props));
+  node.children.forEach((child, i) => {
+    if (child.propPath) {
+      const propPath = [...child.propPath];
+      set(formProps, propPath, children[i]);
+    }
+  });
+  return formProps;
+}
+function DocumentRenderer(props) {
+  var _props$renderers, _props$renderers2;
+  const renderers = {
+    inline: {
+      ...defaultRenderers.inline,
+      ...((_props$renderers = props.renderers) === null || _props$renderers === void 0 ? void 0 : _props$renderers.inline)
+    },
+    block: {
+      ...defaultRenderers.block,
+      ...((_props$renderers2 = props.renderers) === null || _props$renderers2 === void 0 ? void 0 : _props$renderers2.block)
+    }
+  };
+  const componentBlocks = props.componentBlocks || {};
+  return /*#__PURE__*/jsx(Fragment, {
+    children: props.document.map((x, i) => /*#__PURE__*/jsx(DocumentNode, {
+      node: x,
+      componentBlocks: componentBlocks,
+      renderers: renderers
+    }, i))
+  });
+}
+
+export { DocumentRenderer, defaultRenderers };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nixxie-cms/document-renderer",
   "description": "NixxieCMS Document Renderer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "main": "dist/nixxie-cms-document-renderer.cjs.js",
   "module": "dist/nixxie-cms-document-renderer.esm.js",