使用 React 标记视图

如果你习惯于使用 React，使用原生 JavaScript 可能会感觉复杂。好消息是：你也可以在标记视图中使用常规的 React 组件。只需要了解一点点内容，让我们逐步来看看。

渲染一个 React 组件

在编辑器中渲染 React 组件，需要执行以下操作：

创建一个标记扩展
创建一个 React 组件
将该组件传递给提供的 ReactNodeViewRenderer
使用 addMarkView() 注册它
配置 Tiptap 使用你的新节点扩展

下面是你的节点扩展可能的写法：

import { Mark } from '@tiptap/core'
import { ReactMarkViewRenderer } from '@tiptap/react'

import Component from './Component.jsx'

export default Mark.create({
  // 选项…

  addMarkView() {
    return ReactMarkViewRenderer(Component)
  },
})

以下是一个 React 组件示例：

import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

export default (props: MarkViewRendererProps) => {
  const [count, setCount] = React.useState(0)

  return (
    <span className="content" data-test-id="mark-view">
      <MarkViewContent />
      <label contentEditable={false}>
        React 组件：
        <button
          onClick={() => {
            setCount(count + 1)
          }}
        >
          这个按钮已被点击 {count} 次。
        </button>
      </label>
    </span>
  )
}

明白了吗？让我们看看实际效果。欢迎复制下面的示例开始使用。

更新标记视图属性

更新标记视图的属性非常简单。您可以使用 MarkViewRendererProps 提供的 updateAttributes 方法来更新标记视图的属性。

import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

export default (props: MarkViewRendererProps) => {
  return (
    <span id={props.HTMLAttributes.id}>
      <MarkViewContent />
      <button onClick={() => props.updateAttributes({ id: Date.now() })}>Update ID</button>
    </span>
  )
}