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

package/src/pm/markdown/markdown.ts

@@ -0,0 +1,142 @@
+import { Extensions, JSONContent } from '@tiptap/core'
+import type { Mark, Node } from '@tiptap/pm/model'
+
+import { TiptapStaticRendererOptions } from '../../json/renderer.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.
+ */
+export function renderToMarkdown({
+  content,
+  extensions,
+  options,
+}: {
+  content: Node | JSONContent
+  extensions: Extensions
+  options?: Partial<TiptapStaticRendererOptions<string, Mark, Node>>
+}) {
+  return renderToHTMLString({
+    content,
+    extensions,
+    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'
+        },
+        horizontalRule() {
+          return '\n---\n'
+        },
+        table({ children, node }) {
+          if (!Array.isArray(children)) {
+            return `\n${serializeChildrenToHTMLString(children)}\n`
+          }
+
+          return `\n${serializeChildrenToHTMLString(children[0])}| ${new Array(node.childCount - 2).fill('---').join(' | ')} |\n${serializeChildrenToHTMLString(children.slice(1))}\n`
+        },
+        tableRow({ children }) {
+          if (Array.isArray(children)) {
+            return `| ${children.join(' | ')} |\n`
+          }
+          return `${serializeChildrenToHTMLString(children)}\n`
+        },
+        tableHeader({ children }) {
+          return serializeChildrenToHTMLString(children).trim()
+        },
+        tableCell({ children }) {
+          return serializeChildrenToHTMLString(children).trim()
+        },
+        ...options?.nodeMapping,
+      },
+      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)}\``
+        },
+        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?.markMapping,
+      },
+      ...options,
+    },
+  })
+}

package/src/pm/react/react.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable no-plusplus, @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 React from 'react'
 
 import { renderJSONContentToReactElement } from '../../json/react/react.js'
 import { TiptapStaticRendererOptions } from '../../json/renderer.js'
