@dialpad/dialtone-vue 3.208.0 → 3.209.0

package/dist/lib/editor/editor.js

@@ -1,60 +1,61 @@
-import { EDITOR_DEFAULT_FONT_COLOR as Tt, EDITOR_SUPPORTED_LINK_PROTOCOLS as mt, EDITOR_DEFAULT_LINK_PREFIX as gt } from "./editor-constants.js";
-import { addClassStyleAttrs as _t, removeClassStyleAttrs as kt } from "../../common/utils/index.js";
-import It from "./EditorToolbarButton.js";
-import Lt from "./EditorToolbarDropdownButton.js";
-import At from "./EditorToolbarPopoverButton.js";
-import { DtIconFontSize as K, DtIconChevronDown as Et, DtIconBraces as H, DtIconType as J, DtIconSearch as yt, DtIconImage as Y, DtIconLink2 as j, DtIconCodeBlock as G, DtIconQuote as X, DtIconAlignJustify as Z, DtIconAlignRight as W, DtIconAlignCenter as $, DtIconAlignLeft as tt, DtIconListOrdered as et, DtIconListBullet as ot, DtIconStrikethrough as it, DtIconUnderline as nt, DtIconItalic as rt, DtIconBold as st, DtIconQuickReply as lt } from "@dialpad/dialtone-icons/vue3";
-import { DialtoneLocalization as wt } from "../../localization/index.js";
-import { resolveComponent as f, resolveDirective as bt, openBlock as u, createElementBlock as g, mergeProps as B, createVNode as d, withCtx as a, Fragment as _, renderList as E, createBlock as p, createElementVNode as k, normalizeStyle as D, createTextVNode as w, toDisplayString as I, withDirectives as Ot, withKeys as b, withModifiers as L, createCommentVNode as F, resolveDynamicComponent as Ct } from "vue";
-import { _ as Rt } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import xt from "../combobox/combobox.js";
-import Dt from "../tooltip/tooltip.js";
-import Ft from "../input/input.js";
-import St from "../stack/stack.js";
-import vt from "../popover/popover.js";
-import Nt from "../button/button.js";
-import Ut from "../rich-text-editor/rich-text-editor.js";
-import Vt from "../list-item/list-item.js";
-import Qt from "../dropdown/dropdown-separator.js";
-import Mt from "../list-item-group/list-item-group.js";
-import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as qt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as zt } from "../rich-text-editor/rich-text-editor-constants.js";
-const Pt = {
+import { EDITOR_DEFAULT_FONT_COLOR as K, EDITOR_SUPPORTED_LINK_PROTOCOLS as _t, EDITOR_DEFAULT_LINK_PREFIX as kt } 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 _, renderList as y, createBlock as f, createElementVNode as k, 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 Ft } from "vue";
+import { _ as xt } 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 = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeEditor",
   components: {
-    DtListItemGroup: Mt,
-    DtDropdownSeparator: Qt,
-    DtListItem: Vt,
-    DtRichTextEditor: Ut,
-    DtButton: Nt,
-    DtPopover: vt,
-    DtStack: St,
-    DtInput: Ft,
-    DtTooltip: Dt,
-    DtCombobox: xt,
-    EditorToolbarButton: It,
-    EditorToolbarDropdownButton: Lt,
-    EditorToolbarPopoverButton: At,
-    DtIconQuickReply: lt,
-    DtIconBold: st,
-    DtIconItalic: rt,
-    DtIconUnderline: nt,
-    DtIconStrikethrough: it,
-    DtIconListBullet: ot,
-    DtIconListOrdered: et,
-    DtIconAlignLeft: tt,
-    DtIconAlignCenter: $,
-    DtIconAlignRight: W,
-    DtIconAlignJustify: Z,
-    DtIconQuote: X,
-    DtIconCodeBlock: G,
-    DtIconLink2: j,
-    DtIconImage: Y,
-    DtIconSearch: yt,
-    DtIconType: J,
-    DtIconBraces: H,
-    DtIconChevronDown: Et,
-    DtIconFontSize: K
+    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
   },
   mixins: [],
   inheritAttrs: !1,
