@cgboiler/biz-basic 1.0.2 → 1.0.4

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.1";
+export const version: "1.0.3";
 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.1";
+const version = "1.0.3";
 function install(app) {
   const components = [
     RichTextEditor

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

@@ -8,7 +8,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onMentionTriggered: {
+        type: FunctionConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mention-triggered" | "update:modelValue")[], "mention-triggered" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -17,7 +20,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    onMentionTriggered: {
+        type: FunctionConstructor;
+    };
 }>> & Readonly<{
+    "onMention-triggered"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string;

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

@@ -1,60 +1,26 @@
 import { createVNode as _createVNode } from "vue";
 import "./_atomic.css";
 import { defineComponent, onMounted, onBeforeUnmount, ref, watch } from "vue";
-import StarterKit from "@tiptap/starter-kit";
 import { Editor, EditorContent } from "@tiptap/vue-3";
-import { TableKit } from "@tiptap/extension-table";
-import { ListKit } from "@tiptap/extension-list";
-import Image from "@tiptap/extension-image";
-import { Placeholder } from "@tiptap/extensions";
+import { useExtensions } from "./useExtensions";
 import { richTextEditorProps } from "./types";
 import "./index.css";
 var stdin_default = defineComponent({
   name: "RichTextEditor",
   props: richTextEditorProps,
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "mention-triggered"],
   setup(props, {
-    emit
+    emit,
+    expose
   }) {
     const editor = ref();
+    const extensions = useExtensions({
+      props,
+      emit
+    });
     const initEditor = () => {
       editor.value = new Editor({
-        extensions: [StarterKit, ListKit.extend({
-          addKeyboardShortcuts() {
-            return {
-              Tab: ({
-                editor: editor2
-              }) => {
-                const {
-                  $from
-                } = editor2.state.selection;
-                const currentItem = $from.node(-1);
-                if (currentItem.type.name === "listItem") {
-                  return true;
-                }
-                return false;
-              },
-              "Shift-Tab": ({
-                editor: editor2
-              }) => {
-                const {
-                  $from
-                } = editor2.state.selection;
-                const currentItem = $from.node(-1);
-                if (currentItem.type.name === "doc") {
-                  return true;
-                }
-                return false;
-              }
-            };
-          }
-        }), Image, TableKit.configure({
-          table: {
-            resizable: true
-          }
-        }), Placeholder.configure({
-          placeholder: props.placeholder
-        })],
+        extensions,
         content: props.modelValue,
         onUpdate: ({
           editor: editor2
@@ -68,6 +34,18 @@ var stdin_default = defineComponent({
         }
       });
     };
+    const insertMention = (data) => {
+      editor.value.commands.insertContent({
+        type: "mention",
+        attrs: {
+          id: data.userId,
+          label: data.name
+        }
+      });
+    };
+    expose({
+      insertMention
+    });
     watch(() => props.modelValue, (newValue) => {
       var _a, _b;
       if (((_a = editor.value) == null ? void 0 : _a.getHTML()) !== newValue) {

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

@@ -30,5 +30,3 @@
   flex-wrap: wrap;
 }
   
-/* layer: default */
-.cgx-atm .table{display:table;}

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

@@ -1 +1 @@
-.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)}.ProseMirror :first-child{margin-top:0}.ProseMirror ol{list-style:auto}.ProseMirror ul{list-style:disc}.ProseMirror ol,.ProseMirror ul{padding-left:1.5em;margin:0 0 12px}.ProseMirror ol li p,.ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}.ProseMirror li::marker{text-align:start!important}.ProseMirror h1,.ProseMirror h2,.ProseMirror h3,.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}.ProseMirror h1,.ProseMirror h2{margin-top:1rem;margin-bottom:1rem}.ProseMirror h1{font-size:1.4rem}.ProseMirror h2{font-size:1.2rem}.ProseMirror h3{font-size:1.1rem}.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{font-size:1rem}.ProseMirror code{background-color:var(--purple-light);border-radius:.4rem;color:var(--black);font-size:.85rem;padding:.25em .3em}.ProseMirror pre{background:var(--black);border-radius:.5rem;color:var(--white);font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}.ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}.ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}.ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}.ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}.ProseMirror table td,.ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}.ProseMirror table td>*,.ProseMirror table th>*{margin-bottom:0}.ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}.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}.ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}.ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}.ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}.ProseMirror img{max-width:100%}.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)}}
+.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)}.ProseMirror :first-child{margin-top:0}.ProseMirror ol{list-style:auto}.ProseMirror ul{list-style:disc}.ProseMirror ol,.ProseMirror ul{padding-left:1.5em;margin:0 0 12px}.ProseMirror ol li p,.ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}.ProseMirror li::marker{text-align:start!important}.ProseMirror h1,.ProseMirror h2,.ProseMirror h3,.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}.ProseMirror h1,.ProseMirror h2{margin-top:1rem;margin-bottom:1rem}.ProseMirror h1{font-size:1.4rem}.ProseMirror h2{font-size:1.2rem}.ProseMirror h3{font-size:1.1rem}.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{font-size:1rem}.ProseMirror code{background-color:var(--purple-light);border-radius:.4rem;color:var(--black);font-size:.85rem;padding:.25em .3em}.ProseMirror pre{background:var(--black);border-radius:.5rem;color:var(--white);font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}.ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}.ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}.ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}.ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}.ProseMirror table td,.ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}.ProseMirror table td>*,.ProseMirror table th>*{margin-bottom:0}.ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}.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}.ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}.ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}.ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}.ProseMirror img{max-width:100%}.ProseMirror .mention{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)}}

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

