@tiptap/static-renderer 3.23.6 → 3.24.0

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oslint-disableno-explicit-any */
 import type { DOMOutputSpecArray, Extensions, JSONContent } from '@tiptap/core'
 import type { DOMOutputSpec, Mark, Node } from '@tiptap/pm/model'
 
@@ -9,22 +9,38 @@ import {
   serializeChildrenToHTMLString,
 } from '../../json/html-string/string.js'
 import type { TiptapStaticRendererOptions } from '../../json/renderer.js'
-import { renderToElement } from '../extensionRenderer.js'
+import type { StaticEditorOptions } from '../extensionRenderer.js'
+import { applyStaticEditorOptionsToExtensions, renderToElement } from '../extensionRenderer.js'
 
-export { serializeAttrsToHTMLString, serializeChildrenToHTMLString } from '../../json/html-string/string.js'
+export {
+  serializeAttrsToHTMLString,
+  serializeChildrenToHTMLString,
+} from '../../json/html-string/string.js'
 
 /**
  * HTML elements that cannot be self-closing and must always have a closing tag.
  * These elements must be rendered as <tag></tag> even when empty, not <tag />.
  */
-const NON_SELF_CLOSING_TAGS = new Set(['iframe', 'script', 'style', 'title', 'textarea', 'div', 'span', 'a', 'button'])
+const NON_SELF_CLOSING_TAGS = new Set([
+  'iframe',
+  'script',
+  'style',
+  'title',
+  'textarea',
+  'div',
+  'span',
+  'a',
+  'button',
+])
 
 /**
  * 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 () => escapeHTML(content)
   }
@@ -46,10 +62,12 @@ export function domOutputSpecToHTMLString(content: DOMOutputSpec): (children?: s
     if (typeof attrs === 'object') {
       if (Array.isArray(attrs)) {
         if (children === undefined) {
-          return child => `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}</${tag}>`
+          return child =>
+            `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}</${tag}>`
         }
         if (children === 0) {
-          return child => `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}</${tag}>`
+          return child =>
+            `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}</${tag}>`
         }
         return child =>
           `<${tag}>${domOutputSpecToHTMLString(attrs as DOMOutputSpecArray)(child)}${[children]
@@ -63,7 +81,8 @@ export function domOutputSpecToHTMLString(content: DOMOutputSpec): (children?: s
         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 =>
@@ -84,19 +103,30 @@ export function domOutputSpecToHTMLString(content: DOMOutputSpec): (children?: s
 }
 
 /**
- * This function will statically render a Prosemirror Node to HTML using the provided extensions and options
+ * This function will statically render a Prosemirror Node to HTML using the provided extensions and options.
+ *
+ * Limitations: this function builds the schema and runs each extension's
+ * `renderHTML`, but does not instantiate an `Editor`. Extensions that mutate
+ * the document inside `addProseMirrorPlugins`, `onCreate`, or transaction
+ * hooks will not run. For UniqueID, pre-process the JSON with
+ * `generateUniqueIds` from `@tiptap/extension-unique-id`; for TableOfContents,
+ * pre-process with `generateTocIds` from `@tiptap/extension-table-of-contents`.
+ *
  * @param content The content to render to HTML
  * @param extensions The extensions to use for rendering
+ * @param staticEditorOptions Optional editor-level options that affect rendered output, currently `{ textDirection }`. Mirrors a subset of `EditorOptions`.
  * @param options The options to use for rendering
  * @returns The rendered HTML string
  */
 export function renderToHTMLString({
   content,
   extensions,
+  staticEditorOptions,
   options,
 }: {
   content: Node | JSONContent
   extensions: Extensions
+  staticEditorOptions?: StaticEditorOptions
   options?: Partial<TiptapStaticRendererOptions<string, Mark, Node>>
 }): string {
   return renderToElement<string>({
@@ -109,7 +139,7 @@ export function renderToHTMLString({
       text: ({ node }) => escapeHTML(node.text ?? ''),
     },
     content,
-    extensions,
+    extensions: applyStaticEditorOptionsToExtensions(extensions, staticEditorOptions),
     options,
   })
 }

package/src/pm/markdown/markdown.ts

@@ -2,24 +2,33 @@ import type { Extensions, JSONContent } from '@tiptap/core'
 import type { Mark, Node } from '@tiptap/pm/model'
 
 import type { TiptapStaticRendererOptions } from '../../json/renderer.js'
+import type { StaticEditorOptions } from '../extensionRenderer.js'
 import { renderToHTMLString, serializeChildrenToHTMLString } from '../html-string/html-string.js'
 
 /**
  * This code is just to show the flexibility of this renderer. We can potentially render content to any format we want.
  * This is a simple example of how we can render content to markdown. This is not a full implementation of a markdown renderer.
+ *
+ * Limitations: see `renderToHTMLString` — extensions that mutate the document
+ * via plugins/onCreate (UniqueID, TableOfContents) need to be pre-processed.
+ *
+ * @param staticEditorOptions Optional editor-level options that affect rendered output — mirrors a subset of `EditorOptions`.
  */
 export function renderToMarkdown({
   content,
   extensions,
+  staticEditorOptions,
   options,
 }: {
   content: Node | JSONContent
   extensions: Extensions
+  staticEditorOptions?: StaticEditorOptions
   options?: Partial<TiptapStaticRendererOptions<string, Mark, Node>>
 }) {
   return renderToHTMLString({
     content,
     extensions,
+    staticEditorOptions,
     options: {
       ...options,
       nodeMapping: {
@@ -53,7 +62,7 @@ export function renderToMarkdown({
         heading({ node, children }) {
           const level = node.attrs.level as number
 
-          return `${new Array(level).fill('#').join('')} ${children}\n`
+          return `${Array.from<string>({ length: level }).fill('#').join('')} ${children}\n`
         },
         codeBlock({ node, children }) {
           return `\n\`\`\`${node.attrs.language}\n${serializeChildrenToHTMLString(children)}\n\`\`\`\n`
@@ -80,7 +89,7 @@ export function renderToMarkdown({
           }
 
           const columnCount = node.children[0].childCount
-          return `\n${serializeChildrenToHTMLString(children[0])}| ${new Array(columnCount).fill('---').join(' | ')} |\n${serializeChildrenToHTMLString(children.slice(1))}\n`
+          return `\n${serializeChildrenToHTMLString(children[0])}| ${Array.from<string>({ length: columnCount }).fill('---').join(' | ')} |\n${serializeChildrenToHTMLString(children.slice(1))}\n`
         },
         tableRow({ children }) {
           if (Array.isArray(children)) {

package/src/pm/react/react.ts

@@ -1,11 +1,12 @@
-/* eslint-disable no-plusplus, @typescript-eslint/no-explicit-any */
+/* oslint-disable no-plusplus,no-explicit-any */
 import type { DOMOutputSpecArray, Extensions, JSONContent } from '@tiptap/core'
 import type { DOMOutputSpec, Mark, Node } from '@tiptap/pm/model'
 import React from 'react'
 
 import { renderJSONContentToReactElement } from '../../json/react/react.js'
 import type { TiptapStaticRendererOptions } from '../../json/renderer.js'
-import { renderToElement } from '../extensionRenderer.js'
+import type { StaticEditorOptions } from '../extensionRenderer.js'
+import { applyStaticEditorOptionsToExtensions, renderToElement } from '../extensionRenderer.js'
 
 /**
  * This function maps the attributes of a node or mark to HTML attributes
@@ -13,7 +14,10 @@ import { renderToElement } from '../extensionRenderer.js'
  * @param key The key to use for the React element
  * @returns The mapped HTML attributes as an object
  */
-export function mapAttrsToHTMLAttributes(attrs?: Record<string, any>, key?: string): Record<string, any> {
+export function mapAttrsToHTMLAttributes(
+  attrs?: Record<string, any>,
+  key?: string,
+): Record<string, any> {
   if (!attrs) {
     return { key }
   }
@@ -58,7 +62,7 @@ export function domOutputSpecToReactElement(
     return () => content
   }
   if (typeof content === 'object' && 'length' in content) {
-    // eslint-disable-next-line prefer-const
+    // oxlint-disable-next-line prefer-const
     let [tag, attrs, children, ...rest] = content as DOMOutputSpecArray
     const parts = tag.split(' ')
 
@@ -84,7 +88,8 @@ export function domOutputSpecToReactElement(
       return () => React.createElement(tag, mapAttrsToHTMLAttributes(undefined, key.toString()))
     }
     if (attrs === 0) {
-      return child => React.createElement(tag, mapAttrsToHTMLAttributes(undefined, key.toString()), child)
+      return child =>
+        React.createElement(tag, mapAttrsToHTMLAttributes(undefined, key.toString()), child)
     }
     if (typeof attrs === 'object') {
       if (Array.isArray(attrs)) {
@@ -109,21 +114,26 @@ export function domOutputSpecToReactElement(
             tag,
             mapAttrsToHTMLAttributes(undefined, key.toString()),
             domOutputSpecToReactElement(attrs as DOMOutputSpecArray)(child),
-            [children].concat(rest).map(outputSpec => domOutputSpecToReactElement(outputSpec, key++)(child)),
+            [children]
+              .concat(rest)
+              .map(outputSpec => domOutputSpecToReactElement(outputSpec, key++)(child)),
           )
       }
       if (children === undefined) {
         return () => React.createElement(tag, mapAttrsToHTMLAttributes(attrs, key.toString()))
       }
       if (children === 0) {
-        return child => React.createElement(tag, mapAttrsToHTMLAttributes(attrs, key.toString()), child)
+        return child =>
+          React.createElement(tag, mapAttrsToHTMLAttributes(attrs, key.toString()), child)
       }
 
       return child =>
         React.createElement(
           tag,
           mapAttrsToHTMLAttributes(attrs, key.toString()),
-          [children].concat(rest).map(outputSpec => domOutputSpecToReactElement(outputSpec, key++)(child)),
+          [children]
+            .concat(rest)
+            .map(outputSpec => domOutputSpecToReactElement(outputSpec, key++)(child)),
         )
     }
   }
@@ -138,19 +148,26 @@ export function domOutputSpecToReactElement(
 }
 
 /**
- * This function will statically render a Prosemirror Node to a React component using the given extensions
+ * This function will statically render a Prosemirror Node to a React component using the given extensions.
+ *
+ * Limitations: see `renderToHTMLString` — extensions that mutate the document
+ * via plugins/onCreate (UniqueID, TableOfContents) need to be pre-processed.
+ *
  * @param content The content to render to a React component
  * @param extensions The extensions to use for rendering
+ * @param staticEditorOptions Optional editor-level options that affect rendered output — mirrors a subset of `EditorOptions`.
  * @param options The options to use for rendering
  * @returns The React element that represents the rendered content
  */
 export function renderToReactElement({
   content,
   extensions,
+  staticEditorOptions,
   options,
 }: {
   content: Node | JSONContent
   extensions: Extensions
+  staticEditorOptions?: StaticEditorOptions
   options?: Partial<TiptapStaticRendererOptions<React.ReactNode, Mark, Node>>
 }): React.ReactNode {
   return renderToElement<React.ReactNode>({
@@ -163,7 +180,7 @@ export function renderToReactElement({
       text: ({ node }) => node.text ?? '',
     },
     content,
-    extensions,
+    extensions: applyStaticEditorOptionsToExtensions(extensions, staticEditorOptions),
     options,
   })
 }