-import type { DOMOutputSpecArray } from '../../types.js'
 import { renderToElement } from '../extensionRenderer.js'
 
 /**
@@ -42,7 +41,27 @@ export function domOutputSpecToReactElement(
     return () => content
   }
   if (typeof content === 'object' && 'length' in content) {
-    const [tag, attrs, children, ...rest] = content as DOMOutputSpecArray
+    // eslint-disable-next-line prefer-const
+    let [tag, attrs, children, ...rest] = content as DOMOutputSpecArray
+    const parts = tag.split(' ')
+
+    if (parts.length > 1) {
+      tag = parts[1]
+      if (attrs === undefined) {
+        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 === undefined) {
       return () => React.createElement(tag, mapAttrsToHTMLAttributes(undefined, key.toString()))
@@ -53,27 +72,28 @@ export function domOutputSpecToReactElement(
     if (typeof attrs === 'object') {
       if (Array.isArray(attrs)) {
         if (children === undefined) {
-          return child => React.createElement(
-            tag,
-            mapAttrsToHTMLAttributes(undefined, key.toString()),
-            domOutputSpecToReactElement(attrs as DOMOutputSpecArray, key++)(child),
-          )
+          return child =>
+            React.createElement(
+              tag,
+              mapAttrsToHTMLAttributes(undefined, key.toString()),
+              domOutputSpecToReactElement(attrs as DOMOutputSpecArray, key++)(child),
+            )
         }
         if (children === 0) {
-          return child => React.createElement(
+          return child =>
+            React.createElement(
+              tag,
+              mapAttrsToHTMLAttributes(undefined, key.toString()),
+              domOutputSpecToReactElement(attrs as DOMOutputSpecArray, key++)(child),
+            )
+        }
+        return child =>
+          React.createElement(
             tag,
             mapAttrsToHTMLAttributes(undefined, key.toString()),
-            domOutputSpecToReactElement(attrs as DOMOutputSpecArray, key++)(child),
+            domOutputSpecToReactElement(attrs as DOMOutputSpecArray)(child),
+            [children].concat(rest).map(outputSpec => domOutputSpecToReactElement(outputSpec, key++)(child)),
           )
-        }
-        return child => React.createElement(
-          tag,
-          mapAttrsToHTMLAttributes(undefined, key.toString()),
-          domOutputSpecToReactElement(attrs as DOMOutputSpecArray)(child),
-          [children]
-            .concat(rest)
-            .map(outputSpec => domOutputSpecToReactElement(outputSpec, key++)(child)),
-        )
       }
       if (children === undefined) {
         return () => React.createElement(tag, mapAttrsToHTMLAttributes(attrs, key.toString()))
@@ -82,19 +102,18 @@ export function domOutputSpecToReactElement(
         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)),
-      )
+      return child =>
+        React.createElement(
+          tag,
+          mapAttrsToHTMLAttributes(attrs, key.toString()),
+          [children].concat(rest).map(outputSpec => domOutputSpecToReactElement(outputSpec, key++)(child)),
+        )
     }
   }
 
   // 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,
     },
@@ -113,9 +132,9 @@ export function renderToReactElement({
   extensions,
   options,
 }: {
-  content: Node | JSONContent;
-  extensions: Extensions;
-  options?: Partial<TiptapStaticRendererOptions<React.ReactNode, Mark, Node>>;
+  content: Node | JSONContent
+  extensions: Extensions
+  options?: Partial<TiptapStaticRendererOptions<React.ReactNode, Mark, Node>>
 }): React.ReactNode {
   return renderToElement<React.ReactNode>({
     renderer: renderJSONContentToReactElement,

package/src/helpers.example.ts

@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { getAttributesFromExtensions, resolveExtensions } from '@tiptap/core'
-import { TextAlign } from '@tiptap/extension-text-align'
-import { TextStyle } from '@tiptap/extension-text-style'
-import StarterKit from '@tiptap/starter-kit'
-
-import { getAttributes } from './helpers.js'
-
-const extensionAttributes = getAttributesFromExtensions(
-  resolveExtensions([
-    StarterKit,
-    TextAlign.configure({
-      types: ['paragraph', 'heading'],
-    }),
-    TextStyle,
-  ]),
-)
-const attributes = getAttributes(
-  {
-    type: 'heading',
-    attrs: {
-      textAlign: 'right',
-    },
-    content: [
-      {
-        type: 'text',
-        text: 'hello world',
-      },
-    ],
-  },
-  extensionAttributes,
-)
-
-// eslint-disable-next-line no-console
-console.log(attributes)

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

@@ -1,46 +0,0 @@
-import { renderJSONContentToString } from './string.js'
-
-/**
- * This example demonstrates how to render a JSON representation of a node to a string
- * It does so without including Prosemirror or Tiptap, it is the lightest possible way to render JSON content
- * But, since it doesn't include Prosemirror or Tiptap, it cannot automatically render marks or nodes for you.
- * If you need that, you should use the `renderToHTMLString` from `@tiptap/static-renderer`
- *
- * 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(
-  renderJSONContentToString({
-    nodeMapping: {
-      text({ node }) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return node.text!
-      },
-      heading({ node, children }) {
-        const level = node.attrs?.level
-        const attrs = Object.entries(node.attrs || {})
-          .map(([key, value]) => `${key}=${JSON.stringify(value)}`)
-          .join(' ')
-
-        return `<h${level}${attrs ? ` ${attrs}` : ''}>${([] as string[])
-          .concat(children || '')
-          .filter(Boolean)
-          .join('\n')}</h${level}>`
-      },
-    },
-    markMapping: {},
-  })({
-    content: {
-      type: 'heading',
-      content: [
-        {
-          type: 'text',
-          text: 'hello world',
-          marks: [],
-        },
-      ],
-      attrs: { level: 2 },
-    },
-  }),
-)

package/src/json/react/react.example.ts

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import { NodeType } from '../../types.js'
-import { NodeProps } from '../renderer.js'
-import { renderJSONContentToReactElement } from './react.js'
-
-/**
- * This example demonstrates how to render a JSON representation of a node to a React element
- * It does so without including Prosemirror or Tiptap, it is the lightest possible way to render JSON content
- * But, since it doesn't include Prosemirror or Tiptap, it cannot automatically render marks or nodes for you.
- * If you need that, you should use the `renderToReactElement` from `@tiptap/static-renderer`
- *
- * 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(renderJSONContentToReactElement({
-  nodeMapping: {
-    text({ node }) {
-      return node.text ?? null
-    },
-    heading({
-      node,
-      children,
-    }: NodeProps<NodeType<'heading', { level: number }>, React.ReactNode>) {
-      const level = node.attrs.level
-      const hTag = `h${level}`
-
-      return React.createElement(hTag, node.attrs, children)
-    },
-  },
-  markMapping: {},
-})({
-  content: {
-    type: 'heading',
-    content: [
-      {
-        type: 'text',
-        text: 'hello world',
-        marks: [],
-      },
-    ],
-    attrs: { level: 2 },
-  },
-}))

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

@@ -1,225 +0,0 @@
-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',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  }),
-)