@dialpad/dialtone 9.167.0 → 9.169.0

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

@@ -1,61 +1,61 @@
-import { EDITOR_DEFAULT_FONT_COLOR as K, EDITOR_SUPPORTED_LINK_PROTOCOLS as kt, EDITOR_DEFAULT_LINK_PREFIX as _t } from "./editor-constants.js";
-import { addClassStyleAttrs as It, removeClassStyleAttrs as Lt } from "../../common/utils/index.js";
-import At from "./EditorToolbarButton.js";
-import yt from "./EditorToolbarDropdownButton.js";
-import Et from "./EditorToolbarPopoverButton.js";
-import { DtIconStopFilled as H, DtIconFontSize as J, DtIconChevronDown as wt, DtIconBraces as Y, DtIconType as j, DtIconSearch as bt, DtIconImage as G, DtIconLink2 as X, DtIconCodeBlock as Z, DtIconQuote as W, DtIconAlignJustify as $, DtIconAlignRight as tt, DtIconAlignCenter as et, DtIconAlignLeft as ot, DtIconListOrdered as it, DtIconListBullet as nt, DtIconStrikethrough as rt, DtIconUnderline as lt, DtIconItalic as st, DtIconBold as at, DtIconQuickReply as ut } from "@dialpad/dialtone-icons/vue3";
-import { DialtoneLocalization as Ct } from "../../localization/index.js";
-import { resolveComponent as p, resolveDirective as Ot, openBlock as u, createElementBlock as T, mergeProps as B, createVNode as d, withCtx as a, Fragment as k, renderList as y, createBlock as f, createElementVNode as _, normalizeStyle as O, createTextVNode as w, toDisplayString as I, withDirectives as Rt, withKeys as b, withModifiers as L, resolveDynamicComponent as ct, createCommentVNode as D, normalizeClass as xt } from "vue";
-import { _ as Ft } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import Dt from "../combobox/combobox.js";
-import St from "../tooltip/tooltip.js";
-import vt from "../input/input.js";
-import Nt from "../stack/stack.js";
-import Ut from "../popover/popover.js";
-import Vt from "../button/button.js";
-import zt from "../rich-text-editor/rich-text-editor.js";
-import Qt from "../list-item/list-item.js";
-import Mt from "../dropdown/dropdown-separator.js";
-import qt from "../list-item-group/list-item-group.js";
-import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as Pt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Kt } from "../rich-text-editor/rich-text-editor-constants.js";
-const Ht = {
+import { EDITOR_DEFAULT_FONT_COLOR as H, EDITOR_SUPPORTED_LINK_PROTOCOLS as _t, EDITOR_DEFAULT_LINK_PREFIX as It } from "./editor-constants.js";
+import { addClassStyleAttrs as Lt, removeClassStyleAttrs as At } from "../../common/utils/index.js";
+import yt from "./EditorToolbarButton.js";
+import Et from "./EditorToolbarDropdownButton.js";
+import wt from "./EditorToolbarPopoverButton.js";
+import { DtIconStopFilled as J, DtIconFontSize as Y, DtIconChevronDown as bt, DtIconBraces as j, DtIconType as G, DtIconSearch as Ct, DtIconImage as X, DtIconLink2 as Z, DtIconCodeBlock as W, DtIconQuote as $, DtIconAlignJustify as tt, DtIconAlignRight as et, DtIconAlignCenter as ot, DtIconAlignLeft as it, DtIconListOrdered as nt, DtIconListBullet as rt, DtIconStrikethrough as lt, DtIconUnderline as st, DtIconItalic as at, DtIconBold as ut, DtIconQuickReply as ct } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as Ot } from "../../localization/index.js";
+import { resolveComponent as p, resolveDirective as Rt, openBlock as u, createElementBlock as T, mergeProps as B, createVNode as d, withCtx as a, Fragment as k, renderList as y, createBlock as f, createElementVNode as _, normalizeStyle as O, createTextVNode as w, toDisplayString as I, withDirectives as xt, withKeys as b, withModifiers as L, resolveDynamicComponent as dt, createCommentVNode as D, normalizeClass as Ft } from "vue";
+import { _ as Dt } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import St from "../combobox/combobox.js";
+import vt from "../tooltip/tooltip.js";
+import Nt from "../input/input.js";
+import Ut from "../stack/stack.js";
+import Vt from "../popover/popover.js";
+import zt from "../button/button.js";
+import Qt from "../rich-text-editor/rich-text-editor.js";
+import Mt from "../list-item/list-item.js";
+import qt from "../dropdown/dropdown-separator.js";
+import Pt from "../list-item-group/list-item-group.js";
+import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as Kt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Ht } from "../rich-text-editor/rich-text-editor-constants.js";
+const Jt = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeEditor",
   components: {
-    DtListItemGroup: qt,
-    DtDropdownSeparator: Mt,
-    DtListItem: Qt,
-    DtRichTextEditor: zt,
-    DtButton: Vt,
-    DtPopover: Ut,
-    DtStack: Nt,
-    DtInput: vt,
-    DtTooltip: St,
-    DtCombobox: Dt,
-    EditorToolbarButton: At,
-    EditorToolbarDropdownButton: yt,
-    EditorToolbarPopoverButton: Et,
-    DtIconQuickReply: ut,
-    DtIconBold: at,
-    DtIconItalic: st,
-    DtIconUnderline: lt,
-    DtIconStrikethrough: rt,
-    DtIconListBullet: nt,
-    DtIconListOrdered: it,
-    DtIconAlignLeft: ot,
-    DtIconAlignCenter: et,
-    DtIconAlignRight: tt,
-    DtIconAlignJustify: $,
-    DtIconQuote: W,
-    DtIconCodeBlock: Z,
-    DtIconLink2: X,
-    DtIconImage: G,
-    DtIconSearch: bt,
-    DtIconType: j,
-    DtIconBraces: Y,
-    DtIconChevronDown: wt,
-    DtIconFontSize: J,
-    DtIconStopFilled: H
+    DtListItemGroup: Pt,
+    DtDropdownSeparator: qt,
+    DtListItem: Mt,
+    DtRichTextEditor: Qt,
+    DtButton: zt,
+    DtPopover: Vt,
+    DtStack: Ut,
+    DtInput: Nt,
+    DtTooltip: vt,
+    DtCombobox: St,
+    EditorToolbarButton: yt,
+    EditorToolbarDropdownButton: Et,
+    EditorToolbarPopoverButton: wt,
+    DtIconQuickReply: ct,
+    DtIconBold: ut,
+    DtIconItalic: at,
+    DtIconUnderline: st,
+    DtIconStrikethrough: lt,
+    DtIconListBullet: rt,
+    DtIconListOrdered: nt,
+    DtIconAlignLeft: it,
+    DtIconAlignCenter: ot,
+    DtIconAlignRight: et,
+    DtIconAlignJustify: tt,
+    DtIconQuote: $,
+    DtIconCodeBlock: W,
+    DtIconLink2: Z,
+    DtIconImage: X,
+    DtIconSearch: Ct,
+    DtIconType: G,
+    DtIconBraces: j,
+    DtIconChevronDown: bt,
+    DtIconFontSize: Y,
+    DtIconStopFilled: J
   },
   mixins: [],
   inheritAttrs: !1,
