@dialpad/dialtone 9.113.0 → 9.114.0

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

@@ -1,40 +1,40 @@
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS as J, EDITOR_DEFAULT_LINK_PREFIX as K } from "./editor-constants.js";
-import { removeClassStyleAttrs as H, addClassStyleAttrs as X } from "../../common/utils/index.js";
-import { DtIconLightningBolt as T, DtIconBold as b, DtIconItalic as A, DtIconUnderline as C, DtIconStrikethrough as y, DtIconListBullet as x, DtIconListOrdered as _, DtIconAlignLeft as E, DtIconAlignCenter as S, DtIconAlignRight as O, DtIconAlignJustify as v, DtIconQuote as D, DtIconCodeBlock as Q, DtIconLink2 as F, DtIconImage as R } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as h, openBlock as u, createElementBlock as B, mergeProps as M, createVNode as c, withCtx as n, Fragment as q, renderList as V, createBlock as p, resolveDynamicComponent as U, createTextVNode as m, toDisplayString as k, withModifiers as P, createElementVNode as w, createCommentVNode as j, withKeys as Y, 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 lt, RICH_TEXT_EDITOR_OUTPUT_FORMATS as rt } from "../rich-text-editor/rich-text-editor-constants.js";
-const st = {
+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 { DtIconLightningBolt 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 k, 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 = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeEditor",
   components: {
-    DtRichTextEditor: $,
-    DtButton: tt,
-    DtPopover: et,
-    DtStack: it,
-    DtInput: ot,
-    DtTooltip: nt,
-    DtIconLightningBolt: T,
-    DtIconBold: b,
-    DtIconItalic: A,
-    DtIconUnderline: C,
-    DtIconStrikethrough: y,
-    DtIconListBullet: x,
-    DtIconListOrdered: _,
-    DtIconAlignLeft: E,
-    DtIconAlignCenter: S,
+    DtRichTextEditor: et,
+    DtButton: it,
+    DtPopover: ot,
+    DtStack: nt,
+    DtInput: rt,
+    DtTooltip: lt,
+    DtIconLightningBolt: x,
+    DtIconBold: y,
+    DtIconItalic: C,
+    DtIconUnderline: _,
+    DtIconStrikethrough: R,
+    DtIconListBullet: E,
+    DtIconListOrdered: F,
+    DtIconAlignLeft: S,
+    DtIconAlignCenter: v,
     DtIconAlignRight: O,
-    DtIconAlignJustify: v,
-    DtIconQuote: D,
+    DtIconAlignJustify: D,
+    DtIconQuote: M,
     DtIconCodeBlock: Q,
-    DtIconLink2: F,
-    DtIconImage: R
+    DtIconLink2: q,
+    DtIconImage: V
   },
   mixins: [],
   inheritAttrs: !1,
@@ -86,7 +86,7 @@ const st = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? lt.includes(t) : !0;
+        return typeof t == "string" ? st.includes(t) : !0;
       }
     },
     /**
@@ -301,7 +301,9 @@ const st = {
         class: "d-recipe-editor__link"
       },
       showLinkInput: !1,
-      linkInput: ""
+      linkInput: "",
+      currentButtonRefIndex: 0,
+      buttonRefMap: Z({})
     };
   },
   computed: {
@@ -309,7 +311,7 @@ const st = {
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return rt[2];
+      return ut[2];
     },
     showingTextFormatButtons() {
       return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
@@ -320,6 +322,14 @@ const st = {
     showingListButtons() {
       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));
+        }, this), e;
+      }).bind(this), []);
+      return t.push(this.getButtonRef("custom", "link")), t;
+    },
     buttonGroups() {
       const t = this.individualButtons.map((e) => ({
         key: e.selector,
@@ -339,7 +349,7 @@ const st = {
           showBtn: this.showQuickRepliesButton,
           label: "Quick reply",
           selector: "quickReplies",
-          icon: T,
+          icon: x,
           dataQA: "dt-recipe-editor-quick-replies-btn",
           tooltipMessage: "Quick Reply",
           onClick: this.onQuickRepliesClick
@@ -351,7 +361,7 @@ const st = {
         {
           showBtn: this.showBoldButton,
           selector: "bold",
-          icon: b,
+          icon: y,
           dataQA: "dt-recipe-editor-bold-btn",
           tooltipMessage: "Bold",
           onClick: this.onBoldTextToggle
@@ -359,7 +369,7 @@ const st = {
         {
           showBtn: this.showItalicsButton,
           selector: "italic",
-          icon: A,
+          icon: C,
           dataQA: "dt-recipe-editor-italics-btn",
           tooltipMessage: "Italics",
           onClick: this.onItalicTextToggle
@@ -367,7 +377,7 @@ const st = {
         {
           showBtn: this.showUnderlineButton,
           selector: "underline",
-          icon: C,
+          icon: _,
           dataQA: "dt-recipe-editor-underline-btn",
           tooltipMessage: "Underline",
           onClick: this.onUnderlineTextToggle
@@ -375,7 +385,7 @@ const st = {
         {
           showBtn: this.showStrikeButton,
           selector: "strike",
-          icon: y,
+          icon: R,
           dataQA: "dt-recipe-editor-strike-btn",
           tooltipMessage: "Strike",
           onClick: this.onStrikethroughTextToggle
@@ -387,7 +397,7 @@ const st = {
         {
           showBtn: this.showAlignLeftButton,
           selector: { textAlign: "left" },
-          icon: E,
+          icon: S,
           dataQA: "dt-recipe-editor-align-left-btn",
           tooltipMessage: "Align Left",
           onClick: () => this.onTextAlign("left")
@@ -395,7 +405,7 @@ const st = {
         {
           showBtn: this.showAlignCenterButton,
           selector: { textAlign: "center" },
-          icon: S,
+          icon: v,
           dataQA: "dt-recipe-editor-align-center-btn",
           tooltipMessage: "Align Center",
           onClick: () => this.onTextAlign("center")
@@ -411,7 +421,7 @@ const st = {
         {
           showBtn: this.showAlignJustifyButton,
           selector: { textAlign: "justify" },
-          icon: v,
+          icon: D,
           dataQA: "dt-recipe-editor-align-justify-btn",
           tooltipMessage: "Align Justify",
           onClick: () => this.onTextAlign("justify")
@@ -423,7 +433,7 @@ const st = {
         {
           showBtn: this.showListItemsButton,
           selector: "bulletList",
-          icon: x,
+          icon: E,
           dataQA: "dt-recipe-editor-list-items-btn",
           tooltipMessage: "Bullet List",
           onClick: this.onBulletListToggle
@@ -431,7 +441,7 @@ const st = {
         {
           showBtn: this.showOrderedListButton,
           selector: "orderedList",
-          icon: _,
+          icon: F,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
           tooltipMessage: "Ordered List",
           onClick: this.onOrderedListToggle
@@ -443,7 +453,7 @@ const st = {
         {
           showBtn: this.showQuoteButton,
           selector: "blockquote",
-          icon: D,
+          icon: M,
           dataQA: "dt-recipe-editor-blockquote-btn",
           tooltipMessage: "Quote",
           onClick: this.onBlockquoteToggle
@@ -459,7 +469,7 @@ const st = {
         {
           showBtn: this.showInlineImageButton,
           selector: "image",
-          icon: R,
+          icon: V,
           dataQA: "dt-recipe-editor-inline-image-btn",
           tooltipMessage: "Image",
           // Handle getting image
@@ -471,7 +481,7 @@ const st = {
       return {
         showBtn: this.showAddLink.showAddLinkButton,
         selector: "link",
-        icon: F,
+        icon: q,
         dataQA: "dt-recipe-editor-add-link-btn",
         tooltipMessage: "Link",
         onClick: this.openLinkInput
@@ -484,26 +494,26 @@ const st = {
     }
   },
   methods: {
-    removeClassStyleAttrs: H,
-    addClassStyleAttrs: X,
+    removeClassStyleAttrs: Y,
+    addClassStyleAttrs: W,
     onInputFocus(t) {
       t == null || t.stopPropagation();
     },
     removeLink() {
-      var t, e, o, r, l;
-      (l = (r = (o = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : o.focus()) == null ? void 0 : r.unsetLink()) == null || l.run(), this.closeLinkInput();
+      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();
     },
     setLink(t) {
-      var l, i, d;
-      const e = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor;
+      var r, i, d;
+      const e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor;
       if (t == null || t.preventDefault(), t == null || t.stopPropagation(), !this.linkInput) {
         this.removeLink();
         return;
       }
-      J.find((g) => g.test(this.linkInput)) || (this.linkInput = `${K}${this.linkInput}`);
-      const r = (d = (i = e == null ? void 0 : e.view) == null ? void 0 : i.state) == null ? void 0 : d.selection;
-      r.anchor === r.head ? e.chain().focus().insertContentAt(
-        r.anchor,
+      H.find((m) => m.test(this.linkInput)) || (this.linkInput = `${X}${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,
         `<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();
     },
@@ -511,10 +521,10 @@ const st = {
       this.showLinkInput = !0;
     },
     updateInput(t) {
-      var e, o, r;
+      var e, o, n;
       if (!t)
         return this.closeLinkInput();
-      this.linkInput = (r = (o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : o.getAttributes("link")) == null ? void 0 : r.href;
+      this.linkInput = (n = (o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : o.getAttributes("link")) == null ? void 0 : n.href;
     },
     closeLinkInput() {
       var t;
@@ -537,10 +547,10 @@ const st = {
       (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
     },
     onTextAlign(t) {
-      var e, o, r, l;
+      var e, o, n, r;
       if ((o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) != null && o.isActive({ textAlign: t }))
-        return (r = this.$refs.richTextEditor) == null ? void 0 : r.editor.chain().focus().unsetTextAlign().run();
-      (l = this.$refs.richTextEditor) == null || l.editor.chain().focus().setTextAlign(t).run();
+        return (n = this.$refs.richTextEditor) == null ? void 0 : n.editor.chain().focus().unsetTextAlign().run();
+      (r = this.$refs.richTextEditor) == null || r.editor.chain().focus().setTextAlign(t).run();
     },
     onBulletListToggle() {
       var t;
@@ -587,69 +597,104 @@ const st = {
     },
     onInput(t) {
       this.$emit("input", t), this.$emit("update:modelValue", t);
+    },
+    getButtonKey(t, e) {
+      return `${t}-${JSON.stringify(e)}`;
+    },
+    // Unique Button Ref Key to identify ref
+    getButtonRef(t, e) {
+      return `${this.getButtonKey(t, e)}-ref`;
+    },
+    /**
+     * Determines if an element in the action bar button list is focusable with tab key
+     * @param {string} refKey - unique identifier for the ref element in DOM
+     */
+    canFocus(t) {
+      return t === this.orderedRefs[this.currentButtonRefIndex];
+    },
+    shiftActionBarFocusRight() {
+      this.shiftButtonRefIndex(1);
+    },
+    shiftActionBarFocusLeft() {
+      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();
     }
   }
