@dialpad/dialtone 9.126.5 → 9.127.0

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

@@ -1,40 +1,41 @@
-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 { EDITOR_SUPPORTED_LINK_PROTOCOLS as z, EDITOR_DEFAULT_LINK_PREFIX as J } from "./editor-constants.js";
+import { removeClassStyleAttrs as j, addClassStyleAttrs as H } from "../../common/utils/index.js";
+import { DtIconQuickReply as w, DtIconBold as O, DtIconItalic as D, DtIconUnderline as R, DtIconStrikethrough as x, DtIconListBullet as y, DtIconListOrdered as C, DtIconAlignLeft as b, DtIconAlignCenter as N, DtIconAlignRight as S, DtIconAlignJustify as U, DtIconQuote as F, DtIconCodeBlock as v, DtIconLink2 as Q, DtIconImage as M } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as Y } from "../../localization/index.js";
+import { resolveComponent as h, openBlock as c, createElementBlock as A, mergeProps as f, createVNode as a, withCtx as u, Fragment as q, renderList as V, createBlock as p, withKeys as g, withModifiers as B, resolveDynamicComponent as K, createTextVNode as L, toDisplayString as k, createElementVNode as _, createCommentVNode as X, 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 tt from "../rich-text-editor/rich-text-editor.js";
+import et from "../button/button.js";
+import it from "../popover/popover.js";
+import nt 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 = {
+import rt from "../tooltip/tooltip.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as st, RICH_TEXT_EDITOR_OUTPUT_FORMATS as lt } from "../rich-text-editor/rich-text-editor-constants.js";
+const ut = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeEditor",
   components: {
-    DtRichTextEditor: $,
-    DtButton: tt,
-    DtPopover: et,
-    DtStack: it,
+    DtRichTextEditor: tt,
+    DtButton: et,
+    DtPopover: it,
+    DtStack: nt,
     DtInput: ot,
-    DtTooltip: nt,
-    DtIconQuickReply: T,
-    DtIconBold: b,
-    DtIconItalic: x,
-    DtIconUnderline: C,
-    DtIconStrikethrough: _,
-    DtIconListBullet: R,
-    DtIconListOrdered: E,
-    DtIconAlignLeft: v,
-    DtIconAlignCenter: F,
+    DtTooltip: rt,
+    DtIconQuickReply: w,
+    DtIconBold: O,
+    DtIconItalic: D,
+    DtIconUnderline: R,
+    DtIconStrikethrough: x,
+    DtIconListBullet: y,
+    DtIconListOrdered: C,
+    DtIconAlignLeft: b,
+    DtIconAlignCenter: N,
     DtIconAlignRight: S,
-    DtIconAlignJustify: O,
-    DtIconQuote: D,
-    DtIconCodeBlock: Q,
-    DtIconLink2: M,
-    DtIconImage: q
+    DtIconAlignJustify: U,
+    DtIconQuote: F,
+    DtIconCodeBlock: v,
+    DtIconLink2: Q,
+    DtIconImage: M
   },
   mixins: [],
   inheritAttrs: !1,
@@ -86,7 +87,7 @@ const st = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? rt.includes(t) : !0;
+        return typeof t == "string" ? st.includes(t) : !0;
       }
     },
     /**
@@ -104,27 +105,6 @@ const st = {
       type: String,
       default: "unset"
     },
-    /**
-     * Confirm set link button defaults.
-     */
-    confirmSetLinkButton: {
-      type: Object,
-      default: () => ({ label: "Confirm", ariaLabel: "Confirm set link" })
-    },
-    /**
-     * Remove link button defaults.
-     */
-    removeLinkButton: {
-      type: Object,
-      default: () => ({ label: "Remove", ariaLabel: "Remove link" })
-    },
-    /**
-     * Cancel set link button defaults.
-     */
-    cancelSetLinkButton: {
-      type: Object,
-      default: () => ({ label: "Cancel", ariaLabel: "Cancel set link" })
-    },
     /**
      * Placeholder text for the set link input field
      */
