@dialpad/dialtone-vue 2.195.4 → 2.195.5

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

@@ -1,5 +1,5 @@
-import { NodeViewWrapper as _, nodeViewProps as w, VueRenderer as y, VueNodeViewRenderer as v, EditorContent as H, BubbleMenu as j, Editor as N } from "../../node_modules/@tiptap/vue-2.js";
-import { Node as F, mergeAttributes as m, InputRule as K, nodePasteRule as E, getMarksBetween as q, combineTransactionSteps as U, getChangedRanges as z, findChildrenInRange as W, Mark as V, nodeInputRule as X, Extension as J } from "@tiptap/core";
+import { nodeViewProps as _, NodeViewWrapper as y, VueRenderer as w, VueNodeViewRenderer as v, BubbleMenu as H, EditorContent as j, Editor as N } from "../../node_modules/@tiptap/vue-2.js";
+import { Node as F, nodePasteRule as E, InputRule as K, mergeAttributes as m, getMarksBetween as q, combineTransactionSteps as U, getChangedRanges as z, findChildrenInRange as W, Mark as V, nodeInputRule as X, Extension as J } from "@tiptap/core";
 import Y from "@tiptap/extension-blockquote";
 import G from "@tiptap/extension-code-block";
 import Q from "@tiptap/extension-code";
@@ -14,8 +14,8 @@ import ie from "@tiptap/extension-link";
 import oe from "@tiptap/extension-list-item";
 import ae from "@tiptap/extension-ordered-list";
 import le from "@tiptap/extension-strike";
-import ce from "@tiptap/extension-underline";
-import de from "@tiptap/extension-text";
+import de from "@tiptap/extension-underline";
+import ce from "@tiptap/extension-text";
 import ue from "@tiptap/extension-text-align";
 import me from "@tiptap/extension-history";
 import he from "@tiptap/extension-text-style";
@@ -24,19 +24,19 @@ import pe from "@tiptap/extension-font-family";
 import { PluginKey as f, Plugin as ge } from "@tiptap/pm/state";
 import _e from "@tiptap/suggestion";
 import { emojiPattern as O } from "regex-combined-emojis";
-import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import ye from "../skeleton/skeleton.js";
 import P from "../emoji/emoji.js";
-import we from "../skeleton/skeleton.js";
-import { codeToEmojiData as L, stringToUnicode as ye, emojiRegex as ve, emojiShortCodeRegex as xe } from "../../common/emoji/index.js";
+import { emojiRegex as we, codeToEmojiData as L, stringToUnicode as ve, emojiShortCodeRegex as xe } from "../../common/emoji/index.js";
 import { emojisIndexed as ke } from "@dialpad/dialtone-emojis";
 import be from "../list-item/list-item.js";
 import x from "../stack/stack.js";
 import k from "tippy.js";
-import { linkRegex as Ce, getPhoneNumberRegex as Te, warnIfUnmounted as Ee } from "../../common/utils/index.js";
+import { getPhoneNumberRegex as Ce, linkRegex as Te, warnIfUnmounted as Ee } from "../../common/utils/index.js";
 import Se from "@tiptap/extension-image";
 import R from "@tiptap/extension-mention";
 import D from "../link/link.js";
-import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Le, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Re, RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as $ } from "./rich-text-editor-constants.js";
+import { RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as $, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Le, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Re } from "./rich-text-editor-constants.js";
 import $e from "../avatar/avatar.js";
 import Ie from "@dialpad/dialtone-icons/vue2/hash";
 import Ae from "@dialpad/dialtone-icons/vue2/lock";
@@ -46,11 +46,11 @@ import Pe from "../button/button.js";
 const De = {
   name: "EmojiComponent",
   components: {
-    NodeViewWrapper: _,
+    NodeViewWrapper: y,
     DtEmoji: P,
-    DtSkeleton: we
+    DtSkeleton: ye
   },
-  props: w,
+  props: _,
   data() {
     return {
       showSkeleton: !0
@@ -68,7 +68,7 @@ const De = {
 var Me = function() {
   var e = this, n = e._self._c;
   return n("node-view-wrapper", { staticClass: "d-d-inline-block d-va-bottom d-lh0" }, [e.node.attrs.code ? n("dt-emoji", { attrs: { size: "500", code: e.node.attrs.code } }) : [e.showSkeleton ? n("dt-skeleton", { staticClass: "d-icon d-icon--size-500", attrs: { offset: 0, "shape-option": { shape: "circle", size: "100%" } } }) : e._e(), n("img", { directives: [{ name: "show", rawName: "v-show", value: !e.showSkeleton, expression: "!showSkeleton" }], staticClass: "d-icon d-icon--size-500", attrs: { alt: e.node.attrs.name, "aria-label": e.node.attrs.name, title: e.node.attrs.name, src: e.node.attrs.image }, on: { load: e.handleImageLoad, error: e.handleImageError } })]], 2);
-}, He = [], je = /* @__PURE__ */ c(
+}, He = [], je = /* @__PURE__ */ d(
   De,
   Me,
   He
@@ -158,7 +158,7 @@ var Ke = function() {
       return o.preventDefault(), e.onKeyDown.apply(null, arguments);
     } } }, [n(e.itemComponent, { tag: "component", attrs: { item: r } })], 1);
   }), 1)]);
