WIP PDF static rendering demo

packages/static-renderer/package.json

@@ -87,7 +87,8 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "@react-pdf/renderer": "^4.0.0"
   },
   "repository": {
     "type": "git",

packages/static-renderer/src/json/react-pdf/index.ts

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

packages/static-renderer/src/json/react-pdf/react-pdf.example.tsx

@@ -0,0 +1,66 @@
+import ReactPDF from '@react-pdf/renderer'
+
+import { renderJSONContentToReactPdf } from './react-pdf.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
+const Element = renderJSONContentToReactPdf()({
+  content: {
+    type: 'doc',
+    content: [
+      {
+        type: 'heading',
+        content: [
+          {
+            type: 'text',
+            text: 'hello world',
+            marks: [],
+          },
+        ],
+        attrs: { level: 2 },
+      },
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'hello world',
+            marks: [],
+          },
+          {
+            type: 'text',
+            text: 'hello world today is a test of this and of thathello world today is a test of this and of thathello world today is a test of this and of thathello world today is a test of this and of thathello world today is a test of this and of thathello world today is a test of this and of thathello world today is a test of this and of that',
+            marks: [],
+          },
+          {
+            type: 'text',
+            text: 'hello world',
+            marks: [],
+          },
+          {
+            type: 'text',
+            text: 'hello world',
+            marks: [],
+          },
+          {
+            type: 'text',
+            text: 'hello world',
+            marks: [],
+          },
+        ],
+        attrs: { level: 2 },
+      },
+    ],
+    attrs: {},
+  },
+})
+
+ReactPDF.render(Element as any, `${__dirname}/example.pdf`)

packages/static-renderer/src/json/react-pdf/react-pdf.tsx

@@ -0,0 +1,69 @@
+import { Document, Page, StyleSheet, Text, View } from '@react-pdf/renderer'
+import React from 'react'
+
+import { renderJSONContentToReactElement } from '../react/react.js'
+
+const styles = StyleSheet.create({
+  page: {
+    flexDirection: 'row',
+    backgroundColor: '#E4E4E4',
+  },
+  section: {
+    margin: 10,
+    padding: 10,
+    flexGrow: 1,
+  },
+  h1: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginVertical: 10,
+  },
+  h2: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginVertical: 10,
+  },
+  h3: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginVertical: 10,
+  },
+  h4: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginVertical: 10,
+  },
+  h5: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginVertical: 10,
+  },
+  h6: {
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginVertical: 10,
+  },
+})
+
+export function renderJSONContentToReactPdf() {
+  return renderJSONContentToReactElement({
+    nodeMapping: {
+      doc: ({ children }) => (
+        <Document>
+          <Page size="A4" style={styles.page}>
+            {children}
+          </Page>
+        </Document>
+      ),
+      paragraph: ({ children }) => <View style={styles.section}>{children}</View>,
+      text: ({ node }) => <Text>{node.text}</Text>,
+      heading: ({ node, children }) => {
+        const level = node.attrs.level
+        const hTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+        return <Text style={styles[hTag]}>{children}</Text>
+      },
+    },
+    markMapping: {},
+  })
+}