@@ -106,7 +107,7 @@ const Pt = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? zt.includes(t) : !0;
+        return typeof t == "string" ? Kt.includes(t) : !0;
       }
     },
     /**
@@ -309,6 +310,13 @@ const Pt = {
     allowTables: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Allow image resizing
+     */
+    allowImageResize: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
@@ -368,7 +376,7 @@ const Pt = {
       linkInput: "",
       currentButtonRefIndex: 0,
       variableSearchValue: "",
-      i18n: new wt()
+      i18n: new Ct()
     };
   },
   computed: {
@@ -376,7 +384,7 @@ const Pt = {
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return qt[2];
+      return Pt[2];
     },
     flattenedVariableItems() {
       return this.variableCategories ? this.variableCategories.reduce((t, o) => t.concat(o.items || []), []) : [];
@@ -392,8 +400,8 @@ const Pt = {
     },
     orderedRefs() {
       const t = this.buttonGroups.reduce((function(o, i) {
-        return i.buttonGroup.forEach((s) => {
-          o.push(this.getButtonRef(i.key, s.selector));
+        return i.buttonGroup.forEach((l) => {
+          o.push(this.getButtonRef(i.key, l.selector));
         }, this), o;
       }).bind(this), []);
       return t.push(this.getButtonRef("custom", "link")), t;
@@ -418,7 +426,7 @@ const Pt = {
           buttonType: "button",
           label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           selector: "quickReplies",
-          icon: lt,
+          icon: ut,
           dataQA: "dt-recipe-editor-quick-replies-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           onClick: this.onQuickRepliesClick
@@ -431,7 +439,7 @@ const Pt = {
           showBtn: this.showFontStyleButton,
           buttonType: "popover",
           selector: "fontStyle",
-          icon: J,
+          icon: j,
           dataQA: "dt-recipe-editor-font-style-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL")
         },
@@ -439,7 +447,7 @@ const Pt = {
           showBtn: this.showFontSizeButton,
           buttonType: "popover",
           selector: "fontSize",
-          icon: K,
+          icon: J,
           dataQA: "dt-recipe-editor-font-size-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL")
         },
@@ -447,6 +455,7 @@ const Pt = {
           showBtn: this.showFontColorButton,
           buttonType: "custom",
           selector: "fontColor",
+          icon: H,
           dataQA: "dt-recipe-editor-font-color-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL"),
           onClick: this.onColorPickerButtonClick
@@ -455,7 +464,7 @@ const Pt = {
           showBtn: this.showBoldButton,
           buttonType: "button",
           selector: "bold",
-          icon: st,
+          icon: at,
           dataQA: "dt-recipe-editor-bold-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
           onClick: this.onBoldTextToggle
@@ -464,7 +473,7 @@ const Pt = {
           showBtn: this.showItalicsButton,
           buttonType: "button",
           selector: "italic",
-          icon: rt,
+          icon: st,
           dataQA: "dt-recipe-editor-italics-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
           onClick: this.onItalicTextToggle
@@ -473,7 +482,7 @@ const Pt = {
           showBtn: this.showUnderlineButton,
           buttonType: "button",
           selector: "underline",
-          icon: nt,
+          icon: lt,
           dataQA: "dt-recipe-editor-underline-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
           onClick: this.onUnderlineTextToggle
@@ -482,7 +491,7 @@ const Pt = {
           showBtn: this.showStrikeButton,
           buttonType: "button",
           selector: "strike",
-          icon: it,
+          icon: rt,
           dataQA: "dt-recipe-editor-strike-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
           onClick: this.onStrikethroughTextToggle
@@ -495,7 +504,7 @@ const Pt = {
           showBtn: this.showAlignLeftButton,
           buttonType: "button",
           selector: { textAlign: "left" },
-          icon: tt,
+          icon: ot,
           dataQA: "dt-recipe-editor-align-left-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("left")
@@ -504,7 +513,7 @@ const Pt = {
           showBtn: this.showAlignCenterButton,
           buttonType: "button",
           selector: { textAlign: "center" },
-          icon: $,
+          icon: et,
           dataQA: "dt-recipe-editor-align-center-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("center")
@@ -513,7 +522,7 @@ const Pt = {
           showBtn: this.showAlignRightButton,
           buttonType: "button",
           selector: { textAlign: "right" },
-          icon: W,
+          icon: tt,
           dataQA: "dt-recipe-editor-align-right-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("right")
@@ -522,7 +531,7 @@ const Pt = {
           showBtn: this.showAlignJustifyButton,
           buttonType: "button",
           selector: { textAlign: "justify" },
-          icon: Z,
+          icon: $,
           dataQA: "dt-recipe-editor-align-justify-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("justify")
@@ -535,7 +544,7 @@ const Pt = {
           showBtn: this.showListItemsButton,
           buttonType: "button",
           selector: "bulletList",
-          icon: ot,
+          icon: nt,
           dataQA: "dt-recipe-editor-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),
           onClick: this.onBulletListToggle
@@ -544,7 +553,7 @@ const Pt = {
           showBtn: this.showOrderedListButton,
           buttonType: "button",
           selector: "orderedList",
-          icon: et,
+          icon: it,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
           onClick: this.onOrderedListToggle
@@ -557,7 +566,7 @@ const Pt = {
           showBtn: this.showQuoteButton,
           buttonType: "button",
           selector: "blockquote",
-          icon: X,
+          icon: W,
           dataQA: "dt-recipe-editor-blockquote-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
           onClick: this.onBlockquoteToggle
@@ -566,7 +575,7 @@ const Pt = {
           showBtn: this.showCodeBlockButton,
           buttonType: "button",
           selector: "codeBlock",
-          icon: G,
+          icon: Z,
           dataQA: "dt-recipe-editor-code-block-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
           onClick: this.onCodeBlockToggle
@@ -575,7 +584,7 @@ const Pt = {
           showBtn: this.showInlineImageButton,
           buttonType: "button",
           selector: "image",
-          icon: Y,
+          icon: G,
           dataQA: "dt-recipe-editor-inline-image-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
           // Handle getting image
@@ -585,7 +594,7 @@ const Pt = {
           showBtn: this.showVariableButton,
           buttonType: "popover",
           selector: "variable",
-          icon: H,
+          icon: Y,
           dataQA: "dt-recipe-editor-variable-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
         }
@@ -596,7 +605,7 @@ const Pt = {
         showBtn: this.showAddLink.showAddLinkButton,
         buttonType: "custom",
         selector: "link",
-        icon: j,
+        icon: X,
         dataQA: "dt-recipe-editor-add-link-btn",
         tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
         onClick: this.openLinkInput
@@ -628,6 +637,9 @@ const Pt = {
     colorPickerInput() {
       return document.querySelector(".colorPickerInput");
     },
+    isDefaultFontColor() {
+      return this.currentFontColor === K;
+    },
     actionBarBtn() {
       var o, i;
       const t = ((i = (o = this.$refs[this.orderedRefs[this.currentButtonRefIndex]][0]) == null ? void 0 : o.$refs) == null ? void 0 : i.buttonRef) || this.$refs[this.orderedRefs[this.currentButtonRefIndex]];
@@ -640,26 +652,26 @@ const Pt = {
     }
   },
   methods: {
-    removeClassStyleAttrs: kt,
-    addClassStyleAttrs: _t,
+    removeClassStyleAttrs: Lt,
+    addClassStyleAttrs: It,
     onInputFocus(t) {
       t == null || t.stopPropagation();
     },
     removeLink() {
-      var t, o, i, s, r;
-      (r = (s = (i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.chain()) == null ? void 0 : i.focus()) == null ? void 0 : s.unsetLink()) == null || r.run(), this.closeLinkInput();
+      var t, o, i, l, r;
+      (r = (l = (i = (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : o.chain()) == null ? void 0 : i.focus()) == null ? void 0 : l.unsetLink()) == null || r.run(), this.closeLinkInput();
     },
     setLink(t) {
-      var r, e, T;
+      var r, e, m;
       const o = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor;
       if (t == null || t.preventDefault(), t == null || t.stopPropagation(), !this.linkInput) {
         this.removeLink();
         return;
       }
-      mt.find((A) => A.test(this.linkInput)) || (this.linkInput = `${gt}${this.linkInput}`);
-      const s = (T = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : T.selection;
-      s.anchor === s.head ? o.chain().focus().insertContentAt(
-        s.anchor,
+      _t.find((A) => A.test(this.linkInput)) || (this.linkInput = `${kt}${this.linkInput}`);
+      const l = (m = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : m.selection;
+      l.anchor === l.head ? o.chain().focus().insertContentAt(
+        l.anchor,
         `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
       ).run() : o.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run(), this.closeLinkInput();
     },
@@ -667,10 +679,10 @@ const Pt = {
       this.showLinkInput = !0;
     },
     updateInput(t) {
-      var o, i, s;
+      var o, i, l;
       if (!t)
         return this.closeLinkInput();
-      this.linkInput = (s = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : s.href;
+      this.linkInput = (l = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : l.href;
     },
     closeLinkInput() {
       var t;
@@ -693,9 +705,9 @@ const Pt = {
       (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
     },
     onTextAlign(t) {
-      var o, i, s, r;
+      var o, i, l, r;
       if ((i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) != null && i.isActive({ textAlign: t }))
-        return (s = this.$refs.richTextEditor) == null ? void 0 : s.editor.chain().focus().unsetTextAlign().run();
+        return (l = this.$refs.richTextEditor) == null ? void 0 : l.editor.chain().focus().unsetTextAlign().run();
       (r = this.$refs.richTextEditor) == null || r.editor.chain().focus().setTextAlign(t).run();
     },
     onBulletListToggle() {
@@ -778,24 +790,24 @@ const Pt = {
     shiftButtonRefIndex(t) {
       const o = this.actionBarBtn, i = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
       this.currentButtonRefIndex = i >= 0 ? i : this.orderedRefs.length + i;
-      const s = this.actionBarBtn;
-      o.$el.blur(), s.$el.focus();
+      const l = this.actionBarBtn;
+      o.$el.blur(), l.$el.focus();
     },
     onFontStyleSelect(t) {
-      var o, i, s, r, e, T;
-      t ? (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontFamily(t).run() : (r = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor) == null || r.chain().focus().unsetFontFamily().run(), (T = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null || T.commands.focus();
+      var o, i, l, r, e, m;
+      t ? (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontFamily(t).run() : (r = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor) == null || r.chain().focus().unsetFontFamily().run(), (m = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null || m.commands.focus();
     },
     isCurrentFontFamily(t) {
-      var o, i, s, r, e;
-      return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontFamily: t }) : !((s = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && s.fontFamily);
+      var o, i, l, r, e;
+      return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontFamily: t }) : !((l = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && l.fontFamily);
     },
     onFontSizeSelect(t) {
-      var o, i, s, r;
-      (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontSize(t).run(), (r = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor) == null || r.commands.focus();
+      var o, i, l, r;
+      (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setFontSize(t).run(), (r = (l = this.$refs.richTextEditor) == null ? void 0 : l.editor) == null || r.commands.focus();
     },
     isCurrentFontSize(t) {
-      var o, i, s, r, e;
-      return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontSize: t }) : !((s = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && s.fontSize);
+      var o, i, l, r, e;
+      return t ? (e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : e.isActive("textStyle", { fontSize: t }) : !((l = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("textStyle")) != null && l.fontSize);
     },
     getFilteredItemsForCategory(t) {
       const o = this.variableSearchValue.toLowerCase();
@@ -805,60 +817,60 @@ const Pt = {
     },
     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) || Tt;
+      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;
     },
     onColorPickerButtonClick() {
       var t;
       (t = this.colorPickerInput) == null || t.click();
     },
     onColorPickerInput(t) {
-      var o, i, s, r;
-      (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null || i.chain().focus().setColor(t).run(), (r = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor) == null || r.commands.focus();
+      var o, i, l, r;
+      (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();
     }
   }
-}, Kt = { class: "d-recipe-editor__popover-content" };
-function Ht(t, o, i, s, r, e) {
-  const T = f("dt-icon-search"), A = f("dt-input"), C = f("dt-list-item"), S = f("dt-combobox"), v = f("editor-toolbar-popover-button"), at = f("editor-toolbar-dropdown-button"), y = f("dt-button"), ut = f("dt-dropdown-separator"), ct = f("dt-list-item-group"), dt = f("editor-toolbar-button"), O = f("dt-stack"), ht = f("dt-tooltip"), ft = f("dt-popover"), pt = f("dt-rich-text-editor"), Bt = bt("dt-tooltip");
-  return u(), g("div", B({ class: "d-recipe-editor" }, e.addClassStyleAttrs(t.$attrs), {
+}, Jt = { class: "d-recipe-editor__popover-content" };
+function Yt(t, o, i, l, r, e) {
+  const m = 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"), mt = p("dt-popover"), gt = p("dt-rich-text-editor"), Tt = Ot("dt-tooltip");
+  return u(), T("div", B({ class: "d-recipe-editor" }, e.addClassStyleAttrs(t.$attrs), {
     "data-qa": "dt-recipe-editor",
     role: "presentation",
-    onClick: o[7] || (o[7] = (l) => t.$refs.richTextEditor.focusEditor())
+    onClick: o[7] || (o[7] = (s) => t.$refs.richTextEditor.focusEditor())
   }), [
-    d(O, {
+    d(C, {
       class: "d-recipe-editor__top-bar",
       direction: "row",
       gap: "450"
     }, {
       default: a(() => [
-        (u(!0), g(_, null, E(e.buttonGroups, (l) => (u(), p(O, {
-          key: l.key,
+        (u(!0), T(_, null, y(e.buttonGroups, (s) => (u(), f(C, {
+          key: s.key,
           direction: "row",
           gap: "300"
         }, {
           default: a(() => [
-            (u(!0), g(_, null, E(l.buttonGroup, (n) => {
-              var R, N, U, V, Q, M, q, z;
-              return u(), g(_, null, [
-                n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), p(v, {
-                  key: e.getButtonKey(l.key, n.selector),
+            (u(!0), T(_, null, y(s.buttonGroup, (n) => {
+              var F, N, U, V, z, Q, M, q;
+              return u(), T(_, null, [
+                n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), f(v, {
+                  key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
-                  ref: e.getButtonRef(l.key, n.selector),
-                  "is-active": (N = (R = t.$refs.richTextEditor) == null ? void 0 : R.editor) == null ? void 0 : N.isActive(n.selector),
+                  ref: e.getButtonRef(s.key, n.selector),
+                  "is-active": (N = (F = t.$refs.richTextEditor) == null ? void 0 : F.editor) == null ? void 0 : N.isActive(n.selector),
                   "tooltip-message": n.tooltipMessage,
                   "data-qa": n.dataQA,
                   "popover-data-qa": "dt-recipe-editor-font-style-input-popover",
-                  tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
+                  tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
                   icon: n.icon,
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  content: a(({ close: m }) => [
+                  content: a(({ close: g }) => [
                     d(S, {
                       label: "",
                       "label-visible": !1,
                       "show-list": !0,
                       "click-on-select": !0,
-                      onEscape: (h) => m()
+                      onEscape: (h) => g()
                     }, {
                       input: a(({ inputProps: h }) => [
                         d(A, B({ ref_for: !0 }, h, {
@@ -871,21 +883,21 @@ function Ht(t, o, i, s, r, e) {
                           role: "menuitem"
                         }), {
                           leftIcon: a(({ iconSize: c }) => [
-                            d(T, { size: c }, null, 8, ["size"])
+                            d(m, { size: c }, null, 8, ["size"])
                           ]),
                           _: 1
                         }, 16, ["modelValue", "placeholder"])
                       ]),
                       list: a(({ listProps: h }) => [
                         k("ul", B({ ref_for: !0 }, h), [
-                          (u(!0), g(_, null, E(e.filteredFontStyles, (c) => (u(), p(C, {
+                          (u(!0), T(_, null, y(e.filteredFontStyles, (c) => (u(), f(R, {
                             key: c.name,
                             selected: e.isCurrentFontFamily(c.value),
-                            style: D({ fontFamily: c.value || "inherit" }),
+                            style: O({ fontFamily: c.value || "inherit" }),
                             role: "option",
                             "navigation-type": "arrow-keys",
                             onClick: (P) => {
-                              m(), e.onFontStyleSelect(c.value);
+                              g(), e.onFontStyleSelect(c.value);
                             }
                           }, {
                             default: a(() => [
@@ -899,61 +911,65 @@ function Ht(t, o, i, s, r, e) {
                     }, 1032, ["onEscape"])
                   ]),
                   _: 1
-                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "popover" && n.selector === "fontSize" ? (u(), p(at, {
-                  key: e.getButtonKey(l.key, n.selector),
+                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "popover" && n.selector === "fontSize" ? (u(), f(dt, {
+                  key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
-                  ref: e.getButtonRef(l.key, n.selector),
+                  ref: e.getButtonRef(s.key, n.selector),
                   "is-active": (V = (U = t.$refs.richTextEditor) == null ? void 0 : U.editor) == null ? void 0 : V.isActive(n.selector),
                   "tooltip-message": n.tooltipMessage,
                   "data-qa": n.dataQA,
                   "dropdown-data-qa": "dt-recipe-editor-font-size-input-popover",
-                  tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
+                  tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
                   icon: n.icon,
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  list: a(({ close: m }) => [
-                    (u(!0), g(_, null, E(i.fontSizes, (h) => (u(), p(C, {
+                  list: a(({ close: g }) => [
+                    (u(!0), T(_, null, y(i.fontSizes, (h) => (u(), f(R, {
                       key: h.name,
                       selected: e.isCurrentFontSize(h.value),
                       role: "menuitem",
                       "navigation-type": "arrow-keys",
                       onClick: (c) => {
-                        m(), e.onFontSizeSelect(h.value, c);
+                        g(), e.onFontSizeSelect(h.value, c);
                       }
                     }, {
                       default: a(() => [
                         k("span", {
-                          style: D({ fontSize: h.value })
+                          style: O({ fontSize: h.value })
                         }, I(h.name), 5)
                       ]),
                       _: 2
                     }, 1032, ["selected", "onClick"]))), 128))
                   ]),
                   _: 1
-                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? Ot((u(), p(y, {
-                  key: e.getButtonKey(l.key, n.selector),
+                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "custom" && n.selector === "fontColor" ? Rt((u(), f(E, {
+                  key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
-                  ref: e.getButtonRef(l.key, n.selector),
+                  ref: e.getButtonRef(s.key, n.selector),
                   kind: "muted",
                   importance: "clear",
                   size: "xs",
-                  active: (M = (Q = t.$refs.richTextEditor) == null ? void 0 : Q.editor) == null ? void 0 : M.isActive(n.selector),
-                  tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
+                  active: (Q = (z = t.$refs.richTextEditor) == null ? void 0 : z.editor) == null ? void 0 : Q.isActive(n.selector),
+                  tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
                   "aria-label": n.tooltipMessage,
                   "data-qa": n.dataQA,
                   onKeydown: [
                     b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
                     b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
                   ],
-                  onClick: (m) => n.onClick()
+                  onClick: (g) => n.onClick()
                 }, {
-                  default: a(() => [
+                  icon: a(() => [
+                    (u(), f(ct(n.icon), {
+                      size: "200",
+                      style: O(e.isDefaultFontColor ? {} : { color: r.currentFontColor })
+                    }, null, 8, ["style"])),
                     d(A, {
                       value: r.currentFontColor,
-                      "root-class": "d-w12 d-h12 d-my1",
-                      "input-class": "colorPickerInput d-w100p d-h100p d-p0 d-bar0 d-c-pointer",
-                      "input-wrapper-class": "d-w12 d-h12 d-bar2 d-ba-none",
+                      "root-class": "d-w0 d-h0 d-of-hidden",
+                      "input-class": "colorPickerInput d-w0 d-h0 d-p0 d-bar0",
+                      "input-wrapper-class": "d-w0 d-h0 d-ba-none",
                       size: "sm",
                       type: "color",
                       onInput: e.onColorPickerInput,
@@ -961,29 +977,29 @@ function Ht(t, o, i, s, r, e) {
                       }, ["stop"]))
                     }, null, 8, ["value", "onInput"])
                   ]),
-                  _: 1
-                }, 8, ["active", "tabindex", "aria-label", "data-qa", "onKeydown", "onClick"])), [
-                  [Bt, { message: n.tooltipMessage, placement: "top" }]
-                ]) : n.buttonType === "popover" && n.selector === "variable" ? (u(), p(v, {
-                  key: e.getButtonKey(l.key, n.selector),
+                  _: 2
+                }, 1032, ["active", "tabindex", "aria-label", "data-qa", "onKeydown", "onClick"])), [
+                  [Tt, { message: n.tooltipMessage, placement: "top" }]
+                ]) : n.buttonType === "popover" && n.selector === "variable" ? (u(), f(v, {
+                  key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
-                  ref: e.getButtonRef(l.key, n.selector),
+                  ref: e.getButtonRef(s.key, n.selector),
                   "is-active": !1,
                   "tooltip-message": n.tooltipMessage,
                   "data-qa": n.dataQA,
                   "popover-data-qa": "dt-recipe-editor-variable-popover",
-                  tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
+                  tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
                   icon: n.icon,
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  content: a(({ close: m }) => [
+                  content: a(({ close: g }) => [
                     d(S, {
                       label: "",
                       "label-visible": !1,
                       "show-list": !0,
                       "click-on-select": !0,
-                      onEscape: (h) => m()
+                      onEscape: (h) => g()
                     }, {
                       input: a(({ inputProps: h }) => [
                         d(A, B({ ref_for: !0 }, h, {
@@ -996,25 +1012,25 @@ function Ht(t, o, i, s, r, e) {
                           role: "menuitem"
                         }), {
                           leftIcon: a(({ iconSize: c }) => [
-                            d(T, { size: c }, null, 8, ["size"])
+                            d(m, { size: c }, null, 8, ["size"])
                           ]),
                           _: 1
                         }, 16, ["modelValue", "placeholder"])
                       ]),
                       list: a(({ listProps: h }) => [
                         k("div", B({ ref_for: !0 }, h), [
-                          (u(!0), g(_, null, E(e.filteredCategories, (c, P) => (u(), p(ct, {
+                          (u(!0), T(_, null, y(e.filteredCategories, (c, P) => (u(), f(ft, {
                             key: c.name,
                             heading: c.name,
                             "heading-class": "d-headline--sm-compact d-p8"
                           }, {
                             default: a(() => [
-                              (u(!0), g(_, null, E(e.getFilteredItemsForCategory(c), (x) => (u(), p(C, {
+                              (u(!0), T(_, null, y(e.getFilteredItemsForCategory(c), (x) => (u(), f(R, {
                                 key: c.name + x.name,
                                 role: "option",
                                 "navigation-type": "arrow-keys",
-                                onClick: (Jt) => {
-                                  e.insertVariable(c.name, x), m();
+                                onClick: (jt) => {
+                                  e.insertVariable(c.name, x), g();
                                 }
                               }, {
                                 default: a(() => [
@@ -1022,7 +1038,7 @@ function Ht(t, o, i, s, r, e) {
                                 ]),
                                 _: 2
                               }, 1032, ["onClick"]))), 128)),
-                              P < e.filteredCategories.length - 1 ? (u(), p(ut, { key: 0 })) : F("", !0)
+                              P < e.filteredCategories.length - 1 ? (u(), f(ht, { key: 0 })) : D("", !0)
                             ]),
                             _: 2
                           }, 1032, ["heading"]))), 128))
@@ -1032,33 +1048,33 @@ function Ht(t, o, i, s, r, e) {
                     }, 1032, ["onEscape"])
                   ]),
                   _: 1
-                }, 8, ["tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "button" ? (u(), p(dt, {
-                  key: e.getButtonKey(l.key, n.selector),
+                }, 8, ["tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "button" ? (u(), f(pt, {
+                  key: e.getButtonKey(s.key, n.selector),
                   ref_for: !0,
-                  ref: e.getButtonRef(l.key, n.selector),
-                  "is-active": (z = (q = t.$refs.richTextEditor) == null ? void 0 : q.editor) == null ? void 0 : z.isActive(n.selector),
+                  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),
                   "tooltip-message": n.tooltipMessage,
                   "data-qa": n.dataQA,
-                  tabindex: e.canFocus(e.getButtonRef(l.key, n.selector)) ? 0 : -1,
+                  tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
                   icon: n.icon,
                   label: n.label,
                   "on-click": n.onClick,
                   onShiftFocusRight: e.shiftActionBarFocusRight,
                   onShiftFocusLeft: e.shiftActionBarFocusLeft
-                }, null, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "label", "on-click", "onShiftFocusRight", "onShiftFocusLeft"])) : F("", !0)
+                }, null, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "label", "on-click", "onShiftFocusRight", "onShiftFocusLeft"])) : D("", !0)
               ], 64);
             }), 256)),
             o[8] || (o[8] = k("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
           ]),
           _: 2
         }, 1024))), 128)),
-        e.linkButton.showBtn ? (u(), p(O, {
+        e.linkButton.showBtn ? (u(), f(C, {
           key: 0,
           direction: "row",
           gap: "300"
         }, {
           default: a(() => [
-            d(ft, {
+            d(mt, {
               open: r.showLinkInput,
               "show-close-button": !1,
               "data-qa": "dt-recipe-editor-link-input-popover",
@@ -1071,31 +1087,31 @@ function Ht(t, o, i, s, r, e) {
               onOpened: e.updateInput
             }, {
               anchor: a(() => [
-                (u(), p(ht, {
+                (u(), f(Bt, {
                   key: e.linkButton.key,
                   message: e.linkButton.tooltipMessage,
                   placement: "top"
                 }, {
                   anchor: a(() => {
-                    var l, n;
+                    var s, n;
                     return [
-                      d(y, {
+                      d(E, {
                         ref: e.getButtonRef("custom", "link"),
-                        active: (n = (l = t.$refs.richTextEditor) == null ? void 0 : l.editor) == null ? void 0 : n.isActive(e.linkButton.selector),
+                        active: (n = (s = t.$refs.richTextEditor) == null ? void 0 : s.editor) == null ? void 0 : n.isActive(e.linkButton.selector),
                         "aria-label": e.linkButton.tooltipMessage,
                         "data-qa": e.linkButton.dataQA,
                         tabindex: e.canFocus(e.getButtonRef("custom", "link")) ? 0 : -1,
                         importance: "clear",
                         kind: "muted",
                         size: "xs",
-                        onClick: o[3] || (o[3] = (R) => e.linkButton.onClick()),
+                        onClick: o[3] || (o[3] = (F) => e.linkButton.onClick()),
                         onKeydown: [
                           b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
                           b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
                         ]
                       }, {
                         icon: a(() => [
-                          (u(), p(Ct(e.linkButton.icon), { size: "200" }))
+                          (u(), f(ct(e.linkButton.icon), { size: "200" }))
                         ]),
                         _: 1
                       }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
@@ -1105,11 +1121,11 @@ function Ht(t, o, i, s, r, e) {
                 }, 8, ["message"]))
               ]),
               content: a(() => [
-                k("div", Kt, [
+                k("div", Jt, [
                   k("span", null, I(e.showAddLinkButtonLabels.title), 1),
                   d(A, {
                     modelValue: r.linkInput,
-                    "onUpdate:modelValue": o[4] || (o[4] = (l) => r.linkInput = l),
+                    "onUpdate:modelValue": o[4] || (o[4] = (s) => r.linkInput = s),
                     "input-aria-label": e.showAddLinkButtonLabels["aria-label"],
                     placeholder: i.setLinkPlaceholder,
                     "data-qa": "dt-recipe-editor-link-input",
@@ -1124,13 +1140,13 @@ function Ht(t, o, i, s, r, e) {
                 ])
               ]),
               footerContent: a(() => [
-                d(O, {
+                d(C, {
                   direction: "row",
                   gap: "300",
                   class: "d-recipe-editor__popover-footer"
                 }, {
                   default: a(() => [
-                    d(y, B({
+                    d(E, B({
                       "data-qa": "dt-recipe-editor-remove-link-btn",
                       importance: "clear",
                       kind: "muted",
@@ -1141,7 +1157,7 @@ function Ht(t, o, i, s, r, e) {
                       ]),
                       _: 1
                     }, 16, ["onClick"]),
-                    d(y, B({
+                    d(E, B({
                       "data-qa": "dt-recipe-editor-set-link-cancel-btn",
                       importance: "clear",
                       kind: "muted",
@@ -1152,7 +1168,7 @@ function Ht(t, o, i, s, r, e) {
                       ]),
                       _: 1
                     }, 16, ["onClick"]),
-                    d(y, B({
+                    d(E, B({
                       "data-qa": "dt-recipe-editor-set-link-confirm-btn",
                       size: "sm"
                     }, e.confirmSetLinkButtonLabels, { onClick: e.setLink }), {
@@ -1169,18 +1185,18 @@ function Ht(t, o, i, s, r, e) {
             }, 8, ["open", "onClick", "onOpened"])
           ]),
           _: 1
-        })) : F("", !0)
+        })) : D("", !0)
       ]),
       _: 1
     }),
     k("div", {
-      style: D({ "max-height": i.maxHeight }),
-      class: "d-recipe-editor__content"
+      style: O({ "max-height": i.maxHeight }),
+      class: Ft(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
     }, [
-      d(pt, B({
+      d(gt, B({
         ref: "richTextEditor",
         modelValue: r.internalInputValue,
-        "onUpdate:modelValue": o[5] || (o[5] = (l) => r.internalInputValue = l),
+        "onUpdate:modelValue": o[5] || (o[5] = (s) => r.internalInputValue = s),
         "allow-font-color": !0,
         "allow-font-family": !0,
         "allow-inline-images": !0,
@@ -1198,19 +1214,20 @@ function Ht(t, o, i, s, r, e) {
         placeholder: i.placeholder,
         "use-div-tags": i.useDivTags,
         "allow-tables": i.allowTables,
+        "allow-image-resize": i.allowImageResize,
         "data-qa": "dt-rich-text-editor"
       }, e.removeClassStyleAttrs(t.$attrs), {
         onTextInput: e.onTextInput,
         onBlur: e.onBlur,
         onFocus: e.onFocus,
-        onInput: o[6] || (o[6] = (l) => e.onInput(l)),
+        onInput: o[6] || (o[6] = (s) => e.onInput(s)),
         onSelected: e.onSelected
-      }), null, 16, ["modelValue", "allow-font-size", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "onTextInput", "onBlur", "onFocus", "onSelected"])
-    ], 4)
+      }), null, 16, ["modelValue", "allow-font-size", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "allow-image-resize", "onTextInput", "onBlur", "onFocus", "onSelected"])
+    ], 6)
   ], 16);
 }
-const fe = /* @__PURE__ */ Rt(Pt, [["render", Ht]]);
+const Be = /* @__PURE__ */ xt(Ht, [["render", Yt]]);
 export {
-  fe as default
+  Be as default
 };
 //# sourceMappingURL=editor.js.map