@tiptap/static-renderer 3.0.0-next.1 → 3.0.0-next.5

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025, Tiptap GmbH
+
+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/README.md

@@ -7,7 +7,7 @@
 
 ## Introduction
 
-Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as _New York Times_, _The Guardian_ or _Atlassian_.
 
 ## Official Documentation
 

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "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)
@@ -15,15 +17,36 @@ var __copyProps = (to, from, except, desc) => {
   }
   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/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
+  TiptapStaticRenderer: () => TiptapStaticRenderer,
+  domOutputSpecToHTMLString: () => domOutputSpecToHTMLString,
+  domOutputSpecToReactElement: () => domOutputSpecToReactElement,
   getAttributes: () => getAttributes,
-  getHTMLAttributes: () => getHTMLAttributes
+  getHTMLAttributes: () => getHTMLAttributes,
+  mapMarkExtensionToReactNode: () => mapMarkExtensionToReactNode,
+  mapNodeExtensionToReactNode: () => mapNodeExtensionToReactNode,
+  renderJSONContentToReactElement: () => renderJSONContentToReactElement,
+  renderJSONContentToString: () => renderJSONContentToString,
+  renderToElement: () => renderToElement,
+  renderToHTMLString: () => renderToHTMLString,
+  renderToMarkdown: () => renderToMarkdown,
+  renderToReactElement: () => renderToReactElement,
+  serializeAttrsToHTMLString: () => serializeAttrsToHTMLString,
+  serializeChildrenToHTMLString: () => serializeChildrenToHTMLString
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/helpers.ts
 var import_core = require("@tiptap/core");