@@ -201,6 +201,11 @@
   img {
     max-width: 100%;
   }
+  // @人的样式
+  .mention {
+    color: #c02537;
+    padding: 0 0.3em;
+  }
 }
 
 // animation

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

@@ -1,4 +1,8 @@
 import { ExtractPropTypes } from 'vue';
+export interface MentionData {
+    userId: string;
+    name: string;
+}
 export declare const richTextEditorProps: {
     modelValue: {
         type: StringConstructor;
@@ -8,5 +12,10 @@ export declare const richTextEditorProps: {
         type: StringConstructor;
         default: string;
     };
+    onMentionTriggered: {
+        type: FunctionConstructor;
+    };
+};
+export type RichTextEditorProps = ExtractPropTypes<typeof richTextEditorProps> & {
+    onMentionTriggered?: () => void;
 };
-export type RichTextEditorProps = ExtractPropTypes<typeof richTextEditorProps>;

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

@@ -6,6 +6,9 @@ const richTextEditorProps = {
   placeholder: {
     type: String,
     default: "\u8BF7\u5199\u70B9\u4EC0\u4E48..."
+  },
+  onMentionTriggered: {
+    type: Function
   }
 };
 export {

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

@@ -0,0 +1 @@
+export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extensions").PlaceholderOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-list").ListKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>)[];

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

@@ -0,0 +1,69 @@
+import StarterKit from "@tiptap/starter-kit";
+import { TableKit } from "@tiptap/extension-table";
+import { ListKit } from "@tiptap/extension-list";
+import Image from "@tiptap/extension-image";
+import Mention from "@tiptap/extension-mention";
+import { Placeholder } from "@tiptap/extensions";
+function useExtensions({ props, emit }) {
+  const extensions = [
+    StarterKit,
+    Image,
+    TableKit.configure({
+      table: { resizable: true }
+    }),
+    Placeholder.configure({
+      placeholder: () => {
+        return props.placeholder;
+      }
+    }),
+    ListKit.extend({
+      addKeyboardShortcuts() {
+        return {
+          Tab: ({ editor }) => {
+            const { $from } = editor.state.selection;
+            const currentItem = $from.node(-1);
+            if (currentItem.type.name === "listItem") {
+              return true;
+            }
+            return false;
+          },
+          "Shift-Tab": ({ editor }) => {
+            const { $from } = editor.state.selection;
+            const currentItem = $from.node(-1);
+            if (currentItem.type.name === "doc") {
+              return true;
+            }
+            return false;
+          }
+        };
+      }
+    }),
+    Mention.configure({
+      HTMLAttributes: {
+        class: "mention"
+      },
+      deleteTriggerWithBackspace: true,
+      suggestion: {
+        char: "@",
+        allowedPrefixes: null,
+        // 允许任何前缀
+        render() {
+          return {
+            onStart({ command }) {
+              emit("mention-triggered", (data) => {
+                command({
+                  id: data.userId,
+                  label: data.name
+                });
+              });
+            }
+          };
+        }
+      }
+    })
+  ];
+  return extensions;
+}
+export {
+  useExtensions
+};

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.1";
+export const version: "1.0.3";
 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.1";
