tiptap2.0 在react中实现组件嵌套并且可编辑

tiptap 2.0是一个基于ProseMirror的富文本编辑器，它提供了许多扩展性和可定制性选项。在React中实现组件嵌套并且可编辑的方式与tiptap 1.x类似，使用NodeViews和MarkViews来渲染节点和标记，并使用React组件来实现嵌套的组件。

以下是一个在React中实现组件嵌套并且可编辑的示例：

import { Extension } from '@tiptap/core'
import { NodeViewWrapper } from '@tiptap/react'
import React from 'react'

export default Extension.create({
  name: 'customLink',

  defaultOptions: {
    url: '',
    title: '',
  },

  addGlobalAttributes() {
    return [
      {
        types: this.type.name,
        attributes: {
          url: {
            default: null,
            parseHTML: (element) => ({
              url: element.getAttribute('href'),
            }),
            renderHTML: (attributes) => ({
              href: attributes.url,
            }),
          },
          title: {
            default: null,
            parseHTML: (element) => ({
              title: element.getAttribute('title'),
            }),
            renderHTML: (attributes) => ({
              title: attributes.title,
            }),
          },
        },
      },
    ]
  },

  addCommands() {
    return {
      setCustomLink: (attributes) => ({ commands }) => {
        return commands.insertContent({
          type: this.type.name,
          attrs: attributes,
          content: [{ type: 'text', text: attributes.title }],
        })
      },
    }
  },

  createNodeSpec() {
    return {
      attrs: {
        url: { default: null },
        title: { default: null },
      },
      group: 'inline',
      inline: true,
      draggable: true,
      selectable: true,
      atom: true,
      toDOM: (node) => [
        'a',
        {
          href: node.attrs.url,
          title: node.attrs.title,
        },
        0,
      ],
      parseDOM: [
        {
          tag: 'a[href]',
          getAttrs: (dom) => ({
            url: dom.getAttribute('href'),
            title: dom.getAttribute('title'),
          }),
        },
      ],
    }
  },

  createNodeViews() {
    return {
      customLink: NodeViewWrapper.from((nodeViewProps) => {
        const { node, updateAttributes } = nodeViewProps

        const handleChange = (event) => {
          updateAttributes({
            url: event.target.value,
          })
        }

        return (
          <a href={node.attrs.url} title={node.attrs.title}>
            <input type="text" value={node.attrs.url} onChange={handleChange} />
            {nodeViewProps.children}
          </a>
        )
      }),
    }
  },
})

在上面的示例中，我们创建了一个名为customLink的扩展，它使用了ProseMirror的NodeSpec和NodeViewWrapper来渲染节点。我们还为该扩展添加了一个全局属性，以及一个用于设置自定义链接的命令。

在createNodeSpec方法中，我们定义了节点的schema，指定了节点的属性、标签和解析/序列化规则。

在createNodeViews方法中，我们定义了节点的视图组件。我们使用NodeViewWrapper将节点的属性和更新函数传递给React组件，以便在视图中进行编辑。在此示例中，我们将自定义链接的URL呈现为一个可编辑的文本框。

最后，我们将customLink扩展导出为默认值。