@dialpad/dialtone 9.151.0 → 9.154.0

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

@@ -1,42 +1,42 @@
-import { nodeViewProps as $, NodeViewWrapper as R, VueRenderer as v, VueNodeViewRenderer as I, BubbleMenu as G, EditorContent as Q, Editor as Z } from "../../node_modules/@tiptap/vue-3.js";
-import { Node as ee, nodePasteRule as A, InputRule as te, mergeAttributes as b, getMarksBetween as ne, combineTransactionSteps as oe, getChangedRanges as re, findChildrenInRange as se, Mark as ie, nodeInputRule as ae, Extension as ce } from "@tiptap/core";
-import de from "@tiptap/extension-blockquote";
-import le from "@tiptap/extension-code-block";
-import ue from "@tiptap/extension-code";
-import me from "@tiptap/extension-document";
-import he from "@tiptap/extension-hard-break";
-import U from "@tiptap/extension-paragraph";
-import pe from "@tiptap/extension-placeholder";
-import fe from "@tiptap/extension-bold";
-import ge from "@tiptap/extension-bullet-list";
-import _e from "@tiptap/extension-italic";
-import ke from "@tiptap/extension-link";
-import ye from "@tiptap/extension-list-item";
-import we from "@tiptap/extension-ordered-list";
-import Ce from "@tiptap/extension-strike";
-import be from "@tiptap/extension-underline";
-import xe from "@tiptap/extension-text";
-import Te from "@tiptap/extension-text-align";
-import Ee from "@tiptap/extension-history";
-import Se from "@tiptap/extension-text-style";
-import Le from "@tiptap/extension-color";
-import $e from "@tiptap/extension-font-family";
+import { nodeViewProps as $, NodeViewWrapper as v, VueRenderer as R, VueNodeViewRenderer as I, BubbleMenu as Q, EditorContent as Z, Editor as ee } from "../../node_modules/@tiptap/vue-3.js";
+import { Node as te, nodePasteRule as A, InputRule as ne, mergeAttributes as b, getMarksBetween as oe, combineTransactionSteps as re, getChangedRanges as se, findChildrenInRange as ie, Mark as ae, nodeInputRule as ce, Extension as de } from "@tiptap/core";
+import le from "@tiptap/extension-blockquote";
+import ue from "@tiptap/extension-code-block";
+import me from "@tiptap/extension-code";
+import he from "@tiptap/extension-document";
+import pe from "@tiptap/extension-hard-break";
+import W from "@tiptap/extension-paragraph";
+import fe from "@tiptap/extension-placeholder";
+import ge from "@tiptap/extension-bold";
+import _e from "@tiptap/extension-bullet-list";
+import ke from "@tiptap/extension-italic";
+import ye from "@tiptap/extension-link";
+import we from "@tiptap/extension-list-item";
+import Ce from "@tiptap/extension-ordered-list";
+import be from "@tiptap/extension-strike";
+import xe from "@tiptap/extension-underline";
+import Te from "@tiptap/extension-text";
+import Ee from "@tiptap/extension-text-align";
+import Se from "@tiptap/extension-history";
+import Le from "@tiptap/extension-text-style";
+import $e from "@tiptap/extension-color";
+import ve from "@tiptap/extension-font-family";
 import { PluginKey as T, Plugin as Re } from "@tiptap/pm/state";
-import ve from "@tiptap/suggestion";
-import { emojiPattern as W } from "regex-combined-emojis";
-import { resolveComponent as l, createBlock as m, openBlock as d, withCtx as u, createVNode as f, createElementBlock as _, withDirectives as Ie, createElementVNode as k, Fragment as Me, renderList as Be, withModifiers as Ne, normalizeClass as z, resolveDynamicComponent as Oe, vShow as De, createTextVNode as C, toDisplayString as h, markRaw as M, createCommentVNode as w, mergeProps as Ae } from "vue";
+import Ie from "@tiptap/suggestion";
+import { emojiPattern as z } from "regex-combined-emojis";
+import { resolveComponent as l, createBlock as m, openBlock as d, withCtx as u, createVNode as f, createElementBlock as _, withDirectives as Me, createElementVNode as k, Fragment as Be, renderList as Ne, withModifiers as j, normalizeClass as X, resolveDynamicComponent as Oe, vShow as De, createTextVNode as C, toDisplayString as h, markRaw as M, createCommentVNode as w, mergeProps as Ae } from "vue";
 import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import X from "../emoji/emoji.js";
