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

package/src/index.ts

@@ -1,2 +1,6 @@
 export * from './helpers.js'
-export * from './types.js'
+export * from './json/html-string/index.js'
+export * from './json/react/index.js'
+export * from './pm/html-string/index.js'
+export * from './pm/markdown/index.js'
+export * from './pm/react/index.js'

package/src/json/html-string/string.ts

@@ -1,22 +1,48 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { MarkType, NodeType } from '../../types.js'
+import type { MarkType, NodeType } from '@tiptap/core'
+
 import { TiptapStaticRenderer, TiptapStaticRendererOptions } from '../renderer.js'
 
 export function renderJSONContentToString<
-/**
- * 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 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<string, TMarkType, TNodeType>) {
   return TiptapStaticRenderer(ctx => {
     return ctx.component(ctx.props as any)
   }, options)
 }
+
+/**
+ * Serialize the attributes of a node or mark to a string
+ * @param attrs The attributes to serialize
+ * @returns The serialized attributes as a string
+ */
+export function serializeAttrsToHTMLString(attrs: Record<string, any> | undefined | null): string {
+  const output = Object.entries(attrs || {})
+    .map(([key, value]) => `${key.split(' ').at(-1)}=${JSON.stringify(value)}`)
+    .join(' ')
+
+  return output ? ` ${output}` : ''
+}
+
+/**
+ * Serialize the children of a node or mark to a string
+ * @param children The children to serialize
+ * @returns The serialized children as a string
+ */
+export function serializeChildrenToHTMLString(children?: string | string[]): string {
+  return ([] as string[])
+    .concat(children || '')
+    .filter(Boolean)
+    .join('')
+}

package/src/json/react/react.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import type { MarkType, NodeType } from '@tiptap/core'
 import React from 'react'
 
-import { MarkType, NodeType } from '../../types.js'
 import { TiptapStaticRenderer, TiptapStaticRendererOptions } from '../renderer.js'
 
 export function renderJSONContentToReactElement<
@@ -14,22 +14,19 @@ export function renderJSONContentToReactElement<
    * 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 };
+    content?: { forEach: (cb: (node: TNodeType) => void) => void }
+    marks?: readonly TMarkType[]
+    type: string | { name: string }
   } = NodeType,
 >(options: TiptapStaticRendererOptions<React.ReactNode, TMarkType, TNodeType>) {
   let key = 0
 
-  return TiptapStaticRenderer<React.ReactNode, TMarkType, TNodeType>(
-    ({ component, props: { children, ...props } }) => {
-      return React.createElement(
-        component as React.FC<typeof props>,
-        // eslint-disable-next-line no-plusplus
-        Object.assign(props, { key: key++ }),
-        ([] as React.ReactNode[]).concat(children),
-      )
-    },
-    options,
-  )
+  return TiptapStaticRenderer<React.ReactNode, TMarkType, TNodeType>(({ component, props: { children, ...props } }) => {
+    return React.createElement(
+      component as React.FC<typeof props>,
+      // eslint-disable-next-line no-plusplus
+      Object.assign(props, { key: key++ }),
+      ([] as React.ReactNode[]).concat(children),
+    )
+  }, options)
 }

package/src/json/renderer.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { MarkType, NodeType } from '../types'
+import type { MarkType, NodeType } from '@tiptap/core'
 
 /**
  * Props for a node renderer
@@ -8,15 +8,15 @@ export type NodeProps<TNodeType = any, TChildren = any> = {
   /**
    * The current node to render
    */
-  node: TNodeType;
+  node: TNodeType
   /**
    * Unless the node is the root node, this will always be defined
    */
-  parent?: TNodeType;
+  parent?: TNodeType
   /**
    * The children of the current node
    */
-  children?: TChildren;
+  children?: TChildren
   /**
    * Render a child element
    */
@@ -24,13 +24,13 @@ export type NodeProps<TNodeType = any, TChildren = any> = {
     /**
      * Tiptap JSON content to render
      */
-    content: TNodeType;
+    content: TNodeType
     /**
      * The parent node of the current node
      */
-    parent?: TNodeType;
-  }) => TChildren;
-};
+    parent?: TNodeType
+  }) => TChildren
+}
 
 /**
  * Props for a mark renderer
@@ -39,20 +39,20 @@ export type MarkProps<TMarkType = any, TChildren = any, TNodeType = any> = {
   /**
    * The current mark to render
    */
