@tiptap/static-renderer 3.0.0-beta.0

package/dist/json/react/index.cjs

@@ -0,0 +1,117 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/json/react/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TiptapStaticRenderer: () => TiptapStaticRenderer,
+  renderJSONContentToReactElement: () => renderJSONContentToReactElement
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/json/renderer.ts
+function TiptapStaticRenderer(renderComponent, {
+  nodeMapping,
+  markMapping,
+  unhandledNode,
+  unhandledMark
+}) {
+  return function renderContent({
+    content,
+    parent
+  }) {
+    var _a;
+    const nodeType = typeof content.type === "string" ? content.type : content.type.name;
+    const NodeHandler = (_a = nodeMapping[nodeType]) != null ? _a : unhandledNode;
+    if (!NodeHandler) {
+      throw new Error(`missing handler for node type ${nodeType}`);
+    }
+    const nodeContent = renderComponent({
+      component: NodeHandler,
+      props: {
+        node: content,
+        parent,
+        renderElement: renderContent,
+        // Lazily compute the children to avoid unnecessary recursion
+        get children() {
+          const children = [];
+          if (content.content) {
+            content.content.forEach((child) => {
+              children.push(
+                renderContent({
+                  content: child,
+                  parent: content
+                })
+              );
+            });
+          }
+          return children;
+        }
+      }
+    });
+    const markedContent = content.marks ? content.marks.reduce((acc, mark) => {
+      var _a2;
+      const markType = typeof mark.type === "string" ? mark.type : mark.type.name;
+      const MarkHandler = (_a2 = markMapping[markType]) != null ? _a2 : unhandledMark;
+      if (!MarkHandler) {
+        throw new Error(`missing handler for mark type ${markType}`);
+      }
+      return renderComponent({
+        component: MarkHandler,
+        props: {
+          mark,
+          parent,
+          node: content,
+          children: acc
+        }
+      });
+    }, nodeContent) : nodeContent;
+    return markedContent;
+  };
+}
+
+// src/json/react/react.ts
+var import_react = __toESM(require("react"), 1);
+function renderJSONContentToReactElement(options) {
+  let key = 0;
+  return TiptapStaticRenderer(({ component, props: { children, ...props } }) => {
+    return import_react.default.createElement(
+      component,
+      // eslint-disable-next-line no-plusplus
+      Object.assign(props, { key: key++ }),
+      [].concat(children)
+    );
+  }, options);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TiptapStaticRenderer,
+  renderJSONContentToReactElement
+});
+//# sourceMappingURL=index.cjs.map

