feat(jsx): add @tiptap/jsx for more convenient rendering of Tiptap content

demos/vite.config.ts

@@ -41,6 +41,10 @@ const getPackageDependencies = () => {
       }
     })
 
+  // Handle the JSX runtime alias
+  paths.unshift({ find: '@tiptap/core/jsx-runtime', replacement: resolve('../packages/core/src/jsx-runtime.ts') })
+  paths.unshift({ find: '@tiptap/core/jsx-dev-runtime', replacement: resolve('../packages/core/src/jsx-runtime.ts') })
+
   return paths
 }
 

packages/core/jsx-runtime/index.cjs

@@ -0,0 +1 @@
+export * from '../dist/jsx-runtime.cjs'

packages/core/jsx-runtime/index.d.ts

@@ -0,0 +1,17 @@
+export type * from '../dist/packages/core/src/jsx-runtime.d.ts'
+
+declare namespace React {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any
+    }
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any
+    }
+  }
+}

packages/core/jsx-runtime/index.js

@@ -0,0 +1 @@
+export * from '../dist/jsx-runtime.js'

packages/core/package.json

@@ -21,6 +21,18 @@
       "types": "./dist/packages/core/src/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime/index.d.ts",
+      "browser": "./jsx-runtime/index.js",
+      "import": "./jsx-runtime/index.js",
+      "require": "./jsx-runtime/index.cjs"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-runtime/index.d.ts",
+      "browser": "./jsx-runtime/index.js",
+      "import": "./jsx-runtime/index.js",
+      "require": "./jsx-runtime/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -29,7 +41,8 @@
   "types": "dist/packages/core/src/index.d.ts",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "jsx-runtime"
   ],
   "devDependencies": {
     "@tiptap/pm": "^2.6.6"

packages/core/rollup.config.js

@@ -2,4 +2,12 @@ import { baseConfig } from '@tiptap-shared/rollup-config'
 
 import pkg from './package.json' assert { type: 'json' }
 
-export default baseConfig({ input: 'src/index.ts', pkg })
+export default [baseConfig({ input: 'src/index.ts', pkg }), baseConfig({
+  input: 'src/jsx-runtime.ts',
+  pkg: {
+    name: '@tiptap/core/jsx-runtime',
+    main: 'dist/jsx-runtime.cjs',
+    module: 'dist/jsx-runtime.js',
+    umd: 'dist/jsx-runtime.umd.js',
+  },
+})]

packages/core/src/index.ts

@@ -5,6 +5,7 @@ export * as extensions from './extensions/index.js'
 export * from './helpers/index.js'
 export * from './InputRule.js'
 export * from './inputRules/index.js'
+export * from './jsx-runtime.js'
 export * from './Mark.js'
 export * from './Node.js'
 export * from './NodePos.js'

packages/core/src/jsx-runtime.ts

@@ -0,0 +1,52 @@
+type Attributes = Record<string, any>;
+
+export type DOMOutputSpecElement = 0 | Attributes | DOMOutputSpecArray;
+/**
+ * Better describes the output of a `renderHTML` function in prosemirror
+ * @see https://prosemirror.net/docs/ref/#model.DOMOutputSpec
+ */
+export type DOMOutputSpecArray =
+  | [string]
+  | [string, Attributes]
+  | [string, 0]
+  | [string, Attributes, 0]
+  | [string, Attributes, DOMOutputSpecArray | 0]
+  | [string, DOMOutputSpecArray];
+
+export type JSXRenderer = (
+  tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement),
+  props?: Attributes,
+  ...children: JSXRenderer[]
+) => DOMOutputSpecArray | DOMOutputSpecElement;
+
+export function Fragment(props: { children: JSXRenderer[] }) {
+  return props.children
+}
+
+export const h: JSXRenderer = (tag, attributes) => {
+  // Treat the slot tag as the Prosemirror hole to render content into
+  if (tag === 'slot') {
+    return 0
+  }
+
+  // If the tag is a function, call it with the props
+  if (tag instanceof Function) {
+    return tag(attributes)
+  }
+
+  const { children, ...rest } = attributes ?? {}
+
+  // Otherwise, return the tag, attributes, and children
+  return [tag, rest, children]
+}
+
+// See
+// https://esbuild.github.io/api/#jsx-import-source
+// https://www.typescriptlang.org/tsconfig/#jsxImportSource
+
+export {
+  h as createElement,
+  h as jsx,
+  h as jsxDEV,
+  h as jsxs,
+}

tsconfig.json

@@ -3,7 +3,7 @@
     "target": "es2019",
     "module": "esnext",
     "strict": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "importHelpers": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,