@cgboiler/biz-basic 1.0.47 → 1.0.49

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

@@ -1,11 +1,6 @@
-import { Extension } from '@tiptap/core';
+import { Extension, Mark } from '@tiptap/core';
 /**
  * useExtensions
  * - 功能：构建并返回 TipTap 编辑器使用的扩展集合。
- * - 参数说明：
- *   - props: 组件属性对象，至少应包含占位符 `placeholder` 等。
- *   - emit: 事件发送函数，用于向父组件触发富文本相关事件（如 hashTag-triggered / hashTag-input / hashTag-exit）。
- * - 返回值：Extension[] 扩展数组，用于初始化 TipTap 编辑器。
- * - 异常：无显式抛出；若内部命令执行失败（例如插入内容时）可能由 TipTap 抛出异常，应在上层统一处理。
  */
-export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any> | Extension<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any>)[];
+export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Node<any, any> | Mark<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<any, any> | Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | Extension<import("tiptap-markdown").MarkdownOptions, import("tiptap-markdown").MarkdownStorage> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | Extension<import("@tiptap/extension-table").TableKitOptions, any> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | Extension<import("@tiptap/extension-list").ListKitOptions, any>)[];

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

@@ -42,29 +42,70 @@ var import_core = require("@tiptap/core");
 var import_HtmlBlock = __toESM(require("./extensions/HtmlBlock"));
 var import_extensions = require("@tiptap/extensions");
 function useExtensions({ props, emit }) {
-  let spentHashTagPositions = [];
-  let spentMentionPositions = [];
   let activeEditor = null;
+  const ConsumedTrigger = import_core.Mark.create({
+    name: "consumedTrigger",
+    keepOnSplit: false,
+    // 保证在标记后继续输入时不延续标记
+    parseHTML() {
+      return [{ tag: "span[data-consumed-trigger]" }];
+    },
+    renderHTML({ HTMLAttributes }) {
+      return [
+        "span",
+        (0, import_core.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 = import_extension_mention.default.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: "#",
@@ -73,13 +114,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;
@@ -107,111 +145,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 = import_core.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 = import_core.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 = import_extension_mention.default.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 = [
     import_starter_kit.default,
     import_HtmlBlock.default,
-    // Video input rule extension for !video(url) syntax
+    ConsumedTrigger,
+    // Video input rule extension
     import_core.Extension.create({
       name: "videoInputRule",
       addInputRules() {
         return [
           new import_core.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>`;
@@ -232,7 +298,7 @@ function useExtensions({ props, emit }) {
         return [
           new import_core.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>`;
@@ -247,14 +313,8 @@ function useExtensions({ props, emit }) {
         ];
       }
     }),
-    // TextStyle 是 Color 的依赖，必须添加
-    import_extension_text_style.TextStyle.configure({
-      // 如果你还想支持其他 style 属性，可以在这里配置
-      // HTMLAttributes: { class: 'my-custom-class' }
-    }),
-    import_extension_color.Color.configure({
-      // types: ['textStyle'] 默认就是这个，一般不需要改
-    }),
+    import_extension_text_style.TextStyle,
+    import_extension_color.Color,
     import_tiptap_markdown.Markdown.configure({
       html: true,
       tightLists: true,
@@ -265,27 +325,19 @@ function useExtensions({ props, emit }) {
       transformPastedText: true,
       transformCopiedText: true
     }),
-    // 自定义扩展来支持 Markdown 链接语法
     import_core.Extension.create({
       name: "markdownLinkInputRule",
       addInputRules() {
         return [
           new import_core.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 } }]
               });
             }
           })
@@ -297,9 +349,7 @@ function useExtensions({ props, emit }) {
       table: { resizable: true }
     }),
     import_extensions.Placeholder.configure({
-      placeholder: () => {
-        return props.placeholder;
-      }
+      placeholder: () => props.placeholder
     }),
     import_extension_list.ListKit.extend({
       addKeyboardShortcuts() {
@@ -307,18 +357,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";
           }
         };
       }
@@ -332,32 +375,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({
@@ -371,23 +405,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgboiler/biz-basic",
-  "version": "1.0.47",
+  "version": "1.0.49",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",