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

packages/jsx/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

packages/jsx/README.md

@@ -0,0 +1,18 @@
+# @tiptap/static-renderer
+
+[![Version](https://img.shields.io/npm/v/@tiptap/static-renderer.svg?label=version)](https://www.npmjs.com/package/@tiptap/static-renderer)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/static-renderer.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/static-renderer.svg)](https://www.npmjs.com/package/@tiptap/static-renderer)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

packages/jsx/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@tiptap/jsx",
+  "description": "statically render Tiptap JSON",
+  "version": "2.6.6",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap static renderer",
+    "tiptap react renderer"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/packages/jsx/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
+  "types": "dist/packages/jsx/src/index.d.ts",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@tiptap/core": "^2.6.6",
+    "@tiptap/pm": "^2.6.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/jsx"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

packages/jsx/rollup.config.js

@@ -0,0 +1,5 @@
+import { baseConfig } from '@tiptap-shared/rollup-config'
+
+import pkg from './package.json' assert { type: 'json' }
+
+export default baseConfig({ input: 'src/index.ts', pkg })

packages/jsx/src/jsx.tsx

@@ -0,0 +1,65 @@
+export 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];
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    // @ts-ignore - conflict with React typings
+    type Element = [string, ...any[]]
+    interface IntrinsicElements {
+      // @ts-ignore - conflict with React typings
+      [key: string]: any;
+    }
+  }
+}
+
+export type JSXRenderer = (
+  tag: 'slot' | string | ((props?: Attributes) => DOMOutputSpecArray | DOMOutputSpecElement),
+  props?: Attributes,
+  ...children: JSXRenderer[]
+) => DOMOutputSpecArray | DOMOutputSpecElement;
+
+/**
+ * The JSX pragma function for tiptap
+ * It will render JSX to a format that Tiptap's `renderHTML` function can understand
+ * @example A simple div element
+ * ```tsx
+ * renderHTML({ HTMLAttributes }) {
+ *  return <div {...HTMLAttributes}></div>;
+ * }
+ * ```
+ * @example A div element that wraps it's children
+ * ```tsx
+ * renderHTML({ HTMLAttributes }) {
+ * return <div {...HTMLAttributes}><slot /></div>;
+ * }
+ * ```
+ */
+export const jsxTiptap: JSXRenderer = (tag, attributes, ...children) => {
+  // 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)
+  }
+
+  // Otherwise, return the tag, attributes, and children
+  return [tag, attributes ?? {}, ...children]
+}
+
+export const children = 0