@@ -33,7 +56,7 @@ function getAttributes(nodeOrMark, extensionAttributes, onlyRenderedAttributes)
     return {};
   }
   return extensionAttributes.filter((item) => {
-    if (item.type !== nodeOrMark.type) {
+    if (item.type !== (typeof nodeOrMark.type === "string" ? nodeOrMark.type : nodeOrMark.type.name)) {
       return false;
     }
     if (onlyRenderedAttributes) {
@@ -54,9 +77,553 @@ function getAttributes(nodeOrMark, extensionAttributes, onlyRenderedAttributes)
 function getHTMLAttributes(nodeOrMark, extensionAttributes) {
   return getAttributes(nodeOrMark, extensionAttributes, true);
 }
+
+// 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/html-string/string.ts
+function renderJSONContentToString(options) {
+  return TiptapStaticRenderer((ctx) => {
+    return ctx.component(ctx.props);
+  }, options);
+}
+function serializeAttrsToHTMLString(attrs) {
+  const output = Object.entries(attrs || {}).map(([key, value]) => `${key.split(" ").at(-1)}=${JSON.stringify(value)}`).join(" ");
+  return output ? ` ${output}` : "";
+}
+function serializeChildrenToHTMLString(children) {
+  return [].concat(children || "").filter(Boolean).join("");
+}
+
+// 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);
+}
+
+// src/pm/extensionRenderer.ts
+var import_core2 = require("@tiptap/core");
+var import_model = require("@tiptap/pm/model");
+function mapNodeExtensionToReactNode(domOutputSpecToElement, extension, extensionAttributes, options) {
+  const context = {
+    name: extension.name,
+    options: extension.options,
+    storage: extension.storage,
+    parent: extension.parent
+  };
+  const renderToHTML = (0, import_core2.getExtensionField)(extension, "renderHTML", context);
+  if (!renderToHTML) {
+    if (options == null ? void 0 : options.unhandledNode) {
+      return [extension.name, options.unhandledNode];
+    }
+    return [
+      extension.name,
+      () => {
+        throw new Error(
+          `[tiptap error]: Node ${extension.name} cannot be rendered, it is missing a "renderToHTML" method, please implement it or override the corresponding "nodeMapping" method to have a custom rendering`
+        );
+      }
+    ];
+  }
+  return [
+    extension.name,
+    ({ node, children }) => {
+      try {
+        return domOutputSpecToElement(
+          renderToHTML({
+            node,
+            HTMLAttributes: getHTMLAttributes(node, extensionAttributes)
+          })
+        )(children);
+      } catch (e) {
+        throw new Error(
+          `[tiptap error]: Node ${extension.name} cannot be rendered, it's "renderToHTML" method threw an error: ${e.message}`,
+          { cause: e }
+        );
+      }
+    }
+  ];
+}
+function mapMarkExtensionToReactNode(domOutputSpecToElement, extension, extensionAttributes, options) {
+  const context = {
+    name: extension.name,
+    options: extension.options,
+    storage: extension.storage,
+    parent: extension.parent
+  };
+  const renderToHTML = (0, import_core2.getExtensionField)(extension, "renderHTML", context);
+  if (!renderToHTML) {
+    if (options == null ? void 0 : options.unhandledMark) {
+      return [extension.name, options.unhandledMark];
+    }
+    return [
+      extension.name,
+      () => {
+        throw new Error(`Node ${extension.name} cannot be rendered, it is missing a "renderToHTML" method`);
+      }
+    ];
+  }
+  return [
+    extension.name,
+    ({ mark, children }) => {
+      try {
+        return domOutputSpecToElement(
+          renderToHTML({
+            mark,
+            HTMLAttributes: getHTMLAttributes(mark, extensionAttributes)
+          })
+        )(children);
+      } catch (e) {
+        throw new Error(
+          `[tiptap error]: Mark ${extension.name} cannot be rendered, it's "renderToHTML" method threw an error: ${e.message}`,
+          { cause: e }
+        );
+      }
+    }
+  ];
+}
+function renderToElement({
+  renderer,
+  domOutputSpecToElement,
+  mapDefinedTypes,
+  content,
+  extensions,
+  options
+}) {
+  extensions = (0, import_core2.resolveExtensions)(extensions);
+  const extensionAttributes = (0, import_core2.getAttributesFromExtensions)(extensions);
+  const { nodeExtensions, markExtensions } = (0, import_core2.splitExtensions)(extensions);
+  if (!(content instanceof import_model.Node)) {
+    content = import_model.Node.fromJSON((0, import_core2.getSchemaByResolvedExtensions)(extensions), content);
+  }
+  return renderer({
+    ...options,
+    nodeMapping: {
+      ...Object.fromEntries(
+        nodeExtensions.filter((e) => {
+          if (e.name in mapDefinedTypes) {
+            return false;
+          }
+          if (options == null ? void 0 : options.nodeMapping) {
+            return !(e.name in options.nodeMapping);
+          }
+          return true;
+        }).map(
+          (nodeExtension) => mapNodeExtensionToReactNode(domOutputSpecToElement, nodeExtension, extensionAttributes, options)
+        )
+      ),
+      ...mapDefinedTypes,
+      ...options == null ? void 0 : options.nodeMapping
+    },
+    markMapping: {
+      ...Object.fromEntries(
+        markExtensions.filter((e) => {
+          if (options == null ? void 0 : options.markMapping) {
+            return !(e.name in options.markMapping);
+          }
+          return true;
+        }).map((mark) => mapMarkExtensionToReactNode(domOutputSpecToElement, mark, extensionAttributes, options))
+      ),
+      ...options == null ? void 0 : options.markMapping
+    }
+  })({ content });
+}
+
+// src/pm/html-string/html-string.ts
+function domOutputSpecToHTMLString(content) {
+  if (typeof content === "string") {
+    return () => content;
+  }
+  if (typeof content === "object" && "length" in content) {
+    const [_tag, attrs, children, ...rest] = content;
+    let tag = _tag;
+    const parts = tag.split(" ");
+    if (parts.length > 1) {
+      tag = `${parts[1]} xmlns="${parts[0]}"`;
+    }
+    if (attrs === void 0) {
+      return () => `<${tag}/>`;
+    }
+    if (attrs === 0) {
+      return (child) => `<${tag}>${serializeChildrenToHTMLString(child)}</${tag}>`;
+    }
+    if (typeof attrs === "object") {
+      if (Array.isArray(attrs)) {
+        if (children === void 0) {
+          return (child) => `<${tag}>${domOutputSpecToHTMLString(attrs)(child)}</${tag}>`;
+        }
+        if (children === 0) {
+          return (child) => `<${tag}>${domOutputSpecToHTMLString(attrs)(child)}</${tag}>`;
+        }
+        return (child) => `<${tag}>${domOutputSpecToHTMLString(attrs)(child)}${[children].concat(rest).map((a) => domOutputSpecToHTMLString(a)(child))}</${tag}>`;
+      }
+      if (children === void 0) {
+        return () => `<${tag}${serializeAttrsToHTMLString(attrs)}/>`;
+      }
+      if (children === 0) {
+        return (child) => `<${tag}${serializeAttrsToHTMLString(attrs)}>${serializeChildrenToHTMLString(child)}</${tag}>`;
+      }
+      return (child) => `<${tag}${serializeAttrsToHTMLString(attrs)}>${[children].concat(rest).map((a) => domOutputSpecToHTMLString(a)(child)).join("")}</${tag}>`;
+    }
+  }
+  throw new Error(
+    "[tiptap error]: Unsupported DomOutputSpec type, check the `renderHTML` method output or implement a node mapping",
+    {
+      cause: content
+    }
+  );
+}
+function renderToHTMLString({
+  content,
+  extensions,
+  options
+}) {
+  return renderToElement({
+    renderer: renderJSONContentToString,
+    domOutputSpecToElement: domOutputSpecToHTMLString,
+    mapDefinedTypes: {
+      // Map a doc node to concatenated children
+      doc: ({ children }) => serializeChildrenToHTMLString(children),
+      // Map a text node to its text content
+      text: ({ node }) => {
+        var _a;
+        return (_a = node.text) != null ? _a : "";
+      }
+    },
+    content,
+    extensions,
+    options
+  });
+}
+
+// src/pm/markdown/markdown.ts
+function renderToMarkdown({
+  content,
+  extensions,
+  options
+}) {
+  return renderToHTMLString({
+    content,
+    extensions,
+    options: {
+      nodeMapping: {
+        bulletList({ children }) {
+          return `
+${serializeChildrenToHTMLString(children)}`;
+        },
+        orderedList({ children }) {
+          return `
+${serializeChildrenToHTMLString(children)}`;
+        },
+        listItem({ node, children, parent }) {
+          if ((parent == null ? void 0 : parent.type.name) === "bulletList") {
+            return `- ${serializeChildrenToHTMLString(children).trim()}
+`;
+          }
+          if ((parent == null ? void 0 : parent.type.name) === "orderedList") {
+            let number = parent.attrs.start || 1;
+            parent.forEach((parentChild, _offset, index) => {
+              if (node === parentChild) {
+                number = index + 1;
+              }
+            });
+            return `${number}. ${serializeChildrenToHTMLString(children).trim()}
+`;
+          }
+          return serializeChildrenToHTMLString(children);
+        },
+        paragraph({ children }) {
+          return `
+${serializeChildrenToHTMLString(children)}
+`;
+        },
+        heading({ node, children }) {
+          const level = node.attrs.level;
+          return `${new Array(level).fill("#").join("")} ${children}
+`;
+        },
+        codeBlock({ node, children }) {
+          return `
+\`\`\`${node.attrs.language}
+${serializeChildrenToHTMLString(children)}
+\`\`\`
+`;
+        },
+        blockquote({ children }) {
+          return `
+${serializeChildrenToHTMLString(children).trim().split("\n").map((a) => `> ${a}`).join("\n")}`;
+        },
+        image({ node }) {
+          return `![${node.attrs.alt}](${node.attrs.src})`;
+        },
+        hardBreak() {
+          return "\n";
+        },
+        horizontalRule() {
+          return "\n---\n";
+        },
+        table({ children, node }) {
+          if (!Array.isArray(children)) {
+            return `
+${serializeChildrenToHTMLString(children)}
+`;
+          }
+          return `
+${serializeChildrenToHTMLString(children[0])}| ${new Array(node.childCount - 2).fill("---").join(" | ")} |
+${serializeChildrenToHTMLString(children.slice(1))}
+`;
+        },
+        tableRow({ children }) {
+          if (Array.isArray(children)) {
+            return `| ${children.join(" | ")} |
+`;
+          }
+          return `${serializeChildrenToHTMLString(children)}
+`;
+        },
+        tableHeader({ children }) {
+          return serializeChildrenToHTMLString(children).trim();
+        },
+        tableCell({ children }) {
+          return serializeChildrenToHTMLString(children).trim();
+        },
+        ...options == null ? void 0 : options.nodeMapping
+      },
+      markMapping: {
+        bold({ children }) {
+          return `**${serializeChildrenToHTMLString(children)}**`;
+        },
+        italic({ children, node }) {
+          let isBoldToo = false;
+          if (node == null ? void 0 : node.marks.some((m) => m.type.name === "bold")) {
+            isBoldToo = true;
+          }
+          if (isBoldToo) {
+            return `*${serializeChildrenToHTMLString(children)}*`;
+          }
+          return `_${serializeChildrenToHTMLString(children)}_`;
+        },
+        code({ children }) {
+          return `\`${serializeChildrenToHTMLString(children)}\``;
+        },
+        strike({ children }) {
+          return `~~${serializeChildrenToHTMLString(children)}~~`;
+        },
+        underline({ children }) {
+          return `<u>${serializeChildrenToHTMLString(children)}</u>`;
+        },
+        subscript({ children }) {
+          return `<sub>${serializeChildrenToHTMLString(children)}</sub>`;
+        },
+        superscript({ children }) {
+          return `<sup>${serializeChildrenToHTMLString(children)}</sup>`;
+        },
+        link({ node, children }) {
+          return `[${serializeChildrenToHTMLString(children)}](${node.attrs.href})`;
+        },
+        highlight({ children }) {
+          return `==${serializeChildrenToHTMLString(children)}==`;
+        },
+        ...options == null ? void 0 : options.markMapping
+      },
+      ...options
+    }
+  });
+}
+
+// src/pm/react/react.ts
+var import_react2 = __toESM(require("react"), 1);
+function mapAttrsToHTMLAttributes(attrs, key) {
+  if (!attrs) {
+    return { key };
+  }
+  return Object.entries(attrs).reduce(
+    (acc, [name, value]) => {
+      if (name === "class") {
+        return Object.assign(acc, { className: value });
+      }
+      return Object.assign(acc, { [name]: value });
+    },
+    { key }
+  );
+}
+function domOutputSpecToReactElement(content, key = 0) {
+  if (typeof content === "string") {
+    return () => content;
+  }
+  if (typeof content === "object" && "length" in content) {
+    let [tag, attrs, children, ...rest] = content;
+    const parts = tag.split(" ");
+    if (parts.length > 1) {
+      tag = parts[1];
+      if (attrs === void 0) {
+        attrs = {
+          xmlns: parts[0]
+        };
+      }
+      if (attrs === 0) {
+        attrs = {
+          xmlns: parts[0]
+        };
+        children = 0;
+      }
+      if (typeof attrs === "object") {
+        attrs = Object.assign(attrs, { xmlns: parts[0] });
+      }
+    }
+    if (attrs === void 0) {
+      return () => import_react2.default.createElement(tag, mapAttrsToHTMLAttributes(void 0, key.toString()));
+    }
+    if (attrs === 0) {
+      return (child) => import_react2.default.createElement(tag, mapAttrsToHTMLAttributes(void 0, key.toString()), child);
+    }
+    if (typeof attrs === "object") {
+      if (Array.isArray(attrs)) {
+        if (children === void 0) {
+          return (child) => import_react2.default.createElement(
+            tag,
+            mapAttrsToHTMLAttributes(void 0, key.toString()),
+            domOutputSpecToReactElement(attrs, key++)(child)
+          );
+        }
+        if (children === 0) {
+          return (child) => import_react2.default.createElement(
+            tag,
+            mapAttrsToHTMLAttributes(void 0, key.toString()),
+            domOutputSpecToReactElement(attrs, key++)(child)
+          );
+        }
+        return (child) => import_react2.default.createElement(
+          tag,
+          mapAttrsToHTMLAttributes(void 0, key.toString()),
+          domOutputSpecToReactElement(attrs)(child),
+          [children].concat(rest).map((outputSpec) => domOutputSpecToReactElement(outputSpec, key++)(child))
+        );
+      }
+      if (children === void 0) {
+        return () => import_react2.default.createElement(tag, mapAttrsToHTMLAttributes(attrs, key.toString()));
+      }
+      if (children === 0) {
+        return (child) => import_react2.default.createElement(tag, mapAttrsToHTMLAttributes(attrs, key.toString()), child);
+      }
+      return (child) => import_react2.default.createElement(
+        tag,
+        mapAttrsToHTMLAttributes(attrs, key.toString()),
+        [children].concat(rest).map((outputSpec) => domOutputSpecToReactElement(outputSpec, key++)(child))
+      );
+    }
+  }
+  throw new Error(
+    "[tiptap error]: Unsupported DomOutputSpec type, check the `renderHTML` method output or implement a node mapping",
+    {
+      cause: content
+    }
+  );
+}
+function renderToReactElement({
+  content,
+  extensions,
+  options
+}) {
+  return renderToElement({
+    renderer: renderJSONContentToReactElement,
+    domOutputSpecToElement: domOutputSpecToReactElement,
+    mapDefinedTypes: {
+      // Map a doc node to concatenated children
+      doc: ({ children }) => import_react2.default.createElement(import_react2.default.Fragment, {}, children),
+      // Map a text node to its text content
+      text: ({ node }) => {
+        var _a;
+        return (_a = node.text) != null ? _a : "";
+      }
+    },
+    content,
+    extensions,
+    options
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  TiptapStaticRenderer,
+  domOutputSpecToHTMLString,
+  domOutputSpecToReactElement,
   getAttributes,
-  getHTMLAttributes
+  getHTMLAttributes,
+  mapMarkExtensionToReactNode,
+  mapNodeExtensionToReactNode,
+  renderJSONContentToReactElement,
+  renderJSONContentToString,
+  renderToElement,
+  renderToHTMLString,
+  renderToMarkdown,
+  renderToReactElement,
+  serializeAttrsToHTMLString,
+  serializeChildrenToHTMLString
 });
 //# sourceMappingURL=index.cjs.map