@tiptap/static-renderer 3.0.0-next.1

package/src/pm/react/react.example.tsx

@@ -0,0 +1,306 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  Node,
+  NodeViewContent,
+  ReactNodeViewContentProvider,
+  ReactNodeViewRenderer,
+} from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { renderToReactElement } from './react.jsx'
+
+// This component does not have a NodeViewContent, so it does not render it's children's rich text content
+function MyCustomComponentWithoutContent() {
+  const [count, setCount] = React.useState(200)
+
+  return (
+    <div className='custom-component-without-content' onClick={() => setCount(a => a + 1)}>
+      {count} This is a react component!
+    </div>
+  )
+}
+
+// This component does have a NodeViewContent, so it will render it's children's rich text content
+function MyCustomComponentWithContent() {
+  return (
+    <div className='custom-component-with-content'>
+      Custom component with content in React!
+      <NodeViewContent />
+    </div>
+  )
+}
+
+/**
+ * This example demonstrates how to render a Prosemirror Node (or JSON Content) to a React Element.
+ * 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 React without having an actual editor instance.
+ *
+ * You have complete control over the rendering process. And can replace how each Node/Mark is rendered.
+ */
+
+const CustomNodeExtensionWithContent = Node.create({
+  name: 'customNodeExtensionWithContent',
+  content: 'text*',
+  group: 'block',
+  renderHTML() {
+    return ['div', { class: 'my-custom-component-with-content' }, 0] as const
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(MyCustomComponentWithContent)
+  },
+})
+
+const CustomNodeExtensionWithoutContent = Node.create({
+  name: 'customNodeExtensionWithoutContent',
+  atom: true,
+  renderHTML() {
+    return ['div', { class: 'my-custom-component-without-content' }] as const
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(MyCustomComponentWithoutContent)
+  },
+})
+
+const Element = renderToReactElement({
+  extensions: [StarterKit, CustomNodeExtensionWithContent, CustomNodeExtensionWithoutContent],
+  options: {
+    nodeMapping: {
+      // You can replace the rendering of a node with a custom react component
+      heading({ node, children }) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [count, setCount] = React.useState(100)
+
+        return <h1 {...node.attrs} onClick={() => setCount(100)}>Can you use React hooks? {count}% {children}</h1>
+      },
+      // Node views are not supported in the static renderer, so you need to supply the custom component yourself
+      customNodeExtensionWithContent({ children }) {
+        return (
+          <ReactNodeViewContentProvider content={children}>
+            <MyCustomComponentWithContent />
+          </ReactNodeViewContentProvider>
+        )
+      },
+      customNodeExtensionWithoutContent() {
+        return <MyCustomComponentWithoutContent />
+      },
+    },
+    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,',
+          },
+        ],
+      },
+      // This is a custom node extension with content
+      {
+        type: 'customNodeExtensionWithContent',
+        content: [
+          {
+            type: 'text',
+            text: 'MY CUSTOM COMPONENT CONTENT!!!',
+          },
+        ],
+      },
+      // This is a custom node extension without content
+      {
+        type: 'customNodeExtensionWithoutContent',
+      },
+      {
+        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',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+})
+
+// eslint-disable-next-line no-console
+console.log(renderToStaticMarkup(Element))

package/src/pm/react/react.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable no-plusplus, @typescript-eslint/no-explicit-any */
+import { 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'
+
+/**
+ * This function maps the attributes of a node or mark to HTML attributes
+ * @param attrs The attributes to map
+ * @param key The key to use for the React element
+ * @returns The mapped HTML attributes as an object
+ */
+function mapAttrsToHTMLAttributes(attrs?: Record<string, any>, key?: string): Record<string, any> {
+  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 },
+  )
+}
+
+/**
+ * Take a DOMOutputSpec and return a function that can render it to a React element
+ * @param content The DOMOutputSpec to convert to a React element
+ * @returns A function that can render the DOMOutputSpec to a React element
+ */
+export function domOutputSpecToReactElement(
+  content: DOMOutputSpec,
+  key = 0,
+): (children?: React.ReactNode) => React.ReactNode {
+  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 () => React.createElement(tag, mapAttrsToHTMLAttributes(undefined, key.toString()))
+    }
+    if (attrs === 0) {
+      return child => React.createElement(tag, mapAttrsToHTMLAttributes(undefined, key.toString()), child)
+    }
+    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),
+          )
+        }
+        if (children === 0) {
+          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)(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()),
+        [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',
+    {
+      cause: content,
+    },
+  )
+}
+
+/**
+ * This function will statically render a Prosemirror Node to a React component using the given extensions
+ * @param content The content to render to a React component
+ * @param extensions The extensions to use for rendering
+ * @param options The options to use for rendering
+ * @returns The React element that represents the rendered content
+ */
+export function renderToReactElement({
+  content,
+  extensions,
+  options,
+}: {
+  content: Node | JSONContent;
+  extensions: Extensions;
+  options?: Partial<TiptapStaticRendererOptions<React.ReactNode, Mark, Node>>;
+}): React.ReactNode {
+  return renderToElement<React.ReactNode>({
+    renderer: renderJSONContentToReactElement,
+    domOutputSpecToElement: domOutputSpecToReactElement,
+    mapDefinedTypes: {
+      // Map a doc node to concatenated children
+      doc: ({ children }) => <>{children}</>,
+      // Map a text node to its text content
+      text: ({ node }) => node.text ?? '',
+    },
+    content,
+    extensions,
+    options,
+  })
+}

package/src/types.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * A mark type is either a JSON representation of a mark or a Prosemirror mark instance
+ */
+export type MarkType<
+  Type extends string = any,
+  Attributes extends undefined | Record<string, any> = any,
+> = {
+  type: Type;
+  attrs: Attributes;
+};
+
+/**
+ * A node type is either a JSON representation of a node or a Prosemirror node instance
+ */
+export type NodeType<
+  Type extends string = any,
+  Attributes extends undefined | Record<string, any> = any,
+  NodeMarkType extends MarkType = any,
+  Content extends NodeType[] = any,
+> = {
+  type: Type;
+  attrs: Attributes;
+  content?: Content;
+  marks?: NodeMarkType[];
+  text?: string;
+};
+
+/**
+ * A node type is either a JSON representation of a doc node or a Prosemirror doc node instance
+ */
+export type DocumentType<
+  TNodeAttributes extends Record<string, any> = Record<string, any>,
+  TContentType extends NodeType[] = NodeType[],
+> = NodeType<'doc', TNodeAttributes, never, TContentType>;
+
+/**
+ * A node type is either a JSON representation of a text node or a Prosemirror text node instance
+ */
+export type TextType<TMarkType extends MarkType = MarkType> = {
+  type: 'text';
+  text: string;
+  marks: TMarkType[];
+};
+
+/**
+ * Describes the output of a `renderHTML` function in prosemirror
+ * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec
+ */
+export type DOMOutputSpecArray =
+  | [string]
+  | [string, Record<string, any>]
+  | [string, 0]
+  | [string, Record<string, any>, 0]
+  | [string, Record<string, any>, DOMOutputSpecArray | 0]
+  | [string, DOMOutputSpecArray];