package/dist/json/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/json/react/index.ts","../../../src/json/renderer.ts","../../../src/json/react/react.ts"],"sourcesContent":["export * from '../renderer.js'\nexport * from './react.js'\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { MarkType, NodeType } from '@tiptap/core'\n\n/**\n * Props for a node renderer\n */\nexport type NodeProps<TNodeType = any, TChildren = any> = {\n  /**\n   * The current node to render\n   */\n  node: TNodeType\n  /**\n   * Unless the node is the root node, this will always be defined\n   */\n  parent?: TNodeType\n  /**\n   * The children of the current node\n   */\n  children?: TChildren\n  /**\n   * Render a child element\n   */\n  renderElement: (props: {\n    /**\n     * Tiptap JSON content to render\n     */\n    content: TNodeType\n    /**\n     * The parent node of the current node\n     */\n    parent?: TNodeType\n  }) => TChildren\n}\n\n/**\n * Props for a mark renderer\n */\nexport type MarkProps<TMarkType = any, TChildren = any, TNodeType = any> = {\n  /**\n   * The current mark to render\n   */\n  mark: TMarkType\n  /**\n   * The children of the current mark\n   */\n  children?: TChildren\n  /**\n   * The node the current mark is applied to\n   */\n  node: TNodeType\n  /**\n   * The node the current mark is applied to\n   */\n  parent?: TNodeType\n}\n\nexport type TiptapStaticRendererOptions<\n  /**\n   * The return type of the render function (e.g. React.ReactNode, string)\n   */\n  TReturnType,\n  /**\n   * A mark type is either a JSON representation of a mark or a Prosemirror mark instance\n   */\n  TMarkType extends { type: any } = MarkType,\n  /**\n   * A node type is either a JSON representation of a node or a Prosemirror node instance\n   */\n  TNodeType extends {\n    content?: { forEach: (cb: (node: TNodeType) => void) => void }\n    marks?: readonly TMarkType[]\n    type: string | { name: string }\n  } = NodeType,\n  /**\n   * A node renderer is a function that takes a node and its children and returns the rendered output\n   */\n  TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (\n    ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>,\n  ) => TReturnType,\n  /**\n   * A mark renderer is a function that takes a mark and its children and returns the rendered output\n   */\n  TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (\n    ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>,\n  ) => TReturnType,\n> = {\n  /**\n   * Mapping of node types to react components\n   */\n  nodeMapping: Record<string, NoInfer<TNodeRender>>\n  /**\n   * Mapping of mark types to react components\n   */\n  markMapping: Record<string, NoInfer<TMarkRender>>\n  /**\n   * Component to render if a node type is not handled\n   */\n  unhandledNode?: NoInfer<TNodeRender>\n  /**\n   * Component to render if a mark type is not handled\n   */\n  unhandledMark?: NoInfer<TMarkRender>\n}\n\n/**\n * Tiptap Static Renderer\n * ----------------------\n *\n * This function is a basis to allow for different renderers to be created.\n * Generic enough to be able to statically render Prosemirror JSON or Prosemirror Nodes.\n *\n * Using this function, you can create a renderer that takes a JSON representation of a Prosemirror document\n * and renders it using a mapping of node types to React components or even to a string.\n * This function is used as the basis to create the `reactRenderer` and `stringRenderer` functions.\n */\nexport function TiptapStaticRenderer<\n  /**\n   * The return type of the render function (e.g. React.ReactNode, string)\n   */\n  TReturnType,\n  /**\n   * A mark type is either a JSON representation of a mark or a Prosemirror mark instance\n   */\n  TMarkType extends { type: string | { name: string } } = MarkType,\n  /**\n   * A node type is either a JSON representation of a node or a Prosemirror node instance\n   */\n  TNodeType extends {\n    content?: { forEach: (cb: (node: TNodeType) => void) => void }\n    marks?: readonly TMarkType[]\n    type: string | { name: string }\n  } = NodeType,\n  /**\n   * A node renderer is a function that takes a node and its children and returns the rendered output\n   */\n  TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (\n    ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>,\n  ) => TReturnType,\n  /**\n   * A mark renderer is a function that takes a mark and its children and returns the rendered output\n   */\n  TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (\n    ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>,\n  ) => TReturnType,\n>(\n  /**\n   * The function that actually renders the component\n   */\n  renderComponent: (\n    ctx:\n      | {\n          component: TNodeRender\n          props: NodeProps<TNodeType, TReturnType | TReturnType[]>\n        }\n      | {\n          component: TMarkRender\n          props: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>\n        },\n  ) => TReturnType,\n  {\n    nodeMapping,\n    markMapping,\n    unhandledNode,\n    unhandledMark,\n  }: TiptapStaticRendererOptions<TReturnType, TMarkType, TNodeType, TNodeRender, TMarkRender>,\n) {\n  /**\n   * Render Tiptap JSON and all its children using the provided node and mark mappings.\n   */\n  return function renderContent({\n    content,\n    parent,\n  }: {\n    /**\n     * Tiptap JSON content to render\n     */\n    content: TNodeType\n    /**\n     * The parent node of the current node\n     */\n    parent?: TNodeType\n  }): TReturnType {\n    const nodeType = typeof content.type === 'string' ? content.type : content.type.name\n    const NodeHandler = nodeMapping[nodeType] ?? unhandledNode\n\n    if (!NodeHandler) {\n      throw new Error(`missing handler for node type ${nodeType}`)\n    }\n\n    const nodeContent = renderComponent({\n      component: NodeHandler,\n      props: {\n        node: content,\n        parent,\n        renderElement: renderContent,\n        // Lazily compute the children to avoid unnecessary recursion\n        get children() {\n          // recursively render child content nodes\n          const children: TReturnType[] = []\n\n          if (content.content) {\n            content.content.forEach(child => {\n              children.push(\n                renderContent({\n                  content: child,\n                  parent: content,\n                }),\n              )\n            })\n          }\n\n          return children\n        },\n      },\n    })\n\n    // apply marks to the content\n    const markedContent = content.marks\n      ? content.marks.reduce((acc, mark) => {\n          const markType = typeof mark.type === 'string' ? mark.type : mark.type.name\n          const MarkHandler = markMapping[markType] ?? unhandledMark\n\n          if (!MarkHandler) {\n            throw new Error(`missing handler for mark type ${markType}`)\n          }\n\n          return renderComponent({\n            component: MarkHandler,\n            props: {\n              mark,\n              parent,\n              node: content,\n              children: acc,\n            },\n          })\n        }, nodeContent)\n      : nodeContent\n\n    return markedContent\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport type { MarkType, NodeType } from '@tiptap/core'\nimport React from 'react'\n\nimport type { TiptapStaticRendererOptions } from '../renderer.js'\nimport { TiptapStaticRenderer } from '../renderer.js'\n\nexport function renderJSONContentToReactElement<\n  /**\n   * A mark type is either a JSON representation of a mark or a Prosemirror mark instance\n   */\n  TMarkType extends { type: any } = MarkType,\n  /**\n   * A node type is either a JSON representation of a node or a Prosemirror node instance\n   */\n  TNodeType extends {\n    content?: { forEach: (cb: (node: TNodeType) => void) => void }\n    marks?: readonly TMarkType[]\n    type: string | { name: string }\n  } = NodeType,\n>(options: TiptapStaticRendererOptions<React.ReactNode, TMarkType, TNodeType>) {\n  let key = 0\n\n  return TiptapStaticRenderer<React.ReactNode, TMarkType, TNodeType>(({ component, props: { children, ...props } }) => {\n    return React.createElement(\n      component as React.FC<typeof props>,\n      // eslint-disable-next-line no-plusplus\n      Object.assign(props, { key: key++ }),\n      ([] as React.ReactNode[]).concat(children),\n    )\n  }, options)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACmHO,SAAS,qBAiCd,iBAWA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA;AAIA,SAAO,SAAS,cAAc;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,GASgB;AArLlB;AAsLI,UAAM,WAAW,OAAO,QAAQ,SAAS,WAAW,QAAQ,OAAO,QAAQ,KAAK;AAChF,UAAM,eAAc,iBAAY,QAAQ,MAApB,YAAyB;AAE7C,QAAI,CAAC,aAAa;AAChB,YAAM,IAAI,MAAM,iCAAiC,QAAQ,EAAE;AAAA,IAC7D;AAEA,UAAM,cAAc,gBAAgB;AAAA,MAClC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,MAAM;AAAA,QACN;AAAA,QACA,eAAe;AAAA;AAAA,QAEf,IAAI,WAAW;AAEb,gBAAM,WAA0B,CAAC;AAEjC,cAAI,QAAQ,SAAS;AACnB,oBAAQ,QAAQ,QAAQ,WAAS;AAC/B,uBAAS;AAAA,gBACP,cAAc;AAAA,kBACZ,SAAS;AAAA,kBACT,QAAQ;AAAA,gBACV,CAAC;AAAA,cACH;AAAA,YACF,CAAC;AAAA,UACH;AAEA,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,CAAC;AAGD,UAAM,gBAAgB,QAAQ,QAC1B,QAAQ,MAAM,OAAO,CAAC,KAAK,SAAS;AA1N5C,UAAAA;AA2NU,YAAM,WAAW,OAAO,KAAK,SAAS,WAAW,KAAK,OAAO,KAAK,KAAK;AACvE,YAAM,eAAcA,MAAA,YAAY,QAAQ,MAApB,OAAAA,MAAyB;AAE7C,UAAI,CAAC,aAAa;AAChB,cAAM,IAAI,MAAM,iCAAiC,QAAQ,EAAE;AAAA,MAC7D;AAEA,aAAO,gBAAgB;AAAA,QACrB,WAAW;AAAA,QACX,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA,MAAM;AAAA,UACN,UAAU;AAAA,QACZ;AAAA,MACF,CAAC;AAAA,IACH,GAAG,WAAW,IACd;AAEJ,WAAO;AAAA,EACT;AACF;;;AC7OA,mBAAkB;AAKX,SAAS,gCAad,SAA6E;AAC7E,MAAI,MAAM;AAEV,SAAO,qBAA4D,CAAC,EAAE,WAAW,OAAO,EAAE,UAAU,GAAG,MAAM,EAAE,MAAM;AACnH,WAAO,aAAAC,QAAM;AAAA,MACX;AAAA;AAAA,MAEA,OAAO,OAAO,OAAO,EAAE,KAAK,MAAM,CAAC;AAAA,MAClC,CAAC,EAAwB,OAAO,QAAQ;AAAA,IAC3C;AAAA,EACF,GAAG,OAAO;AACZ;","names":["_a","React"]}

package/dist/json/react/index.d.cts

@@ -0,0 +1,190 @@
+import { MarkType, NodeType } from '@tiptap/core';
+import React from 'react';
+
+/**
+ * Props for a node renderer
+ */
+type NodeProps<TNodeType = any, TChildren = any> = {
+    /**
+     * The current node to render
+     */
+    node: TNodeType;
+    /**
+     * Unless the node is the root node, this will always be defined
+     */
+    parent?: TNodeType;
+    /**
+     * The children of the current node
+     */
+    children?: TChildren;
+    /**
+     * Render a child element
+     */
+    renderElement: (props: {
+        /**
+         * Tiptap JSON content to render
+         */
+        content: TNodeType;
+        /**
+         * The parent node of the current node
+         */
+        parent?: TNodeType;
+    }) => TChildren;
+};
+/**
+ * Props for a mark renderer
+ */
+type MarkProps<TMarkType = any, TChildren = any, TNodeType = any> = {
+    /**
+     * The current mark to render
+     */
+    mark: TMarkType;
+    /**
+     * The children of the current mark
+     */
+    children?: TChildren;
+    /**
+     * The node the current mark is applied to
+     */
+    node: TNodeType;
+    /**
+     * The node the current mark is applied to
+     */
+    parent?: TNodeType;
+};
+type TiptapStaticRendererOptions<
+/**
+ * The return type of the render function (e.g. React.ReactNode, string)
+ */
+TReturnType, 
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+TMarkType extends {
+    type: any;
+} = MarkType, 
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+TNodeType extends {
+    content?: {
+        forEach: (cb: (node: TNodeType) => void) => void;
+    };
+    marks?: readonly TMarkType[];
+    type: string | {
+        name: string;
+    };
+} = NodeType, 
+/**
+ * A node renderer is a function that takes a node and its children and returns the rendered output
+ */
+TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType, 
+/**
+ * A mark renderer is a function that takes a mark and its children and returns the rendered output
+ */
+TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType> = {
+    /**
+     * Mapping of node types to react components
+     */
+    nodeMapping: Record<string, NoInfer<TNodeRender>>;
+    /**
+     * Mapping of mark types to react components
+     */
+    markMapping: Record<string, NoInfer<TMarkRender>>;
+    /**
+     * Component to render if a node type is not handled
+     */
+    unhandledNode?: NoInfer<TNodeRender>;
+    /**
+     * Component to render if a mark type is not handled
+     */
+    unhandledMark?: NoInfer<TMarkRender>;
+};
+/**
+ * Tiptap Static Renderer
+ * ----------------------
+ *
+ * This function is a basis to allow for different renderers to be created.
+ * Generic enough to be able to statically render Prosemirror JSON or Prosemirror Nodes.
+ *
+ * Using this function, you can create a renderer that takes a JSON representation of a Prosemirror document
+ * and renders it using a mapping of node types to React components or even to a string.
+ * This function is used as the basis to create the `reactRenderer` and `stringRenderer` functions.
+ */
+declare function TiptapStaticRenderer<
+/**
+ * The return type of the render function (e.g. React.ReactNode, string)
+ */
+TReturnType, 
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+TMarkType extends {
+    type: string | {
+        name: string;
+    };
+} = MarkType, 
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+TNodeType extends {
+    content?: {
+        forEach: (cb: (node: TNodeType) => void) => void;
+    };
+    marks?: readonly TMarkType[];
+    type: string | {
+        name: string;
+    };
+} = NodeType, 
+/**
+ * A node renderer is a function that takes a node and its children and returns the rendered output
+ */
+TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType, 
+/**
+ * A mark renderer is a function that takes a mark and its children and returns the rendered output
+ */
+TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType>(
+/**
+ * The function that actually renders the component
+ */
+renderComponent: (ctx: {
+    component: TNodeRender;
+    props: NodeProps<TNodeType, TReturnType | TReturnType[]>;
+} | {
+    component: TMarkRender;
+    props: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>;
+}) => TReturnType, { nodeMapping, markMapping, unhandledNode, unhandledMark, }: TiptapStaticRendererOptions<TReturnType, TMarkType, TNodeType, TNodeRender, TMarkRender>): ({ content, parent, }: {
+    /**
+     * Tiptap JSON content to render
+     */
+    content: TNodeType;
+    /**
+     * The parent node of the current node
+     */
+    parent?: TNodeType;
+}) => TReturnType;
+
+declare function renderJSONContentToReactElement<
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+TMarkType extends {
+    type: any;
+} = MarkType, 
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+TNodeType extends {
+    content?: {
+        forEach: (cb: (node: TNodeType) => void) => void;
+    };
+    marks?: readonly TMarkType[];
+    type: string | {
+        name: string;
+    };
+} = NodeType>(options: TiptapStaticRendererOptions<React.ReactNode, TMarkType, TNodeType>): ({ content, parent, }: {
+    content: TNodeType;
+    parent?: TNodeType | undefined;
+}) => React.ReactNode;
+
+export { type MarkProps, type NodeProps, TiptapStaticRenderer, type TiptapStaticRendererOptions, renderJSONContentToReactElement };

package/dist/json/react/index.d.ts

@@ -0,0 +1,190 @@
+import { MarkType, NodeType } from '@tiptap/core';
+import React from 'react';
+
+/**
+ * Props for a node renderer
+ */
+type NodeProps<TNodeType = any, TChildren = any> = {
+    /**
+     * The current node to render
+     */
+    node: TNodeType;
+    /**
+     * Unless the node is the root node, this will always be defined
+     */
+    parent?: TNodeType;
+    /**
+     * The children of the current node
+     */
+    children?: TChildren;
+    /**
+     * Render a child element
+     */
+    renderElement: (props: {
+        /**
+         * Tiptap JSON content to render
+         */
+        content: TNodeType;
+        /**
+         * The parent node of the current node
+         */
+        parent?: TNodeType;
+    }) => TChildren;
+};
+/**
+ * Props for a mark renderer
+ */
+type MarkProps<TMarkType = any, TChildren = any, TNodeType = any> = {
+    /**
+     * The current mark to render
+     */
+    mark: TMarkType;
+    /**
+     * The children of the current mark
+     */
+    children?: TChildren;
+    /**
+     * The node the current mark is applied to
+     */
+    node: TNodeType;
+    /**
+     * The node the current mark is applied to
+     */
+    parent?: TNodeType;
+};
+type TiptapStaticRendererOptions<
+/**
+ * The return type of the render function (e.g. React.ReactNode, string)
+ */
+TReturnType, 
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+TMarkType extends {
+    type: any;
+} = MarkType, 
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+TNodeType extends {
+    content?: {
+        forEach: (cb: (node: TNodeType) => void) => void;
+    };
+    marks?: readonly TMarkType[];
+    type: string | {
+        name: string;
+    };
+} = NodeType, 
+/**
+ * A node renderer is a function that takes a node and its children and returns the rendered output
+ */
+TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType, 
+/**
+ * A mark renderer is a function that takes a mark and its children and returns the rendered output
+ */
+TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType> = {
+    /**
+     * Mapping of node types to react components
+     */
+    nodeMapping: Record<string, NoInfer<TNodeRender>>;
+    /**
+     * Mapping of mark types to react components
+     */
+    markMapping: Record<string, NoInfer<TMarkRender>>;
+    /**
+     * Component to render if a node type is not handled
+     */
+    unhandledNode?: NoInfer<TNodeRender>;
+    /**
+     * Component to render if a mark type is not handled
+     */
+    unhandledMark?: NoInfer<TMarkRender>;
+};
+/**
+ * Tiptap Static Renderer
+ * ----------------------
+ *
+ * This function is a basis to allow for different renderers to be created.
+ * Generic enough to be able to statically render Prosemirror JSON or Prosemirror Nodes.
+ *
+ * Using this function, you can create a renderer that takes a JSON representation of a Prosemirror document
+ * and renders it using a mapping of node types to React components or even to a string.
+ * This function is used as the basis to create the `reactRenderer` and `stringRenderer` functions.
+ */
+declare function TiptapStaticRenderer<
+/**
+ * The return type of the render function (e.g. React.ReactNode, string)
+ */
+TReturnType, 
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+TMarkType extends {
+    type: string | {
+        name: string;
+    };
+} = MarkType, 
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+TNodeType extends {
+    content?: {
+        forEach: (cb: (node: TNodeType) => void) => void;
+    };
+    marks?: readonly TMarkType[];
+    type: string | {
+        name: string;
+    };
+} = NodeType, 
+/**
+ * A node renderer is a function that takes a node and its children and returns the rendered output
+ */
+TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType, 
+/**
+ * A mark renderer is a function that takes a mark and its children and returns the rendered output
+ */
+TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType>(
+/**
+ * The function that actually renders the component
+ */
+renderComponent: (ctx: {
+    component: TNodeRender;
+    props: NodeProps<TNodeType, TReturnType | TReturnType[]>;
+} | {
+    component: TMarkRender;
+    props: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>;
+}) => TReturnType, { nodeMapping, markMapping, unhandledNode, unhandledMark, }: TiptapStaticRendererOptions<TReturnType, TMarkType, TNodeType, TNodeRender, TMarkRender>): ({ content, parent, }: {
+    /**
+     * Tiptap JSON content to render
+     */
+    content: TNodeType;
+    /**
+     * The parent node of the current node
+     */
+    parent?: TNodeType;
+}) => TReturnType;
+
+declare function renderJSONContentToReactElement<
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+TMarkType extends {
+    type: any;
+} = MarkType, 
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+TNodeType extends {
+    content?: {
+        forEach: (cb: (node: TNodeType) => void) => void;
+    };
+    marks?: readonly TMarkType[];
+    type: string | {
+        name: string;
+    };
+} = NodeType>(options: TiptapStaticRendererOptions<React.ReactNode, TMarkType, TNodeType>): ({ content, parent, }: {
+    content: TNodeType;
+    parent?: TNodeType | undefined;
+}) => React.ReactNode;
+
+export { type MarkProps, type NodeProps, TiptapStaticRenderer, type TiptapStaticRendererOptions, renderJSONContentToReactElement };

package/dist/json/react/index.js

@@ -0,0 +1,79 @@
+// src/json/renderer.ts
+function TiptapStaticRenderer(renderComponent, {
+  nodeMapping,
+  markMapping,
+  unhandledNode,
+  unhandledMark
+}) {
+  return function renderContent({
+    content,
+    parent
+  }) {
+    var _a;
+    const nodeType = typeof content.type === "string" ? content.type : content.type.name;
+    const NodeHandler = (_a = nodeMapping[nodeType]) != null ? _a : unhandledNode;
+    if (!NodeHandler) {
+      throw new Error(`missing handler for node type ${nodeType}`);
+    }
+    const nodeContent = renderComponent({
+      component: NodeHandler,
+      props: {
+        node: content,
+        parent,
+        renderElement: renderContent,
+        // Lazily compute the children to avoid unnecessary recursion
+        get children() {
+          const children = [];
+          if (content.content) {
+            content.content.forEach((child) => {
+              children.push(
+                renderContent({
+                  content: child,
+                  parent: content
+                })
+              );
+            });
+          }
+          return children;
+        }
+      }
+    });
+    const markedContent = content.marks ? content.marks.reduce((acc, mark) => {
+      var _a2;
+      const markType = typeof mark.type === "string" ? mark.type : mark.type.name;
+      const MarkHandler = (_a2 = markMapping[markType]) != null ? _a2 : unhandledMark;
+      if (!MarkHandler) {
+        throw new Error(`missing handler for mark type ${markType}`);
+      }
+      return renderComponent({
+        component: MarkHandler,
+        props: {
+          mark,
+          parent,
+          node: content,
+          children: acc
+        }
+      });
+    }, nodeContent) : nodeContent;
+    return markedContent;
+  };
+}
+
+// src/json/react/react.ts
+import React from "react";
+function renderJSONContentToReactElement(options) {
+  let key = 0;
+  return TiptapStaticRenderer(({ component, props: { children, ...props } }) => {
+    return React.createElement(
+      component,
+      // eslint-disable-next-line no-plusplus
+      Object.assign(props, { key: key++ }),
+      [].concat(children)
+    );
+  }, options);
+}
+export {
+  TiptapStaticRenderer,
+  renderJSONContentToReactElement
+};
+//# sourceMappingURL=index.js.map

package/dist/json/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/json/renderer.ts","../../../src/json/react/react.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { MarkType, NodeType } from '@tiptap/core'\n\n/**\n * Props for a node renderer\n */\nexport type NodeProps<TNodeType = any, TChildren = any> = {\n  /**\n   * The current node to render\n   */\n  node: TNodeType\n  /**\n   * Unless the node is the root node, this will always be defined\n   */\n  parent?: TNodeType\n  /**\n   * The children of the current node\n   */\n  children?: TChildren\n  /**\n   * Render a child element\n   */\n  renderElement: (props: {\n    /**\n     * Tiptap JSON content to render\n     */\n    content: TNodeType\n    /**\n     * The parent node of the current node\n     */\n    parent?: TNodeType\n  }) => TChildren\n}\n\n/**\n * Props for a mark renderer\n */\nexport type MarkProps<TMarkType = any, TChildren = any, TNodeType = any> = {\n  /**\n   * The current mark to render\n   */\n  mark: TMarkType\n  /**\n   * The children of the current mark\n   */\n  children?: TChildren\n  /**\n   * The node the current mark is applied to\n   */\n  node: TNodeType\n  /**\n   * The node the current mark is applied to\n   */\n  parent?: TNodeType\n}\n\nexport type TiptapStaticRendererOptions<\n  /**\n   * The return type of the render function (e.g. React.ReactNode, string)\n   */\n  TReturnType,\n  /**\n   * A mark type is either a JSON representation of a mark or a Prosemirror mark instance\n   */\n  TMarkType extends { type: any } = MarkType,\n  /**\n   * A node type is either a JSON representation of a node or a Prosemirror node instance\n   */\n  TNodeType extends {\n    content?: { forEach: (cb: (node: TNodeType) => void) => void }\n    marks?: readonly TMarkType[]\n    type: string | { name: string }\n  } = NodeType,\n  /**\n   * A node renderer is a function that takes a node and its children and returns the rendered output\n   */\n  TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (\n    ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>,\n  ) => TReturnType,\n  /**\n   * A mark renderer is a function that takes a mark and its children and returns the rendered output\n   */\n  TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (\n    ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>,\n  ) => TReturnType,\n> = {\n  /**\n   * Mapping of node types to react components\n   */\n  nodeMapping: Record<string, NoInfer<TNodeRender>>\n  /**\n   * Mapping of mark types to react components\n   */\n  markMapping: Record<string, NoInfer<TMarkRender>>\n  /**\n   * Component to render if a node type is not handled\n   */\n  unhandledNode?: NoInfer<TNodeRender>\n  /**\n   * Component to render if a mark type is not handled\n   */\n  unhandledMark?: NoInfer<TMarkRender>\n}\n\n/**\n * Tiptap Static Renderer\n * ----------------------\n *\n * This function is a basis to allow for different renderers to be created.\n * Generic enough to be able to statically render Prosemirror JSON or Prosemirror Nodes.\n *\n * Using this function, you can create a renderer that takes a JSON representation of a Prosemirror document\n * and renders it using a mapping of node types to React components or even to a string.\n * This function is used as the basis to create the `reactRenderer` and `stringRenderer` functions.\n */\nexport function TiptapStaticRenderer<\n  /**\n   * The return type of the render function (e.g. React.ReactNode, string)\n   */\n  TReturnType,\n  /**\n   * A mark type is either a JSON representation of a mark or a Prosemirror mark instance\n   */\n  TMarkType extends { type: string | { name: string } } = MarkType,\n  /**\n   * A node type is either a JSON representation of a node or a Prosemirror node instance\n   */\n  TNodeType extends {\n    content?: { forEach: (cb: (node: TNodeType) => void) => void }\n    marks?: readonly TMarkType[]\n    type: string | { name: string }\n  } = NodeType,\n  /**\n   * A node renderer is a function that takes a node and its children and returns the rendered output\n   */\n  TNodeRender extends (ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>) => TReturnType = (\n    ctx: NodeProps<TNodeType, TReturnType | TReturnType[]>,\n  ) => TReturnType,\n  /**\n   * A mark renderer is a function that takes a mark and its children and returns the rendered output\n   */\n  TMarkRender extends (ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>) => TReturnType = (\n    ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>,\n  ) => TReturnType,\n>(\n  /**\n   * The function that actually renders the component\n   */\n  renderComponent: (\n    ctx:\n      | {\n          component: TNodeRender\n          props: NodeProps<TNodeType, TReturnType | TReturnType[]>\n        }\n      | {\n          component: TMarkRender\n          props: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>\n        },\n  ) => TReturnType,\n  {\n    nodeMapping,\n    markMapping,\n    unhandledNode,\n    unhandledMark,\n  }: TiptapStaticRendererOptions<TReturnType, TMarkType, TNodeType, TNodeRender, TMarkRender>,\n) {\n  /**\n   * Render Tiptap JSON and all its children using the provided node and mark mappings.\n   */\n  return function renderContent({\n    content,\n    parent,\n  }: {\n    /**\n     * Tiptap JSON content to render\n     */\n    content: TNodeType\n    /**\n     * The parent node of the current node\n     */\n    parent?: TNodeType\n  }): TReturnType {\n    const nodeType = typeof content.type === 'string' ? content.type : content.type.name\n    const NodeHandler = nodeMapping[nodeType] ?? unhandledNode\n\n    if (!NodeHandler) {\n      throw new Error(`missing handler for node type ${nodeType}`)\n    }\n\n    const nodeContent = renderComponent({\n      component: NodeHandler,\n      props: {\n        node: content,\n        parent,\n        renderElement: renderContent,\n        // Lazily compute the children to avoid unnecessary recursion\n        get children() {\n          // recursively render child content nodes\n          const children: TReturnType[] = []\n\n          if (content.content) {\n            content.content.forEach(child => {\n              children.push(\n                renderContent({\n                  content: child,\n                  parent: content,\n                }),\n              )\n            })\n          }\n\n          return children\n        },\n      },\n    })\n\n    // apply marks to the content\n    const markedContent = content.marks\n      ? content.marks.reduce((acc, mark) => {\n          const markType = typeof mark.type === 'string' ? mark.type : mark.type.name\n          const MarkHandler = markMapping[markType] ?? unhandledMark\n\n          if (!MarkHandler) {\n            throw new Error(`missing handler for mark type ${markType}`)\n          }\n\n          return renderComponent({\n            component: MarkHandler,\n            props: {\n              mark,\n              parent,\n              node: content,\n              children: acc,\n            },\n          })\n        }, nodeContent)\n      : nodeContent\n\n    return markedContent\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport type { MarkType, NodeType } from '@tiptap/core'\nimport React from 'react'\n\nimport type { TiptapStaticRendererOptions } from '../renderer.js'\nimport { TiptapStaticRenderer } from '../renderer.js'\n\nexport function renderJSONContentToReactElement<\n  /**\n   * A mark type is either a JSON representation of a mark or a Prosemirror mark instance\n   */\n  TMarkType extends { type: any } = MarkType,\n  /**\n   * A node type is either a JSON representation of a node or a Prosemirror node instance\n   */\n  TNodeType extends {\n    content?: { forEach: (cb: (node: TNodeType) => void) => void }\n    marks?: readonly TMarkType[]\n    type: string | { name: string }\n  } = NodeType,\n>(options: TiptapStaticRendererOptions<React.ReactNode, TMarkType, TNodeType>) {\n  let key = 0\n\n  return TiptapStaticRenderer<React.ReactNode, TMarkType, TNodeType>(({ component, props: { children, ...props } }) => {\n    return React.createElement(\n      component as React.FC<typeof props>,\n      // eslint-disable-next-line no-plusplus\n      Object.assign(props, { key: key++ }),\n      ([] as React.ReactNode[]).concat(children),\n    )\n  }, options)\n}\n"],"mappings":";AAmHO,SAAS,qBAiCd,iBAWA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA;AAIA,SAAO,SAAS,cAAc;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,GASgB;AArLlB;AAsLI,UAAM,WAAW,OAAO,QAAQ,SAAS,WAAW,QAAQ,OAAO,QAAQ,KAAK;AAChF,UAAM,eAAc,iBAAY,QAAQ,MAApB,YAAyB;AAE7C,QAAI,CAAC,aAAa;AAChB,YAAM,IAAI,MAAM,iCAAiC,QAAQ,EAAE;AAAA,IAC7D;AAEA,UAAM,cAAc,gBAAgB;AAAA,MAClC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,MAAM;AAAA,QACN;AAAA,QACA,eAAe;AAAA;AAAA,QAEf,IAAI,WAAW;AAEb,gBAAM,WAA0B,CAAC;AAEjC,cAAI,QAAQ,SAAS;AACnB,oBAAQ,QAAQ,QAAQ,WAAS;AAC/B,uBAAS;AAAA,gBACP,cAAc;AAAA,kBACZ,SAAS;AAAA,kBACT,QAAQ;AAAA,gBACV,CAAC;AAAA,cACH;AAAA,YACF,CAAC;AAAA,UACH;AAEA,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,CAAC;AAGD,UAAM,gBAAgB,QAAQ,QAC1B,QAAQ,MAAM,OAAO,CAAC,KAAK,SAAS;AA1N5C,UAAAA;AA2NU,YAAM,WAAW,OAAO,KAAK,SAAS,WAAW,KAAK,OAAO,KAAK,KAAK;AACvE,YAAM,eAAcA,MAAA,YAAY,QAAQ,MAApB,OAAAA,MAAyB;AAE7C,UAAI,CAAC,aAAa;AAChB,cAAM,IAAI,MAAM,iCAAiC,QAAQ,EAAE;AAAA,MAC7D;AAEA,aAAO,gBAAgB;AAAA,QACrB,WAAW;AAAA,QACX,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA,MAAM;AAAA,UACN,UAAU;AAAA,QACZ;AAAA,MACF,CAAC;AAAA,IACH,GAAG,WAAW,IACd;AAEJ,WAAO;AAAA,EACT;AACF;;;AC7OA,OAAO,WAAW;AAKX,SAAS,gCAad,SAA6E;AAC7E,MAAI,MAAM;AAEV,SAAO,qBAA4D,CAAC,EAAE,WAAW,OAAO,EAAE,UAAU,GAAG,MAAM,EAAE,MAAM;AACnH,WAAO,MAAM;AAAA,MACX;AAAA;AAAA,MAEA,OAAO,OAAO,OAAO,EAAE,KAAK,MAAM,CAAC;AAAA,MAClC,CAAC,EAAwB,OAAO,QAAQ;AAAA,IAC3C;AAAA,EACF,GAAG,OAAO;AACZ;","names":["_a"]}