-}, qe = [], Ue = /* @__PURE__ */ c(
+}, qe = [], Ue = /* @__PURE__ */ d(
   Fe,
   Ke,
   qe
@@ -179,7 +179,7 @@ const b = Ue.exports, ze = {
 var We = function() {
   var e = this, n = e._self._c;
   return n("dt-stack", { attrs: { direction: "row", gap: "400" } }, [n("dt-emoji", { attrs: { size: "200", code: e.item.code } }), e._v(" " + e._s(e.item.code) + " ")], 1);
-}, Ve = [], Xe = /* @__PURE__ */ c(
+}, Ve = [], Xe = /* @__PURE__ */ d(
   ze,
   We,
   Ve
@@ -227,7 +227,7 @@ const Je = Xe.exports, C = {
     let t, e, n = !1;
     return {
       onStart: (r) => {
-        t = new y(b, {
+        t = new w(b, {
           parent: void 0,
           propsData: {
             itemComponent: Je,
@@ -315,7 +315,7 @@ const Je = Xe.exports, C = {
       return e;
     {
       const r = L(n);
-      return ye(r.unicode_output);
+      return ve(r.unicode_output);
     }
   },
   renderHTML({ HTMLAttributes: t }) {
@@ -329,9 +329,9 @@ const Je = Xe.exports, C = {
           if (e)
             return et(e);
         },
-        handler: ({ state: t, range: e, match: n, commands: r, chain: s, can: o }) => {
-          const { tr: i } = t, a = e.from, l = e.to;
-          i.replaceWith(a, l, this.type.create({ code: n[0] }));
+        handler: ({ state: t, range: e, match: n }) => {
+          const { tr: r } = t, s = e.from, o = e.to;
+          r.replaceWith(s, o, this.type.create({ code: n[0] }));
         }
       })
     ];
@@ -350,7 +350,7 @@ const Je = Xe.exports, C = {
         }
       }),
       E({
-        find: ve,
+        find: we,
         type: this.type,
         getAttributes(t) {
           return {
@@ -435,7 +435,7 @@ function at(t, e, n, r) {
   for (const a of i)
     a.mark.type === r && n.removeMark(a.from, a.to, r);
 }
-const I = Te(1, 15);
+const I = Ce(1, 15);
 function A(t, e, n, r, s, o) {
   if (!t)
     return;
@@ -446,13 +446,13 @@ function A(t, e, n, r, s, o) {
     i,
     "left",
     I
-  ), d = S(
+  ), c = S(
     t,
     a,
     "right",
     I
-  ), u = t.slice(l.from, d.to);
-  rt(u, Ce, st).forEach((T) => {
+  ), u = t.slice(l.from, c.to);
+  rt(u, Te, st).forEach((T) => {
     const h = it(T[0]), g = e + l.from + T.index + 1, M = g + h.length;
     s.addMark(g, M, o.create());
   });
@@ -490,10 +490,10 @@ function lt(t) {
     }
   });
 }
-const ct = {
+const dt = {
   class: "d-link d-c-text d-d-inline-block d-wb-break-all",
   rel: "noopener noreferrer nofollow"
-}, dt = V.create({
+}, ct = V.create({
   name: "CustomLink",
   renderHTML({ HTMLAttributes: t }) {
     return [
@@ -501,7 +501,7 @@ const ct = {
       m(
         this.options.HTMLAttributes,
         t,
-        ct
+        dt
       )
     ];
   },
@@ -547,10 +547,10 @@ const ct = {
 }), ht = {
   name: "MentionComponent",
   components: {
-    NodeViewWrapper: _,
+    NodeViewWrapper: y,
     DtLink: D
   },
-  props: w,
+  props: _,
   computed: {
     text() {
       return "@" + this.$props.node.attrs.name;
@@ -560,12 +560,12 @@ const ct = {
 var ft = function() {
   var e = this, n = e._self._c;
   return n("node-view-wrapper", { staticClass: "d-d-inline-block" }, [n("dt-link", { attrs: { kind: "mention" } }, [e._v(" " + e._s(e.text) + " ")])], 1);
-}, pt = [], gt = /* @__PURE__ */ c(
+}, pt = [], gt = /* @__PURE__ */ d(
   ht,
   ft,
   pt
 );
-const _t = gt.exports, wt = R.extend({
+const _t = gt.exports, yt = R.extend({
   addNodeView() {
     return v(_t);
   },
@@ -600,13 +600,13 @@ const _t = gt.exports, wt = R.extend({
     char: "@",
     pluginKey: new f("mentionSuggestion")
   }
-}), yt = {
+}), wt = {
   name: "ChannelComponent",
   components: {
-    NodeViewWrapper: _,
+    NodeViewWrapper: y,
     DtLink: D
   },
-  props: w,
+  props: _,
   computed: {
     text() {
       return "#" + this.$props.node.attrs.name;
@@ -616,8 +616,8 @@ const _t = gt.exports, wt = R.extend({
 var vt = function() {
   var e = this, n = e._self._c;
   return n("node-view-wrapper", { staticClass: "d-d-inline-block" }, [n("dt-link", { attrs: { kind: "mention" } }, [e._v(" " + e._s(e.text) + " ")])], 1);
-}, xt = [], kt = /* @__PURE__ */ c(
-  yt,
+}, xt = [], kt = /* @__PURE__ */ d(
+  wt,
   vt,
   xt
 );
@@ -660,10 +660,10 @@ const bt = kt.exports, Ct = R.extend({
 }), Tt = {
   name: "SlashCommandsComponent",
   components: {
-    NodeViewWrapper: _
+    NodeViewWrapper: y
   },
   props: {
-    ...w
+    ..._
   },
   emits: ["selected-command"],
   computed: {
@@ -682,7 +682,7 @@ const bt = kt.exports, Ct = R.extend({
 var Et = function() {
   var e = this, n = e._self._c;
   return n("node-view-wrapper", { staticClass: "d-d-inline-block" }, [e._v(" " + e._s(e.text) + " ")]);
-}, St = [], Lt = /* @__PURE__ */ c(
+}, St = [], Lt = /* @__PURE__ */ d(
   Tt,
   Et,
   St
@@ -814,7 +814,7 @@ const Rt = Lt.exports, $t = (t, e) => [...t.matchAll(e)].map((r) => {
 var Bt = function() {
   var e = this, n = e._self._c;
   return n("dt-stack", { staticClass: "d-mention-suggestion__container", attrs: { direction: "row", gap: "400" } }, [n("dt-avatar", { attrs: { "full-name": e.name, "image-src": e.avatarSrc, "image-alt": e.name, "show-presence": e.showDetails, presence: e.presence, size: "sm" } }), n("dt-stack", { staticClass: "d-mention-suggestion__details-container", attrs: { gap: "100" } }, [n("span", { staticClass: "d-mention-suggestion__name" }, [e._v(" " + e._s(e.name) + " ")]), e.showDetails ? n("dt-stack", { staticClass: "d-label--sm-plain", attrs: { direction: "row", gap: "300" } }, [e.presenceText ? n("span", { staticClass: "d-mention-suggestion__presence", class: [e.presenceFontColorClass] }, [e._v(" " + e._s(e.presenceText) + " ")]) : e._e(), e.status && e.presenceText ? n("div", { staticClass: "d-mention-suggestion__divider" }, [e._v(" • ")]) : e._e(), e.status ? n("div", { staticClass: "d-mention-suggestion__status" }, [e._v(" " + e._s(e.status) + " ")]) : e._e()]) : e._e()], 1)], 1);
-}, Ot = [], Pt = /* @__PURE__ */ c(
+}, Ot = [], Pt = /* @__PURE__ */ d(
   At,
   Bt,
   Ot
@@ -828,7 +828,7 @@ const Dt = Pt.exports, Mt = {
     let t, e, n = !1;
     return {
       onStart: (r) => {
-        t = new y(b, {
+        t = new w(b, {
           parent: void 0,
           propsData: {
             itemComponent: Dt,
@@ -891,7 +891,7 @@ const Dt = Pt.exports, Mt = {
 var jt = function() {
   var e = this, n = e._self._c;
   return n("dt-stack", { attrs: { direction: "row", gap: "400" } }, [e.item.locked ? n("dt-icon-lock", { attrs: { size: "300" } }) : n("dt-icon-hash", { attrs: { size: "300" } }), n("span", [e._v(e._s(e.name))])], 1);
-}, Nt = [], Ft = /* @__PURE__ */ c(
+}, Nt = [], Ft = /* @__PURE__ */ d(
   Ht,
   jt,
   Nt
@@ -905,7 +905,7 @@ const Kt = Ft.exports, qt = {
     let t, e, n = !1;
     return {
       onStart: (r) => {
-        t = new y(b, {
+        t = new w(b, {
           parent: void 0,
           propsData: {
             itemComponent: Kt,
@@ -969,7 +969,7 @@ const Kt = Ft.exports, qt = {
 var zt = function() {
   var e = this, n = e._self._c;
   return n("div", [n("div", { staticClass: "d-body--md-compact" }, [n("span", [e._v("/" + e._s(e.command))]), e.parametersExample ? n("span", [e._v(" " + e._s(e.parametersExample))]) : e._e()]), n("div", { staticClass: "d-body--sm d-fc-tertiary" }, [e._v(" " + e._s(e.description) + " ")])]);
-}, Wt = [], Vt = /* @__PURE__ */ c(
+}, Wt = [], Vt = /* @__PURE__ */ d(
   Ut,
   zt,
   Wt
@@ -984,7 +984,7 @@ const Xt = Vt.exports, Jt = {
     let t, e, n = !1;
     return {
       onStart: (r) => {
-        t = new y(b, {
+        t = new w(b, {
           parent: void 0,
           propsData: {
             itemComponent: Xt,
@@ -1028,8 +1028,8 @@ const Xt = Vt.exports, Jt = {
 }, Yt = {
   name: "DtRichTextEditor",
   components: {
-    EditorContent: H,
-    BubbleMenu: j,
+    EditorContent: j,
+    BubbleMenu: H,
     DtButton: Pe,
     DtStack: x
   },
@@ -1103,7 +1103,7 @@ const Xt = Vt.exports, Jt = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? Le.includes(t) : !0;
+        return typeof t == "string" ? Re.includes(t) : !0;
       }
     },
     /**
@@ -1116,7 +1116,7 @@ const Xt = Vt.exports, Jt = {
       type: String,
       default: "html",
       validator(t) {
-        return Re.includes(t);
+        return Le.includes(t);
       }
     },
     /**
@@ -1396,12 +1396,12 @@ const Xt = Vt.exports, Jt = {
     },
     // eslint-disable-next-line complexity
     extensions() {
-      const t = [Z, de, me, te];
-      t.push(this.useDivTags ? mt : B), this.allowBlockquote && t.push(Y), this.allowBold && t.push(ne), this.allowBulletList && (t.push(re), t.push(oe.extend({
+      const t = [Z, ce, me, te];
+      t.push(this.useDivTags ? mt : B), this.allowBold && t.push(ne), this.allowBlockquote && t.push(Y), this.allowBulletList && (t.push(re), t.push(oe.extend({
         renderText({ node: r }) {
           return r.textContent;
         }
-      })), t.push(ae)), this.allowItalic && t.push(se), this.allowStrike && t.push(le), this.allowUnderline && t.push(ce), this.placeholder && t.push(
+      })), t.push(ae)), this.allowItalic && t.push(se), this.allowStrike && t.push(le), this.allowUnderline && t.push(de), this.placeholder && t.push(
         ee.configure({ placeholder: this.placeholder })
       );
       const e = this, n = J.create({
@@ -1418,16 +1418,23 @@ const Xt = Vt.exports, Jt = {
           };
         }
       });
-      if (t.push(n), this.link && t.push(ie.extend({ inclusive: !1 }).configure({
+      if (t.push(n), this.link && t.push(ie.extend({
+        inclusive: !1,
+        addKeyboardShortcuts() {
+          return {
+            "Mod-k": () => (e.$emit("edit-link"), !0)
+          };
+        }
+      }).configure({
         HTMLAttributes: {
           class: "d-link d-wb-break-all"
         },
         openOnClick: !1,
         autolink: !0,
         protocols: $
-      })), this.customLink && t.push(this.getExtension(dt, this.customLink)), this.mentionSuggestion) {
+      })), this.customLink && t.push(this.getExtension(ct, this.customLink)), this.mentionSuggestion) {
         const r = { ...this.mentionSuggestion, ...Mt };
-        t.push(wt.configure({ suggestion: r }));
+        t.push(yt.configure({ suggestion: r }));
       }
       if (this.channelSuggestion) {
         const r = { ...this.channelSuggestion, ...qt };
@@ -1516,9 +1523,9 @@ ${r.textContent}
             const n = ["Backspace"];
             return !this.allowLineBreaks && !e.shiftKey && n.push("Enter"), !n.includes(e.key);
           },
-          handlePaste: (t, e, n) => {
-            const r = e.clipboardData || window.clipboardData, s = r.getData("text/plain"), o = r.getData("text/html");
-            return this.processPasteData(t, s, o);
+          handlePaste: (t, e) => {
+            const n = e.clipboardData || window.clipboardData, r = n.getData("text/plain"), s = n.getData("text/html");
+            return this.processPasteData(t, r, s);
           },
           // Moves the <br /> tags inside the previous closing tag to avoid
           // Prosemirror wrapping them within another </p> tag.
@@ -1528,7 +1535,7 @@ ${r.textContent}
         }
       }), this.addEditorListeners();
     },
-    bubbleMenuShouldShow({ editor: t, view: e, state: n, oldState: r, from: s, to: o }) {
+    bubbleMenuShouldShow({ editor: t }) {
       return t.isActive("link");
     },
     /**
@@ -1537,9 +1544,9 @@ ${r.textContent}
      * @param editor the editor instance.
      */
     getSelectedLinkText(t) {
-      var a, l, d;
+      var a, l, c;
       const { view: e, state: n } = t, { from: r, to: s } = e.state.selection, o = n.doc.textBetween(r, s, ""), i = this.editor.state.doc.nodeAt(r);
-      return i && ((d = (l = (a = i.marks) == null ? void 0 : a.at(0)) == null ? void 0 : l.type) == null ? void 0 : d.name) === "link" ? i.textContent : o;
+      return i && ((c = (l = (a = i.marks) == null ? void 0 : a.at(0)) == null ? void 0 : l.type) == null ? void 0 : c.name) === "link" ? i.textContent : o;
     },
     editLink() {
       const t = this.getSelectedLinkText(this.editor), e = {
@@ -1560,13 +1567,13 @@ ${r.textContent}
     },
     // eslint-disable-next-line complexity
     setLink(t, e, n, r = $, s) {
-      var a, l, d;
+      var a, l, c;
       if (!t) {
         this.removeLink();
         return;
       }
       r.find((u) => u.test(t)) || (t = `${s}${t}`), this.editor.chain().focus().extendMarkRange("link").run();
-      const i = (d = (l = (a = this.editor) == null ? void 0 : a.view) == null ? void 0 : l.state) == null ? void 0 : d.selection;
+      const i = (c = (l = (a = this.editor) == null ? void 0 : a.view) == null ? void 0 : l.state) == null ? void 0 : c.selection;
       this.editor.chain().focus().insertContent(e).setTextSelection({ from: i.from, to: i.from + e.length }).setLink({ href: t, class: n.class }).run();
     },
     // eslint-disable-next-line complexity
@@ -1710,7 +1717,7 @@ ${r.textContent}
 var Gt = function() {
   var e = this, n = e._self._c;
   return n("div", [e.editor && e.link && !e.hideLinkBubbleMenu ? n("bubble-menu", { staticStyle: { visibility: "visible" }, attrs: { editor: e.editor, "should-show": e.bubbleMenuShouldShow, "tippy-options": e.tippyOptions } }, [n("div", { staticClass: "d-popover__dialog" }, [n("dt-stack", { staticClass: "d-rich-text-editor-bubble-menu__button-stack", attrs: { direction: "row", gap: "0" } }, [n("dt-button", { attrs: { kind: "muted", importance: "clear" }, on: { click: e.editLink } }, [e._v(" " + e._s(e.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_EDIT_BUTTON_LABEL")) + " ")]), n("dt-button", { attrs: { kind: "muted", importance: "clear" }, on: { click: e.openLink } }, [e._v(" " + e._s(e.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_OPEN_LINK_BUTTON_LABEL")) + " ")]), n("dt-button", { attrs: { kind: "danger", importance: "clear" }, on: { click: e.removeLink } }, [e._v(" " + e._s(e.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_REMOVE_BUTTON_LABEL")) + " ")])], 1)], 1)]) : e._e(), n("editor-content", e._g({ ref: "editor", staticClass: "d-rich-text-editor", attrs: { editor: e.editor, "data-qa": "dt-rich-text-editor" } }, e.editorListeners))], 1);
-}, Qt = [], Zt = /* @__PURE__ */ c(
+}, Qt = [], Zt = /* @__PURE__ */ d(
   Yt,
   Gt,
   Qt