Tiptap v3自定义markInputRule移除闭合方括号问题求助

我完全懂你现在的困扰——想在Tiptap v3里做个自定义标记，识别[tag:value]这种内嵌在文本里的标签，结果要么括号莫名消失，要么内容匹配得乱七八糟，还得保证整个标签（包括方括号）完完整整留在文本里对吧？我来帮你排查下问题，再给你调整好的代码。

先说说你现有代码里的问题 #

1. 正则表达式写错了：你之前试的/[(\w+:[^]]+)]/是个典型的正则误区——[在正则里是字符集的起始符号，这个表达式实际是在匹配(、字母数字、冒号、非]的字符、)、]这些零散字符，完全不是你要的[tag:value]格式，这就是括号消失的核心原因。
2. getAttributes里的text属性没用：Mark的属性列表里根本没有text这个字段，你返回text: match[0]不仅不会保留文本，反而可能干扰标记的正常逻辑。

修正后的完整代码 #

import { Mark, mergeAttributes, markInputRule } from "@tiptap/core";

export const TagMark = Mark.create({
  name: "tag-mark",
  addAttributes() {
    return {
      type: { 
        default: null 
      },
      value: { // 新增value属性用来存标签的值，后续想用也方便
        default: null
      },
      class: { 
        default: "tag-mark" 
      },
    };
  },
  parseHTML() {
    return [{ 
      tag: 'span[data-type="tag-mark"]',
      getAttrs: (dom) => ({
        type: dom.getAttribute('data-tag-type'),
        value: dom.getAttribute('data-tag-value')
      })
    }];
  },
  renderHTML({ HTMLAttributes }) {
    return [ 
      "span", 
      mergeAttributes(HTMLAttributes, { 
        "data-type": "tag-mark", 
        "data-tag-type": HTMLAttributes.type,
        "data-tag-value": HTMLAttributes.value,
        style: "color: green", 
      }), 
      0, 
    ];
  },
  addInputRules() {
    return [
      markInputRule({
        // 精准匹配[tag:value]格式，分组捕获类型和值
        find: /\[(\w+):([^\]]+)\]$/,
        type: this.type,
        getAttributes: (match) => {
          // 从正则分组里提取标签的类型和值，存到标记属性里
          return { 
            type: match[1], 
            value: match[2] 
          };
        },
      }),
    ];
  },
});

关键修改点说明 #

• 正则修正：/\[(\w+):([^\]]+)\]$/专门针对[tag:value]设计：
  • \[和\]转义后才能准确匹配方括号（避免被当成正则字符集）
  • (\w+)捕获标签的类型（比如tag），([^\]]+)捕获标签的值（比如hello）
  • 末尾的$确保只有当用户输入完闭合方括号（也就是标签完整时）才触发标记规则
• 属性优化：新增value属性存标签值，同时在渲染和解析时同步对应的data属性，后续要获取标签信息直接读属性就行
• 保留原文本：现在getAttributes只处理标记的属性，完全不会修改用户输入的[tag:hello]文本，方括号会完整保留在内容里

现在你测试下，输入[tag:hello]之后按下空格或者继续输入其他内容，这段标签就会自动变成绿色，而且整个[tag:hello]都会完整留在文本里，像"This is [tag:hello] inline"这种内嵌场景也能完美工作啦。

内容来源于stack exchange