@@ -236,9 +216,7 @@ const st = {
     showAddLink: {
       type: Object,
       default: () => ({
-        showAddLinkButton: !0,
-        setLinkTitle: "Add a link",
-        setLinkInputAriaLabel: "Input field to add link"
+        showAddLinkButton: !0
       })
     },
     /**
@@ -302,7 +280,8 @@ const st = {
       },
       showLinkInput: !1,
       linkInput: "",
-      currentButtonRefIndex: 0
+      currentButtonRefIndex: 0,
+      i18n: new Y()
     };
   },
   computed: {
@@ -322,9 +301,9 @@ const st = {
       return this.showListItemsButton || this.showOrderedListButton;
     },
     orderedRefs() {
-      const t = this.buttonGroups.reduce((function(e, o) {
-        return o.buttonGroup.forEach((n) => {
-          e.push(this.getButtonRef(o.key, n.selector));
+      const t = this.buttonGroups.reduce((function(e, n) {
+        return n.buttonGroup.forEach((o) => {
+          e.push(this.getButtonRef(n.key, o.selector));
         }, this), e;
       }).bind(this), []);
       return t.push(this.getButtonRef("custom", "link")), t;
@@ -346,11 +325,11 @@ const st = {
       return [
         {
           showBtn: this.showQuickRepliesButton,
-          label: "Quick reply",
+          label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           selector: "quickReplies",
-          icon: T,
+          icon: w,
           dataQA: "dt-recipe-editor-quick-replies-btn",
-          tooltipMessage: "Quick Reply",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           onClick: this.onQuickRepliesClick
         }
       ].filter((t) => t.showBtn);
@@ -360,33 +339,33 @@ const st = {
         {
           showBtn: this.showBoldButton,
           selector: "bold",
-          icon: b,
+          icon: O,
           dataQA: "dt-recipe-editor-bold-btn",
-          tooltipMessage: "Bold",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
           onClick: this.onBoldTextToggle
         },
         {
           showBtn: this.showItalicsButton,
           selector: "italic",
-          icon: x,
+          icon: D,
           dataQA: "dt-recipe-editor-italics-btn",
-          tooltipMessage: "Italics",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
           onClick: this.onItalicTextToggle
         },
         {
           showBtn: this.showUnderlineButton,
           selector: "underline",
-          icon: C,
+          icon: R,
           dataQA: "dt-recipe-editor-underline-btn",
-          tooltipMessage: "Underline",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
           onClick: this.onUnderlineTextToggle
         },
         {
           showBtn: this.showStrikeButton,
           selector: "strike",
-          icon: _,
+          icon: x,
           dataQA: "dt-recipe-editor-strike-btn",
-          tooltipMessage: "Strike",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
           onClick: this.onStrikethroughTextToggle
         }
       ].filter((t) => t.showBtn);
@@ -396,17 +375,17 @@ const st = {
         {
           showBtn: this.showAlignLeftButton,
           selector: { textAlign: "left" },
-          icon: v,
+          icon: b,
           dataQA: "dt-recipe-editor-align-left-btn",
-          tooltipMessage: "Align Left",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("left")
         },
         {
           showBtn: this.showAlignCenterButton,
           selector: { textAlign: "center" },
-          icon: F,
+          icon: N,
           dataQA: "dt-recipe-editor-align-center-btn",
-          tooltipMessage: "Align Center",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("center")
         },
         {
@@ -414,15 +393,15 @@ const st = {
           selector: { textAlign: "right" },
           icon: S,
           dataQA: "dt-recipe-editor-align-right-btn",
-          tooltipMessage: "Align Right",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("right")
         },
         {
           showBtn: this.showAlignJustifyButton,
           selector: { textAlign: "justify" },
-          icon: O,
+          icon: U,
           dataQA: "dt-recipe-editor-align-justify-btn",
-          tooltipMessage: "Align Justify",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("justify")
         }
       ].filter((t) => t.showBtn);
@@ -432,17 +411,17 @@ const st = {
         {
           showBtn: this.showListItemsButton,
           selector: "bulletList",
-          icon: R,
+          icon: y,
           dataQA: "dt-recipe-editor-list-items-btn",
-          tooltipMessage: "Bullet List",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),
           onClick: this.onBulletListToggle
         },
         {
           showBtn: this.showOrderedListButton,
           selector: "orderedList",
-          icon: E,
+          icon: C,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
-          tooltipMessage: "Ordered List",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
           onClick: this.onOrderedListToggle
         }
       ].filter((t) => t.showBtn);
@@ -452,25 +431,25 @@ const st = {
         {
           showBtn: this.showQuoteButton,
           selector: "blockquote",
-          icon: D,
+          icon: F,
           dataQA: "dt-recipe-editor-blockquote-btn",
-          tooltipMessage: "Quote",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
           onClick: this.onBlockquoteToggle
         },
         {
           showBtn: this.showCodeBlockButton,
           selector: "codeBlock",
-          icon: Q,
+          icon: v,
           dataQA: "dt-recipe-editor-code-block-btn",
-          tooltipMessage: "Code",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
           onClick: this.onCodeBlockToggle
         },
         {
           showBtn: this.showInlineImageButton,
           selector: "image",
-          icon: q,
+          icon: M,
           dataQA: "dt-recipe-editor-inline-image-btn",
-          tooltipMessage: "Image",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
           // Handle getting image
           onClick: this.onInsertInlineImageClick
         }
@@ -480,11 +459,23 @@ const st = {
       return {
         showBtn: this.showAddLink.showAddLinkButton,
         selector: "link",
-        icon: M,
+        icon: Q,
         dataQA: "dt-recipe-editor-add-link-btn",
-        tooltipMessage: "Link",
+        tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
         onClick: this.openLinkInput
       };
+    },
+    confirmSetLinkButtonLabels() {
+      return this.i18n.$ta("DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON");
+    },
+    cancelSetLinkButtonLabels() {
+      return this.i18n.$ta("DIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON");
+    },
+    removeLinkButtonLabels() {
+      return this.i18n.$ta("DIALTONE_EDITOR_REMOVE_LINK_BUTTON");
+    },
+    showAddLinkButtonLabels() {
+      return this.i18n.$ta("DIALTONE_EDITOR_ADD_LINK_BUTTON");
     }
   },
   watch: {
@@ -493,14 +484,14 @@ const st = {
     }
   },
   methods: {
-    removeClassStyleAttrs: X,
-    addClassStyleAttrs: Y,
+    removeClassStyleAttrs: j,
+    addClassStyleAttrs: H,
     onInputFocus(t) {
       t == null || t.stopPropagation();
     },
     removeLink() {
-      var t, e, o, n, r;
-      (r = (n = (o = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : o.focus()) == null ? void 0 : n.unsetLink()) == null || r.run(), this.closeLinkInput();
+      var t, e, n, o, r;
+      (r = (o = (n = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : n.focus()) == null ? void 0 : o.unsetLink()) == null || r.run(), this.closeLinkInput();
     },
     setLink(t) {
       var r, i, d;
@@ -509,10 +500,10 @@ const st = {
         this.removeLink();
         return;
       }
-      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,
+      z.find((T) => T.test(this.linkInput)) || (this.linkInput = `${J}${this.linkInput}`);
+      const o = (d = (i = e == null ? void 0 : e.view) == null ? void 0 : i.state) == null ? void 0 : d.selection;
+      o.anchor === o.head ? e.chain().focus().insertContentAt(
+        o.anchor,
         `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
       ).run() : e.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run(), this.closeLinkInput();
     },
@@ -520,10 +511,10 @@ const st = {
       this.showLinkInput = !0;
     },
     updateInput(t) {
-      var e, o, n;
+      var e, n, o;
       if (!t)
         return this.closeLinkInput();
-      this.linkInput = (n = (o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : o.getAttributes("link")) == null ? void 0 : n.href;
+      this.linkInput = (o = (n = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : n.getAttributes("link")) == null ? void 0 : o.href;
     },
     closeLinkInput() {
       var t;
@@ -546,9 +537,9 @@ const st = {
       (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
     },
     onTextAlign(t) {
-      var e, o, n, r;
-      if ((o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) != null && o.isActive({ textAlign: t }))
-        return (n = this.$refs.richTextEditor) == null ? void 0 : n.editor.chain().focus().unsetTextAlign().run();
+      var e, n, o, r;
+      if ((n = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) != null && n.isActive({ textAlign: t }))
+        return (o = this.$refs.richTextEditor) == null ? void 0 : o.editor.chain().focus().unsetTextAlign().run();
       (r = this.$refs.richTextEditor) == null || r.editor.chain().focus().setTextAlign(t).run();
     },
     onBulletListToggle() {
@@ -618,61 +609,61 @@ const st = {
       this.shiftButtonRefIndex(-1);
     },
     shiftButtonRefIndex(t) {
-      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 e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], n = Array.isArray(e) ? e[0] : e, o = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
+      this.currentButtonRefIndex = o >= 0 ? o : this.orderedRefs.length + o;
       const r = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], i = Array.isArray(r) ? r[0] : r;
-      o.$el.blur(), i.$el.focus();
+      n.$el.blur(), i.$el.focus();
     }
   }
-}, 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), {
+}, at = /* @__PURE__ */ _("div", { class: "d-recipe-editor__button-group-divider" }, null, -1), ct = { class: "d-recipe-editor__popover-content" };
+function dt(t, e, n, o, r, i) {
+  const d = h("dt-button"), T = h("dt-tooltip"), I = h("dt-stack"), P = h("dt-input"), G = h("dt-popover"), $ = h("dt-rich-text-editor");
+  return c(), A("div", f({ 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())
+    onClick: e[4] || (e[4] = (s) => t.$refs.richTextEditor.focusEditor())
   }), [
-    c(m, {
+    a(I, {
       class: "d-recipe-editor__top-bar",
       direction: "row",
       gap: "450"
     }, {
       default: u(() => [
-        (a(!0), I(U, null, P(i.buttonGroups, (l) => (a(), p(m, {
-          key: l.key,
+        (c(!0), A(q, null, V(i.buttonGroups, (s) => (c(), p(I, {
+          key: s.key,
           direction: "row",
           gap: "300"
         }, {
           default: u(() => [
-            (a(!0), I(U, null, P(l.buttonGroup, (s) => (a(), p(B, {
-              key: i.getButtonKey(l.key, s.selector),
-              message: s.tooltipMessage,
+            (c(!0), A(q, null, V(s.buttonGroup, (l) => (c(), p(T, {
+              key: i.getButtonKey(s.key, l.selector),
+              message: l.tooltipMessage,
               placement: "top"
             }, {
               anchor: u(() => {
-                var A, y;
+                var m, E;
                 return [
-                  c(d, {
+                  a(d, {
                     ref_for: !0,
-                    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,
+                    ref: i.getButtonRef(s.key, l.selector),
+                    active: (E = (m = t.$refs.richTextEditor) == null ? void 0 : m.editor) == null ? void 0 : E.isActive(l.selector),
+                    "aria-label": l.tooltipMessage,
+                    "data-qa": l.dataQA,
+                    tabindex: i.canFocus(i.getButtonRef(s.key, l.selector)) ? 0 : -1,
                     importance: "clear",
                     kind: "muted",
                     size: "xs",
-                    onClick: (ht) => s.onClick(),
+                    onClick: (ht) => l.onClick(),
                     onKeydown: [
-                      k(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                      k(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                      g(B(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                      g(B(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                     ]
                   }, {
                     icon: u(() => [
-                      (a(), p(K(s.icon), { size: "200" }))
+                      (c(), p(K(l.icon), { size: "200" }))
                     ]),
                     default: u(() => [
-                      w(" " + g(s == null ? void 0 : s.label), 1)
+                      L(" " + k(l == null ? void 0 : l.label), 1)
                     ]),
                     _: 2
                   }, 1032, ["active", "aria-label", "data-qa", "tabindex", "onClick", "onKeydown"])
@@ -680,56 +671,54 @@ function dt(t, e, o, n, r, i) {
               }),
               _: 2
             }, 1032, ["message"]))), 128)),
-            ut
+            at
           ]),
           _: 2
         }, 1024))), 128)),
-        i.linkButton.showBtn ? (a(), p(m, {
+        i.linkButton.showBtn ? (c(), p(I, {
           key: 0,
           direction: "row",
           gap: "300"
         }, {
           default: u(() => [
-            c(N, {
+            a(G, {
               open: r.showLinkInput,
               "show-close-button": !1,
-              "visually-hidden-close": !0,
-              "visually-hidden-close-label": "Close link input popover",
               "data-qa": "dt-recipe-editor-link-input-popover",
               padding: "none",
               placement: "bottom-start",
               onClick: [
                 i.onInputFocus,
-                f(i.onInputFocus, ["stop"])
+                B(i.onInputFocus, ["stop"])
               ],
               onOpened: i.updateInput
             }, {
               anchor: u(() => [
-                (a(), p(B, {
+                (c(), p(T, {
                   key: i.linkButton.key,
                   message: i.linkButton.tooltipMessage,
                   placement: "top"
                 }, {
                   anchor: u(() => {
-                    var l, s;
+                    var s, l;
                     return [
-                      c(d, {
+                      a(d, {
                         ref: i.getButtonRef("custom", "link"),
-                        active: (s = (l = t.$refs.richTextEditor) == null ? void 0 : l.editor) == null ? void 0 : s.isActive(i.linkButton.selector),
+                        active: (l = (s = t.$refs.richTextEditor) == null ? void 0 : s.editor) == null ? void 0 : l.isActive(i.linkButton.selector),
                         "aria-label": i.linkButton.tooltipMessage,
                         "data-qa": i.linkButton.dataQA,
                         tabindex: i.canFocus(i.getButtonRef("custom", "link")) ? 0 : -1,
                         importance: "clear",
                         kind: "muted",
                         size: "xs",
-                        onClick: e[0] || (e[0] = (A) => i.linkButton.onClick()),
+                        onClick: e[0] || (e[0] = (m) => i.linkButton.onClick()),
                         onKeydown: [
-                          k(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                          k(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                          g(B(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                          g(B(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                         ]
                       }, {
                         icon: u(() => [
-                          (a(), p(K(i.linkButton.icon), { size: "200" }))
+                          (c(), p(K(i.linkButton.icon), { size: "200" }))
                         ]),
                         _: 1
                       }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
@@ -739,68 +728,62 @@ function dt(t, e, o, n, r, i) {
                 }, 8, ["message"]))
               ]),
               content: u(() => [
-                L("div", at, [
-                  o.showAddLink.setLinkTitle.length > 0 ? (a(), I("span", ct, g(o.showAddLink.setLinkTitle), 1)) : j("", !0),
-                  c(z, {
+                _("div", ct, [
+                  _("span", null, k(i.showAddLinkButtonLabels.title), 1),
+                  a(P, {
                     modelValue: r.linkInput,
-                    "onUpdate:modelValue": e[1] || (e[1] = (l) => r.linkInput = l),
-                    "input-aria-label": o.showAddLink.setLinkInputAriaLabel,
-                    placeholder: o.setLinkPlaceholder,
+                    "onUpdate:modelValue": e[1] || (e[1] = (s) => r.linkInput = s),
+                    "input-aria-label": i.showAddLinkButtonLabels["aria-label"],
+                    placeholder: n.setLinkPlaceholder,
                     "data-qa": "dt-recipe-editor-link-input",
                     "input-wrapper-class": "d-recipe-editor-link__input-wrapper",
                     onClick: [
                       i.onInputFocus,
-                      f(i.onInputFocus, ["stop"])
+                      B(i.onInputFocus, ["stop"])
                     ],
                     onFocus: i.onInputFocus,
-                    onKeydown: k(i.setLink, ["enter"])
+                    onKeydown: g(i.setLink, ["enter"])
                   }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
                 ])
               ]),
               footerContent: u(() => [
-                c(m, {
+                a(I, {
                   direction: "row",
                   gap: "300",
                   class: "d-recipe-editor__popover-footer"
                 }, {
                   default: u(() => [
-                    c(d, {
-                      "aria-label": o.removeLinkButton.ariaLabel,
+                    a(d, f({
                       "data-qa": "dt-recipe-editor-remove-link-btn",
                       importance: "clear",
                       kind: "muted",
-                      size: "sm",
-                      onClick: i.removeLink
-                    }, {
+                      size: "sm"
+                    }, i.removeLinkButtonLabels, { onClick: i.removeLink }), {
                       default: u(() => [
-                        w(g(o.removeLinkButton.label), 1)
+                        L(k(i.removeLinkButtonLabels.title), 1)
                       ]),
                       _: 1
-                    }, 8, ["aria-label", "onClick"]),
-                    c(d, {
-                      "aria-label": o.cancelSetLinkButton.ariaLabel,
+                    }, 16, ["onClick"]),
+                    a(d, f({
                       "data-qa": "dt-recipe-editor-set-link-cancel-btn",
                       importance: "clear",
                       kind: "muted",
-                      size: "sm",
-                      onClick: i.closeLinkInput
-                    }, {
+                      size: "sm"
+                    }, i.cancelSetLinkButtonLabels, { onClick: i.closeLinkInput }), {
                       default: u(() => [
-                        w(g(o.cancelSetLinkButton.label), 1)
+                        L(k(i.cancelSetLinkButtonLabels.title), 1)
                       ]),
                       _: 1
-                    }, 8, ["aria-label", "onClick"]),
-                    c(d, {
-                      "aria-label": o.confirmSetLinkButton.ariaLabel,
+                    }, 16, ["onClick"]),
+                    a(d, f({
                       "data-qa": "dt-recipe-editor-set-link-confirm-btn",
-                      size: "sm",
-                      onClick: i.setLink
-                    }, {
+                      size: "sm"
+                    }, i.confirmSetLinkButtonLabels, { onClick: i.setLink }), {
                       default: u(() => [
-                        w(g(o.confirmSetLinkButton.label), 1)
+                        L(k(i.confirmSetLinkButtonLabels.title), 1)
                       ]),
                       _: 1
-                    }, 8, ["aria-label", "onClick"])
+                    }, 16, ["onClick"])
                   ]),
                   _: 1
                 })
@@ -809,43 +792,43 @@ function dt(t, e, o, n, r, i) {
             }, 8, ["open", "onClick", "onOpened"])
           ]),
           _: 1
-        })) : j("", !0)
+        })) : X("", !0)
       ]),
       _: 1
     }),
-    L("div", {
-      style: W({ "max-height": o.maxHeight }),
+    _("div", {
+      style: W({ "max-height": n.maxHeight }),
       class: "d-recipe-editor__content"
     }, [
-      c(G, V({
+      a($, f({
         ref: "richTextEditor",
         modelValue: r.internalInputValue,
-        "onUpdate:modelValue": e[2] || (e[2] = (l) => r.internalInputValue = l),
+        "onUpdate:modelValue": e[2] || (e[2] = (s) => r.internalInputValue = s),
         "allow-font-color": !0,
         "allow-font-family": !0,
         "allow-inline-images": !0,
         "allow-line-breaks": !0,
         "hide-link-bubble-menu": !0,
-        "auto-focus": o.autoFocus,
-        editable: o.editable,
-        "input-aria-label": o.inputAriaLabel,
-        "input-class": `d-recipe-editor__content-input ${o.inputClass}`,
+        "auto-focus": n.autoFocus,
+        editable: n.editable,
+        "input-aria-label": n.inputAriaLabel,
+        "input-class": `d-recipe-editor__content-input ${n.inputClass}`,
         link: !0,
         "output-format": i.htmlOutputFormat,
-        placeholder: o.placeholder,
-        "use-div-tags": o.useDivTags,
+        placeholder: n.placeholder,
+        "use-div-tags": n.useDivTags,
         "data-qa": "dt-rich-text-editor"
       }, i.removeClassStyleAttrs(t.$attrs), {
         onTextInput: i.onTextInput,
         onBlur: i.onBlur,
         onFocus: i.onFocus,
-        onInput: e[3] || (e[3] = (l) => i.onInput(l))
+        onInput: e[3] || (e[3] = (s) => i.onInput(s))
       }), null, 16, ["modelValue", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "onTextInput", "onBlur", "onFocus"])
     ], 4)
   ], 16);
 }
-const bt = /* @__PURE__ */ Z(st, [["render", dt]]);
+const Ot = /* @__PURE__ */ Z(ut, [["render", dt]]);
 export {
-  bt as default
+  Ot as default
 };
 //# sourceMappingURL=editor.js.map