+const version = "1.0.3";
 function install(app) {
   const components = [
     import_rich_text_editor.default

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

@@ -8,7 +8,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onMentionTriggered: {
+        type: FunctionConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("mention-triggered" | "update:modelValue")[], "mention-triggered" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -17,7 +20,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    onMentionTriggered: {
+        type: FunctionConstructor;
+    };
 }>> & Readonly<{
+    "onMention-triggered"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string;

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

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
@@ -33,60 +23,26 @@ module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
 var import_atomic = require("./_atomic.css");
 var import_vue2 = require("vue");
-var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
 var import_vue_3 = require("@tiptap/vue-3");
-var import_extension_table = require("@tiptap/extension-table");
-var import_extension_list = require("@tiptap/extension-list");
-var import_extension_image = __toESM(require("@tiptap/extension-image"));
-var import_extensions = require("@tiptap/extensions");
+var import_useExtensions = require("./useExtensions");
 var import_types = require("./types");
 var import_index = require("./index.css");
 var stdin_default = (0, import_vue2.defineComponent)({
   name: "RichTextEditor",
   props: import_types.richTextEditorProps,
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "mention-triggered"],
   setup(props, {
-    emit
+    emit,
+    expose
   }) {
     const editor = (0, import_vue2.ref)();
+    const extensions = (0, import_useExtensions.useExtensions)({
+      props,
+      emit
+    });
     const initEditor = () => {
       editor.value = new import_vue_3.Editor({
-        extensions: [import_starter_kit.default, import_extension_list.ListKit.extend({
-          addKeyboardShortcuts() {
-            return {
-              Tab: ({
-                editor: editor2
-              }) => {
-                const {
-                  $from
-                } = editor2.state.selection;
-                const currentItem = $from.node(-1);
-                if (currentItem.type.name === "listItem") {
-                  return true;
-                }
-                return false;
-              },
-              "Shift-Tab": ({
-                editor: editor2
-              }) => {
-                const {
-                  $from
-                } = editor2.state.selection;
-                const currentItem = $from.node(-1);
-                if (currentItem.type.name === "doc") {
-                  return true;
-                }
-                return false;
-              }
-            };
-          }
-        }), import_extension_image.default, import_extension_table.TableKit.configure({
-          table: {
-            resizable: true
-          }
-        }), import_extensions.Placeholder.configure({
-          placeholder: props.placeholder
-        })],
+        extensions,
         content: props.modelValue,
         onUpdate: ({
           editor: editor2
@@ -100,6 +56,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }
       });
     };
+    const insertMention = (data) => {
+      editor.value.commands.insertContent({
+        type: "mention",
+        attrs: {
+          id: data.userId,
+          label: data.name
+        }
+      });
+    };
+    expose({
+      insertMention
+    });
     (0, import_vue2.watch)(() => props.modelValue, (newValue) => {
       var _a, _b;
       if (((_a = editor.value) == null ? void 0 : _a.getHTML()) !== newValue) {

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

@@ -30,5 +30,3 @@
   flex-wrap: wrap;
 }
   
-/* layer: default */
-.cgx-atm .table{display:table;}

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

@@ -1 +1 @@
-.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)}.ProseMirror :first-child{margin-top:0}.ProseMirror ol{list-style:auto}.ProseMirror ul{list-style:disc}.ProseMirror ol,.ProseMirror ul{padding-left:1.5em;margin:0 0 12px}.ProseMirror ol li p,.ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}.ProseMirror li::marker{text-align:start!important}.ProseMirror h1,.ProseMirror h2,.ProseMirror h3,.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}.ProseMirror h1,.ProseMirror h2{margin-top:1rem;margin-bottom:1rem}.ProseMirror h1{font-size:1.4rem}.ProseMirror h2{font-size:1.2rem}.ProseMirror h3{font-size:1.1rem}.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{font-size:1rem}.ProseMirror code{background-color:var(--purple-light);border-radius:.4rem;color:var(--black);font-size:.85rem;padding:.25em .3em}.ProseMirror pre{background:var(--black);border-radius:.5rem;color:var(--white);font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}.ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}.ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}.ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}.ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}.ProseMirror table td,.ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}.ProseMirror table td>*,.ProseMirror table th>*{margin-bottom:0}.ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}.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}.ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}.ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}.ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}.ProseMirror img{max-width:100%}.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)}}
+.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)}.ProseMirror :first-child{margin-top:0}.ProseMirror ol{list-style:auto}.ProseMirror ul{list-style:disc}.ProseMirror ol,.ProseMirror ul{padding-left:1.5em;margin:0 0 12px}.ProseMirror ol li p,.ProseMirror ul li p{margin-top:.25em;margin-bottom:.25em}.ProseMirror li::marker{text-align:start!important}.ProseMirror h1,.ProseMirror h2,.ProseMirror h3,.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{line-height:1.1;margin-top:2.5rem;text-wrap:pretty}.ProseMirror h1,.ProseMirror h2{margin-top:1rem;margin-bottom:1rem}.ProseMirror h1{font-size:1.4rem}.ProseMirror h2{font-size:1.2rem}.ProseMirror h3{font-size:1.1rem}.ProseMirror h4,.ProseMirror h5,.ProseMirror h6{font-size:1rem}.ProseMirror code{background-color:var(--purple-light);border-radius:.4rem;color:var(--black);font-size:.85rem;padding:.25em .3em}.ProseMirror pre{background:var(--black);border-radius:.5rem;color:var(--white);font-family:JetBrainsMono,monospace;margin:1.5rem 0;padding:.75rem 1rem}.ProseMirror pre code{background:none;color:inherit;font-size:.8rem;padding:0}.ProseMirror blockquote{border-left:3px solid var(--gray-3);margin:1.5rem 0;padding-left:1rem}.ProseMirror hr{border:none;border-top:1px solid var(--gray-2);margin:2rem 0}.ProseMirror p.is-editor-empty:first-child:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror .is-empty:before{color:var(--gray-4);content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}.ProseMirror table td,.ProseMirror table th{border:1px solid var(--gray-3);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}.ProseMirror table td>*,.ProseMirror table th>*{margin-bottom:0}.ProseMirror table th{background-color:var(--gray-1);font-weight:700;text-align:left}.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}.ProseMirror table .column-resize-handle{background-color:var(--purple);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}.ProseMirror .tableWrapper{margin:1.5rem 0;overflow-x:auto}.ProseMirror.resize-cursor{cursor:ew-resize;cursor:col-resize}.ProseMirror img{max-width:100%}.ProseMirror .mention{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)}}

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