-import { getEmojiData as Pe, emojiRegex as je, stringToUnicode as He, codeToEmojiData as j, emojiShortCodeRegex as Ke } from "../../common/emoji/index.js";
+import J from "../emoji/emoji.js";
+import { getEmojiData as Pe, emojiRegex as je, stringToUnicode as He, codeToEmojiData as H, emojiShortCodeRegex as Ke } from "../../common/emoji/index.js";
 import Fe from "../list-item/list-item.js";
 import E from "../stack/stack.js";
 import B from "tippy.js";
-import { getPhoneNumberRegex as Ve, linkRegex as qe, warnIfUnmounted as Ue, returnFirstEl as K } from "../../common/utils/index.js";
+import { getPhoneNumberRegex as Ve, linkRegex as qe, warnIfUnmounted as Ue, returnFirstEl as F } from "../../common/utils/index.js";
 import We from "@tiptap/extension-image";
-import H from "@tiptap/extension-mention";
-import J from "../link/link.js";
+import K from "@tiptap/extension-mention";
+import Y from "../link/link.js";
 import { DtIconLock as ze } from "@dialpad/dialtone-icons/vue3";
-import { RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as F, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Xe, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Je } from "./rich-text-editor-constants.js";
+import { RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as V, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Xe, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Je } from "./rich-text-editor-constants.js";
 import Ye from "../avatar/avatar.js";
 import Ge from "@dialpad/dialtone-icons/vue3/hash";
 import Qe from "@dialpad/dialtone-icons/vue3/lock";
@@ -47,8 +47,8 @@ const nt = {
   compatConfig: { MODE: 3 },
   name: "EmojiComponent",
   components: {
-    NodeViewWrapper: R,
-    DtEmoji: X
+    NodeViewWrapper: v,
+    DtEmoji: J
   },
   props: $
 };
