@tiptap/static-renderer 3.0.0-next.1

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

@@ -0,0 +1,225 @@
+import StarterKit from '@tiptap/starter-kit'
+
+import { renderToHTMLString, serializeAttrsToHTMLString, serializeChildrenToHTMLString } from './html-string.js'
+
+/**
+ * This example demonstrates how to render a Prosemirror Node (or JSON Content) to an HTML string.
+ * It will use your extensions to render the content based on each Node's/Mark's `renderHTML` method.
+ * This can be useful if you want to render content to HTML without having an actual editor instance.
+ *
+ * You have complete control over the rendering process. And can replace how each Node/Mark is rendered.
+ */
+
+// eslint-disable-next-line no-console
+console.log(
+  renderToHTMLString({
+    extensions: [StarterKit],
+    options: {
+      nodeMapping: {
+        heading({ node, children }) {
+          const level = node.attrs.level
+
+          return `<h${level}${serializeAttrsToHTMLString(node.attrs)}>THIS IS AN EXAMPLE OF CUSTOM HTML STRING RENDERING${serializeChildrenToHTMLString(children)}</h${level}>`
+        },
+      },
+      markMapping: {},
+    },
+    content:
+    {
+      type: 'doc',
+      from: 0,
+      to: 574,
+      content: [
+        {
+          type: 'heading',
+          from: 0,
+          to: 11,
+          attrs: {
+            level: 2,
+          },
+          content: [
+            {
+              type: 'text',
+              from: 1,
+              to: 10,
+              text: 'Hi there,',
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          from: 11,
+          to: 169,
+          content: [
+            {
+              type: 'text',
+              from: 12,
+              to: 22,
+              text: 'this is a ',
+            },
+            {
+              type: 'text',
+              from: 22,
+              to: 27,
+              marks: [
+                {
+                  type: 'italic',
+                },
+              ],
+              text: 'basic',
+            },
+            {
+              type: 'text',
+              from: 27,
+              to: 39,
+              text: ' example of ',
+            },
+            {
+              type: 'text',
+              from: 39,
+              to: 45,
+              marks: [
+                {
+                  type: 'bold',
+                },
+              ],
+              text: 'Tiptap',
+            },
+            {
+              type: 'text',
+              from: 45,
+              to: 168,
+              text: '. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:',
+            },
+          ],
+        },
+        {
+          type: 'bulletList',
+          from: 169,
+          to: 230,
+          content: [
+            {
+              type: 'listItem',
+              from: 170,
+              to: 205,
+              attrs: {
+                color: '',
+              },
+              content: [
+                {
+                  type: 'paragraph',
+                  from: 171,
+                  to: 204,
+                  content: [
+                    {
+                      type: 'text',
+                      from: 172,
+                      to: 203,
+                      text: 'That’s a bullet list with one …',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              type: 'listItem',
+              from: 205,
+              to: 229,
+              attrs: {
+                color: '',
+              },
+              content: [
+                {
+                  type: 'paragraph',
+                  from: 206,
+                  to: 228,
+                  content: [
+                    {
+                      type: 'text',
+                      from: 207,
+                      to: 227,
+                      text: '… or two list items.',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          from: 230,
+          to: 326,
+          content: [
+            {
+              type: 'text',
+              from: 231,
+              to: 325,
+              text: 'Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:',
+            },
+          ],
+        },
+        {
+          type: 'codeBlock',
+          from: 326,
+          to: 353,
+          attrs: {
+            language: 'css',
+          },
+          content: [
+            {
+              type: 'text',
+              from: 327,
+              to: 352,
+              text: 'body {\n  display: none;\n}',
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          from: 353,
+          to: 522,
+          content: [
+            {
+              type: 'text',
+              from: 354,
+              to: 521,
+              text: 'I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.',
+            },
+          ],
+        },
+        {
+          type: 'blockquote',
+          from: 522,
+          to: 572,
+          content: [
+            {
+              type: 'paragraph',
+              from: 523,
+              to: 571,
+              content: [
+                {
+                  type: 'text',
+                  from: 524,
+                  to: 564,
+                  text: 'Wow, that’s amazing. Good work, boy! 👏 ',
+                },
+                {
+                  type: 'hardBreak',
+                  from: 564,
+                  to: 565,
+                },
+                {
+                  type: 'text',
+                  from: 565,
+                  to: 570,
+                  text: '— Mom',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  }),
+)

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

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Extensions, JSONContent } from '@tiptap/core'
+import type { DOMOutputSpec, Mark, Node } from '@tiptap/pm/model'
+
+import { renderJSONContentToString } 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('')
+}
+
+/**
+ * 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 {
+  if (typeof content === 'string') {
+    return () => content
+  }
+  if (typeof content === 'object' && 'length' in content) {
+    const [tag, attrs, children, ...rest] = content as DOMOutputSpecArray
+
+    if (attrs === undefined) {
+      return () => `<${tag}/>`
+    }
+    if (attrs === 0) {
+      return child => `<${tag}>${serializeChildrenToHTMLString(child)}</${tag}>`
+    }
+    if (typeof attrs === 'object') {
+      if (Array.isArray(attrs)) {
+        if (children === undefined) {
+          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)}${[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)}>${[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',
+    {
+      cause: content,
+    },
+  )
+}
+
+/**
+ * This function will statically render a Prosemirror Node to HTML using the provided extensions and options
+ * @param content The content to render to HTML
+ * @param extensions The extensions to use for rendering
+ * @param options The options to use for rendering
+ * @returns The rendered HTML string
+ */
+export function renderToHTMLString({
+  content,
+  extensions,
+  options,
+}: {
+  content: Node | JSONContent;
+  extensions: Extensions;
+  options?: Partial<TiptapStaticRendererOptions<string, Mark, Node>>;
+}): string {
+  return renderToElement<string>({
+    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 }) => node.text ?? '',
+    },
+    content,
+    extensions,
+    options,
+  })
+}

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

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

package/src/pm/markdown/markdown.example.ts

@@ -0,0 +1,296 @@
+import { JSONContent } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+
+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.
+ */
+
+const renderToMarkdown = ({ content }: { content: JSONContent | Node }) => renderToHTMLString({
+  content,
+  extensions: [StarterKit],
+  options: {
+    nodeMapping: {
+      bulletList({ children }) {
+        return `\n${serializeChildrenToHTMLString(children)}`
+      },
+      orderedList({ children }) {
+        return `\n${serializeChildrenToHTMLString(children)}`
+      },
+      listItem({ node, children, parent }) {
+        if (parent?.type.name === 'bulletList') {
+          return `- ${serializeChildrenToHTMLString(children).trim()}\n`
+        }
+        if (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()}\n`
+        }
+
+        return serializeChildrenToHTMLString(children)
+      },
+      paragraph({ children }) {
+        return `\n${serializeChildrenToHTMLString(children)}\n`
+      },
+      heading({ node, children }) {
+        const level = node.attrs.level as number
+
+        return `${new Array(level).fill('#').join('')} ${children}\n`
+      },
+      codeBlock({ node, children }) {
+        return `\n\`\`\`${node.attrs.language}\n${serializeChildrenToHTMLString(
+          children,
+        )}\n\`\`\`\n`
+      },
+      blockquote({ children }) {
+        return `\n${serializeChildrenToHTMLString(children)
+          .trim()
+          .split('\n')
+          .map(a => `> ${a}`)
+          .join('\n')}`
+      },
+      image({ node }) {
+        return `![${node.attrs.alt}](${node.attrs.src})`
+      },
+      hardBreak() {
+        return '\n'
+      },
+    },
+    markMapping: {
+      bold({ children }) {
+        return `**${serializeChildrenToHTMLString(children)}**`
+      },
+      italic({ children, node }) {
+        let isBoldToo = false
+
+        // Check if the node being wrapped also has a bold mark, if so, we need to use the bold markdown syntax
+        if (node?.marks.some(m => m.type.name === 'bold')) {
+          isBoldToo = true
+        }
+
+        if (isBoldToo) {
+          // If the content is bold, just wrap the bold content in italic markdown syntax with another set of asterisks
+          return `*${serializeChildrenToHTMLString(children)}*`
+        }
+
+        return `_${serializeChildrenToHTMLString(children)}_`
+      },
+      code({ children }) {
+        return `\`${serializeChildrenToHTMLString(children)}\``
+      },
+    },
+  },
+})
+
+// eslint-disable-next-line no-console
+console.log(
+  renderToMarkdown({
+    content: {
+      type: 'doc',
+      from: 0,
+      to: 574,
+      content: [
+        {
+          type: 'heading',
+          from: 0,
+          to: 11,
+          attrs: {
+            level: 2,
+          },
+          content: [
+            {
+              type: 'text',
+              from: 1,
+              to: 10,
+              text: 'Hi there,',
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          from: 11,
+          to: 169,
+          content: [
+            {
+              type: 'text',
+              from: 12,
+              to: 22,
+              text: 'this is a ',
+            },
+            {
+              type: 'text',
+              from: 22,
+              to: 27,
+              marks: [
+                {
+                  type: 'italic',
+                },
+              ],
+              text: 'basic',
+            },
+            {
+              type: 'text',
+              from: 27,
+              to: 39,
+              text: ' example of ',
+            },
+            {
+              type: 'text',
+              from: 39,
+              to: 45,
+              marks: [
+                {
+                  type: 'bold',
+                },
+                {
+                  type: 'italic',
+                },
+              ],
+              text: 'Tiptap',
+            },
+            {
+              type: 'text',
+              from: 45,
+              to: 168,
+              text: '. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:',
+            },
+          ],
+        },
+        {
+          type: 'bulletList',
+          from: 169,
+          to: 230,
+          content: [
+            {
+              type: 'listItem',
+              from: 170,
+              to: 205,
+              attrs: {
+                color: '',
+              },
+              content: [
+                {
+                  type: 'paragraph',
+                  from: 171,
+                  to: 204,
+                  content: [
+                    {
+                      type: 'text',
+                      from: 172,
+                      to: 203,
+                      text: 'That’s a bullet list with one …',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              type: 'listItem',
+              from: 205,
+              to: 229,
+              attrs: {
+                color: '',
+              },
+              content: [
+                {
+                  type: 'paragraph',
+                  from: 206,
+                  to: 228,
+                  content: [
+                    {
+                      type: 'text',
+                      from: 207,
+                      to: 227,
+                      text: '… or two list items.',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          from: 230,
+          to: 326,
+          content: [
+            {
+              type: 'text',
+              from: 231,
+              to: 325,
+              text: 'Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:',
+            },
+          ],
+        },
+        {
+          type: 'codeBlock',
+          from: 326,
+          to: 353,
+          attrs: {
+            language: 'css',
+          },
+          content: [
+            {
+              type: 'text',
+              from: 327,
+              to: 352,
+              text: 'body {\n  display: none;\n}',
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          from: 353,
+          to: 522,
+          content: [
+            {
+              type: 'text',
+              from: 354,
+              to: 521,
+              text: 'I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.',
+            },
+          ],
+        },
+        {
+          type: 'blockquote',
+          from: 522,
+          to: 572,
+          content: [
+            {
+              type: 'paragraph',
+              from: 523,
+              to: 571,
+              content: [
+                {
+                  type: 'text',
+                  from: 524,
+                  to: 564,
+                  text: 'Wow, that’s amazing. Good work, boy! 👏 ',
+                },
+                {
+                  type: 'hardBreak',
+                  from: 564,
+                  to: 565,
+                },
+                {
+                  type: 'text',
+                  from: 565,
+                  to: 570,
+                  text: '— Mom',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  }),
+)

package/src/pm/react/index.ts

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