Create Tiptap Extension

创建 Tiptap 扩展

前置确认

1. 确认目标编辑器：演训编辑器（src/views/training/document/）还是模板编辑器（src/views/template/editor/）
2. 确认扩展类型：Node（块级/行内节点）、Mark（文本标记）、Extension（功能扩展）

工作流步骤

Step 1: 定义扩展文件

在对应编辑器的 extensions 目录创建 {Name}.ts：

• 演训编辑器：src/views/training/document/components/toolbar/extensions/
• 模板编辑器：src/views/template/editor/extensions/

import { Node, mergeAttributes } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-3'

// 选项接口
export interface MyExtensionOptions {
  HTMLAttributes: Record<string, any>
}

// 命令类型声明
declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    myExtension: {
      setMyExtension: () => ReturnType
    }
  }
}

export const MyExtension = Node.create<MyExtensionOptions>({
  name: 'myExtension',
  group: 'block',
  atom: true,
  selectable: true,
  draggable: true,

  addOptions() {
    return { HTMLAttributes: {} }
  },

  addAttributes() {
    return {
      // 定义节点属性
    }
  },

  parseHTML() {
    return [{ tag: 'div[data-type="my-extension"]' }]
  },

  renderHTML({ HTMLAttributes }) {
    return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
      'data-type': 'my-extension'
    })]
  },

  addCommands() {
    return {
      setMyExtension: () => ({ commands }) => {
        return commands.insertContent({ type: this.name })
      }
    }
  },

  // 如需自定义渲染，取消注释：
  // addNodeView() {
  //   return VueNodeViewRenderer(MyExtensionComponent)
  // },
})