@dialpad/dialtone 9.117.2 → 9.118.0

package/dist/vue3/lib/editor/editor.js

@@ -1,40 +1,40 @@
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS as H, EDITOR_DEFAULT_LINK_PREFIX as X } from "./editor-constants.js";
-import { removeClassStyleAttrs as Y, addClassStyleAttrs as W } from "../../common/utils/index.js";
-import { DtIconQuickReply as x, DtIconBold as y, DtIconItalic as C, DtIconUnderline as _, DtIconStrikethrough as R, DtIconListBullet as E, DtIconListOrdered as F, DtIconAlignLeft as S, DtIconAlignCenter as v, DtIconAlignRight as O, DtIconAlignJustify as D, DtIconQuote as M, DtIconCodeBlock as Q, DtIconLink2 as q, DtIconImage as V } from "@dialpad/dialtone-icons/vue3";
-import { ref as Z, resolveComponent as h, openBlock as a, createElementBlock as w, mergeProps as U, createVNode as c, withCtx as u, Fragment as P, renderList as K, createBlock as p, withKeys as g, withModifiers as f, resolveDynamicComponent as j, createTextVNode as L, toDisplayString as B, createElementVNode as b, createCommentVNode as z, normalizeStyle as $ } from "vue";
-import { _ as tt } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import et from "../rich-text-editor/rich-text-editor.js";
-import it from "../button/button.js";
-import ot from "../popover/popover.js";
-import nt from "../stack/stack.js";
-import rt from "../input/input.js";
-import lt from "../tooltip/tooltip.js";
-import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as st, RICH_TEXT_EDITOR_OUTPUT_FORMATS as ut } from "../rich-text-editor/rich-text-editor-constants.js";
-const at = {
+import { EDITOR_SUPPORTED_LINK_PROTOCOLS as J, EDITOR_DEFAULT_LINK_PREFIX as H } from "./editor-constants.js";
+import { removeClassStyleAttrs as X, addClassStyleAttrs as Y } from "../../common/utils/index.js";
+import { DtIconQuickReply as T, DtIconBold as b, DtIconItalic as x, DtIconUnderline as C, DtIconStrikethrough as _, DtIconListBullet as R, DtIconListOrdered as E, DtIconAlignLeft as v, DtIconAlignCenter as F, DtIconAlignRight as S, DtIconAlignJustify as O, DtIconQuote as D, DtIconCodeBlock as Q, DtIconLink2 as M, DtIconImage as q } from "@dialpad/dialtone-icons/vue3";
+import { resolveComponent as h, openBlock as a, createElementBlock as I, mergeProps as V, createVNode as c, withCtx as u, Fragment as U, renderList as P, createBlock as p, withKeys as k, withModifiers as f, resolveDynamicComponent as K, createTextVNode as w, toDisplayString as g, createElementVNode as L, createCommentVNode as j, normalizeStyle as W } from "vue";
+import { _ as Z } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import $ from "../rich-text-editor/rich-text-editor.js";
+import tt from "../button/button.js";
+import et from "../popover/popover.js";
+import it from "../stack/stack.js";
+import ot from "../input/input.js";
+import nt from "../tooltip/tooltip.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as rt, RICH_TEXT_EDITOR_OUTPUT_FORMATS as lt } from "../rich-text-editor/rich-text-editor-constants.js";
+const st = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeEditor",
   components: {
-    DtRichTextEditor: et,
-    DtButton: it,
-    DtPopover: ot,
-    DtStack: nt,
-    DtInput: rt,
-    DtTooltip: lt,
-    DtIconQuickReply: x,
-    DtIconBold: y,
-    DtIconItalic: C,
-    DtIconUnderline: _,
-    DtIconStrikethrough: R,
-    DtIconListBullet: E,
-    DtIconListOrdered: F,
-    DtIconAlignLeft: S,
-    DtIconAlignCenter: v,
-    DtIconAlignRight: O,
-    DtIconAlignJustify: D,
-    DtIconQuote: M,
+    DtRichTextEditor: $,
+    DtButton: tt,
+    DtPopover: et,
+    DtStack: it,
+    DtInput: ot,
+    DtTooltip: nt,
+    DtIconQuickReply: T,
+    DtIconBold: b,
+    DtIconItalic: x,
+    DtIconUnderline: C,
+    DtIconStrikethrough: _,
+    DtIconListBullet: R,
+    DtIconListOrdered: E,
+    DtIconAlignLeft: v,
+    DtIconAlignCenter: F,
+    DtIconAlignRight: S,
+    DtIconAlignJustify: O,
+    DtIconQuote: D,
     DtIconCodeBlock: Q,
-    DtIconLink2: q,
-    DtIconImage: V
+    DtIconLink2: M,
+    DtIconImage: q
   },
   mixins: [],
   inheritAttrs: !1,
@@ -86,7 +86,7 @@ const at = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? st.includes(t) : !0;
+        return typeof t == "string" ? rt.includes(t) : !0;
       }
     },
     /**
@@ -302,8 +302,7 @@ const at = {
       },
       showLinkInput: !1,
       linkInput: "",
-      currentButtonRefIndex: 0,
-      buttonRefMap: Z({})
+      currentButtonRefIndex: 0
     };
   },
   computed: {
@@ -311,7 +310,7 @@ const at = {
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return ut[2];
+      return lt[2];
     },
     showingTextFormatButtons() {
       return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
@@ -349,7 +348,7 @@ const at = {
           showBtn: this.showQuickRepliesButton,
           label: "Quick reply",
           selector: "quickReplies",
-          icon: x,
+          icon: T,
           dataQA: "dt-recipe-editor-quick-replies-btn",
           tooltipMessage: "Quick Reply",
           onClick: this.onQuickRepliesClick
@@ -361,7 +360,7 @@ const at = {
         {
           showBtn: this.showBoldButton,
           selector: "bold",
-          icon: y,
+          icon: b,
           dataQA: "dt-recipe-editor-bold-btn",
           tooltipMessage: "Bold",
           onClick: this.onBoldTextToggle
@@ -369,7 +368,7 @@ const at = {
         {
           showBtn: this.showItalicsButton,
           selector: "italic",
-          icon: C,
+          icon: x,
           dataQA: "dt-recipe-editor-italics-btn",
           tooltipMessage: "Italics",
           onClick: this.onItalicTextToggle
@@ -377,7 +376,7 @@ const at = {
         {
           showBtn: this.showUnderlineButton,
           selector: "underline",
-          icon: _,
+          icon: C,
           dataQA: "dt-recipe-editor-underline-btn",
           tooltipMessage: "Underline",
           onClick: this.onUnderlineTextToggle
@@ -385,7 +384,7 @@ const at = {
         {
           showBtn: this.showStrikeButton,
           selector: "strike",
-          icon: R,
+          icon: _,
           dataQA: "dt-recipe-editor-strike-btn",
           tooltipMessage: "Strike",
           onClick: this.onStrikethroughTextToggle
@@ -397,7 +396,7 @@ const at = {
         {
           showBtn: this.showAlignLeftButton,
           selector: { textAlign: "left" },
-          icon: S,
+          icon: v,
           dataQA: "dt-recipe-editor-align-left-btn",
           tooltipMessage: "Align Left",
           onClick: () => this.onTextAlign("left")
@@ -405,7 +404,7 @@ const at = {
         {
           showBtn: this.showAlignCenterButton,
           selector: { textAlign: "center" },
-          icon: v,
+          icon: F,
           dataQA: "dt-recipe-editor-align-center-btn",
           tooltipMessage: "Align Center",
           onClick: () => this.onTextAlign("center")
@@ -413,7 +412,7 @@ const at = {
         {
           showBtn: this.showAlignRightButton,
           selector: { textAlign: "right" },
-          icon: O,
+          icon: S,
           dataQA: "dt-recipe-editor-align-right-btn",
           tooltipMessage: "Align Right",
           onClick: () => this.onTextAlign("right")
@@ -421,7 +420,7 @@ const at = {
         {
           showBtn: this.showAlignJustifyButton,
           selector: { textAlign: "justify" },
-          icon: D,
+          icon: O,
           dataQA: "dt-recipe-editor-align-justify-btn",
           tooltipMessage: "Align Justify",
           onClick: () => this.onTextAlign("justify")
@@ -433,7 +432,7 @@ const at = {
         {
           showBtn: this.showListItemsButton,
           selector: "bulletList",
-          icon: E,
+          icon: R,
           dataQA: "dt-recipe-editor-list-items-btn",
           tooltipMessage: "Bullet List",
           onClick: this.onBulletListToggle
@@ -441,7 +440,7 @@ const at = {
         {
           showBtn: this.showOrderedListButton,
           selector: "orderedList",
-          icon: F,
+          icon: E,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
           tooltipMessage: "Ordered List",
           onClick: this.onOrderedListToggle
@@ -453,7 +452,7 @@ const at = {
         {
           showBtn: this.showQuoteButton,
           selector: "blockquote",
-          icon: M,
+          icon: D,
           dataQA: "dt-recipe-editor-blockquote-btn",
           tooltipMessage: "Quote",
           onClick: this.onBlockquoteToggle
@@ -469,7 +468,7 @@ const at = {
         {
           showBtn: this.showInlineImageButton,
           selector: "image",
-          icon: V,
+          icon: q,
           dataQA: "dt-recipe-editor-inline-image-btn",
           tooltipMessage: "Image",
           // Handle getting image
@@ -481,7 +480,7 @@ const at = {
       return {
         showBtn: this.showAddLink.showAddLinkButton,
         selector: "link",
-        icon: q,
+        icon: M,
         dataQA: "dt-recipe-editor-add-link-btn",
         tooltipMessage: "Link",
         onClick: this.openLinkInput
@@ -494,8 +493,8 @@ const at = {
     }
   },
   methods: {
-    removeClassStyleAttrs: Y,
-    addClassStyleAttrs: W,
+    removeClassStyleAttrs: X,
+    addClassStyleAttrs: Y,
     onInputFocus(t) {
       t == null || t.stopPropagation();
     },
@@ -510,7 +509,7 @@ const at = {
         this.removeLink();
         return;
       }
-      H.find((m) => m.test(this.linkInput)) || (this.linkInput = `${X}${this.linkInput}`);
+      J.find((B) => B.test(this.linkInput)) || (this.linkInput = `${H}${this.linkInput}`);
       const n = (d = (i = e == null ? void 0 : e.view) == null ? void 0 : i.state) == null ? void 0 : d.selection;
       n.anchor === n.head ? e.chain().focus().insertContentAt(
         n.anchor,
@@ -619,63 +618,61 @@ const at = {
       this.shiftButtonRefIndex(-1);
     },
     shiftButtonRefIndex(t) {
-      const e = this.buttonRefMap[this.orderedRefs[this.currentButtonRefIndex]], o = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
-      this.currentButtonRefIndex = o >= 0 ? o : this.orderedRefs.length + o;
-      const n = this.buttonRefMap[this.orderedRefs[this.currentButtonRefIndex]];
-      e.$el.blur(), n.$el.focus();
+      const e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], o = Array.isArray(e) ? e[0] : e, n = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
+      this.currentButtonRefIndex = n >= 0 ? n : this.orderedRefs.length + n;
+      const r = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], i = Array.isArray(r) ? r[0] : r;
+      o.$el.blur(), i.$el.focus();
     }
   }
-}, ct = /* @__PURE__ */ b("div", { class: "d-recipe-editor__button-group-divider" }, null, -1), dt = { class: "d-recipe-editor__popover-content" }, ht = { key: 0 };
-function pt(t, e, o, n, r, i) {
-  const d = h("dt-button"), m = h("dt-tooltip"), I = h("dt-stack"), N = h("dt-input"), G = h("dt-popover"), J = h("dt-rich-text-editor");
-  return a(), w("div", U({ class: "d-recipe-editor" }, i.addClassStyleAttrs(t.$attrs), {
+}, ut = /* @__PURE__ */ L("div", { class: "d-recipe-editor__button-group-divider" }, null, -1), at = { class: "d-recipe-editor__popover-content" }, ct = { key: 0 };
+function dt(t, e, o, n, r, i) {
+  const d = h("dt-button"), B = h("dt-tooltip"), m = h("dt-stack"), z = h("dt-input"), N = h("dt-popover"), G = h("dt-rich-text-editor");
+  return a(), I("div", V({ class: "d-recipe-editor" }, i.addClassStyleAttrs(t.$attrs), {
     "data-qa": "dt-recipe-editor",
     role: "presentation",
     onClick: e[4] || (e[4] = (l) => t.$refs.richTextEditor.focusEditor())
   }), [
-    c(I, {
+    c(m, {
       class: "d-recipe-editor__top-bar",
       direction: "row",
       gap: "450"
     }, {
       default: u(() => [
-        (a(!0), w(P, null, K(i.buttonGroups, (l) => (a(), p(I, {
+        (a(!0), I(U, null, P(i.buttonGroups, (l) => (a(), p(m, {
           key: l.key,
           direction: "row",
           gap: "300"
         }, {
           default: u(() => [
-            (a(!0), w(P, null, K(l.buttonGroup, (s) => (a(), p(m, {
+            (a(!0), I(U, null, P(l.buttonGroup, (s) => (a(), p(B, {
               key: i.getButtonKey(l.key, s.selector),
               message: s.tooltipMessage,
               placement: "top"
             }, {
               anchor: u(() => {
-                var k, T;
+                var A, y;
                 return [
                   c(d, {
                     ref_for: !0,
-                    ref: (A) => {
-                      r.buttonRefMap[i.getButtonRef(l.key, s.selector)] = A;
-                    },
-                    active: (T = (k = t.$refs.richTextEditor) == null ? void 0 : k.editor) == null ? void 0 : T.isActive(s.selector),
+                    ref: i.getButtonRef(l.key, s.selector),
+                    active: (y = (A = t.$refs.richTextEditor) == null ? void 0 : A.editor) == null ? void 0 : y.isActive(s.selector),
                     "aria-label": s.tooltipMessage,
                     "data-qa": s.dataQA,
                     tabindex: i.canFocus(i.getButtonRef(l.key, s.selector)) ? 0 : -1,
                     importance: "clear",
                     kind: "muted",
                     size: "xs",
-                    onClick: (A) => s.onClick(),
+                    onClick: (ht) => s.onClick(),
                     onKeydown: [
-                      g(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                      g(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                      k(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                      k(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                     ]
                   }, {
                     icon: u(() => [
-                      (a(), p(j(s.icon), { size: "200" }))
+                      (a(), p(K(s.icon), { size: "200" }))
                     ]),
                     default: u(() => [
-                      L(" " + B(s == null ? void 0 : s.label), 1)
+                      w(" " + g(s == null ? void 0 : s.label), 1)
                     ]),
                     _: 2
                   }, 1032, ["active", "aria-label", "data-qa", "tabindex", "onClick", "onKeydown"])
@@ -683,17 +680,17 @@ function pt(t, e, o, n, r, i) {
               }),
               _: 2
             }, 1032, ["message"]))), 128)),
-            ct
+            ut
           ]),
           _: 2
         }, 1024))), 128)),
-        i.linkButton.showBtn ? (a(), p(I, {
+        i.linkButton.showBtn ? (a(), p(m, {
           key: 0,
           direction: "row",
           gap: "300"
         }, {
           default: u(() => [
-            c(G, {
+            c(N, {
               open: r.showLinkInput,
               "show-close-button": !1,
               "visually-hidden-close": !0,
@@ -708,7 +705,7 @@ function pt(t, e, o, n, r, i) {
               onOpened: i.updateInput
             }, {
               anchor: u(() => [
-                (a(), p(m, {
+                (a(), p(B, {
                   key: i.linkButton.key,
                   message: i.linkButton.tooltipMessage,
                   placement: "top"
@@ -717,9 +714,7 @@ function pt(t, e, o, n, r, i) {
                     var l, s;
                     return [
                       c(d, {
-                        ref: (k) => {
-                          r.buttonRefMap[i.getButtonRef("custom", "link")] = k;
-                        },
+                        ref: i.getButtonRef("custom", "link"),
                         active: (s = (l = t.$refs.richTextEditor) == null ? void 0 : l.editor) == null ? void 0 : s.isActive(i.linkButton.selector),
                         "aria-label": i.linkButton.tooltipMessage,
                         "data-qa": i.linkButton.dataQA,
@@ -727,14 +722,14 @@ function pt(t, e, o, n, r, i) {
                         importance: "clear",
                         kind: "muted",
                         size: "xs",
-                        onClick: e[0] || (e[0] = (k) => i.linkButton.onClick()),
+                        onClick: e[0] || (e[0] = (A) => i.linkButton.onClick()),
                         onKeydown: [
-                          g(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                          g(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                          k(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                          k(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                         ]
                       }, {
                         icon: u(() => [
-                          (a(), p(j(i.linkButton.icon), { size: "200" }))
+                          (a(), p(K(i.linkButton.icon), { size: "200" }))
                         ]),
                         _: 1
                       }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
@@ -744,9 +739,9 @@ function pt(t, e, o, n, r, i) {
                 }, 8, ["message"]))
               ]),
               content: u(() => [
-                b("div", dt, [
-                  o.showAddLink.setLinkTitle.length > 0 ? (a(), w("span", ht, B(o.showAddLink.setLinkTitle), 1)) : z("", !0),
-                  c(N, {
+                L("div", at, [
+                  o.showAddLink.setLinkTitle.length > 0 ? (a(), I("span", ct, g(o.showAddLink.setLinkTitle), 1)) : j("", !0),
+                  c(z, {
                     modelValue: r.linkInput,
                     "onUpdate:modelValue": e[1] || (e[1] = (l) => r.linkInput = l),
                     "input-aria-label": o.showAddLink.setLinkInputAriaLabel,
@@ -758,12 +753,12 @@ function pt(t, e, o, n, r, i) {
                       f(i.onInputFocus, ["stop"])
                     ],
                     onFocus: i.onInputFocus,
-                    onKeydown: g(i.setLink, ["enter"])
+                    onKeydown: k(i.setLink, ["enter"])
                   }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
                 ])
               ]),
               footerContent: u(() => [
-                c(I, {
+                c(m, {
                   direction: "row",
                   gap: "300",
                   class: "d-recipe-editor__popover-footer"
@@ -778,7 +773,7 @@ function pt(t, e, o, n, r, i) {
                       onClick: i.removeLink
                     }, {
                       default: u(() => [
-                        L(B(o.removeLinkButton.label), 1)
+                        w(g(o.removeLinkButton.label), 1)
                       ]),
                       _: 1
                     }, 8, ["aria-label", "onClick"]),
@@ -791,7 +786,7 @@ function pt(t, e, o, n, r, i) {
                       onClick: i.closeLinkInput
                     }, {
                       default: u(() => [
-                        L(B(o.cancelSetLinkButton.label), 1)
+                        w(g(o.cancelSetLinkButton.label), 1)
                       ]),
                       _: 1
                     }, 8, ["aria-label", "onClick"]),
@@ -802,7 +797,7 @@ function pt(t, e, o, n, r, i) {
                       onClick: i.setLink
                     }, {
                       default: u(() => [
-                        L(B(o.confirmSetLinkButton.label), 1)
+                        w(g(o.confirmSetLinkButton.label), 1)
                       ]),
                       _: 1
                     }, 8, ["aria-label", "onClick"])
@@ -814,15 +809,15 @@ function pt(t, e, o, n, r, i) {
             }, 8, ["open", "onClick", "onOpened"])
           ]),
           _: 1
-        })) : z("", !0)
+        })) : j("", !0)
       ]),
       _: 1
     }),
-    b("div", {
-      style: $({ "max-height": o.maxHeight }),
+    L("div", {
+      style: W({ "max-height": o.maxHeight }),
       class: "d-recipe-editor__content"
     }, [
-      c(J, U({
+      c(G, V({
         ref: "richTextEditor",
         modelValue: r.internalInputValue,
         "onUpdate:modelValue": e[2] || (e[2] = (l) => r.internalInputValue = l),
@@ -849,8 +844,8 @@ function pt(t, e, o, n, r, i) {
     ], 4)
   ], 16);
 }
-const yt = /* @__PURE__ */ tt(at, [["render", pt]]);
+const bt = /* @__PURE__ */ Z(st, [["render", dt]]);
 export {
-  yt as default
+  bt as default
 };
 //# sourceMappingURL=editor.js.map