-}, at = /* @__PURE__ */ w("div", { class: "d-recipe-editor__button-group-divider" }, null, -1), ut = { class: "d-recipe-editor__popover-content" }, ct = { key: 0 };
-function dt(t, e, o, r, l, i) {
-  const d = h("dt-button"), g = h("dt-tooltip"), f = h("dt-stack"), z = h("dt-input"), N = h("dt-popover"), G = h("dt-rich-text-editor");
-  return u(), B("div", M({ class: "d-recipe-editor" }, i.addClassStyleAttrs(t.$attrs), {
+}, 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), {
     "data-qa": "dt-recipe-editor",
     role: "presentation",
-    onClick: e[4] || (e[4] = (s) => t.$refs.richTextEditor.focusEditor())
+    onClick: e[4] || (e[4] = (l) => t.$refs.richTextEditor.focusEditor())
   }), [
-    c(f, {
+    c(I, {
       class: "d-recipe-editor__top-bar",
       direction: "row",
       gap: "450"
     }, {
-      default: n(() => [
-        (u(!0), B(q, null, V(i.buttonGroups, (s) => (u(), p(f, {
-          key: s.key,
+      default: u(() => [
+        (a(!0), w(P, null, K(i.buttonGroups, (l) => (a(), p(I, {
+          key: l.key,
           direction: "row",
           gap: "300"
         }, {
-          default: n(() => [
-            (u(!0), B(q, null, V(s.buttonGroup, (a) => (u(), p(g, {
-              key: `${s.key}-${JSON.stringify(a.selector)}`,
-              message: a.tooltipMessage,
+          default: u(() => [
+            (a(!0), w(P, null, K(l.buttonGroup, (s) => (a(), p(m, {
+              key: i.getButtonKey(l.key, s.selector),
+              message: s.tooltipMessage,
               placement: "top"
             }, {
-              anchor: n(() => {
-                var I, L;
+              anchor: u(() => {
+                var g, T;
                 return [
                   c(d, {
-                    active: (L = (I = t.$refs.richTextEditor) == null ? void 0 : I.editor) == null ? void 0 : L.isActive(a.selector),
-                    "aria-label": a.tooltipMessage,
-                    "data-qa": a.dataQA,
+                    ref_for: !0,
+                    ref: (A) => {
+                      r.buttonRefMap[i.getButtonRef(l.key, s.selector)] = A;
+                    },
+                    active: (T = (g = t.$refs.richTextEditor) == null ? void 0 : g.editor) == null ? void 0 : T.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: (ht) => a.onClick()
+                    onClick: (A) => s.onClick(),
+                    onKeydown: [
+                      k(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                      k(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                    ]
                   }, {
-                    icon: n(() => [
-                      (u(), p(U(a.icon), { size: "200" }))
+                    icon: u(() => [
+                      (a(), p(j(s.icon), { size: "200" }))
                     ]),
-                    default: n(() => [
-                      m(" " + k(a == null ? void 0 : a.label), 1)
+                    default: u(() => [
+                      L(" " + B(s == null ? void 0 : s.label), 1)
                     ]),
                     _: 2
-                  }, 1032, ["active", "aria-label", "data-qa", "onClick"])
+                  }, 1032, ["active", "aria-label", "data-qa", "tabindex", "onClick", "onKeydown"])
                 ];
               }),
               _: 2
             }, 1032, ["message"]))), 128)),
-            at
+            ct
           ]),
           _: 2
         }, 1024))), 128)),
-        i.linkButton.showBtn ? (u(), p(f, {
+        i.linkButton.showBtn ? (a(), p(I, {
           key: 0,
           direction: "row",
           gap: "300"
         }, {
-          default: n(() => [
-            c(N, {
-              open: l.showLinkInput,
+          default: u(() => [
+            c(G, {
+              open: r.showLinkInput,
               "show-close-button": !1,
               "visually-hidden-close": !0,
               "visually-hidden-close-label": "Close link input popover",
@@ -658,64 +703,72 @@ function dt(t, e, o, r, l, i) {
               placement: "bottom-start",
               onClick: [
                 i.onInputFocus,
-                P(i.onInputFocus, ["stop"])
+                f(i.onInputFocus, ["stop"])
               ],
               onOpened: i.updateInput
             }, {
-              anchor: n(() => [
-                (u(), p(g, {
+              anchor: u(() => [
+                (a(), p(m, {
                   key: i.linkButton.key,
                   message: i.linkButton.tooltipMessage,
                   placement: "top"
                 }, {
-                  anchor: n(() => {
-                    var s, a;
+                  anchor: u(() => {
+                    var l, s;
                     return [
                       c(d, {
-                        active: (a = (s = t.$refs.richTextEditor) == null ? void 0 : s.editor) == null ? void 0 : a.isActive(i.linkButton.selector),
+                        ref: (g) => {
+                          r.buttonRefMap[i.getButtonRef("custom", "link")] = g;
+                        },
+                        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,
+                        tabindex: i.canFocus(i.getButtonRef("custom", "link")) ? 0 : -1,
                         importance: "clear",
                         kind: "muted",
                         size: "xs",
-                        onClick: e[0] || (e[0] = (I) => i.linkButton.onClick())
+                        onClick: e[0] || (e[0] = (g) => i.linkButton.onClick()),
+                        onKeydown: [
+                          k(f(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                          k(f(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                        ]
                       }, {
-                        icon: n(() => [
-                          (u(), p(U(i.linkButton.icon), { size: "200" }))
+                        icon: u(() => [
+                          (a(), p(j(i.linkButton.icon), { size: "200" }))
                         ]),
                         _: 1
-                      }, 8, ["active", "aria-label", "data-qa"])
+                      }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
                     ];
                   }),
                   _: 1
                 }, 8, ["message"]))
               ]),
-              content: n(() => [
-                w("div", ut, [
-                  o.showAddLink.setLinkTitle.length > 0 ? (u(), B("span", ct, k(o.showAddLink.setLinkTitle), 1)) : j("", !0),
-                  c(z, {
-                    modelValue: l.linkInput,
-                    "onUpdate:modelValue": e[1] || (e[1] = (s) => l.linkInput = s),
+              content: u(() => [
+                b("div", dt, [
+                  o.showAddLink.setLinkTitle.length > 0 ? (a(), w("span", ht, B(o.showAddLink.setLinkTitle), 1)) : z("", !0),
+                  c(N, {
+                    modelValue: r.linkInput,
+                    "onUpdate:modelValue": e[1] || (e[1] = (l) => r.linkInput = l),
                     "input-aria-label": o.showAddLink.setLinkInputAriaLabel,
                     placeholder: o.setLinkPlaceholder,
                     "data-qa": "dt-recipe-editor-link-input",
                     "input-wrapper-class": "d-recipe-editor-link__input-wrapper",
                     onClick: [
                       i.onInputFocus,
-                      P(i.onInputFocus, ["stop"])
+                      f(i.onInputFocus, ["stop"])
                     ],
                     onFocus: i.onInputFocus,
-                    onKeydown: Y(i.setLink, ["enter"])
+                    onKeydown: k(i.setLink, ["enter"])
                   }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
                 ])
               ]),
-              footerContent: n(() => [
-                c(f, {
+              footerContent: u(() => [
+                c(I, {
                   direction: "row",
                   gap: "300",
                   class: "d-recipe-editor__popover-footer"
                 }, {
-                  default: n(() => [
+                  default: u(() => [
                     c(d, {
                       "aria-label": o.removeLinkButton.ariaLabel,
                       "data-qa": "dt-recipe-editor-remove-link-btn",
@@ -724,8 +777,8 @@ function dt(t, e, o, r, l, i) {
                       size: "sm",
                       onClick: i.removeLink
                     }, {
-                      default: n(() => [
-                        m(k(o.removeLinkButton.label), 1)
+                      default: u(() => [
+                        L(B(o.removeLinkButton.label), 1)
                       ]),
                       _: 1
                     }, 8, ["aria-label", "onClick"]),
@@ -737,8 +790,8 @@ function dt(t, e, o, r, l, i) {
                       size: "sm",
                       onClick: i.closeLinkInput
                     }, {
-                      default: n(() => [
-                        m(k(o.cancelSetLinkButton.label), 1)
+                      default: u(() => [
+                        L(B(o.cancelSetLinkButton.label), 1)
                       ]),
                       _: 1
                     }, 8, ["aria-label", "onClick"]),
@@ -748,8 +801,8 @@ function dt(t, e, o, r, l, i) {
                       size: "sm",
                       onClick: i.setLink
                     }, {
-                      default: n(() => [
-                        m(k(o.confirmSetLinkButton.label), 1)
+                      default: u(() => [
+                        L(B(o.confirmSetLinkButton.label), 1)
                       ]),
                       _: 1
                     }, 8, ["aria-label", "onClick"])
@@ -761,18 +814,18 @@ function dt(t, e, o, r, l, i) {
             }, 8, ["open", "onClick", "onOpened"])
           ]),
           _: 1
-        })) : j("", !0)
+        })) : z("", !0)
       ]),
       _: 1
     }),
-    w("div", {
-      style: W({ "max-height": o.maxHeight }),
+    b("div", {
+      style: $({ "max-height": o.maxHeight }),
       class: "d-recipe-editor__content"
     }, [
-      c(G, M({
+      c(J, U({
         ref: "richTextEditor",
-        modelValue: l.internalInputValue,
-        "onUpdate:modelValue": e[2] || (e[2] = (s) => l.internalInputValue = s),
+        modelValue: r.internalInputValue,
+        "onUpdate:modelValue": e[2] || (e[2] = (l) => r.internalInputValue = l),
         "allow-inline-images": !0,
         "allow-line-breaks": !0,
         "hide-link-bubble-menu": !0,
@@ -789,13 +842,13 @@ function dt(t, e, o, r, l, i) {
         onTextInput: i.onTextInput,
         onBlur: i.onBlur,
         onFocus: i.onFocus,
-        onInput: e[3] || (e[3] = (s) => i.onInput(s))
+        onInput: e[3] || (e[3] = (l) => i.onInput(l))
       }), null, 16, ["modelValue", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "onTextInput", "onBlur", "onFocus"])
     ], 4)
   ], 16);
 }
-const Ct = /* @__PURE__ */ Z(st, [["render", dt]]);
+const yt = /* @__PURE__ */ tt(at, [["render", pt]]);
 export {
-  Ct as default
+  yt as default
 };
 //# sourceMappingURL=editor.js.map