@@ -126,7 +126,7 @@ const rt = /* @__PURE__ */ g(nt, [["render", ot]]), st = {
           this.command(t);
           return;
         case "mention":
-          this.command({ name: t.name, id: t.id, avatarSrc: t.avatarSrc });
+          this.command({ name: t.name, id: t.id, avatarSrc: t.avatarSrc, contactKey: t.contactKey });
           break;
         case "channel":
           this.command({ name: t.name, id: t.id, locked: t.locked });
@@ -144,16 +144,16 @@ const rt = /* @__PURE__ */ g(nt, [["render", ot]]), st = {
 function ct(e, t, o, n, r, s) {
   const i = l("dt-list-item");
   return d(), _("div", it, [
-    Ie(k("ul", at, [
-      (d(!0), _(Me, null, Be(o.items, (a, c) => (d(), m(i, {
+    Me(k("ul", at, [
+      (d(!0), _(Be, null, Ne(o.items, (a, c) => (d(), m(i, {
         key: a.id,
-        class: z([
+        class: X([
           "d-suggestion-list__item",
           { "d-list-item--highlighted": c === r.selectedIndex }
         ]),
         "navigation-type": "arrow-keys",
         onClick: (p) => s.selectItem(c),
-        onKeydown: Ne(s.onKeyDown, ["prevent"])
+        onKeydown: j(s.onKeyDown, ["prevent"])
       }, {
         default: u(() => [
           (d(), m(Oe(o.itemComponent), { item: a }, null, 8, ["item"]))
@@ -169,7 +169,7 @@ const N = /* @__PURE__ */ g(st, [["render", ct]]), dt = {
   compatConfig: { MODE: 3 },
   name: "EmojiSuggestion",
   components: {
-    DtEmoji: X,
+    DtEmoji: J,
     DtStack: E
   },
   props: {
@@ -245,7 +245,7 @@ const ut = /* @__PURE__ */ g(dt, [["render", lt]]), O = {
     let e, t, o = !1;
     return {
       onStart: (n) => {
-        e = new v(N, {
+        e = new R(N, {
           props: {
             itemComponent: M(ut),
             itemType: "emoji",
@@ -285,14 +285,14 @@ const ut = /* @__PURE__ */ g(dt, [["render", lt]]), O = {
       }
     };
   }
-}, ft = /(:\w+:)$/, gt = new RegExp(W + "$"), _t = (e) => {
-  if (e && j(e[0]))
+}, ft = /(:\w+:)$/, gt = new RegExp(z + "$"), _t = (e) => {
+  if (e && H(e[0]))
     return { text: e[2] || e[0] };
-}, kt = (e) => [...e.matchAll(Ke)].filter((o) => j(o[0])).map((o) => ({
+}, kt = (e) => [...e.matchAll(Ke)].filter((o) => H(o[0])).map((o) => ({
   index: o.index,
   text: o[0],
   match: o
-})), yt = ee.create({
+})), yt = te.create({
   name: "emoji",
   addOptions() {
     return {
@@ -321,14 +321,14 @@ const ut = /* @__PURE__ */ g(dt, [["render", lt]]), O = {
     ];
   },
   renderText({ node: e }) {
-    return He(j(e.attrs.code).unicode_output);
+    return He(H(e.attrs.code).unicode_output);
   },
   renderHTML({ HTMLAttributes: e }) {
     return ["emoji-component", b(this.options.HTMLAttributes, e)];
   },
   addInputRules() {
     return [
-      new te({
+      new ne({
         find: (e) => {
           const t = e.match(ft) || e.match(gt);
           if (t)
@@ -365,7 +365,7 @@ const ut = /* @__PURE__ */ g(dt, [["render", lt]]), O = {
   },
   addProseMirrorPlugins() {
     return [
-      ve({
+      Ie({
         char: ":",
         pluginKey: new T("emoji"),
         editor: this.editor,
@@ -432,12 +432,12 @@ function P(e, t, o, n) {
   return s <= 0 || s >= e.length || s === t ? r : P(e, s, o, n);
 }
 function Tt(e, t, o, n) {
-  const r = Math.max(e.from - 1, 0), s = Math.min(e.to + 1, t.content.size), i = ne(r, s, t);
+  const r = Math.max(e.from - 1, 0), s = Math.min(e.to + 1, t.content.size), i = oe(r, s, t);
   for (const a of i)
     a.mark.type === n && o.removeMark(a.from, a.to, n);
 }
-const V = Ve(1, 15);
-function q(e, t, o, n, r, s) {
+const q = Ve(1, 15);
+function U(e, t, o, n, r, s) {
   if (!e)
     return;
   let i = o - t - 1;
@@ -446,16 +446,16 @@ function q(e, t, o, n, r, s) {
     e,
     i,
     "left",
-    V
+    q
   ), p = P(
     e,
     a,
     "right",
-    V
+    q
   ), y = e.slice(c.from, p.to);
   wt(y, qe, Ct).forEach((D) => {
-    const x = bt(D[0]), L = t + c.from + D.index + 1, Y = L + x.length;
-    r.addMark(L, Y, s.create());
+    const x = bt(D[0]), L = t + c.from + D.index + 1, G = L + x.length;
+    r.addMark(L, G, s.create());
   });
 }
 function Et(e) {
@@ -467,18 +467,18 @@ function Et(e) {
       if (t && !s)
         return;
       const { tr: i } = r, { textContent: a } = r.doc;
-      t || q(a, 0, 0, a.length, i, e.type), t = !0;
-      const c = oe(
+      t || U(a, 0, 0, a.length, i, e.type), t = !0;
+      const c = re(
         n.doc,
         [...o]
       );
-      return re(c).forEach(({ oldRange: y, newRange: S }) => {
-        Tt(S, r.doc, i, e.type), se(
+      return se(c).forEach(({ oldRange: y, newRange: S }) => {
+        Tt(S, r.doc, i, e.type), ie(
           r.doc,
           S,
           (x) => x.isTextblock
         ).forEach(({ node: x, pos: L }) => {
-          q(
+          U(
             x.textContent,
             L,
             y.from,
@@ -494,7 +494,7 @@ function Et(e) {
 const St = {
   class: "d-link d-c-text d-d-inline-block d-wb-break-all",
   rel: "noopener noreferrer nofollow"
-}, Lt = ie.create({
+}, Lt = ae.create({
   name: "CustomLink",
   renderHTML({ HTMLAttributes: e }) {
     return [
@@ -538,42 +538,56 @@ const St = {
       }
     };
   }
-}).configure({ inline: !0, allowBase64: !0 }), Rt = U.extend({
+}).configure({ inline: !0, allowBase64: !0 }), vt = W.extend({
   parseHTML() {
     return [{ tag: "div" }];
   },
   renderHTML({ HTMLAttributes: e }) {
     return ["div", b(this.options.HTMLAttributes, e), 0];
   }
-}), vt = {
+}), Rt = {
   compatConfig: { MODE: 3 },
   name: "MentionComponent",
   components: {
-    NodeViewWrapper: R,
-    DtLink: J
+    NodeViewWrapper: v,
+    DtLink: Y
   },
   props: $,
   computed: {
     text() {
       return "@" + this.$props.node.attrs.name;
     }
+  },
+  methods: {
+    handleClick() {
+      const e = {
+        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", e);
+    }
   }
 };
 function It(e, t, o, n, r, s) {
   const i = l("dt-link"), a = l("node-view-wrapper");
   return d(), m(a, { class: "d-d-inline-block" }, {
     default: u(() => [
-      f(i, { kind: "mention" }, {
+      f(i, {
+        kind: "mention",
+        onClick: j(s.handleClick, ["prevent"])
+      }, {
         default: u(() => [
           C(h(s.text), 1)
         ]),
         _: 1
-      })
+      }, 8, ["onClick"])
     ]),
     _: 1
   });
 }
-const Mt = /* @__PURE__ */ g(vt, [["render", It]]), Bt = H.extend({
+const Mt = /* @__PURE__ */ g(Rt, [["render", It]]), Bt = K.extend({
   addNodeView() {
     return I(Mt);
   },
@@ -615,8 +629,8 @@ const Mt = /* @__PURE__ */ g(vt, [["render", It]]), Bt = H.extend({
   compatConfig: { MODE: 3 },
   name: "ChannelComponent",
   components: {
-    NodeViewWrapper: R,
-    DtLink: J,
+    NodeViewWrapper: v,
+    DtLink: Y,
     DtIconLock: ze,
     DtStack: E
   },
@@ -625,13 +639,26 @@ const Mt = /* @__PURE__ */ g(vt, [["render", It]]), Bt = H.extend({
     text() {
       return this.$props.node.attrs.locked ? this.$props.node.attrs.name : "#" + this.$props.node.attrs.name;
     }
+  },
+  methods: {
+    handleClick() {
+      const e = {
+        name: this.$props.node.attrs.name,
+        id: this.$props.node.attrs.id,
+        locked: this.$props.node.attrs.locked
+      };
+      this.$props.editor.emit("channel-click", e);
+    }
   }
 };
 function Ot(e, t, o, n, r, s) {
   const i = l("dt-icon-lock"), a = l("dt-stack"), c = l("dt-link"), p = l("node-view-wrapper");
   return d(), m(p, { class: "d-d-inline-block" }, {
     default: u(() => [
-      f(c, { kind: "mention" }, {
+      f(c, {
+        kind: "mention",
+        onClick: j(s.handleClick, ["prevent"])
+      }, {
         default: u(() => [
           f(a, {
             direction: "row",
@@ -648,12 +675,12 @@ function Ot(e, t, o, n, r, s) {
           })
         ]),
         _: 1
-      })
+      }, 8, ["onClick"])
     ]),
     _: 1
   });
 }
-const Dt = /* @__PURE__ */ g(Nt, [["render", Ot]]), At = H.extend({
+const Dt = /* @__PURE__ */ g(Nt, [["render", Ot]]), At = K.extend({
   name: "channel",
   addNodeView() {
     return I(Dt);
@@ -693,7 +720,7 @@ const Dt = /* @__PURE__ */ g(Nt, [["render", Ot]]), At = H.extend({
   compatConfig: { MODE: 3 },
   name: "SlashCommandsComponent",
   components: {
-    NodeViewWrapper: R
+    NodeViewWrapper: v
   },
   props: {
     ...$
@@ -728,7 +755,7 @@ const Ht = /* @__PURE__ */ g(Pt, [["render", jt]]), Kt = (e, t) => [...e.matchAl
     text: r,
     match: n
   };
-}), Ft = H.extend({
+}), Ft = K.extend({
   name: "slash-commands",
   group: "inline",
   inline: !0,
@@ -777,7 +804,7 @@ const Ht = /* @__PURE__ */ g(Pt, [["render", jt]]), Kt = (e, t) => [...e.matchAl
     var o;
     const e = (o = this.options.suggestion) == null ? void 0 : o.items({ query: "" }).map((n) => n.command), t = new RegExp(`^((?:\\/)(${e.join("|")})) $`);
     return [
-      ae({
+      ce({
         find: t,
         type: this.type,
         getAttributes(n) {
@@ -883,7 +910,7 @@ function zt(e, t, o, n, r, s) {
             default: u(() => [
               s.presenceText ? (d(), _("span", {
                 key: 0,
-                class: z(["d-mention-suggestion__presence", [s.presenceFontColorClass]])
+                class: X(["d-mention-suggestion__presence", [s.presenceFontColorClass]])
               }, h(s.presenceText), 3)) : w("", !0),
               s.status && s.presenceText ? (d(), _("div", Ut, " • ")) : w("", !0),
               s.status ? (d(), _("div", Wt, h(s.status), 1)) : w("", !0)
@@ -906,7 +933,7 @@ const Xt = /* @__PURE__ */ g(Vt, [["render", zt]]), Jt = {
     let e, t, o = !1;
     return {
       onStart: (n) => {
-        e = new v(N, {
+        e = new R(N, {
           props: {
             itemComponent: M(Xt),
             itemType: "mention",
@@ -994,7 +1021,7 @@ const Qt = /* @__PURE__ */ g(Yt, [["render", Gt]]), Zt = {
     let e, t, o = !1;
     return {
       onStart: (n) => {
-        e = new v(N, {
+        e = new R(N, {
           props: {
             itemComponent: M(Qt),
             itemType: "channel",
@@ -1074,7 +1101,7 @@ const sn = /* @__PURE__ */ g(en, [["render", rn]]), an = {
     let e, t, o = !1;
     return {
       onStart: (n) => {
-        e = new v(N, {
+        e = new R(N, {
           parent: void 0,
           props: {
             itemComponent: M(sn),
@@ -1119,8 +1146,8 @@ const sn = /* @__PURE__ */ g(en, [["render", rn]]), an = {
   compatConfig: { MODE: 3 },
   name: "DtRichTextEditor",
   components: {
-    EditorContent: Q,
-    BubbleMenu: G,
+    EditorContent: Z,
+    BubbleMenu: Q,
     DtButton: tt,
     DtStack: E
   },
@@ -1464,7 +1491,19 @@ const sn = /* @__PURE__ */ g(en, [["render", rn]]), an = {
      * @event selected-command
      * @type {String}
      */
-    "selected-command"
+    "selected-command",
+    /**
+     * Event fired when a mention is clicked
+     * @event mention-click
+     * @type {Object}
+     */
+    "mention-click",
+    /**
+     * Event fired when a channel is clicked
+     * @event channel-click
+     * @type {Object}
+     */
+    "channel-click"
   ],
   data() {
     return {
@@ -1472,7 +1511,7 @@ const sn = /* @__PURE__ */ g(en, [["render", rn]]), an = {
       tippyOptions: {
         appendTo: () => {
           var e;
-          return (e = K(this.$refs.editor.$el).getRootNode()) == null ? void 0 : e.querySelector("body");
+          return (e = F(this.$refs.editor.$el).getRootNode()) == null ? void 0 : e.querySelector("body");
         },
         placement: "top-start"
       },
@@ -1610,15 +1649,15 @@ ${this.processNodeContent(e)}
     },
     // eslint-disable-next-line complexity
     extensions() {
-      const e = [me, xe, Ee, he];
-      e.push(this.useDivTags ? Rt : U), this.allowBold && e.push(fe), this.allowBlockquote && e.push(de), this.allowBulletList && (e.push(ge), e.push(ye.extend({
+      const e = [he, Te, Se, pe];
+      e.push(this.useDivTags ? vt : W), this.allowBold && e.push(ge), this.allowBlockquote && e.push(le), this.allowBulletList && (e.push(_e), e.push(we.extend({
         renderText({ node: n }) {
           return n.textContent;
         }
-      })), e.push(we)), this.allowItalic && e.push(_e), this.allowStrike && e.push(Ce), this.allowUnderline && e.push(be), this.placeholder && e.push(
-        pe.configure({ placeholder: this.placeholder })
+      })), e.push(Ce)), this.allowItalic && e.push(ke), this.allowStrike && e.push(be), this.allowUnderline && e.push(xe), this.placeholder && e.push(
+        fe.configure({ placeholder: this.placeholder })
       );
-      const t = this, o = ce.create({
+      const t = this, o = de.create({
         addKeyboardShortcuts() {
           return {
             "Shift-Enter": ({ editor: n }) => t.allowLineBreaks ? !1 : (n.commands.first(({ commands: r }) => [
@@ -1632,7 +1671,7 @@ ${this.processNodeContent(e)}
           };
         }
       });
-      if (e.push(o), this.link && e.push(ke.extend({
+      if (e.push(o), this.link && e.push(ye.extend({
         inclusive: !1,
         addKeyboardShortcuts() {
           return {
@@ -1645,7 +1684,7 @@ ${this.processNodeContent(e)}
         },
         openOnClick: !1,
         autolink: !0,
-        protocols: F
+        protocols: V
       })), this.customLink && e.push(this.getExtension(Lt, this.customLink)), this.mentionSuggestion) {
         const n = { ...this.mentionSuggestion, ...Jt };
         e.push(Bt.configure({ suggestion: n }));
@@ -1663,9 +1702,9 @@ ${this.processNodeContent(e)}
           }
         }));
       }
-      return e.push(yt), e.push(Te.configure({
+      return e.push(yt), e.push(Ee.configure({
         types: ["paragraph"]
-      })), this.allowCode && e.push(ue), this.allowCodeblock && e.push(le.extend({
+      })), this.allowCode && e.push(me), this.allowCodeblock && e.push(ue.extend({
         renderText({ node: n }) {
           return `\`\`\`
 ${n.textContent}
@@ -1675,7 +1714,7 @@ ${n.textContent}
         HTMLAttributes: {
           class: "d-rich-text-editor__code-block"
         }
-      })), this.allowInlineImages && e.push($t), (this.allowFontFamily || this.allowFontColor) && (e.push(Se), this.allowFontColor && e.push(Le), this.allowFontFamily && e.push($e)), this.additionalExtensions.length && e.push(...this.additionalExtensions), e;
+      })), this.allowInlineImages && e.push($t), (this.allowFontFamily || this.allowFontColor) && (e.push(Le), this.allowFontColor && e.push($e), this.allowFontFamily && e.push(ve)), this.additionalExtensions.length && e.push(...this.additionalExtensions), e;
     },
     inputAttrs() {
       const e = {
@@ -1715,11 +1754,11 @@ ${n.textContent}
     this.destroyEditor();
   },
   mounted() {
-    Ue(K(this.$el), this.$options.name), this.processValue(this.modelValue, !1);
+    Ue(F(this.$el), this.$options.name), this.processValue(this.modelValue, !1);
   },
   methods: {
     createEditor() {
-      this.editor = new Z({
+      this.editor = new ee({
         autofocus: this.autoFocus,
         content: this.modelValue,
         editable: this.editable,
@@ -1779,7 +1818,7 @@ ${n.textContent}
       const e = this.editor.getAttributes("link").href;
       window.open(e, "_blank");
     },
-    setLink(e, t, o, n = F, r) {
+    setLink(e, t, o, n = V, r) {
       var a, c, p;
       if (!e) {
         this.removeLink();
@@ -1793,7 +1832,7 @@ ${n.textContent}
       const o = this.getOutput();
       if (!(t && Ze(e, o))) {
         if (typeof e == "string" && this.outputFormat === "text") {
-          const n = new RegExp(`(${W})`, "g");
+          const n = new RegExp(`(${z})`, "g");
           e = e == null ? void 0 : e.replace(n, '<emoji-component code="$1"></emoji-component>');
         }
         this.editor.commands.setContent(e, !1, { preserveWhitespace: "full" });
@@ -1894,6 +1933,10 @@ ${n.textContent}
         this.$emit("focus", e);
       }), this.editor.on("blur", ({ event: e }) => {
         this.$emit("blur", e);
+      }), this.editor.on("mention-click", (e) => {
+        this.$emit("mention-click", e);
+      }), this.editor.on("channel-click", (e) => {
+        this.$emit("channel-click", e);
       });
     },
     getOutput() {