@@ -107,7 +107,7 @@ const Ht = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? Kt.includes(t) : !0;
+        return typeof t == "string" ? Ht.includes(t) : !0;
       }
     },
     /**
@@ -390,7 +390,7 @@ const Ht = {
       linkInput: "",
       currentButtonRefIndex: 0,
       variableSearchValue: "",
-      i18n: new Ct()
+      i18n: new Ot()
     };
   },
   computed: {
@@ -398,7 +398,7 @@ const Ht = {
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return Pt[2];
+      return Kt[2];
     },
     flattenedVariableItems() {
       return this.variableCategories ? this.variableCategories.reduce((t, o) => t.concat(o.items || []), []) : [];
@@ -440,7 +440,7 @@ const Ht = {
           buttonType: "button",
           label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           selector: "quickReplies",
-          icon: ut,
+          icon: ct,
           dataQA: "dt-recipe-editor-quick-replies-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           onClick: this.onQuickRepliesClick
@@ -453,7 +453,7 @@ const Ht = {
           showBtn: this.showFontStyleButton,
           buttonType: "popover",
           selector: "fontStyle",
-          icon: j,
+          icon: G,
           dataQA: "dt-recipe-editor-font-style-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL")
         },
@@ -461,7 +461,7 @@ const Ht = {
           showBtn: this.showFontSizeButton,
           buttonType: "popover",
           selector: "fontSize",
-          icon: J,
+          icon: Y,
           dataQA: "dt-recipe-editor-font-size-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL")
         },
@@ -469,7 +469,7 @@ const Ht = {
           showBtn: this.showFontColorButton,
           buttonType: "custom",
           selector: "fontColor",
-          icon: H,
+          icon: J,
           dataQA: "dt-recipe-editor-font-color-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL"),
           onClick: this.onColorPickerButtonClick
@@ -478,7 +478,7 @@ const Ht = {
           showBtn: this.showBoldButton,
           buttonType: "button",
           selector: "bold",
-          icon: at,
+          icon: ut,
           dataQA: "dt-recipe-editor-bold-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
           onClick: this.onBoldTextToggle
@@ -487,7 +487,7 @@ const Ht = {
           showBtn: this.showItalicsButton,
           buttonType: "button",
           selector: "italic",
-          icon: st,
+          icon: at,
           dataQA: "dt-recipe-editor-italics-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
           onClick: this.onItalicTextToggle
@@ -496,7 +496,7 @@ const Ht = {
           showBtn: this.showUnderlineButton,
           buttonType: "button",
           selector: "underline",
-          icon: lt,
+          icon: st,
           dataQA: "dt-recipe-editor-underline-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
           onClick: this.onUnderlineTextToggle
@@ -505,7 +505,7 @@ const Ht = {
           showBtn: this.showStrikeButton,
           buttonType: "button",
           selector: "strike",
-          icon: rt,
+          icon: lt,
           dataQA: "dt-recipe-editor-strike-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
           onClick: this.onStrikethroughTextToggle
@@ -518,7 +518,7 @@ const Ht = {
           showBtn: this.showAlignLeftButton,
           buttonType: "button",
           selector: { textAlign: "left" },
-          icon: ot,
+          icon: it,
           dataQA: "dt-recipe-editor-align-left-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("left")
@@ -527,7 +527,7 @@ const Ht = {
           showBtn: this.showAlignCenterButton,
           buttonType: "button",
           selector: { textAlign: "center" },
-          icon: et,
+          icon: ot,
           dataQA: "dt-recipe-editor-align-center-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("center")
@@ -536,7 +536,7 @@ const Ht = {
           showBtn: this.showAlignRightButton,
           buttonType: "button",
           selector: { textAlign: "right" },
-          icon: tt,
+          icon: et,
           dataQA: "dt-recipe-editor-align-right-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("right")
@@ -545,7 +545,7 @@ const Ht = {
           showBtn: this.showAlignJustifyButton,
           buttonType: "button",
           selector: { textAlign: "justify" },
-          icon: $,
+          icon: tt,
           dataQA: "dt-recipe-editor-align-justify-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("justify")
@@ -558,7 +558,7 @@ const Ht = {
           showBtn: this.showListItemsButton,
           buttonType: "button",
           selector: "bulletList",
-          icon: nt,
+          icon: rt,
           dataQA: "dt-recipe-editor-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),
           onClick: this.onBulletListToggle
@@ -567,7 +567,7 @@ const Ht = {
           showBtn: this.showOrderedListButton,
           buttonType: "button",
           selector: "orderedList",
-          icon: it,
+          icon: nt,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
           onClick: this.onOrderedListToggle
@@ -580,7 +580,7 @@ const Ht = {
           showBtn: this.showQuoteButton,
           buttonType: "button",
           selector: "blockquote",
-          icon: W,
+          icon: $,
           dataQA: "dt-recipe-editor-blockquote-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
           onClick: this.onBlockquoteToggle
@@ -589,7 +589,7 @@ const Ht = {
           showBtn: this.showCodeBlockButton,
           buttonType: "button",
           selector: "codeBlock",
-          icon: Z,
+          icon: W,
           dataQA: "dt-recipe-editor-code-block-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
           onClick: this.onCodeBlockToggle
@@ -598,7 +598,7 @@ const Ht = {
           showBtn: this.showInlineImageButton,
           buttonType: "button",
           selector: "image",
-          icon: G,
+          icon: X,
           dataQA: "dt-recipe-editor-inline-image-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
           // Handle getting image
@@ -608,7 +608,7 @@ const Ht = {
           showBtn: this.showVariableButton,
           buttonType: "popover",
           selector: "variable",
-          icon: Y,
+          icon: j,
           dataQA: "dt-recipe-editor-variable-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
         }
@@ -619,7 +619,7 @@ const Ht = {
         showBtn: this.showAddLink.showAddLinkButton,
         buttonType: "custom",
         selector: "link",
-        icon: X,
+        icon: Z,
         dataQA: "dt-recipe-editor-add-link-btn",
         tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
         onClick: this.openLinkInput
@@ -649,10 +649,11 @@ const Ht = {
       );
     },
     colorPickerInput() {
-      return document.querySelector(".colorPickerInput");
+      var t;
+      return (t = this.$refs.editorRoot) == null ? void 0 : t.querySelector(".colorPickerInput");
     },
     isDefaultFontColor() {
-      return this.currentFontColor === K;
+      return this.currentFontColor === H;
     },
     actionBarBtn() {
       var o, i;
@@ -666,8 +667,8 @@ const Ht = {
     }
   },
   methods: {
-    removeClassStyleAttrs: Lt,
-    addClassStyleAttrs: It,
+    removeClassStyleAttrs: At,
+    addClassStyleAttrs: Lt,
     onInputFocus(t) {
       t == null || t.stopPropagation();
     },
@@ -682,7 +683,7 @@ const Ht = {
         this.removeLink();
         return;
       }
-      kt.find((A) => A.test(this.linkInput)) || (this.linkInput = `${_t}${this.linkInput}`);
+      _t.find((A) => A.test(this.linkInput)) || (this.linkInput = `${It}${this.linkInput}`);
       const l = (g = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : g.selection;
       l.anchor === l.head ? o.chain().focus().insertContentAt(
         l.anchor,
@@ -832,7 +833,7 @@ const Ht = {
     },
     updateFontColorInput() {
       var t, o, i;
-      this.currentFontColor = ((i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : i.color) || K;
+      this.currentFontColor = ((i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : i.color) || H;
     },
     onColorPickerButtonClick() {
       var t;
@@ -843,10 +844,13 @@ const Ht = {
       (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setColor(t).run(), (r = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor) == null || r.commands.focus(), this.updateFontColorInput();
     }
   }
-}, Jt = { class: "d-recipe-editor__popover-content" };
-function Yt(t, o, i, l, r, e) {
-  const g = p("dt-icon-search"), A = p("dt-input"), R = p("dt-list-item"), S = p("dt-combobox"), v = p("editor-toolbar-popover-button"), dt = p("editor-toolbar-dropdown-button"), E = p("dt-button"), ht = p("dt-dropdown-separator"), ft = p("dt-list-item-group"), pt = p("editor-toolbar-button"), C = p("dt-stack"), Bt = p("dt-tooltip"), gt = p("dt-popover"), mt = p("dt-rich-text-editor"), Tt = Ot("dt-tooltip");
-  return u(), T("div", B({ class: "d-recipe-editor" }, e.addClassStyleAttrs(t.$attrs), {
+}, Yt = { class: "d-recipe-editor__popover-content" };
+function jt(t, o, i, l, r, e) {
+  const g = p("dt-icon-search"), A = p("dt-input"), R = p("dt-list-item"), S = p("dt-combobox"), v = p("editor-toolbar-popover-button"), ht = p("editor-toolbar-dropdown-button"), E = p("dt-button"), ft = p("dt-dropdown-separator"), pt = p("dt-list-item-group"), Bt = p("editor-toolbar-button"), C = p("dt-stack"), gt = p("dt-tooltip"), mt = p("dt-popover"), Tt = p("dt-rich-text-editor"), kt = Rt("dt-tooltip");
+  return u(), T("div", B({
+    ref: "editorRoot",
+    class: "d-recipe-editor"
+  }, e.addClassStyleAttrs(t.$attrs), {
     "data-qa": "dt-recipe-editor",
     role: "presentation",
     onClick: o[7] || (o[7] = (s) => t.$refs.richTextEditor.focusEditor())
@@ -864,7 +868,7 @@ function Yt(t, o, i, l, r, e) {
         }, {
           default: a(() => [
             (u(!0), T(k, null, y(s.buttonGroup, (n) => {
-              var x, N, U, V, z, Q, M, q;
+              var x, N, U, V, z, Q, M, q, P;
               return u(), T(k, null, [
                 n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), f(v, {
                   key: e.getButtonKey(s.key, n.selector),
@@ -911,7 +915,7 @@ function Yt(t, o, i, l, r, e) {
                             style: O({ fontFamily: c.value || "inherit" }),
                             role: "option",
                             "navigation-type": "arrow-keys",
-                            onClick: (P) => {
+                            onClick: (K) => {
                               m(), e.onFontStyleSelect(c.value);
                             }
                           }, {
@@ -926,7 +930,7 @@ function Yt(t, o, i, l, r, e) {
                     }, 1032, ["onEscape"])
                   ]),
                   _: 1
-                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "popover" && n.selector === "fontSize" ? (u(), f(dt, {
+                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "popover" && n.selector === "fontSize" ? (u(), f(ht, {
                   key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
                   ref: e.getButtonRef(s.key, n.selector),
@@ -958,7 +962,7 @@ function Yt(t, o, i, l, r, e) {
                     }, 1032, ["selected", "onClick"]))), 128))
                   ]),
                   _: 1
-                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? Rt((u(), f(E, {
+                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? xt((u(), f(E, {
                   key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
                   ref: e.getButtonRef(s.key, n.selector),
@@ -976,7 +980,7 @@ function Yt(t, o, i, l, r, e) {
                   onClick: (m) => n.onClick()
                 }, {
                   icon: a(() => [
-                    (u(), f(ct(n.icon), {
+                    (u(), f(dt(n.icon), {
                       size: "200",
                       style: O(e.isDefaultFontColor ? {} : { color: r.currentFontColor })
                     }, null, 8, ["style"])),
@@ -994,7 +998,11 @@ function Yt(t, o, i, l, r, e) {
                   ]),
                   _: 2
                 }, 1032, ["active", "tabindex", "aria-label", "data-qa", "onKeydown", "onClick"])), [
-                  [Tt, { message: n.tooltipMessage, placement: "top" }]
+                  [kt, {
+                    message: n.tooltipMessage,
+                    placement: "top",
+                    externalAnchorElement: (M = t.$refs[e.getButtonRef(s.key, n.selector)]) == null ? void 0 : M.$el
+                  }]
                 ]) : n.buttonType === "popover" && n.selector === "variable" ? (u(), f(v, {
                   key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
@@ -1034,7 +1042,7 @@ function Yt(t, o, i, l, r, e) {
                       ]),
                       list: a(({ listProps: h }) => [
                         _("div", B({ ref_for: !0 }, h), [
-                          (u(!0), T(k, null, y(e.filteredCategories, (c, P) => (u(), f(ft, {
+                          (u(!0), T(k, null, y(e.filteredCategories, (c, K) => (u(), f(pt, {
                             key: c.name,
                             heading: c.name,
                             "heading-class": "d-headline--sm-compact d-p8"
@@ -1044,7 +1052,7 @@ function Yt(t, o, i, l, r, e) {
                                 key: c.name + F.name,
                                 role: "option",
                                 "navigation-type": "arrow-keys",
-                                onClick: (jt) => {
+                                onClick: (Gt) => {
                                   e.insertVariable(c.name, F), m();
                                 }
                               }, {
@@ -1053,7 +1061,7 @@ function Yt(t, o, i, l, r, e) {
                                 ]),
                                 _: 2
                               }, 1032, ["onClick"]))), 128)),
-                              P < e.filteredCategories.length - 1 ? (u(), f(ht, { key: 0 })) : D("", !0)
+                              K < e.filteredCategories.length - 1 ? (u(), f(ft, { key: 0 })) : D("", !0)
                             ]),
                             _: 2
                           }, 1032, ["heading"]))), 128))
@@ -1063,11 +1071,11 @@ function Yt(t, o, i, l, r, e) {
                     }, 1032, ["onEscape"])
                   ]),
                   _: 1
-                }, 8, ["tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "button" ? (u(), f(pt, {
+                }, 8, ["tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "button" ? (u(), f(Bt, {
                   key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
                   ref: e.getButtonRef(s.key, n.selector),
-                  "is-active": (q = (M = t.$refs.richTextEditor) == null ? void 0 : M.editor) == null ? void 0 : q.isActive(n.selector),
+                  "is-active": (P = (q = t.$refs.richTextEditor) == null ? void 0 : q.editor) == null ? void 0 : P.isActive(n.selector),
                   "tooltip-message": n.tooltipMessage,
                   "data-qa": n.dataQA,
                   tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
@@ -1089,7 +1097,7 @@ function Yt(t, o, i, l, r, e) {
           gap: "300"
         }, {
           default: a(() => [
-            d(gt, {
+            d(mt, {
               open: r.showLinkInput,
               "show-close-button": !1,
               "data-qa": "dt-recipe-editor-link-input-popover",
@@ -1102,7 +1110,7 @@ function Yt(t, o, i, l, r, e) {
               onOpened: e.updateInput
             }, {
               anchor: a(() => [
-                (u(), f(Bt, {
+                (u(), f(gt, {
                   key: e.linkButton.key,
                   message: e.linkButton.tooltipMessage,
                   placement: "top"
@@ -1126,7 +1134,7 @@ function Yt(t, o, i, l, r, e) {
                         ]
                       }, {
                         icon: a(() => [
-                          (u(), f(ct(e.linkButton.icon), { size: "200" }))
+                          (u(), f(dt(e.linkButton.icon), { size: "200" }))
                         ]),
                         _: 1
                       }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
@@ -1136,7 +1144,7 @@ function Yt(t, o, i, l, r, e) {
                 }, 8, ["message"]))
               ]),
               content: a(() => [
-                _("div", Jt, [
+                _("div", Yt, [
                   _("span", null, I(e.showAddLinkButtonLabels.title), 1),
                   d(A, {
                     modelValue: r.linkInput,
@@ -1206,9 +1214,9 @@ function Yt(t, o, i, l, r, e) {
     }),
     _("div", {
       style: O({ "max-height": i.maxHeight }),
-      class: xt(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
+      class: Ft(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
     }, [
-      d(mt, B({
+      d(Tt, B({
         ref: "richTextEditor",
         modelValue: r.internalInputValue,
         "onUpdate:modelValue": o[5] || (o[5] = (s) => r.internalInputValue = s),
@@ -1243,8 +1251,8 @@ function Yt(t, o, i, l, r, e) {
     ], 6)
   ], 16);
 }
-const Be = /* @__PURE__ */ Ft(Ht, [["render", Yt]]);
+const ge = /* @__PURE__ */ Dt(Jt, [["render", jt]]);
 export {
-  Be as default
+  ge as default
 };
 //# sourceMappingURL=editor.js.map