JSX

在创建自定义扩展时，您通常需要定义它们如何渲染为 HTML。通常，可以通过定义一个 renderHTML 函数来完成，该函数返回 Prosemirror 渲染数组，包括标签名称、属性和内容孔。

使用 Tiptap 的 JSX 渲染器，您可以使用 JSX 来定义您的扩展应如何渲染。

在扩展中使用 JSX

要在扩展中使用 JSX，您需要一个可以处理 JSX 或 TSX 文件的打包工具，比如 Vite 或 Webpack。大多数框架，如 Next.js、Remix 或 Nuxt，应该已经能够处理这个问题。

如果没有其他配置，默认使用 React 的 JSX 运行时。这在您尝试在非 React 环境中使用 JSX（如 Tiptap 扩展）时会导致问题。

为了处理这个问题，您可以在文件顶部添加一条注释，以指定打包工具应使用哪个 JSX 运行时。Tiptap 附带了来自 @tiptap/core 的自己的打包工具。

/** @jsxImportSource @tiptap/core */

// 在此处编写您的代码

在 renderHTML 函数中编写 JSX

现在，打包工具应该能够为 Tiptap 处理 JSX，您可以在 renderHTML 函数中使用 JSX。

/** @jsxImportSource @tiptap/core */

import { Node } from '@tiptap/core'

const MyNode = Node.create({
  // ... 您的节点配置

  renderHTML({ HTMLAttributes }) {
    return (
      <div {...HTMLAttributes}>
        <p>这是您的自定义节点。这里是您的内容孔：</p>
        <slot />
      </div>
    )
  }
})

<slot /> 标签用于通过 JSX 定义 Prosemirror 的内容孔。这是您的可编辑内容将被渲染的位置。

注意，这并没有使用任何组件库，如 React 或 Vue 的底层实现，并且不会支持钩子、状态或其他特定于库的功能。