@cgboiler/biz-basic 1.0.50 → 1.0.52

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

package/es/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" | "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<{
+}>, () => 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<{
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -48,6 +48,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "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;

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

@@ -31,7 +31,7 @@ import "./index.css";
 var stdin_default = defineComponent({
   name: "RichTextEditor",
   props: richTextEditorProps,
-  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"],
+  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", "customContent-hovered", "blur", "focus"],
   setup(props, {
     emit,
     expose
@@ -95,7 +95,8 @@ var stdin_default = defineComponent({
         type: "hashTag",
         attrs: {
           id: data.hashTagId,
-          label: data.name
+          label: data.name,
+          type: data.type
         }
       });
     };
@@ -172,11 +173,13 @@ var stdin_default = defineComponent({
       if (tagEl) {
         const id = tagEl.getAttribute("data-id") || "";
         const label = tagEl.getAttribute("data-label") || tagEl.textContent || "";
-        const hashTag = tagEl.getAttribute("data-hash-tag") || "#";
+        const trigger = tagEl.getAttribute("data-hash-tag") || "#";
+        const tagType = tagEl.getAttribute("data-tag-type") || "";
         emit("hashTag-clicked", {
           hashTagId: id,
           name: label,
-          type: hashTag
+          trigger,
+          type: tagType
         });
         event.stopPropagation();
         event.preventDefault();
@@ -218,6 +221,26 @@ var stdin_default = defineComponent({
         return;
       }
     };
+    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 HISTORY_METADATA_KEY = "rich_text_editor_history_metadata";
     const MAX_HISTORY_ITEMS = 10;
     let saveTimeoutId = null;
@@ -272,6 +295,7 @@ var stdin_default = defineComponent({
           editorElement.addEventListener("click", hashTagClickHandler);
           editorElement.addEventListener("click", mentionClickHandler);
           editorElement.addEventListener("click", customContentClickHandler);
+          editorElement.addEventListener("mouseover", customContentHoverHandler);
         }
       });
     });
@@ -286,6 +310,7 @@ var stdin_default = defineComponent({
         editorElement.removeEventListener("click", hashTagClickHandler);
         editorElement.removeEventListener("click", mentionClickHandler);
         editorElement.removeEventListener("click", customContentClickHandler);
+        editorElement.removeEventListener("mouseover", customContentHoverHandler);
       }
       (_c = editor.value) == null ? void 0 : _c.destroy();
     });

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

@@ -25,6 +25,7 @@ export interface MentionData {
 export interface HashTagData {
     hashTagId: string;
     name: string;
+    type?: string;
 }
 /**
  * CustomContentData

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

@@ -59,10 +59,42 @@ function useExtensions({ props, emit }) {
     parseHTML() {
       return [{ tag: 'span[data-type="hashTag"]' }];
     },
+    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("data-label"),
+          renderHTML: (attributes) => {
+            if (!attributes.label)
+              return {};
+            return { "data-label": attributes.label };
+          }
+        },
+        type: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-tag-type"),
+          renderHTML: (attributes) => {
+            if (!attributes.type)
+              return {};
+            return { "data-tag-type": attributes.type };
+          }
+        }
+      };
+    },
     renderHTML({ node }) {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       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 type = (_f = (_e = node == null ? void 0 : node.attrs) == null ? void 0 : _e.type) != null ? _f : "";
       return [
         "span",
         {
@@ -70,6 +102,7 @@ function useExtensions({ props, emit }) {
           "data-type": "hashTag",
           "data-id": id,
           "data-label": label,
+          "data-tag-type": type,
           "data-hash-tag": "#",
           contenteditable: "false"
         },
@@ -102,10 +135,10 @@ function useExtensions({ props, emit }) {
               try {
                 (activeEditor || editor).chain().focus().deleteRange(activeRange || range).insertContentAt((activeRange || range).from, {
                   type: "hashTag",
-                  attrs: { id: data.hashTagId, label: data.name }
+                  attrs: { id: data.hashTagId, label: data.name, type: data.type }
                 }).setTextSelection((activeRange || range).from + 1).insertContent(" ").run();
               } catch (e) {
-                command({ id: data.hashTagId, label: data.name });
+                command({ id: data.hashTagId, label: data.name, type: data.type });
                 (activeEditor || editor).chain().focus().insertContent(" ").run();
               }
             });

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.49";
+export const version: "1.0.51";
 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.49";
+const version = "1.0.51";
 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" | "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<{
+}>, () => 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<{
     modelValue: {
         type: StringConstructor;
         default: string;
@@ -48,6 +48,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "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;

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", "customContent-triggered", "customContent-input", "customContent-exit", "customContent-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", "customContent-hovered", "blur", "focus"],
   setup(props, {
     emit,
     expose
@@ -127,7 +127,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
         type: "hashTag",
         attrs: {
           id: data.hashTagId,
-          label: data.name
+          label: data.name,
+          type: data.type
         }
       });
     };
@@ -204,11 +205,13 @@ var stdin_default = (0, import_vue2.defineComponent)({
       if (tagEl) {
         const id = tagEl.getAttribute("data-id") || "";
         const label = tagEl.getAttribute("data-label") || tagEl.textContent || "";
-        const hashTag = tagEl.getAttribute("data-hash-tag") || "#";
+        const trigger = tagEl.getAttribute("data-hash-tag") || "#";
+        const tagType = tagEl.getAttribute("data-tag-type") || "";
         emit("hashTag-clicked", {
           hashTagId: id,
           name: label,
-          type: hashTag
+          trigger,
+          type: tagType
         });
         event.stopPropagation();
         event.preventDefault();
@@ -250,6 +253,26 @@ var stdin_default = (0, import_vue2.defineComponent)({
         return;
       }
     };
+    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 HISTORY_METADATA_KEY = "rich_text_editor_history_metadata";
     const MAX_HISTORY_ITEMS = 10;
     let saveTimeoutId = null;
@@ -304,6 +327,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           editorElement.addEventListener("click", hashTagClickHandler);
           editorElement.addEventListener("click", mentionClickHandler);
           editorElement.addEventListener("click", customContentClickHandler);
+          editorElement.addEventListener("mouseover", customContentHoverHandler);
         }
       });
     });
@@ -318,6 +342,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         editorElement.removeEventListener("click", hashTagClickHandler);
         editorElement.removeEventListener("click", mentionClickHandler);
         editorElement.removeEventListener("click", customContentClickHandler);
+        editorElement.removeEventListener("mouseover", customContentHoverHandler);
       }
       (_c = editor.value) == null ? void 0 : _c.destroy();
     });

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

@@ -25,6 +25,7 @@ export interface MentionData {
 export interface HashTagData {
     hashTagId: string;
     name: string;
+    type?: string;
 }
 /**
  * CustomContentData

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

@@ -91,10 +91,42 @@ function useExtensions({ props, emit }) {
     parseHTML() {
       return [{ tag: 'span[data-type="hashTag"]' }];
     },
+    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("data-label"),
+          renderHTML: (attributes) => {
+            if (!attributes.label)
+              return {};
+            return { "data-label": attributes.label };
+          }
+        },
+        type: {
+          default: null,
+          parseHTML: (element) => element.getAttribute("data-tag-type"),
+          renderHTML: (attributes) => {
+            if (!attributes.type)
+              return {};
+            return { "data-tag-type": attributes.type };
+          }
+        }
+      };
+    },
     renderHTML({ node }) {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       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 type = (_f = (_e = node == null ? void 0 : node.attrs) == null ? void 0 : _e.type) != null ? _f : "";
       return [
         "span",
         {
@@ -102,6 +134,7 @@ function useExtensions({ props, emit }) {
           "data-type": "hashTag",
           "data-id": id,
           "data-label": label,
+          "data-tag-type": type,
           "data-hash-tag": "#",
           contenteditable: "false"
         },
@@ -134,10 +167,10 @@ function useExtensions({ props, emit }) {
               try {
                 (activeEditor || editor).chain().focus().deleteRange(activeRange || range).insertContentAt((activeRange || range).from, {
                   type: "hashTag",
-                  attrs: { id: data.hashTagId, label: data.name }
+                  attrs: { id: data.hashTagId, label: data.name, type: data.type }
                 }).setTextSelection((activeRange || range).from + 1).insertContent(" ").run();
               } catch (e) {
-                command({ id: data.hashTagId, label: data.name });
+                command({ id: data.hashTagId, label: data.name, type: data.type });
                 (activeEditor || editor).chain().focus().insertContent(" ").run();
               }
             });

package/package.json

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