-  mark: TMarkType;
+  mark: TMarkType
   /**
    * The children of the current mark
    */
-  children?: TChildren;
+  children?: TChildren
   /**
    * The node the current mark is applied to
    */
-  node: TNodeType;
+  node: TNodeType
   /**
    * The node the current mark is applied to
    */
-  parent?: TNodeType;
-};
+  parent?: TNodeType
+}
 
 export type TiptapStaticRendererOptions<
   /**
@@ -67,40 +67,40 @@ export type TiptapStaticRendererOptions<
    * 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 };
+    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[]>
+    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>
+    ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>,
   ) => TReturnType,
 > = {
   /**
    * Mapping of node types to react components
    */
-  nodeMapping: Record<string, TNodeRender>;
+  nodeMapping: Record<string, NoInfer<TNodeRender>>
   /**
    * Mapping of mark types to react components
    */
-  markMapping: Record<string, TMarkRender>;
+  markMapping: Record<string, NoInfer<TMarkRender>>
   /**
    * Component to render if a node type is not handled
    */
-  unhandledNode?: TNodeRender;
+  unhandledNode?: NoInfer<TNodeRender>
   /**
    * Component to render if a mark type is not handled
    */
-  unhandledMark?: TMarkRender;
-};
+  unhandledMark?: NoInfer<TMarkRender>
+}
 
 /**
  * Tiptap Static Renderer
@@ -126,22 +126,21 @@ export function TiptapStaticRenderer<
    * 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 };
+    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[]>
+    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>
+    ctx: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>,
   ) => TReturnType,
 >(
   /**
@@ -150,13 +149,13 @@ cb: (node: TNodeType) => void) => void };
   renderComponent: (
     ctx:
       | {
-          component: TNodeRender;
-          props: NodeProps<TNodeType, TReturnType | TReturnType[]>;
+          component: TNodeRender
+          props: NodeProps<TNodeType, TReturnType | TReturnType[]>
         }
       | {
-          component: TMarkRender;
-          props: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>;
-        }
+          component: TMarkRender
+          props: MarkProps<TMarkType, TReturnType | TReturnType[], TNodeType>
+        },
   ) => TReturnType,
   {
     nodeMapping,
@@ -175,11 +174,11 @@ cb: (node: TNodeType) => void) => void };
     /**
      * Tiptap JSON content to render
      */
-    content: TNodeType;
+    content: TNodeType
     /**
      * The parent node of the current node
      */
-    parent?: TNodeType;
+    parent?: TNodeType
   }): TReturnType {
     const nodeType = typeof content.type === 'string' ? content.type : content.type.name
     const NodeHandler = nodeMapping[nodeType] ?? unhandledNode
@@ -218,23 +217,23 @@ cb: (node: TNodeType) => void) => void };
     // apply marks to the content
     const markedContent = content.marks
       ? content.marks.reduce((acc, mark) => {
-        const markType = typeof mark.type === 'string' ? mark.type : mark.type.name
-        const MarkHandler = markMapping[markType] ?? unhandledMark
+          const markType = typeof mark.type === 'string' ? mark.type : mark.type.name
+          const MarkHandler = markMapping[markType] ?? unhandledMark
 
-        if (!MarkHandler) {
-          throw new Error(`missing handler for mark type ${markType}`)
-        }
+          if (!MarkHandler) {
+            throw new Error(`missing handler for mark type ${markType}`)
+          }
 
-        return renderComponent({
-          component: MarkHandler,
-          props: {
-            mark,
-            parent,
-            node: content,
-            children: acc,
-          },
-        })
-      }, nodeContent)
+          return renderComponent({
+            component: MarkHandler,
+            props: {
+              mark,
+              parent,
+              node: content,
+              children: acc,
+            },
+          })
+        }, nodeContent)
       : nodeContent
 
     return markedContent

package/src/pm/extensionRenderer.ts

@@ -20,7 +20,7 @@ import { DOMOutputSpec, Mark, Node } from '@tiptap/pm/model'
 import { getHTMLAttributes } from '../helpers.js'
 import { MarkProps, NodeProps, TiptapStaticRendererOptions } from '../json/renderer.js'
 