@@ -201,6 +201,11 @@
   img {
     max-width: 100%;
   }
+  // @人的样式
+  .mention {
+    color: #c02537;
+    padding: 0 0.3em;
+  }
 }
 
 // animation

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

@@ -1,4 +1,8 @@
 import { ExtractPropTypes } from 'vue';
+export interface MentionData {
+    userId: string;
+    name: string;
+}
 export declare const richTextEditorProps: {
     modelValue: {
         type: StringConstructor;
@@ -8,5 +12,10 @@ export declare const richTextEditorProps: {
         type: StringConstructor;
         default: string;
     };
+    onMentionTriggered: {
+        type: FunctionConstructor;
+    };
+};
+export type RichTextEditorProps = ExtractPropTypes<typeof richTextEditorProps> & {
+    onMentionTriggered?: () => void;
 };
-export type RichTextEditorProps = ExtractPropTypes<typeof richTextEditorProps>;

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

@@ -28,5 +28,8 @@ const richTextEditorProps = {
   placeholder: {
     type: String,
     default: "\u8BF7\u5199\u70B9\u4EC0\u4E48..."
+  },
+  onMentionTriggered: {
+    type: Function
   }
 };

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

@@ -0,0 +1 @@
+export declare function useExtensions({ props, emit }: any): (import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extensions").PlaceholderOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-list").ListKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>)[];

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

@@ -0,0 +1,98 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  useExtensions: () => useExtensions
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
+var import_extension_table = require("@tiptap/extension-table");
+var import_extension_list = require("@tiptap/extension-list");
+var import_extension_image = __toESM(require("@tiptap/extension-image"));
+var import_extension_mention = __toESM(require("@tiptap/extension-mention"));
+var import_extensions = require("@tiptap/extensions");
+function useExtensions({ props, emit }) {
+  const extensions = [
+    import_starter_kit.default,
+    import_extension_image.default,
+    import_extension_table.TableKit.configure({
+      table: { resizable: true }
+    }),
+    import_extensions.Placeholder.configure({
+      placeholder: () => {
+        return props.placeholder;
+      }
+    }),
+    import_extension_list.ListKit.extend({
+      addKeyboardShortcuts() {
+        return {
+          Tab: ({ editor }) => {
+            const { $from } = editor.state.selection;
+            const currentItem = $from.node(-1);
+            if (currentItem.type.name === "listItem") {
+              return true;
+            }
+            return false;
+          },
+          "Shift-Tab": ({ editor }) => {
+            const { $from } = editor.state.selection;
+            const currentItem = $from.node(-1);
+            if (currentItem.type.name === "doc") {
+              return true;
+            }
+            return false;
+          }
+        };
+      }
+    }),
+    import_extension_mention.default.configure({
+      HTMLAttributes: {
+        class: "mention"
+      },
+      deleteTriggerWithBackspace: true,
+      suggestion: {
+        char: "@",
+        allowedPrefixes: null,
+        // 允许任何前缀
+        render() {
+          return {
+            onStart({ command }) {
+              emit("mention-triggered", (data) => {
+                command({
+                  id: data.userId,
+                  label: data.name
+                });
+              });
+            }
+          };
+        }
+      }
+    })
+  ];
+  return extensions;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgboiler/biz-basic",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,6 +41,7 @@
     "@tiptap/extension-collaboration": "3.0.0-beta.16",
     "@tiptap/extension-image": "^3.0.7",
     "@tiptap/extension-list": "^3.0.7",
+    "@tiptap/extension-mention": "^3.0.7",
     "@tiptap/extension-table": "3.0.0-beta.5",
     "@tiptap/extensions": "3.0.0-beta.5",
     "@tiptap/pm": "3.0.0-beta.5",