@nixxie-cms/document-renderer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nixxie International DMCC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

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

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

@@ -0,0 +1,16 @@
+"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
+
+// 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, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.tsx");
+
+unregister();

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@nixxie-cms/document-renderer",
+  "description": "NixxieCMS Document Renderer",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "dist/nixxie-cms-document-renderer.cjs.js",
+  "module": "dist/nixxie-cms-document-renderer.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/nixxie-cms-document-renderer.cjs.js",
+      "module": "./dist/nixxie-cms-document-renderer.esm.js",
+      "default": "./dist/nixxie-cms-document-renderer.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^16.14.0 || 17 || 18 || 19"
+  },
+  "devDependencies": {
+    "react": "^19.2.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nixxiecms/nixxie/tree/main/packages/document-renderer"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,252 @@
+import { Fragment, type JSX, type ReactElement, 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 const defaultRenderers: Renderers = {
+  inline: {
+    bold: 'strong',
+    code: 'code',
+    keyboard: 'kbd',
+    strikethrough: 's',
+    italic: 'em',
+    link: 'a',
+    subscript: 'sub',
+    superscript: 'sup',
+    underline: 'u',
+    relationship: ({ data }) => {
+      return <span>{data?.label || data?.id}</span>
+    },
+  },
+  block: {
+    block: 'div',
+    blockquote: 'blockquote',
+    paragraph: ({ children, textAlign }) => {
+      return <p style={{ textAlign }}>{children}</p>
+    },
+    divider: 'hr',
+    heading: ({ level, children, textAlign }) => {
+      const Heading = `h${level}` as 'h1'
+      return <Heading style={{ textAlign }} children={children} />
+    },
+    code: 'pre',
+    list: ({ children, type }) => {
+      const List = type === 'ordered' ? 'ol' : 'ul'
+      return (
+        <List>
+          {children.map((x, i) => (
+            <li key={i}>{x}</li>
+          ))}
+        </List>
+      )
+    },
+    layout: ({ children, layout }) => {
+      return (
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: layout.map(x => `${x}fr`).join(' '),
+          }}
+        >
+          {children.map((element, i) => (
+            <div key={i}>{element}</div>
+          ))}
+        </div>
+      )
+    },
+  },
+}
+
+function DocumentNode({
+  node: _node,
+  componentBlocks,
+  renderers,
+}: {
+  node: Element | Text
+  renderers: Renderers
+  // TODO: allow inferring from the component blocks
+  componentBlocks: Record<string, Component<any>>
+}): ReactElement {
+  if (typeof _node.text === 'string') {
+    let child = <Fragment>{_node.text}</Fragment>
+    ;(Object.keys(renderers.inline) as (keyof typeof renderers.inline)[]).forEach(markName => {
+      if (markName !== 'link' && markName !== 'relationship' && _node[markName]) {
+        const Mark = renderers.inline[markName]
+        child = <Mark>{child}</Mark>
+      }
+    })
+
+    return child
+  }
+  const node = _node as Element
+  const children = node.children.map((x, i) => (
+    <DocumentNode node={x} componentBlocks={componentBlocks} renderers={renderers} key={i} />
+  ))
+  switch (node.type as string) {
+    case 'blockquote': {
+      return <renderers.block.blockquote children={children} />
+    }
+    case 'paragraph': {
+      return <renderers.block.paragraph textAlign={node.textAlign as any} children={children} />
+    }
+    case 'code': {
+      if (
+        node.children.length === 1 &&
+        node.children[0] &&
+        typeof node.children[0].text === 'string'
+      ) {
+        return <renderers.block.code>{node.children[0].text}</renderers.block.code>
+      }
+      break
+    }
+    case 'layout': {
+      return <renderers.block.layout layout={node.layout as any} children={children} />
+    }
+    case 'divider': {
+      return <renderers.block.divider />
+    }
+    case 'heading': {
+      return (
+        <renderers.block.heading
+          textAlign={node.textAlign as any}
+          level={node.level as any}
+          children={children}
+        />
+      )
+    }
+    case 'component-block': {
+      const Comp = componentBlocks[node.component as string]
+      if (Comp) {
+        const props = createComponentBlockProps(node, children)
+        return (
+          <renderers.block.block>
+            <Comp {...props} />
+          </renderers.block.block>
+        )
+      }
+      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 (
+        <renderers.block.list
+          children={children}
+          type={node.type === 'ordered-list' ? 'ordered' : 'unordered'}
+        />
+      )
+    }
+    case 'relationship': {
+      const data = node.data as any
+      return (
+        <renderers.inline.relationship
+          relationship={node.relationship as string}
+          data={data ? { id: data.id, label: data.label, data: data.data } : null}
+        />
+      )
+    }
+    case 'link': {
+      return <renderers.inline.link href={node.href as string}>{children}</renderers.inline.link>
+    }
+  }
+  return <Fragment>{children}</Fragment>
+}
+
+function set(obj: Record<string, any>, propPath: (string | number)[], value: any) {
+  if (propPath.length === 1) {
+    obj[propPath[0]] = value
+  } else {
+    const firstElement = propPath.shift()!
+    set(obj[firstElement], propPath, value)
+  }
+}
+
+function createComponentBlockProps(node: Element, children: ReactElement[]) {
+  const formProps = JSON.parse(JSON.stringify(node.props))
+  node.children.forEach((child, i) => {
+    if (child.propPath) {
+      const propPath = [...(child.propPath as any)]
+      set(formProps, propPath, children[i])
+    }
+  })
+  return formProps
+}
+
+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 function DocumentRenderer<ComponentBlocks extends Record<string, Component<any>>>(
+  props: DocumentRendererProps<ComponentBlocks>
+) {
+  const renderers = {
+    inline: { ...defaultRenderers.inline, ...props.renderers?.inline },
+    block: { ...defaultRenderers.block, ...props.renderers?.block },
+  }
+  const componentBlocks = props.componentBlocks || {}
+  return (
+    <Fragment>
+      {props.document.map((x, i) => (
+        <DocumentNode node={x} componentBlocks={componentBlocks} renderers={renderers} key={i} />
+      ))}
+    </Fragment>
+  )
+}