@dialpad/dialtone-vue 3.206.0 → 3.207.0

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

@@ -1,4 +1,4 @@
-import { nodeViewProps as ft, NodeViewWrapper as pt, VueRenderer as je, VueNodeViewRenderer as mt, EditorContent as ze, Editor as Fe } from "../../node_modules/@tiptap/vue-3.js";
+import { nodeViewProps as ft, NodeViewWrapper as pt, VueRenderer as je, VueNodeViewRenderer as mt, EditorContent as Fe, Editor as ze } from "../../node_modules/@tiptap/vue-3.js";
 import { isTextSelection as Ke, posToDOMRect as re, getText as We, getTextSerializersFromSchema as qe, Node as ae, nodePasteRule as Et, InputRule as Xe, mergeAttributes as st, getMarksBetween as Ye, combineTransactionSteps as Ge, getChangedRanges as Je, findChildrenInRange as Ze, Mark as Qe, nodeInputRule as tn, Extension as en } from "@tiptap/core";
 import { Plugin as It, PluginKey as rt, NodeSelection as nn } from "@tiptap/pm/state";
 import { CellSelection as on } from "@tiptap/pm/tables";
@@ -27,7 +27,7 @@ import ye from "../emoji/emoji.js";
 import { getEmojiData as Bn, emojiRegex as Nn, stringToUnicode as Pn, codeToEmojiData as At, emojiShortCodeRegex as Un } from "../../common/emoji/index.js";
 import Vn from "../list-item/list-item.js";
 import gt from "../stack/stack.js";
-import { linkRegex as jn, getPhoneNumberRegex as zn, warnIfUnmounted as Fn, returnFirstEl as zt } from "../../common/utils/index.js";
+import { linkRegex as jn, getPhoneNumberRegex as Fn, warnIfUnmounted as zn, returnFirstEl as Ft } from "../../common/utils/index.js";
 import Kn from "@tiptap/extension-image";
 import Rt from "@tiptap/extension-mention";
 import we from "../link/link.js";
@@ -37,7 +37,7 @@ import qn from "../input/input.js";
 import Xn from "../popover/popover.js";
 import ve from "../button/button.js";
 import Yn from "../badge/badge.js";
-import { RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as Ft, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Gn, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Jn } from "./rich-text-editor-constants.js";
+import { RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as zt, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Gn, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Jn } from "./rich-text-editor-constants.js";
 import Zn from "../avatar/avatar.js";
 import Qn from "@dialpad/dialtone-icons/vue3/hash";
 import to from "@dialpad/dialtone-icons/vue3/lock";
