@cgboiler/biz-basic 1.0.53 → 1.0.55

package/es/index.d.ts

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

package/es/index.js

@@ -1,5 +1,5 @@
 import RichTextEditor from "./rich-text-editor";
-const version = "1.0.52";
+const version = "1.0.54";
 function install(app) {
   const components = [
     RichTextEditor

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

@@ -16,7 +16,11 @@ 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" | "customContent-triggered" | "customContent-input" | "customContent-exit" | "customContent-clicked" | "customContent-hovered")[], "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" | "customContent-hovered", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    showMenu: {
+        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" | "hashTag-clicked" | "mention-clicked" | "customContent-clicked" | "customContent-hovered" | "update:modelValue" | "customContent-triggered" | "customContent-input" | "customContent-exit")[], "blur" | "focus" | "hashTag-triggered" | "hashTag-input" | "hashTag-exit" | "mention-triggered" | "mention-input" | "mention-exit" | "hashTag-clicked" | "mention-clicked" | "customContent-clicked" | "customContent-hovered" | "update:modelValue" | "customContent-triggered" | "customContent-input" | "customContent-exit", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -32,26 +36,31 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    showMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onHashTag-triggered"?: ((...args: any[]) => any) | undefined;
     "onHashTag-input"?: ((...args: any[]) => any) | undefined;
     "onHashTag-exit"?: ((...args: any[]) => any) | undefined;
     "onMention-triggered"?: ((...args: any[]) => any) | undefined;
     "onMention-input"?: ((...args: any[]) => any) | undefined;
     "onMention-exit"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onMention-clicked"?: ((...args: any[]) => any) | undefined;
     "onHashTag-clicked"?: ((...args: any[]) => any) | undefined;
+    "onMention-clicked"?: ((...args: any[]) => any) | undefined;
+    "onCustomContent-clicked"?: ((...args: any[]) => any) | undefined;
+    "onCustomContent-hovered"?: ((...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;
-    "onCustomContent-hovered"?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string;
     placeholder: string;
     editable: boolean;
+    showMenu: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,33 +1,20 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { createVNode as _createVNode } from "vue";
 import "./_atomic.css";
 import { defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from "vue";
 import { Editor, EditorContent } from "@tiptap/vue-3";
-import Viewer from "viewerjs";
 import "viewerjs/dist/viewer.css";
 import { useExtensions } from "./useExtensions";
-import localforage from "localforage";
+import { useEditorHistory } from "./hooks/useEditorHistory";
+import { createHashTagClickHandler, createMentionClickHandler, createCustomContentClickHandler, createCustomContentHoverHandler, createImageClickHandler } from "./utils/eventHandlers";
 import { richTextEditorProps } from "./types";
 import "./index.css";
+import { Toolbar, ToolbarGroup, ToolbarSeparator } from "./menu-system/primitives/toolbar";
+import { HeadingDropdownMenu } from "./menu-system/components/heading-dropdown-menu";
+import { ListDropdownMenu } from "./menu-system/components/list-dropdown-menu";
+import { BlockquoteButton } from "./menu-system/components/blockquote-button";
+import { CodeBlockButton } from "./menu-system/components/code-block-button";
+import { MarkButton } from "./menu-system/components/mark-button";
+import { HorizontalRuleButton } from "./menu-system/components/horizontal-rule-button";
 var stdin_default = defineComponent({
   name: "RichTextEditor",
   props: richTextEditorProps,
@@ -37,24 +24,26 @@ var stdin_default = defineComponent({
     expose
   }) {
     const editor = ref();
+    const viewerRef = ref(null);
     const extensions = useExtensions({
       props,
       emit
     });
+    useEditorHistory({
+      editor: () => editor.value,
+      enabled: props.editable
+    });
+    const imageClickHandler = createImageClickHandler(viewerRef);
+    const hashTagClickHandler = createHashTagClickHandler(emit);
+    const mentionClickHandler = createMentionClickHandler(emit);
+    const customContentClickHandler = createCustomContentClickHandler(emit);
+    const customContentHoverHandler = createCustomContentHoverHandler(emit);
     let isFocusFromPlaceholder = false;
     const initEditor = () => {
       editor.value = new Editor({
         extensions,
         content: props.modelValue,
         editable: props.editable,
-        // onMount: ({ editor }) => {
-        //   // 非可编辑状态下，需要手动设置 contenteditable 为 false
-        //   if (props.editable === false) {
-        //     editor.setOptions({
-        //       editable: false,
-        //     });
-        //   }
-        // },
         onUpdate: ({
           editor: editor2
         }) => {
@@ -138,186 +127,77 @@ var stdin_default = defineComponent({
       var _a;
       (_a = editor.value) == null ? void 0 : _a.setEditable(val);
     });
-    const viewerRef = ref(null);
-    const imageClickHandler = (event) => {
-      const target = event.target;
-      if (target.tagName === "IMG") {
-        if (viewerRef.value) {
-          viewerRef.value.destroy();
-        }
-        viewerRef.value = new Viewer(target, {
-          inline: false,
-          navbar: true,
-          title: true,
-          toolbar: {
-            zoomIn: true,
-            zoomOut: true,
-            oneToOne: true,
-            reset: true,
-            prev: false,
-            next: false,
-            rotateLeft: true,
-            rotateRight: true,
-            flipHorizontal: true,
-            flipVertical: true
-          }
-        });
-        viewerRef.value.show();
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    };
-    const hashTagClickHandler = (event) => {
-      const target = event.target;
-      const tagEl = target.closest(".hash-tag") || null;
-      if (tagEl) {
-        const id = tagEl.getAttribute("data-id") || "";
-        const label = tagEl.getAttribute("data-label") || tagEl.textContent || "";
-        const trigger = tagEl.getAttribute("data-hash-tag") || "#";
-        const tagType = tagEl.getAttribute("data-tag-type") || "";
-        emit("hashTag-clicked", {
-          hashTagId: id,
-          name: label,
-          trigger,
-          type: tagType
-        });
-        event.stopPropagation();
-        event.preventDefault();
-        return;
-      }
-    };
-    const mentionClickHandler = (event) => {
-      const target = event.target;
-      const tagEl = target.closest(".mention") || null;
-      if (tagEl) {
-        const id = tagEl.getAttribute("data-id") || "";
-        const label = tagEl.getAttribute("data-label") || tagEl.textContent || "";
-        emit("mention-clicked", {
-          userId: id,
-          name: label
-        });
-        event.stopPropagation();
-        event.preventDefault();
-        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 addEventListeners = () => {
+      var _a, _b;
+      const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
+      if (editorElement) {
+        editorElement.addEventListener("click", imageClickHandler);
+        editorElement.addEventListener("click", hashTagClickHandler);
+        editorElement.addEventListener("click", mentionClickHandler);
+        editorElement.addEventListener("click", customContentClickHandler);
+        editorElement.addEventListener("mouseover", customContentHoverHandler);
       }
     };
-    const customContentHoverHandler = (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-hovered", {
-            obj,
-            label
-          });
-        } catch (e) {
-          console.error("Failed to parse custom content obj:", e);
-        }
-        event.stopPropagation();
-        event.preventDefault();
-        return;
+    const removeEventListeners = () => {
+      var _a, _b;
+      const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
+      if (editorElement) {
+        editorElement.removeEventListener("click", imageClickHandler);
+        editorElement.removeEventListener("click", hashTagClickHandler);
+        editorElement.removeEventListener("click", mentionClickHandler);
+        editorElement.removeEventListener("click", customContentClickHandler);
+        editorElement.removeEventListener("mouseover", customContentHoverHandler);
       }
     };
-    const HISTORY_METADATA_KEY = "rich_text_editor_history_metadata";
-    const MAX_HISTORY_ITEMS = 10;
-    let saveTimeoutId = null;
-    const noteId = ref("");
-    const historyStore = localforage.createInstance({
-      name: "RichTextEditorHistory",
-      storeName: "notes"
-    });
-    const saveLoop = () => __async(this, null, function* () {
-      if (editor.value && !editor.value.isDestroyed && editor.value.isEditable) {
-        const content = editor.value.getHTML();
-        const now = /* @__PURE__ */ new Date();
-        const formattedTime = `${now.toLocaleDateString()} ${now.toLocaleTimeString()}`;
-        const noteTitle = `\u7B14\u8BB0 at ${formattedTime}`;
-        if (content !== "<p></p>") {
-          yield historyStore.setItem(noteId.value, {
-            title: noteTitle,
-            content
-          });
-          let metadata = (yield historyStore.getItem(HISTORY_METADATA_KEY)) || [];
-          const existingNoteIndex = metadata.findIndex((meta) => meta.id === noteId.value);
-          if (existingNoteIndex === -1) {
-            metadata.push({
-              id: noteId.value,
-              timestamp: now.getTime()
-            });
-            metadata.sort((a, b) => b.timestamp - a.timestamp);
-            if (metadata.length > MAX_HISTORY_ITEMS) {
-              const itemsToRemove = metadata.splice(MAX_HISTORY_ITEMS);
-              for (const item of itemsToRemove) {
-                yield historyStore.removeItem(item.id);
-              }
-            }
-            yield historyStore.setItem(HISTORY_METADATA_KEY, metadata);
-          }
-        }
-      }
-      saveTimeoutId = setTimeout(saveLoop, 1e4);
-    });
     onMounted(() => {
       initEditor();
-      const now = /* @__PURE__ */ new Date();
-      noteId.value = `note-${now.getTime()}`;
-      if (props.editable) {
-        saveLoop();
-      }
       nextTick(() => {
-        var _a, _b;
-        const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
-        if (editorElement) {
-          editorElement.addEventListener("click", imageClickHandler);
-          editorElement.addEventListener("click", hashTagClickHandler);
-          editorElement.addEventListener("click", mentionClickHandler);
-          editorElement.addEventListener("click", customContentClickHandler);
-          editorElement.addEventListener("mouseover", customContentHoverHandler);
-        }
+        addEventListeners();
       });
     });
     onBeforeUnmount(() => {
-      var _a, _b, _c;
-      if (saveTimeoutId) {
-        clearTimeout(saveTimeoutId);
-      }
-      const editorElement = (_b = (_a = editor.value) == null ? void 0 : _a.view) == null ? void 0 : _b.dom;
-      if (editorElement) {
-        editorElement.removeEventListener("click", imageClickHandler);
-        editorElement.removeEventListener("click", hashTagClickHandler);
-        editorElement.removeEventListener("click", mentionClickHandler);
-        editorElement.removeEventListener("click", customContentClickHandler);
-        editorElement.removeEventListener("mouseover", customContentHoverHandler);
+      var _a;
+      if (viewerRef.value) {
+        viewerRef.value.destroy();
       }
-      (_c = editor.value) == null ? void 0 : _c.destroy();
+      removeEventListeners();
+      (_a = editor.value) == null ? void 0 : _a.destroy();
     });
-    return () => _createVNode(EditorContent, {
+    return () => _createVNode("div", {
+      "class": "tiptap-editor-container"
+    }, [props.showMenu && editor.value && _createVNode(Toolbar, {
+      "class": "tiptap-editor-toolbar"
+    }, {
+      default: () => [_createVNode(ToolbarGroup, null, {
+        default: () => [_createVNode(HeadingDropdownMenu, {
+          "editor": editor.value
+        }, null), _createVNode(ListDropdownMenu, {
+          "editor": editor.value
+        }, null), _createVNode(HorizontalRuleButton, {
+          "editor": editor.value
+        }, null), _createVNode(BlockquoteButton, {
+          "editor": editor.value
+        }, null), _createVNode(CodeBlockButton, {
+          "editor": editor.value
+        }, null)]
+      }), _createVNode(ToolbarSeparator, null, null), _createVNode(ToolbarGroup, null, {
+        default: () => [_createVNode(MarkButton, {
+          "editor": editor.value,
+          "type": "bold"
+        }, null), _createVNode(MarkButton, {
+          "editor": editor.value,
+          "type": "italic"
+        }, null), _createVNode(MarkButton, {
+          "editor": editor.value,
+          "type": "code"
+        }, null)]
+      })]
+    }), _createVNode("div", {
+      "class": "tiptap-editor-content-wrapper"
+    }, [_createVNode(EditorContent, {
       "class": "ProseMirror",
       "editor": editor.value
-    }, null);
+    }, null)])]);
   }
 });
 export {

package/es/rich-text-editor/_atomic.css

@@ -31,5 +31,6 @@
 }
   
 /* layer: default */
-.cgx-atm .inline{display:inline;}
+.cgx-atm .italic{font-style:italic;}
+.cgx-atm .underline{text-decoration-line:underline;}
 .cgx-atm .blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}

package/es/rich-text-editor/extensions/ConsumedTrigger.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 文件说明：
+ * - ConsumedTrigger Mark 扩展
+ * - 功能：标记已经触发过且被"消费"（建议态结束）的触发符（# 或 @）
+ * - 作用：持久化建议态失活记录。即使编辑器重新初始化，该字符也不会再次触发建议，除非被删除重新输入
+ */
+import { Mark } from '@tiptap/core';
+export declare const ConsumedTrigger: Mark<any, any>;

package/es/rich-text-editor/extensions/ConsumedTrigger.js

@@ -0,0 +1,22 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+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
+    ];
+  }
+});
+export {
+  ConsumedTrigger
+};

package/es/rich-text-editor/extensions/CustomContent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 创建 CustomContent 扩展
+ * @returns TipTap Extension
+ */
+export declare const createCustomContentExtension: () => import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;

package/es/rich-text-editor/extensions/CustomContent.js

@@ -0,0 +1,103 @@
+import Mention from "@tiptap/extension-mention";
+const createCustomContentExtension = () => {
+  return Mention.extend({
+    name: "customContent",
+    parseHTML() {
+      return [{ tag: 'span[data-type="custom-content"]' }];
+    },
+    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");
+            try {
+              return objStr ? JSON.parse(objStr) : null;
+            } catch (e) {
+              return 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 };
+          }
+        }
+      };
+    },
+    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
+      ];
+    }
+  });
+};
+export {
+  createCustomContentExtension
+};

package/es/rich-text-editor/extensions/HashTag.d.ts

@@ -0,0 +1,15 @@
+export interface HashTagOptions {
+    emit: any;
+    imeState: {
+        isComposing: boolean;
+    };
+    editorRef: {
+        current: any;
+    };
+}
+/**
+ * 创建 HashTag 扩展
+ * @param options - 配置选项
+ * @returns TipTap Extension
+ */
+export declare const createHashTagExtension: (options: HashTagOptions) => import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;