-export type DomOutputSpecToElement<T> = (content: DOMOutputSpec) => (children?: T | T[]) => T;
+export type DomOutputSpecToElement<T> = (content: DOMOutputSpec) => (children?: T | T[]) => T
 
 /**
  * This takes a NodeExtension and maps it to a React component
@@ -41,11 +41,7 @@ export function mapNodeExtensionToReactNode<T>(
     parent: extension.parent,
   }
 
-  const renderToHTML = getExtensionField<NodeConfig['renderHTML']>(
-    extension,
-    'renderHTML',
-    context,
-  )
+  const renderToHTML = getExtensionField<NodeConfig['renderHTML']>(extension, 'renderHTML', context)
 
   if (!renderToHTML) {
     if (options?.unhandledNode) {
@@ -102,11 +98,7 @@ export function mapMarkExtensionToReactNode<T>(
     parent: extension.parent,
   }
 
-  const renderToHTML = getExtensionField<MarkConfig['renderHTML']>(
-    extension,
-    'renderHTML',
-    context,
-  )
+  const renderToHTML = getExtensionField<MarkConfig['renderHTML']>(extension, 'renderHTML', context)
 
   if (!renderToHTML) {
     if (options?.unhandledMark) {
@@ -115,9 +107,7 @@ export function mapMarkExtensionToReactNode<T>(
     return [
       extension.name,
       () => {
-        throw new Error(
-          `Node ${extension.name} cannot be rendered, it is missing a "renderToHTML" method`,
-        )
+        throw new Error(`Node ${extension.name} cannot be rendered, it is missing a "renderToHTML" method`)
       },
     ]
   }
@@ -162,15 +152,15 @@ export function renderToElement<T>({
   extensions,
   options,
 }: {
-  renderer: (options: TiptapStaticRendererOptions<T, Mark, Node>) => (ctx: { content: Node }) => T;
-  domOutputSpecToElement: DomOutputSpecToElement<T>;
+  renderer: (options: TiptapStaticRendererOptions<T, Mark, Node>) => (ctx: { content: Node }) => T
+  domOutputSpecToElement: DomOutputSpecToElement<T>
   mapDefinedTypes: {
-    doc: (props: NodeProps<Node, T | T[]>) => T;
-    text: (props: NodeProps<Node, T | T[]>) => T;
-  };
-  content: Node | JSONContent;
-  extensions: Extensions;
-  options?: Partial<TiptapStaticRendererOptions<T, Mark, Node>>;
+    doc: (props: NodeProps<Node, T | T[]>) => T
+    text: (props: NodeProps<Node, T | T[]>) => T
+  }
+  content: Node | JSONContent
+  extensions: Extensions
+  options?: Partial<TiptapStaticRendererOptions<T, Mark, Node>>
 }): T {
   // get all extensions in order & split them into nodes and marks
   extensions = resolveExtensions(extensions)
@@ -197,12 +187,9 @@ export function renderToElement<T>({
             }
             return true
           })
-          .map(nodeExtension => mapNodeExtensionToReactNode<T>(
-            domOutputSpecToElement,
-            nodeExtension,
-            extensionAttributes,
-            options,
-          )),
+          .map(nodeExtension =>
+            mapNodeExtensionToReactNode<T>(domOutputSpecToElement, nodeExtension, extensionAttributes, options),
+          ),
       ),
       ...mapDefinedTypes,
       ...options?.nodeMapping,
@@ -217,12 +204,7 @@ export function renderToElement<T>({
             }
             return true
           })
-          .map(mark => mapMarkExtensionToReactNode<T>(
-            domOutputSpecToElement,
-            mark,
-            extensionAttributes,
-            options,
-          )),
+          .map(mark => mapMarkExtensionToReactNode<T>(domOutputSpecToElement, mark, extensionAttributes, options)),
       ),
       ...options?.markMapping,
     },

package/src/pm/html-string/html-string.ts

@@ -1,50 +1,34 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Extensions, JSONContent } from '@tiptap/core'
+import type { DOMOutputSpecArray, Extensions, JSONContent } from '@tiptap/core'
 import type { DOMOutputSpec, Mark, Node } from '@tiptap/pm/model'
 
-import { renderJSONContentToString } from '../../json/html-string/string.js'
+import {
+  renderJSONContentToString,
+  serializeAttrsToHTMLString,
+  serializeChildrenToHTMLString,
+} from '../../json/html-string/string.js'
 import { TiptapStaticRendererOptions } from '../../json/renderer.js'
-import type { DOMOutputSpecArray } from '../../types.js'
 import { renderToElement } from '../extensionRenderer.js'
 
-/**
- * Serialize the attributes of a node or mark to a string
- * @param attrs The attributes to serialize
- * @returns The serialized attributes as a string
- */
-export function serializeAttrsToHTMLString(attrs: Record<string, any>): string {
-  const output = Object.entries(attrs)
-    .map(([key, value]) => `${key}=${JSON.stringify(value)}`)
-    .join(' ')
-
-  return output ? ` ${output}` : ''
-}
-
-/**
- * Serialize the children of a node or mark to a string
- * @param children The children to serialize
- * @returns The serialized children as a string
- */
-export function serializeChildrenToHTMLString(children?: string | string[]): string {
-  return ([] as string[])
-    .concat(children || '')
-    .filter(Boolean)
-    .join('')
-}
+export { serializeAttrsToHTMLString, serializeChildrenToHTMLString } from '../../json/html-string/string.js'
 
 /**
  * Take a DOMOutputSpec and return a function that can render it to a string
  * @param content The DOMOutputSpec to convert to a string
  * @returns A function that can render the DOMOutputSpec to a string
  */