@@ -63,7 +63,7 @@ function Z(t, e) {
 function j(t) {
   return t.split("-")[0];
 }
-function F(t) {
+function z(t) {
   return t.split("-")[1];
 }
 function Te(t) {
@@ -81,7 +81,7 @@ function Ht(t) {
 }
 function _e(t, e, o) {
   o === void 0 && (o = !1);
-  const n = F(t), i = Ht(t), s = Mt(i);
+  const n = z(t), i = Ht(t), s = Mt(i);
   let r = i === "x" ? n === (o ? "end" : "start") ? "right" : "left" : n === "start" ? "bottom" : "top";
   return e.reference[s] > e.floating[s] && (r = vt(r)), [r, vt(r)];
 }
@@ -106,7 +106,7 @@ function lo(t, e, o) {
   }
 }
 function co(t, e, o, n) {
-  const i = F(t);
+  const i = z(t);
   let s = lo(j(t), o === "start", n);
   return i && (s = s.map((r) => r + "-" + i), e && (s = s.concat(s.map(bt)))), s;
 }
@@ -186,7 +186,7 @@ function Yt(t, e, o) {
         y: n.y
       };
   }
-  switch (F(e)) {
+  switch (z(e)) {
     case "start":
       f[r] -= h * (o && u ? -1 : 1);
       break;
@@ -329,12 +329,12 @@ const fo = async (t, e, o) => {
     }, f = Ht(i), p = Mt(f), m = await r.getDimensions(u), g = f === "y", y = g ? "top" : "left", b = g ? "bottom" : "right", v = g ? "clientHeight" : "clientWidth", x = s.reference[p] + s.reference[f] - h[f] - s.floating[p], O = h[f] - s.reference[f], _ = await (r.getOffsetParent == null ? void 0 : r.getOffsetParent(u));
     let L = _ ? _[v] : 0;
     (!L || !await (r.isElement == null ? void 0 : r.isElement(_))) && (L = a.floating[v] || s.floating[p]);
-    const U = x / 2 - O / 2, D = L / 2 - m[p] / 2 - 1, w = G(c[y], D), E = G(c[b], D), A = w, H = L - m[p] - E, S = L / 2 - m[p] / 2 + U, z = St(A, S, H), V = !l.arrow && F(i) != null && S !== z && s.reference[p] / 2 - (S < A ? w : E) - m[p] / 2 < 0, B = V ? S < A ? S - A : S - H : 0;
+    const U = x / 2 - O / 2, D = L / 2 - m[p] / 2 - 1, w = G(c[y], D), E = G(c[b], D), A = w, H = L - m[p] - E, S = L / 2 - m[p] / 2 + U, F = St(A, S, H), V = !l.arrow && z(i) != null && S !== F && s.reference[p] / 2 - (S < A ? w : E) - m[p] / 2 < 0, B = V ? S < A ? S - A : S - H : 0;
     return {
       [f]: h[f] + B,
       data: {
-        [f]: z,
-        centerOffset: S - z - B,
+        [f]: F,
+        centerOffset: S - F - B,
         ...V && {
           alignmentOffset: B
         }
@@ -344,7 +344,7 @@ const fo = async (t, e, o) => {
   }
 });
 function mo(t, e, o) {
-  return (t ? [...o.filter((i) => F(i) === t), ...o.filter((i) => F(i) !== t)] : o.filter((i) => j(i) === i)).filter((i) => t ? F(i) === t || (e ? bt(i) !== i : !1) : !0);
+  return (t ? [...o.filter((i) => z(i) === t), ...o.filter((i) => z(i) !== t)] : o.filter((i) => j(i) === i)).filter((i) => t ? z(i) === t || (e ? bt(i) !== i : !1) : !0);
 }
 const go = function(t) {
   return t === void 0 && (t = {}), {
@@ -389,7 +389,7 @@ const go = function(t) {
           }
         };
       const L = O.map((w) => {
-        const E = F(w.placement);
+        const E = z(w.placement);
         return [w.placement, E && d ? (
           // Check along the mainAxis and main crossAxis side.
           w.overflows.slice(0, 2).reduce((A, H) => A + H, 0)
@@ -401,7 +401,7 @@ const go = function(t) {
         0,
         // Aligned placements should not check their opposite crossAxis
         // side.
-        F(w[0]) ? 2 : 3
+        z(w[0]) ? 2 : 3
       ).every((E) => E <= 0))[0]) == null ? void 0 : i[0]) || L[0][0];
       return D !== a ? {
         data: {
@@ -451,8 +451,8 @@ const go = function(t) {
         overflows: D
       }], !D.every((S) => S <= 0)) {
         var E, A;
-        const S = (((E = s.flip) == null ? void 0 : E.index) || 0) + 1, z = L[S];
-        if (z && (!(c === "alignment" ? b !== X(z) : !1) || // We leave the current main axis only if every placement on that axis
+        const S = (((E = s.flip) == null ? void 0 : E.index) || 0) + 1, F = L[S];
+        if (F && (!(c === "alignment" ? b !== X(F) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
         w.every((N) => X(N.placement) === b ? N.overflows[0] > 0 : !0)))
           return {
@@ -461,7 +461,7 @@ const go = function(t) {
               overflows: w
             },
             reset: {
-              placement: z
+              placement: F
             }
           };
         let V = (A = w.filter((B) => B.overflows[0] <= 0).sort((B, N) => B.overflows[1] - N.overflows[1])[0]) == null ? void 0 : A.placement;
@@ -589,15 +589,15 @@ const vo = function(t) {
           return c.find((g) => l > g.left - f.left && l < g.right + f.right && u > g.top - f.top && u < g.bottom + f.bottom) || h;
         if (c.length >= 2) {
           if (X(o) === "y") {
-            const w = c[0], E = c[c.length - 1], A = j(o) === "top", H = w.top, S = E.bottom, z = A ? w.left : E.left, V = A ? w.right : E.right, B = V - z, N = S - H;
+            const w = c[0], E = c[c.length - 1], A = j(o) === "top", H = w.top, S = E.bottom, F = A ? w.left : E.left, V = A ? w.right : E.right, B = V - F, N = S - H;
             return {
               top: H,
               bottom: S,
-              left: z,
+              left: F,
               right: V,
               width: B,
               height: N,
-              x: z,
+              x: F,
               y: H
             };
           }
@@ -635,7 +635,7 @@ async function To(t, e) {
     placement: o,
     platform: n,
     elements: i
-  } = t, s = await (n.isRTL == null ? void 0 : n.isRTL(i.floating)), r = j(o), a = F(o), l = X(o) === "y", u = xo.has(r) ? -1 : 1, d = s && l ? -1 : 1, c = Z(e, t);
+  } = t, s = await (n.isRTL == null ? void 0 : n.isRTL(i.floating)), r = j(o), a = z(o), l = X(o) === "y", u = xo.has(r) ? -1 : 1, d = s && l ? -1 : 1, c = Z(e, t);
   let {
     mainAxis: h,
     crossAxis: f,
@@ -751,7 +751,7 @@ const _o = function(t) {
         apply: l = () => {
         },
         ...u
-      } = Z(t, e), d = await r.detectOverflow(e, u), c = j(i), h = F(i), f = X(i) === "y", {
+      } = Z(t, e), d = await r.detectOverflow(e, u), c = j(i), h = z(i), f = X(i) === "y", {
         width: p,
         height: m
       } = s.floating;
@@ -1054,7 +1054,7 @@ function Ae(t, e) {
   const o = ot(t);
   return o === e || !K(o) || dt(o) ? !1 : W(o).position === "fixed" || Ae(o, e);
 }
-function zo(t, e) {
+function Fo(t, e) {
   const o = e.get(t);
   if (o)
     return o;
@@ -1067,14 +1067,14 @@ function zo(t, e) {
   }
   return e.set(t, n), n;
 }
-function Fo(t) {
+function zo(t) {
   let {
     element: e,
     boundary: o,
     rootBoundary: n,
     strategy: i
   } = t;
-  const r = [...o === "clippingAncestors" ? Tt(e) ? [] : zo(e, this._c) : [].concat(o), n], a = r[0], l = r.reduce((u, d) => {
+  const r = [...o === "clippingAncestors" ? Tt(e) ? [] : Fo(e, this._c) : [].concat(o), n], a = r[0], l = r.reduce((u, d) => {
     const c = ee(e, d, i);
     return u.top = R(c.top, u.top), u.right = G(c.right, u.right), u.bottom = G(c.bottom, u.bottom), u.left = R(c.left, u.left), u;
   }, ee(e, a, i));
@@ -1166,7 +1166,7 @@ function Xo(t) {
 const Yo = {
   convertOffsetParentRelativeRectToViewportRelativeRect: Bo,
   getDocumentElement: Q,
-  getClippingRect: Fo,
+  getClippingRect: zo,
   getOffsetParent: Re,
   getElementRects: qo,
   getClientRects: No,
@@ -2086,7 +2086,7 @@ function Hi(t, e, o, n) {
   for (const a of r)
     a.mark.type === n && o.removeMark(a.from, a.to, n);
 }
-const ie = zn(1, 15);
+const ie = Fn(1, 15);
 function se(t, e, o, n, i, s) {
   if (!t)
     return;
@@ -2209,14 +2209,22 @@ const Bi = {
     }
   },
   methods: {
-    handleClick() {
-      const t = {
+    getMentionData() {
+      return {
         name: this.$props.node.attrs.name,
         id: this.$props.node.attrs.id,
         avatarSrc: this.$props.node.attrs.avatarSrc,
         contactKey: this.$props.node.attrs.contactKey
       };
-      this.$props.editor.emit("mention-click", t);
+    },
+    handleClick() {
+      this.$props.editor.emit("mention-click", this.getMentionData());
+    },
+    handleMouseEnter(t) {
+      this.$props.editor.emit("mention-hover", { ...this.getMentionData(), event: t });
+    },
+    handleMouseLeave(t) {
+      this.$props.editor.emit("mention-leave", { ...this.getMentionData(), event: t });
     }
   }
 };
@@ -2226,20 +2234,24 @@ function ji(t, e, o, n, i, s) {
     default: C(() => [
       I(r, {
         kind: "mention",
-        onClick: Dt(s.handleClick, ["prevent"])
+        onClick: Dt(s.handleClick, ["prevent"]),
+        onMouseenter: s.handleMouseEnter,
+        onMouseleave: s.handleMouseLeave,
+        onFocusin: s.handleMouseEnter,
+        onFocusout: s.handleMouseLeave
       }, {
         default: C(() => [
           at($(s.text), 1)
         ]),
         _: 1
-      }, 8, ["onClick"])
+      }, 8, ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"])
     ]),
     _: 1
   });
 }
-const zi = /* @__PURE__ */ q(Vi, [["render", ji]]), Fi = Rt.extend({
+const Fi = /* @__PURE__ */ q(Vi, [["render", ji]]), zi = Rt.extend({
   addNodeView() {
-    return mt(zi);
+    return mt(Fi);
   },
   parseHTML() {
     return [
@@ -2828,7 +2840,7 @@ const xs = /* @__PURE__ */ q(gs, [["render", vs]]), Ts = {
   compatConfig: { MODE: 3 },
   name: "DtRichTextEditor",
   components: {
-    EditorContent: ze,
+    EditorContent: Fe,
     BubbleMenu: Qo,
     DtButton: ve,
     DtStack: gt
@@ -3201,6 +3213,22 @@ const xs = /* @__PURE__ */ q(gs, [["render", vs]]), Ts = {
      * @type {Object}
      */
     "mention-click",
+    /**
+     * Event fired when the cursor enters a mention. The payload includes the
+     * mention data (name, id, avatarSrc, contactKey) plus the native MouseEvent
+     * as `event`, which can be used for positioning a hovercard.
+     * @event mention-hover
+     * @type {Object}
+     */
+    "mention-hover",
+    /**
+     * Event fired when the cursor leaves a mention. The payload includes the
+     * mention data (name, id, avatarSrc, contactKey) plus the native MouseEvent
+     * as `event`.
+     * @event mention-leave
+     * @type {Object}
+     */
+    "mention-leave",
     /**
      * Event fired when a channel is clicked
      * @event channel-click
@@ -3213,7 +3241,7 @@ const xs = /* @__PURE__ */ q(gs, [["render", vs]]), Ts = {
       editor: null,
       appendTo: () => {
         var t;
-        return (t = zt(this.$refs.editor.$el).getRootNode()) == null ? void 0 : t.querySelector("body");
+        return (t = Ft(this.$refs.editor.$el).getRootNode()) == null ? void 0 : t.querySelector("body");
       },
       floatingOptions: {
         placement: "top-start"
@@ -3393,10 +3421,10 @@ ${this.processNodeContent(t)}
         },
         openOnClick: !1,
         autolink: !0,
-        protocols: Ft
+        protocols: zt
       })), this.customLink && t.push(this.getExtension(Ni, this.customLink)), this.mentionSuggestion) {
         const n = { ...this.mentionSuggestion, ...us };
-        t.push(Fi.configure({ suggestion: n }));
+        t.push(zi.configure({ suggestion: n }));
       }
       if (this.channelSuggestion) {
         const n = { ...this.channelSuggestion, ...ms };
@@ -3471,11 +3499,11 @@ ${n.textContent}
     this.destroyEditor();
   },
   mounted() {
-    Fn(zt(this.$el), this.$options.name), this.processValue(this.modelValue, !1);
+    zn(Ft(this.$el), this.$options.name), this.processValue(this.modelValue, !1);
   },
   methods: {
     createEditor() {
-      this.editor = new Fe({
+      this.editor = new ze({
         autofocus: this.autoFocus,
         content: this.modelValue,
         editable: this.editable,
@@ -3536,7 +3564,7 @@ ${n.textContent}
       const t = this.editor.getAttributes("link").href;
       window.open(t, "_blank");
     },
-    setLink(t, e, o, n = Ft, i) {
+    setLink(t, e, o, n = zt, i) {
       var a, l, u;
       if (!t) {
         this.removeLink();
@@ -3653,6 +3681,10 @@ ${n.textContent}
         this.$emit("blur", t);
       }), this.editor.on("mention-click", (t) => {
         this.$emit("mention-click", t);
+      }), this.editor.on("mention-hover", (t) => {
+        this.$emit("mention-hover", t);
+      }), this.editor.on("mention-leave", (t) => {
+        this.$emit("mention-leave", t);
       }), this.editor.on("channel-click", (t) => {
         this.$emit("channel-click", t);
       });