@cgboiler/biz-basic 1.0.47 → 1.0.49

package/es/rich-text-editor/useExtensions.js

@@ -6,33 +6,74 @@ import Mention from "@tiptap/extension-mention";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import { Markdown } from "tiptap-markdown";
-import { Extension, InputRule } from "@tiptap/core";
+import { Extension, InputRule, Mark, mergeAttributes } from "@tiptap/core";
 import HtmlBlock from "./extensions/HtmlBlock";
 import { Placeholder } from "@tiptap/extensions";
 function useExtensions({ props, emit }) {
-  let spentHashTagPositions = [];
-  let spentMentionPositions = [];
   let activeEditor = null;
+  const ConsumedTrigger = Mark.create({
+    name: "consumedTrigger",
+    keepOnSplit: false,
+    // 保证在标记后继续输入时不延续标记
+    parseHTML() {
+      return [{ tag: "span[data-consumed-trigger]" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+      return [
+        "span",
+        mergeAttributes(HTMLAttributes, {
+          "data-consumed-trigger": "true",
+          style: "color: inherit;"
+        }),
+        0
+      ];
+    }
+  });
+  const checkConsumed = (state, range) => {
+    const { doc, schema } = state;
+    const markType = schema.marks.consumedTrigger;
+    if (!markType)
+      return false;
+    let isConsumed = false;
+    doc.nodesBetween(range.from, range.to, (node) => {
+      if (node.marks.some((m) => m.type === markType)) {
+        isConsumed = true;
+      }
+    });
+    return isConsumed;
+  };
+  const markAsConsumed = (editor, range, char) => {
+    if (!editor || !range || range.from === void 0)
+      return;
+    try {
+      const { doc } = editor.state;
+      const actualChar = doc.textBetween(range.from, range.from + 1);
+      if (actualChar === char) {
+        editor.chain().setMeta("addToHistory", false).setTextSelection({ from: range.from, to: range.from + 1 }).setMark("consumedTrigger").setTextSelection(editor.state.selection.to).unsetMark("consumedTrigger").run();
+      }
+    } catch (e) {
+    }
+  };
   const HashTag = Mention.extend({
     name: "hashTag",
-    renderHTML({ node, HTMLAttributes }) {
+    renderHTML({ node }) {
       var _a, _b, _c, _d;
       const id = (_b = (_a = node == null ? void 0 : node.attrs) == null ? void 0 : _a.id) != null ? _b : "";
       const label = (_d = (_c = node == null ? void 0 : node.attrs) == null ? void 0 : _c.label) != null ? _d : "";
-      const attrs = {
-        class: "hash-tag",
-        "data-type": "hashTag",
-        "data-id": id,
-        "data-label": label,
-        "data-hash-tag": "#",
-        contenteditable: "false"
-      };
-      return ["span", attrs, `#${label}`];
+      return [
+        "span",
+        {
+          class: "hash-tag",
+          "data-type": "hashTag",
+          "data-id": id,
+          "data-label": label,
+          "data-hash-tag": "#",
+          contenteditable: "false"
+        },
+        `#${label}`
+      ];
     }
   }).configure({
-    HTMLAttributes: {
-      class: "hash-tag"
-    },
     deleteTriggerWithBackspace: true,
     suggestion: {
       char: "#",
@@ -41,13 +82,10 @@ function useExtensions({ props, emit }) {
       /**
        * allow
        * - 功能：判断是否允许触发建议态。
-       * - 1. 若该位置的 # 已经触发过且未被删除，则不再重复触发（满足“单次触发制/光标静默”）。
+       * - 若该字符带有 consumedTrigger 标记，说明此前已触发过或用户选择忽略，则不再触发建议。
        */
       allow: ({ state, range }) => {
-        if (spentHashTagPositions.includes(range.from)) {
-          return false;
-        }
-        return true;
+        return !checkConsumed(state, range);
       },
       render() {
         let activeRange = null;
@@ -75,111 +113,139 @@ function useExtensions({ props, emit }) {
             activeEditor = editor || activeEditor;
             emit("hashTag-input", query != null ? query : "");
           },
-          /**
-           * onKeyDown
-           * - 功能：在建议态期间侦测用户键盘行为并记录“非连续输入”的退出原因。
-           * - 参数说明：
-           *   - event: KeyboardEvent 当前键盘事件对象。
-           * - 返回值：boolean 始终返回 false，交由默认逻辑处理（从而触发 onExit）。
-           * - 异常：无。
-           */
           onKeyDown({ event }) {
-            const isSpaceKey = event.key === " " || event.key === "Space" || event.key === "Spacebar" || // @ts-ignore 兼容旧浏览器/环境的数值键码
-            event.keyCode === 32 || // 兼容部分环境的 event.code 标识
-            event.code === "Space";
+            const isSpaceKey = [" ", "Space", "Spacebar"].includes(event.key) || // @ts-ignore
+            event.keyCode === 32 || event.code === "Space";
             if (isSpaceKey) {
               exitCause = "space";
-              return false;
             }
             return false;
           },
-          /**
-           * onExit
-           * - 功能：建议态结束时向外部发送退出事件，并尽可能准确地判断退出原因。
-           * - 设计考量：
-           *   - 安卓设备上软键盘可能不触发标准 keydown 空格；此时通过检查当前选择位置前一个字符是否为空格来回溯判断。
-           * - 参数：无。
-           * - 返回值：无（通过 emit 派发事件）。
-           * - 异常：内部读取选择/文档时若发生异常，捕获后保持原有退出原因，不影响外部流程。
-           */
-          onExit({ range }) {
+          onExit({ editor, range }) {
             var _a, _b, _c, _d, _e;
             try {
-              const editorRef = activeEditor;
-              if (editorRef) {
-                const sel = (_a = editorRef.state) == null ? void 0 : _a.selection;
-                const from = (_b = sel == null ? void 0 : sel.from) != null ? _b : 0;
-                const prevChar = (_e = (_d = (_c = editorRef.state) == null ? void 0 : _c.doc) == null ? void 0 : _d.textBetween(Math.max(from - 1, 0), from, "\0", "\0")) != null ? _e : "";
-                if (prevChar === " ") {
-                  exitCause = "space";
-                }
+              const sel = (_a = editor.state) == null ? void 0 : _a.selection;
+              const from = (_b = sel == null ? void 0 : sel.from) != null ? _b : 0;
+              const prevChar = (_e = (_d = (_c = editor.state) == null ? void 0 : _c.doc) == null ? void 0 : _d.textBetween(Math.max(from - 1, 0), from, "\0", "\0")) != null ? _e : "";
+              if (prevChar === " ") {
+                exitCause = "space";
               }
             } catch (e) {
             }
-            if ((range == null ? void 0 : range.from) !== void 0) {
-              spentHashTagPositions.push(range.from);
-            }
+            markAsConsumed(editor, range, "#");
             activeRange = null;
             activeEditor = null;
-            const payload = {
+            emit("hashTag-exit", {
               reason: exitCause,
               nonContiguous: exitCause === "space"
-            };
-            emit("hashTag-exit", payload);
+            });
           }
         };
       }
     }
   });
-  const HashTagTracker = Extension.create({
-    name: "hashTagTracker",
-    onTransaction({ transaction }) {
-      if (spentHashTagPositions.length === 0)
-        return;
-      spentHashTagPositions = spentHashTagPositions.map((pos) => transaction.mapping.map(pos, -1));
-      spentHashTagPositions = spentHashTagPositions.filter((pos) => {
-        try {
-          if (pos < 0 || pos >= transaction.doc.content.size)
-            return false;
-          const char = transaction.doc.textBetween(pos, pos + 1);
-          return char === "#";
-        } catch (e) {
-          return false;
-        }
-      });
-      spentHashTagPositions = Array.from(new Set(spentHashTagPositions));
-    }
-  });
-  const MentionTracker = Extension.create({
-    name: "mentionTracker",
-    onTransaction({ transaction }) {
-      if (spentMentionPositions.length === 0)
-        return;
-      spentMentionPositions = spentMentionPositions.map((pos) => transaction.mapping.map(pos, -1));
-      spentMentionPositions = spentMentionPositions.filter((pos) => {
-        try {
-          if (pos < 0 || pos >= transaction.doc.content.size)
-            return false;
-          const char = transaction.doc.textBetween(pos, pos + 1);
-          return char === "@";
-        } catch (e) {
-          return false;
+  const CustomContent = Mention.extend({
+    name: "customContent",
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-id"),
+          renderHTML: (attributes) => {
+            if (!attributes.id) {
+              return {};
+            }
+            return {
+              "data-id": attributes.id
+            };
+          }
+        },
+        label: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("file-label"),
+          renderHTML: (attributes) => {
+            if (!attributes.label) {
+              return {};
+            }
+            return {
+              "file-label": attributes.label
+            };
+          }
+        },
+        obj: {
+          default: null,
+          parseHTML: (element) => {
+            const objStr = element.getAttribute("obj");
+            return objStr ? JSON.parse(objStr) : null;
+          },
+          renderHTML: (attributes) => {
+            if (!attributes.obj) {
+              return {};
+            }
+            return {
+              obj: JSON.stringify(attributes.obj)
+            };
+          }
+        },
+        color: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-color"),
+          renderHTML: (attributes) => {
+            if (!attributes.color)
+              return {};
+            return { "data-color": attributes.color };
+          }
+        },
+        hoverColor: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-hover-color"),
+          renderHTML: (attributes) => {
+            if (!attributes.hoverColor)
+              return {};
+            return { "data-hover-color": attributes.hoverColor };
+          }
         }
-      });
-      spentMentionPositions = Array.from(new Set(spentMentionPositions));
+      };
+    },
+    renderHTML({ node }) {
+      var _a, _b, _c, _d, _e, _f;
+      const obj = (_b = (_a = node == null ? void 0 : node.attrs) == null ? void 0 : _a.obj) != null ? _b : {};
+      const label = (_d = (_c = node == null ? void 0 : node.attrs) == null ? void 0 : _c.label) != null ? _d : "";
+      const color = (_e = node == null ? void 0 : node.attrs) == null ? void 0 : _e.color;
+      const hoverColor = (_f = node == null ? void 0 : node.attrs) == null ? void 0 : _f.hoverColor;
+      const styleParts = [];
+      if (color)
+        styleParts.push(`--custom-content-color: ${color}`);
+      if (hoverColor)
+        styleParts.push(`--custom-content-hover-color: ${hoverColor}`);
+      return [
+        "span",
+        {
+          class: "custom-content",
+          "data-type": "custom-content",
+          obj: JSON.stringify(obj),
+          "file-label": label,
+          "data-color": color,
+          "data-hover-color": hoverColor,
+          style: styleParts.length ? styleParts.join(";") : void 0,
+          contenteditable: "false"
+        },
+        label
+      ];
     }
   });
   const extensions = [
     StarterKit,
     HtmlBlock,
-    // Video input rule extension for !video(url) syntax
+    ConsumedTrigger,
+    // Video input rule extension
     Extension.create({
       name: "videoInputRule",
       addInputRules() {
         return [
           new InputRule({
             find: /!video\(([^)]+)\)\s/,
-            handler: ({ state, range, match, commands }) => {
+            handler: ({ range, match, commands }) => {
               const [, url] = match;
               if (url) {
                 const html = `<video src="${url}" autoplay="" loop="" muted="" controls="" playsinline=""></video>`;
@@ -200,7 +266,7 @@ function useExtensions({ props, emit }) {
         return [
           new InputRule({
             find: /!audio\(([^)]+)\)\s/,
-            handler: ({ state, range, match, commands }) => {
+            handler: ({ range, match, commands }) => {
               const [, url] = match;
               if (url) {
                 const html = `<audio src="${url}" controls="" playsinline=""></audio>`;
@@ -215,14 +281,8 @@ function useExtensions({ props, emit }) {
         ];
       }
     }),
-    // TextStyle 是 Color 的依赖，必须添加
-    TextStyle.configure({
-      // 如果你还想支持其他 style 属性，可以在这里配置
-      // HTMLAttributes: { class: 'my-custom-class' }
-    }),
-    Color.configure({
-      // types: ['textStyle'] 默认就是这个，一般不需要改
-    }),
+    TextStyle,
+    Color,
     Markdown.configure({
       html: true,
       tightLists: true,
@@ -233,27 +293,19 @@ function useExtensions({ props, emit }) {
       transformPastedText: true,
       transformCopiedText: true
     }),
-    // 自定义扩展来支持 Markdown 链接语法
     Extension.create({
       name: "markdownLinkInputRule",
       addInputRules() {
         return [
           new InputRule({
             find: /\[([^\]]+)\]\(([^\)]+)\)\s/,
-            handler: ({ state, range, match, commands }) => {
+            handler: ({ range, match, commands }) => {
               const [, text, href] = match;
-              const start = range.from;
-              const end = range.to;
-              commands.deleteRange({ from: start, to: end });
+              commands.deleteRange({ from: range.from, to: range.to });
               commands.insertContent({
                 type: "text",
                 text,
-                marks: [
-                  {
-                    type: "link",
-                    attrs: { href }
-                  }
-                ]
+                marks: [{ type: "link", attrs: { href } }]
               });
             }
           })
@@ -265,9 +317,7 @@ function useExtensions({ props, emit }) {
       table: { resizable: true }
     }),
     Placeholder.configure({
-      placeholder: () => {
-        return props.placeholder;
-      }
+      placeholder: () => props.placeholder
     }),
     ListKit.extend({
       addKeyboardShortcuts() {
@@ -275,18 +325,11 @@ function useExtensions({ props, emit }) {
           Tab: ({ editor }) => {
             const { $from } = editor.state.selection;
             const currentItem = $from.node(-1);
-            if (currentItem.type.name === "listItem") {
-              return true;
-            }
-            return false;
+            return currentItem.type.name === "listItem";
           },
           "Shift-Tab": ({ editor }) => {
             const { $from } = editor.state.selection;
-            const currentItem = $from.node(-1);
-            if (currentItem.type.name === "doc") {
-              return true;
-            }
-            return false;
+            return $from.node(-1).type.name === "doc";
           }
         };
       }
@@ -300,32 +343,23 @@ function useExtensions({ props, emit }) {
         char: "@",
         allowedPrefixes: null,
         allowSpaces: false,
-        /**
-         * allow
-         * - 功能：判断是否允许触发建议态。
-         * - 1. 当@ 前面一个字符是数字/英文时，不触发，防止用户是想要输入邮箱。
-         * - 2. 触发以后如果包含数字，则收起（通过返回 false 销毁建议态）。
-         */
         allow: ({ state, range }) => {
-          if (spentMentionPositions.includes(range.from)) {
+          if (checkConsumed(state, range))
             return false;
-          }
           const doc = state.doc;
           const $from = doc.resolve(range.from);
           const isAtStart = range.from === $from.start();
           const prevChar = isAtStart ? "" : doc.textBetween(range.from - 1, range.from);
-          if (/[a-zA-Z0-9]/.test(prevChar)) {
+          if (/[a-zA-Z0-9]/.test(prevChar))
             return false;
-          }
           const query = doc.textBetween(range.from + 1, range.to);
-          if (/[0-9]/.test(query)) {
+          if (/[0-9]/.test(query))
             return false;
-          }
           return true;
         },
         render() {
           return {
-            onStart({ editor, range, command, query }) {
+            onStart({ editor, command, query }) {
               activeEditor = editor;
               emit("mention-triggered", (data) => {
                 command({
@@ -339,23 +373,16 @@ function useExtensions({ props, emit }) {
               activeEditor = editor;
               emit("mention-input", query != null ? query : "");
             },
-            onExit({ range }) {
-              if (range.from !== void 0) {
-                spentMentionPositions.push(range.from);
-              }
+            onExit({ editor, range }) {
+              markAsConsumed(editor, range, "@");
               emit("mention-exit");
             }
           };
         }
       }
     }),
-    /**
-     * 辅助扩展：追踪记录已失活的触发点
-     */
-    MentionTracker,
-    HashTagTracker,
-    // HashTag 扩展：支持 # 触发、实时输入同步、完成后插入为 “#+文字”
-    HashTag
+    HashTag,
+    CustomContent
   ];
   return extensions;
 }

package/lib/index.d.ts

@@ -5,6 +5,6 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "1.0.46";
+export const version: "1.0.48";
 import RichTextEditor from './rich-text-editor';
 export { RichTextEditor };

package/lib/index.js

@@ -36,7 +36,7 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_rich_text_editor = __toESM(require("./rich-text-editor"));
 __reExport(stdin_exports, require("./rich-text-editor"), module.exports);
-const version = "1.0.46";
+const version = "1.0.48";
 function install(app) {
   const components = [
     import_rich_text_editor.default

package/lib/rich-text-editor/RichTextEditor.d.ts

@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "mention-input" | "mention-exit" | "update:modelValue" | "mention-clicked" | "hashTag-clicked")[], "blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "mention-input" | "mention-exit" | "update:modelValue" | "mention-clicked" | "hashTag-clicked", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "mention-input" | "mention-exit" | "update:modelValue" | "mention-clicked" | "hashTag-clicked" | "customContent-triggered" | "customContent-input" | "customContent-exit" | "customContent-clicked")[], "blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "mention-input" | "mention-exit" | "update:modelValue" | "mention-clicked" | "hashTag-clicked" | "customContent-triggered" | "customContent-input" | "customContent-exit" | "customContent-clicked", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -44,6 +44,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onMention-clicked"?: ((...args: any[]) => any) | undefined;
     "onHashTag-clicked"?: ((...args: any[]) => any) | undefined;
+    "onCustomContent-triggered"?: ((...args: any[]) => any) | undefined;
+    "onCustomContent-input"?: ((...args: any[]) => any) | undefined;
+    "onCustomContent-exit"?: ((...args: any[]) => any) | undefined;
+    "onCustomContent-clicked"?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string;
     placeholder: string;

package/lib/rich-text-editor/RichTextEditor.js

@@ -63,7 +63,7 @@ var import_index = require("./index.css");
 var stdin_default = (0, import_vue2.defineComponent)({
   name: "RichTextEditor",
   props: import_types.richTextEditorProps,
-  emits: ["update:modelValue", "mention-triggered", "mention-input", "mention-exit", "mention-clicked", "hashTag-triggered", "hashTag-input", "hashTag-exit", "hashTag-clicked", "blur", "focus"],
+  emits: ["update:modelValue", "mention-triggered", "mention-input", "mention-exit", "mention-clicked", "hashTag-triggered", "hashTag-input", "hashTag-exit", "hashTag-clicked", "customContent-triggered", "customContent-input", "customContent-exit", "customContent-clicked", "blur", "focus"],
   setup(props, {
     emit,
     expose
@@ -131,10 +131,23 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }
       });
     };
+    const insertCustomContent = (data) => {
+      editor.value.commands.insertContent({
+        type: "customContent",
+        attrs: {
+          id: data.id || `custom-${Date.now()}`,
+          label: data.label,
+          obj: data.obj,
+          color: data.color,
+          hoverColor: data.hoverColor
+        }
+      });
+    };
     expose({
       getEditor: () => editor.value,
       insertMention,
-      insertHashTag
+      insertHashTag,
+      insertCustomContent
     });
     (0, import_vue2.watch)(() => props.modelValue, (newValue) => {
       var _a, _b;
@@ -217,6 +230,26 @@ var stdin_default = (0, import_vue2.defineComponent)({
         return;
       }
     };
+    const customContentClickHandler = (event) => {
+      const target = event.target;
+      const tagEl = target.closest(".custom-content") || null;
+      if (tagEl) {
+        const objStr = tagEl.getAttribute("obj") || "{}";
+        const label = tagEl.getAttribute("file-label") || "";
+        try {
+          const obj = JSON.parse(objStr);
+          emit("customContent-clicked", {
+            obj,
+            label
+          });
+        } catch (e) {
+          console.error("Failed to parse custom content obj:", e);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+    };
     const HISTORY_METADATA_KEY = "rich_text_editor_history_metadata";
     const MAX_HISTORY_ITEMS = 10;
     let saveTimeoutId = null;
@@ -270,6 +303,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           editorElement.addEventListener("click", imageClickHandler);
           editorElement.addEventListener("click", hashTagClickHandler);
           editorElement.addEventListener("click", mentionClickHandler);
+          editorElement.addEventListener("click", customContentClickHandler);
         }
       });
     });
@@ -283,6 +317,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         editorElement.removeEventListener("click", imageClickHandler);
         editorElement.removeEventListener("click", hashTagClickHandler);
         editorElement.removeEventListener("click", mentionClickHandler);
+        editorElement.removeEventListener("click", customContentClickHandler);
       }
       (_c = editor.value) == null ? void 0 : _c.destroy();
     });

package/lib/rich-text-editor/index.css

@@ -1 +1 @@
-body .ProseMirror{flex:1;overflow:auto;outline:none;line-height:1.6;font-size:var(--font-base);--white: #fff;--black: #2e2b29;--gray-1: rgba(61, 37, 20, .05);--gray-2: rgba(61, 37, 20, .08);--gray-3: rgba(61, 37, 20, .12);--gray-4: rgba(53, 38, 28, .3);--gray-5: rgba(28, 25, 23, .6);--green: #22c55e;--purple: #6a00f5;--purple-contrast: #5800cc;--purple-light: rgba(88, 5, 255, .05);--yellow-contrast: #facc15;--yellow: rgba(250, 204, 21, .4);--yellow-light: #fffae5;--red: #ff5c33;--red-light: #ffebe5;--shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)}body .ProseMirror :first-child{margin-top:0}body .ProseMirror video{width:100%}body .ProseMirror ol{list-style:auto}body .ProseMirror ol ol,body .ProseMirror ul{list-style:disc}body .ProseMirror ol,body .ProseMirror ul{padding-left:1.5em;margin:0 0 12px}body .ProseMirror ol li p,body .ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}body .ProseMirror li::marker{text-align:start!important}body .ProseMirror h1,body .ProseMirror h2,body .ProseMirror h3,body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}body .ProseMirror h1,body .ProseMirror h2{margin-top:1rem;margin-bottom:1rem}body .ProseMirror h1{font-size:1.4rem}body .ProseMirror h2{font-size:1.2rem}body .ProseMirror h3{font-size:1.1rem}body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{font-size:1rem}body .ProseMirror a,body .ProseMirror .editor-link{color:var(--purple);text-decoration:underline;cursor:pointer;transition:color .2s ease}body .ProseMirror a:hover,body .ProseMirror .editor-link:hover{color:var(--purple-contrast);text-decoration:underline}body .ProseMirror code{background-color:#ffe5e8;border-radius:.4rem;color:#c02537;padding:2px 4px}body .ProseMirror pre{border-radius:.5rem;font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}body .ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}body .ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}body .ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}body .ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}body .ProseMirror table td,body .ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}body .ProseMirror table td>*,body .ProseMirror table th>*{margin-bottom:0}body .ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}body .ProseMirror table .selectedCell:after{background:var(--gray-2);content:"";left:0;right:0;top:0;bottom:0;pointer-events:none;position:absolute;z-index:2}body .ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}body .ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}body .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}body .ProseMirror img{max-width:100%}body .ProseMirror .mention,body .ProseMirror .hash-tag{color:#c02537;padding:0 .3em}.animation-indent--right{animation:indent-right .5s cubic-bezier(.68,-.55,.27,1.55) 1 alternate-reverse}@keyframes indent-right{0%{transform:translate(0)}to{transform:translate(12px)}}
+body .ProseMirror{flex:1;overflow:auto;outline:none;line-height:1.6;font-size:var(--font-base);--white: #fff;--black: #2e2b29;--gray-1: rgba(61, 37, 20, .05);--gray-2: rgba(61, 37, 20, .08);--gray-3: rgba(61, 37, 20, .12);--gray-4: rgba(53, 38, 28, .3);--gray-5: rgba(28, 25, 23, .6);--green: #22c55e;--purple: #6a00f5;--purple-contrast: #5800cc;--purple-light: rgba(88, 5, 255, .05);--yellow-contrast: #facc15;--yellow: rgba(250, 204, 21, .4);--yellow-light: #fffae5;--red: #ff5c33;--red-light: #ffebe5;--shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04)}body .ProseMirror :first-child{margin-top:0}body .ProseMirror video{width:100%}body .ProseMirror ol{list-style:auto}body .ProseMirror ol ol,body .ProseMirror ul{list-style:disc}body .ProseMirror ol,body .ProseMirror ul{padding-left:1.5em;margin:0 0 12px}body .ProseMirror ol li p,body .ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}body .ProseMirror li::marker{text-align:start!important}body .ProseMirror h1,body .ProseMirror h2,body .ProseMirror h3,body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}body .ProseMirror h1,body .ProseMirror h2{margin-top:1rem;margin-bottom:1rem}body .ProseMirror h1{font-size:1.4rem}body .ProseMirror h2{font-size:1.2rem}body .ProseMirror h3{font-size:1.1rem}body .ProseMirror h4,body .ProseMirror h5,body .ProseMirror h6{font-size:1rem}body .ProseMirror a,body .ProseMirror .editor-link{color:var(--purple);text-decoration:underline;cursor:pointer;transition:color .2s ease}body .ProseMirror a:hover,body .ProseMirror .editor-link:hover{color:var(--purple-contrast);text-decoration:underline}body .ProseMirror code{background-color:#ffe5e8;border-radius:.4rem;color:#c02537;padding:2px 4px}body .ProseMirror pre{border-radius:.5rem;font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}body .ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}body .ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}body .ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}body .ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}body .ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}body .ProseMirror table td,body .ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}body .ProseMirror table td>*,body .ProseMirror table th>*{margin-bottom:0}body .ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}body .ProseMirror table .selectedCell:after{background:var(--gray-2);content:"";left:0;right:0;top:0;bottom:0;pointer-events:none;position:absolute;z-index:2}body .ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}body .ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}body .ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}body .ProseMirror img{max-width:100%}body .ProseMirror .mention,body .ProseMirror .hash-tag{color:#c02537;padding:0 .3em}body .ProseMirror .custom-content{color:var(--custom-content-color, #000);padding:0 .3em;cursor:pointer;transition:color .2s ease}body .ProseMirror .custom-content:hover{color:var(--custom-content-hover-color, #c02537)}.animation-indent--right{animation:indent-right .5s cubic-bezier(.68,-.55,.27,1.55) 1 alternate-reverse}@keyframes indent-right{0%{transform:translate(0)}to{transform:translate(12px)}}

package/lib/rich-text-editor/index.less

@@ -218,11 +218,22 @@ body .ProseMirror {
   img {
     max-width: 100%;
   }
-  // @人的样式 #话题的样式
+  // @人的样式 #话题的样式 自定义内容的样式
   .mention, .hash-tag {
     color: #c02537;
     padding: 0 0.3em;
   }
+
+  .custom-content {
+    color: var(--custom-content-color, #000);
+    padding: 0 0.3em;
+    cursor: pointer;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--custom-content-hover-color, #c02537);
+    }
+  }
 }
 
 // animation

package/lib/rich-text-editor/types.d.ts

@@ -26,6 +26,21 @@ export interface HashTagData {
     hashTagId: string;
     name: string;
 }
+/**
+ * CustomContentData
+ * - 功能：自定义内容的数据结构。
+ * - 字段说明：
+ *   - label: string 显示标签（如 ）。
+ *   - obj: 任意JSON对象，内容由用户自定义。
+ *   - id: 可选及其他扩展字段。
+ */
+export interface CustomContentData {
+    label: string;
+    obj: Record<string, any>;
+    color?: string;
+    hoverColor?: string;
+    [key: string]: any;
+}
 /**
  * HashTagExitEvent
  * - 功能：在 `hashTag-exit` 事件中传递退出原因与是否为非连续输入。