-export function domOutputSpecToHTMLString(
-  content: DOMOutputSpec,
-): (children?: string | string[]) => string {
+export function domOutputSpecToHTMLString(content: DOMOutputSpec): (children?: string | string[]) => string {
   if (typeof content === 'string') {
     return () => content
   }
   if (typeof content === 'object' && 'length' in content) {
-    const [tag, attrs, children, ...rest] = content as DOMOutputSpecArray
+    const [_tag, attrs, children, ...rest] = content as DOMOutputSpecArray
+    let tag = _tag
+    const parts = tag.split(' ')
+
+    if (parts.length > 1) {
+      tag = `${parts[1]} xmlns="${parts[0]}"`
+    }
 
     if (attrs === undefined) {
       return () => `<${tag}/>`
@@ -60,29 +44,29 @@ export function domOutputSpecToHTMLString(
         if (children === 0) {
           return child => `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}</${tag}>`
         }
-        return child => `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}${[children]
-          .concat(rest)
-          .map(a => domOutputSpecToHTMLString(a)(child))}</${tag}>`
+        return child =>
+          `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}${[children]
+            .concat(rest)
+            .map(a => domOutputSpecToHTMLString(a)(child))}</${tag}>`
       }
       if (children === undefined) {
         return () => `<${tag}${serializeAttrsToHTMLString(attrs)}/>`
       }
       if (children === 0) {
-        return child => `<${tag}${serializeAttrsToHTMLString(attrs)}>${serializeChildrenToHTMLString(
-          child,
-        )}</${tag}>`
+        return child => `<${tag}${serializeAttrsToHTMLString(attrs)}>${serializeChildrenToHTMLString(child)}</${tag}>`
       }
 
-      return child => `<${tag}${serializeAttrsToHTMLString(attrs)}>${[children]
-        .concat(rest)
-        .map(a => domOutputSpecToHTMLString(a)(child))
-        .join('')}</${tag}>`
+      return child =>
+        `<${tag}${serializeAttrsToHTMLString(attrs)}>${[children]
+          .concat(rest)
+          .map(a => domOutputSpecToHTMLString(a)(child))
+          .join('')}</${tag}>`
     }
   }
 
   // TODO support DOM elements? How to handle them?
   throw new Error(
-    '[tiptap error]: Unsupported DomOutputSpec type, check the `renderHTML` method output',
+    '[tiptap error]: Unsupported DomOutputSpec type, check the `renderHTML` method output or implement a node mapping',
     {
       cause: content,
     },
@@ -101,9 +85,9 @@ export function renderToHTMLString({
   extensions,
   options,
 }: {
-  content: Node | JSONContent;
-  extensions: Extensions;
-  options?: Partial<TiptapStaticRendererOptions<string, Mark, Node>>;
+  content: Node | JSONContent
+  extensions: Extensions
+  options?: Partial<TiptapStaticRendererOptions<string, Mark, Node>>
 }): string {
   return renderToElement<string>({
     renderer: renderJSONContentToString,

package/src/pm/markdown/index.ts

@@ -0,0 +1,2 @@
+export * from '../extensionRenderer.js'
+export * from './markdown.js'