Tiptap 的强大之处在于其 机制，开发者Ke以通过以下方式自定义功Neng：

脚注组件 Footnote 是通过第二种方式，即创建新 实现的。总体参照 LinkPopover 组件改造，完成上标及悬浮提示的功Neng。

// extension-footnote.ts
import { Node, mergeAttributes } from "@tiptap/core";
export interface FootnoteOptions {
  HTMLAttributes: Record<string, any>;
}
declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    footnote: {
      /** 设置脚注 */
      setFootnote:  => ReturnType;
      /** 移除脚注 */
      unsetFootnote:  => ReturnType;
      /** geng新脚注 */
      updateFootnote:  => ReturnType;
    };
  };
}
export const Footnote = Node.create<FootnoteOptions>({
  name: "footnote", // 节点唯一标识
  group: "inline", // 属于行内元素组，可嵌入文本中
  inline: true, // 行内节点
  atom: true, // 原子节点，不可拆分
  selectable: true, // 可被选中
  addAttributes {
    return {
      // 脚注符号
      text: {
        default: "", // 默认符号
        parseHTML:  => element.getAttribute, // 解析上标符号数据属性的值为文本内容。element Ke以是 DOM 元素或解析后的节点对象。这部分负责将上标标签中的数据属性提取出来。例如  会解析为 data-text 的值，也就是 "①"。这个数据属性通常用于存储上标符号本身。
        renderHTML:  => , // 渲染上标符号的数据属性为 HTML 数据属性 data-text。这部分负责将渲染后的上标标签转化为一个包含数据属性的 HTML 元素。例如  会渲染为一个包含 data-text 的 sup 标签。这里的 renderHTML 函数接受一个参数 attrs，它是一个包含节点属性的对象。attrs 对象包含了节点的各种属性信息，例如 text、content 等。我们在这里使用 attrs.text 来获取上标符号的数据属性值，并将其设置为 data-text 属性的值。"data-text": attrs.text }),//渲染出相应的html内容，比如 
      },
      // 脚注内容这个部分负责存储和管理脚注的内容信息。这里定义了 content 这个属性及其对应的 parseHTML 和 renderHTML 方法。content 通常用于存储脚注的文本内容，比如“请输入脚注内容”。这个属性Ke以用来存储用户在编辑脚注时的输入内容。这个方法处理给定的元素并返回一个包含数据属性的对象；renderHTML 方法则将渲染后的元素转化为一个包含数据属性的 HTML 元素。",content": attrs.content }),//保存和管理给定的元素的对应内容信息和 renderRender后的相应html标签。",
    };
  },
  // 解析规则：识别带data-footnote属性的sup标签这是 Footnote 组件的核心解析逻辑之一，它负责识别文档中存在的带有特定数据的 sup 标签以及它们的含义。当编辑器解析到带 `data-footnote` 数据属性的 `sup` 标签时会触发该方法并处理该标签的信息。"parseHTML {
    return ;
  },
  // 渲染逻辑：上标标签+自定义符号+内容属性这是 Footnote 组件的核心渲染逻辑之一 ，它负责将Yi解析到的 footnote 信息转化为实际的 HTML 内容 。当编辑器需要渲染 footnote 时会调用该方法并将 footnote 信息传递给它。"renderHTML {
    const { text, content } = node.attrs; // 获取当前 footnote 的文本和内容信息 。node 对象包含了当前 footnote 的所有 atributo 信息 ，包括 text 和 content 等 。通过访问 node.attrs 中 text 和 content 这两个 atributo Ke以获取当前 footnote 所对应的文本和内容信息 。这些信息通常用于构建Zui终的 HTML 内容 。根据具体的需求 ，还Ke以访问其他 atributo 信息来进一步定制 footnote 的渲染效果。"
    return  ,     Text ,
    ];
  },
  // 插入命令：接收符号和内容参数这是 Footnote 组件的核心插入命令之一 ，它负责根据用户提供的参数插入新的 footnote 到文档中。当用户想要插入一个新的 footnote 时会调用该方法并将插入命令传递给它。"addCommands {
    return {   // 定义了一个对象来描述所有的命令及其对应的执行函数集合 。命令是编辑器Ke以执行的操作 ，例如插入 、删除 、修改等操作 。每个命令dou对应一个函数 ，该函数负责执行该操作并返回结果集。
      setFootnote: =>  =>{     return commands.insertContent; },   unsetFootnote :  =>  =>{ return commands.deleteSelection; },
    };
  },
  addKeyboardShortcuts {
    return {
      "Mod-Shift-F":  => {          return this.editor.commands.setFootnote;          },
    };
  },
});

编辑器配置

const editor = useEditor;

命令创建

// 插入脚注editor.commands.setFootnote;//移除脚注editor.commands.unsetFootnote;

JSON 数据初始化

// 上标{                 "type" : "text",                 "marks" : ,                 "text" : "②"},//脚注{                 "type" : "footnote",                 "attrs":     {                 "text": "②",                 "content": "这是脚注内容"},

选中文本初始化标记

默认情况下脚注标记和脚注内容dou是空的；Ru果选中文本后再点击脚注组件，则会将选中的文本作为脚注标记，自动填充进去。

const setFootnote = React.useCallback => {         if  return;         const { selection, doc } = editor.state;         // 获取选中文本         const selectedText = doc.textBetween;         const finalText = selectedText || text;         chain = editor.