@dialpad/dialtone-vue 3.207.0 → 3.208.0

package/dist/lib/editor/editor.js

@@ -1,49 +1,60 @@
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS as Z, EDITOR_DEFAULT_LINK_PREFIX as tt } from "./editor-constants.js";
-import { addClassStyleAttrs as et, removeClassStyleAttrs as it } from "../../common/utils/index.js";
-import { DtIconSearch as ot, DtIconBraces as y, DtIconImage as x, DtIconLink2 as N, DtIconCodeBlock as v, DtIconQuote as S, DtIconAlignJustify as F, DtIconAlignRight as U, DtIconAlignCenter as V, DtIconAlignLeft as M, DtIconListOrdered as Q, DtIconListBullet as q, DtIconStrikethrough as K, DtIconUnderline as P, DtIconItalic as z, DtIconBold as G, DtIconQuickReply as H } from "@dialpad/dialtone-icons/vue3";
-import { DialtoneLocalization as nt } from "../../localization/index.js";
-import { resolveComponent as h, openBlock as u, createElementBlock as _, mergeProps as f, createVNode as c, withCtx as r, Fragment as w, renderList as O, createBlock as d, withKeys as L, withModifiers as g, createTextVNode as A, toDisplayString as m, resolveDynamicComponent as b, createElementVNode as E, createCommentVNode as D, normalizeStyle as rt } from "vue";
-import { _ as st } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import lt from "../tooltip/tooltip.js";
-import at from "../input/input.js";
-import ut from "../stack/stack.js";
-import ct from "../popover/popover.js";
-import dt from "../button/button.js";
-import ht from "../rich-text-editor/rich-text-editor.js";
-import pt from "../list-item/list-item.js";
-import Bt from "../dropdown/dropdown-separator.js";
-import ft from "../list-item-group/list-item-group.js";
-import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as gt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as mt } from "../rich-text-editor/rich-text-editor-constants.js";
-const kt = {
+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 = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeEditor",
   components: {
-    DtListItemGroup: ft,
-    DtDropdownSeparator: Bt,
-    DtListItem: pt,
-    DtRichTextEditor: ht,
-    DtButton: dt,
-    DtPopover: ct,
-    DtStack: ut,
-    DtInput: at,
-    DtTooltip: lt,
-    DtIconQuickReply: H,
-    DtIconBold: G,
-    DtIconItalic: z,
-    DtIconUnderline: P,
-    DtIconStrikethrough: K,
-    DtIconListBullet: q,
-    DtIconListOrdered: Q,
-    DtIconAlignLeft: M,
-    DtIconAlignCenter: V,
-    DtIconAlignRight: U,
-    DtIconAlignJustify: F,
-    DtIconQuote: S,
-    DtIconCodeBlock: v,
-    DtIconLink2: N,
-    DtIconImage: x,
-    DtIconBraces: y,
-    DtIconSearch: ot
+    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
   },
   mixins: [],
   inheritAttrs: !1,
@@ -95,7 +106,7 @@ const kt = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? mt.includes(t) : !0;
+        return typeof t == "string" ? zt.includes(t) : !0;
       }
     },
     /**
@@ -241,6 +252,50 @@ const kt = {
         showAddLinkButton: !0
       })
     },
+    /**
+     * Show font style button.
+     */
+    showFontStyleButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show font size button.
+     */
+    showFontSizeButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show font color button.
+     */
+    showFontColorButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Available font styles for the font style dropdown.
+     */
+    fontStyles: {
+      type: Array,
+      default: () => [
+        { name: "Arial", value: null },
+        // arial is the default font
+        { name: "Georgia", value: "Georgia" },
+        { name: "Helvetica", value: "Helvetica" },
+        { name: "Verdana", value: "Verdana" },
+        { name: "Times New Roman", value: "Times New Roman" }
+      ]
+    },
+    fontSizes: {
+      type: Array,
+      default: () => [
+        { name: "Small", value: "12px" },
+        { name: "Normal", value: "15px" },
+        { name: "Large", value: "24px" },
+        { name: "Huge", value: "36px" }
+      ]
+    },
     /**
      * Use div tags instead of paragraph tags to show text
      */
@@ -307,11 +362,13 @@ const kt = {
       linkOptions: {
         class: "d-recipe-editor__link"
       },
+      currentFontColor: void 0,
       showLinkInput: !1,
+      fontStyleSearch: "",
       linkInput: "",
       currentButtonRefIndex: 0,
       variableSearchValue: "",
-      i18n: new nt()
+      i18n: new wt()
     };
   },
   computed: {
@@ -319,10 +376,10 @@ const kt = {
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return gt[2];
+      return qt[2];
     },
     flattenedVariableItems() {
-      return this.variableCategories ? this.variableCategories.reduce((t, e) => t.concat(e.items || []), []) : [];
+      return this.variableCategories ? this.variableCategories.reduce((t, o) => t.concat(o.items || []), []) : [];
     },
     showingTextFormatButtons() {
       return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
@@ -334,17 +391,17 @@ const kt = {
       return this.showListItemsButton || this.showOrderedListButton;
     },
     orderedRefs() {
-      const t = this.buttonGroups.reduce((function(e, o) {
-        return o.buttonGroup.forEach((l) => {
-          e.push(this.getButtonRef(o.key, l.selector));
-        }, this), e;
+      const t = this.buttonGroups.reduce((function(o, i) {
+        return i.buttonGroup.forEach((s) => {
+          o.push(this.getButtonRef(i.key, s.selector));
+        }, this), o;
       }).bind(this), []);
       return t.push(this.getButtonRef("custom", "link")), t;
     },
     buttonGroups() {
-      const t = this.individualButtons.map((e) => ({
-        key: e.selector,
-        buttonGroup: [e]
+      const t = this.individualButtons.map((o) => ({
+        key: o.selector,
+        buttonGroup: [o]
       }));
       return [
         { key: "new", buttonGroup: this.newButtons },
@@ -352,15 +409,16 @@ const kt = {
         { key: "alignment", buttonGroup: this.alignmentButtons },
         { key: "list", buttonGroup: this.listButtons },
         ...t
-      ].filter((e) => e.buttonGroup.length > 0);
+      ].filter((o) => o.buttonGroup.length > 0);
     },
     newButtons() {
       return [
         {
           showBtn: this.showQuickRepliesButton,
+          buttonType: "button",
           label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           selector: "quickReplies",
-          icon: H,
+          icon: lt,
           dataQA: "dt-recipe-editor-quick-replies-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           onClick: this.onQuickRepliesClick
@@ -369,34 +427,62 @@ const kt = {
     },
     textFormatButtons() {
       return [
+        {
+          showBtn: this.showFontStyleButton,
+          buttonType: "popover",
+          selector: "fontStyle",
+          icon: J,
+          dataQA: "dt-recipe-editor-font-style-btn",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_BUTTON_LABEL")
+        },
+        {
+          showBtn: this.showFontSizeButton,
+          buttonType: "popover",
+          selector: "fontSize",
+          icon: K,
+          dataQA: "dt-recipe-editor-font-size-btn",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL")
+        },
+        {
+          showBtn: this.showFontColorButton,
+          buttonType: "custom",
+          selector: "fontColor",
+          dataQA: "dt-recipe-editor-font-color-btn",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_COLOR_BUTTON_LABEL"),
+          onClick: this.onColorPickerButtonClick
+        },
         {
           showBtn: this.showBoldButton,
+          buttonType: "button",
           selector: "bold",
-          icon: G,
+          icon: st,
           dataQA: "dt-recipe-editor-bold-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
           onClick: this.onBoldTextToggle
         },
         {
           showBtn: this.showItalicsButton,
+          buttonType: "button",
           selector: "italic",
-          icon: z,
+          icon: rt,
           dataQA: "dt-recipe-editor-italics-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
           onClick: this.onItalicTextToggle
         },
         {
           showBtn: this.showUnderlineButton,
+          buttonType: "button",
           selector: "underline",
-          icon: P,
+          icon: nt,
           dataQA: "dt-recipe-editor-underline-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
           onClick: this.onUnderlineTextToggle
         },
         {
           showBtn: this.showStrikeButton,
+          buttonType: "button",
           selector: "strike",
-          icon: K,
+          icon: it,
           dataQA: "dt-recipe-editor-strike-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
           onClick: this.onStrikethroughTextToggle
@@ -407,32 +493,36 @@ const kt = {
       return [
         {
           showBtn: this.showAlignLeftButton,
+          buttonType: "button",
           selector: { textAlign: "left" },
-          icon: M,
+          icon: tt,
           dataQA: "dt-recipe-editor-align-left-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("left")
         },
         {
           showBtn: this.showAlignCenterButton,
+          buttonType: "button",
           selector: { textAlign: "center" },
-          icon: V,
+          icon: $,
           dataQA: "dt-recipe-editor-align-center-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("center")
         },
         {
           showBtn: this.showAlignRightButton,
+          buttonType: "button",
           selector: { textAlign: "right" },
-          icon: U,
+          icon: W,
           dataQA: "dt-recipe-editor-align-right-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("right")
         },
         {
           showBtn: this.showAlignJustifyButton,
+          buttonType: "button",
           selector: { textAlign: "justify" },
-          icon: F,
+          icon: Z,
           dataQA: "dt-recipe-editor-align-justify-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("justify")
@@ -443,16 +533,18 @@ const kt = {
       return [
         {
           showBtn: this.showListItemsButton,
+          buttonType: "button",
           selector: "bulletList",
-          icon: q,
+          icon: ot,
           dataQA: "dt-recipe-editor-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),
           onClick: this.onBulletListToggle
         },
         {
           showBtn: this.showOrderedListButton,
+          buttonType: "button",
           selector: "orderedList",
-          icon: Q,
+          icon: et,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
           onClick: this.onOrderedListToggle
@@ -463,50 +555,53 @@ const kt = {
       return [
         {
           showBtn: this.showQuoteButton,
+          buttonType: "button",
           selector: "blockquote",
-          icon: S,
+          icon: X,
           dataQA: "dt-recipe-editor-blockquote-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
           onClick: this.onBlockquoteToggle
         },
         {
           showBtn: this.showCodeBlockButton,
+          buttonType: "button",
           selector: "codeBlock",
-          icon: v,
+          icon: G,
           dataQA: "dt-recipe-editor-code-block-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
           onClick: this.onCodeBlockToggle
         },
         {
           showBtn: this.showInlineImageButton,
+          buttonType: "button",
           selector: "image",
-          icon: x,
+          icon: Y,
           dataQA: "dt-recipe-editor-inline-image-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
           // Handle getting image
           onClick: this.onInsertInlineImageClick
+        },
+        {
+          showBtn: this.showVariableButton,
+          buttonType: "popover",
+          selector: "variable",
+          icon: H,
+          dataQA: "dt-recipe-editor-variable-btn",
+          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
         }
       ].filter((t) => t.showBtn);
     },
     linkButton() {
       return {
         showBtn: this.showAddLink.showAddLinkButton,
+        buttonType: "custom",
         selector: "link",
-        icon: N,
+        icon: j,
         dataQA: "dt-recipe-editor-add-link-btn",
         tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
         onClick: this.openLinkInput
       };
     },
-    variableButton() {
-      return {
-        showBtn: this.showVariableButton,
-        selector: "variable",
-        icon: y,
-        dataQA: "dt-recipe-editor-variable-btn",
-        tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
-      };
-    },
     confirmSetLinkButtonLabels() {
       return this.i18n.$ta("DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON");
     },
@@ -519,10 +614,24 @@ const kt = {
     showAddLinkButtonLabels() {
       return this.i18n.$ta("DIALTONE_EDITOR_ADD_LINK_BUTTON");
     },
+    filteredFontStyles() {
+      const t = this.fontStyleSearch.toLowerCase();
+      return this.fontStyles.filter(
+        (o) => o.name.toLowerCase().includes(t)
+      );
+    },
     filteredCategories() {
       return this.variableCategories.filter(
         (t) => this.getFilteredItemsForCategory(t).length
       );
+    },
+    colorPickerInput() {
+      return document.querySelector(".colorPickerInput");
+    },
+    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]];
+      return Array.isArray(t) ? t[0] : t;
     }
   },
   watch: {
@@ -531,45 +640,45 @@ const kt = {
     }
   },
   methods: {
-    removeClassStyleAttrs: it,
-    addClassStyleAttrs: et,
+    removeClassStyleAttrs: kt,
+    addClassStyleAttrs: _t,
     onInputFocus(t) {
       t == null || t.stopPropagation();
     },
     removeLink() {
-      var t, e, o, l, s;
-      (s = (l = (o = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : o.focus()) == null ? void 0 : l.unsetLink()) == null || s.run(), this.closeLinkInput();
+      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();
     },
     setLink(t) {
-      var s, i, p;
-      const e = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor;
+      var r, e, T;
+      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;
       }
-      Z.find((k) => k.test(this.linkInput)) || (this.linkInput = `${tt}${this.linkInput}`);
-      const l = (p = (i = e == null ? void 0 : e.view) == null ? void 0 : i.state) == null ? void 0 : p.selection;
-      l.anchor === l.head ? e.chain().focus().insertContentAt(
-        l.anchor,
+      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,
         `<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();
+      ).run() : o.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run(), this.closeLinkInput();
     },
     openLinkInput() {
       this.showLinkInput = !0;
     },
     updateInput(t) {
-      var e, o, l;
+      var o, i, s;
       if (!t)
         return this.closeLinkInput();
-      this.linkInput = (l = (o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : o.getAttributes("link")) == null ? void 0 : l.href;
+      this.linkInput = (s = (i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : s.href;
     },
     closeLinkInput() {
       var t;
       this.showLinkInput = !1, this.linkInput = "", (t = this.$refs.richTextEditor.editor) == null || t.chain().focus();
     },
     onBoldTextToggle() {
-      var t, e;
-      (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null || e.chain().focus().toggleBold().run();
+      var t, o;
+      (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null || o.chain().focus().toggleBold().run();
     },
     onItalicTextToggle() {
       var t;
@@ -584,10 +693,10 @@ const kt = {
       (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
     },
     onTextAlign(t) {
-      var e, o, l, s;
-      if ((o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) != null && o.isActive({ textAlign: t }))
-        return (l = this.$refs.richTextEditor) == null ? void 0 : l.editor.chain().focus().unsetTextAlign().run();
-      (s = this.$refs.richTextEditor) == null || s.editor.chain().focus().setTextAlign(t).run();
+      var o, i, s, 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();
+      (r = this.$refs.richTextEditor) == null || r.editor.chain().focus().setTextAlign(t).run();
     },
     onBulletListToggle() {
       var t;
@@ -607,25 +716,25 @@ const kt = {
     onInsertInlineImageClick() {
       this.$emit("inline-image-click");
     },
-    insertVariable(t, e) {
-      var o;
-      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus().insertVariable({
-        id: e.id,
-        placeholder: e.placeholder || "",
+    insertVariable(t, o) {
+      var i;
+      (i = this.$refs.richTextEditor) == null || i.editor.chain().focus().insertVariable({
+        id: o.id,
+        placeholder: o.placeholder || "",
         altText: ""
       }).run();
     },
     insertInlineImage(t) {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().setImage({ src: t }).run();
+      var o;
+      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus().setImage({ src: t }).run();
     },
     insertInMessageBody(t) {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().insertContent(t).run();
+      var o;
+      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus().insertContent(t).run();
     },
     setCursorPosition(t = null) {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus(t).run();
+      var o;
+      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus(t).run();
     },
     onBlockquoteToggle() {
       var t;
@@ -643,12 +752,15 @@ const kt = {
     onInput(t) {
       this.$emit("input", t), this.$emit("update:modelValue", t);
     },
-    getButtonKey(t, e) {
-      return `${t}-${JSON.stringify(e)}`;
+    onSelected() {
+      this.updateFontColorInput();
+    },
+    getButtonKey(t, o) {
+      return `${t}-${JSON.stringify(o)}`;
     },
     // Unique Button Ref Key to identify ref
-    getButtonRef(t, e) {
-      return `${this.getButtonKey(t, e)}-ref`;
+    getButtonRef(t, o) {
+      return `${this.getButtonKey(t, o)}-ref`;
     },
     /**
      * Determines if an element in the action bar button list is focusable with tab key
@@ -664,202 +776,326 @@ const kt = {
       this.shiftButtonRefIndex(-1);
     },
     shiftButtonRefIndex(t) {
-      const e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], o = Array.isArray(e) ? e[0] : e, l = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
-      this.currentButtonRefIndex = l >= 0 ? l : this.orderedRefs.length + l;
-      const s = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], i = Array.isArray(s) ? s[0] : s;
-      o.$el.blur(), i.$el.focus();
+      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();
+    },
+    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();
+    },
+    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);
+    },
+    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();
+    },
+    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);
     },
     getFilteredItemsForCategory(t) {
-      const e = this.variableSearchValue.toLowerCase();
-      return t.name.toLowerCase().includes(e) ? t.items : t.items.filter(
-        (o) => o.name.toLowerCase().includes(e)
+      const o = this.variableSearchValue.toLowerCase();
+      return t.name.toLowerCase().includes(o) ? t.items : t.items.filter(
+        (i) => i.name.toLowerCase().includes(o)
       );
+    },
+    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;
+    },
+    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();
     }
   }
-}, Tt = { class: "d-recipe-editor__popover-content" };
-function It(t, e, o, l, s, i) {
-  const p = h("dt-button"), k = h("dt-tooltip"), T = h("dt-stack"), j = h("dt-icon-search"), C = h("dt-input"), J = h("dt-list-item"), Y = h("dt-dropdown-separator"), X = h("dt-list-item-group"), R = h("dt-popover"), $ = h("dt-rich-text-editor");
-  return u(), _("div", f({ class: "d-recipe-editor" }, i.addClassStyleAttrs(t.$attrs), {
+}, 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), {
     "data-qa": "dt-recipe-editor",
     role: "presentation",
-    onClick: e[5] || (e[5] = (a) => t.$refs.richTextEditor.focusEditor())
+    onClick: o[7] || (o[7] = (l) => t.$refs.richTextEditor.focusEditor())
   }), [
-    c(T, {
+    d(O, {
       class: "d-recipe-editor__top-bar",
       direction: "row",
       gap: "450"
     }, {
-      default: r(() => [
-        (u(!0), _(w, null, O(i.buttonGroups, (a) => (u(), d(T, {
-          key: a.key,
+      default: a(() => [
+        (u(!0), g(_, null, E(e.buttonGroups, (l) => (u(), p(O, {
+          key: l.key,
           direction: "row",
           gap: "300"
         }, {
-          default: r(() => [
-            (u(!0), _(w, null, O(a.buttonGroup, (n) => (u(), d(k, {
-              key: i.getButtonKey(a.key, n.selector),
-              message: n.tooltipMessage,
-              placement: "top"
-            }, {
-              anchor: r(() => {
-                var I, B;
-                return [
-                  c(p, {
-                    ref_for: !0,
-                    ref: i.getButtonRef(a.key, n.selector),
-                    active: (B = (I = t.$refs.richTextEditor) == null ? void 0 : I.editor) == null ? void 0 : B.isActive(n.selector),
-                    "aria-label": n.tooltipMessage,
-                    "data-qa": n.dataQA,
-                    tabindex: i.canFocus(i.getButtonRef(a.key, n.selector)) ? 0 : -1,
-                    importance: "clear",
-                    kind: "muted",
-                    size: "xs",
-                    onClick: (W) => n.onClick(),
-                    onKeydown: [
-                      L(g(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                      L(g(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
-                    ]
-                  }, {
-                    icon: r(() => [
-                      (u(), d(b(n.icon), { size: "200" }))
-                    ]),
-                    default: r(() => [
-                      A(" " + m(n == null ? void 0 : n.label), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["active", "aria-label", "data-qa", "tabindex", "onClick", "onKeydown"])
-                ];
-              }),
-              _: 2
-            }, 1032, ["message"]))), 128)),
-            e[6] || (e[6] = E("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
-          ]),
-          _: 2
-        }, 1024))), 128)),
-        i.variableButton.showBtn ? (u(), d(T, {
-          key: 0,
-          direction: "row",
-          gap: "300"
-        }, {
-          default: r(() => [
-            c(R, {
-              padding: "small",
-              "navigation-type": "arrow-keys",
-              modal: !1,
-              placement: "bottom-start"
-            }, {
-              anchor: r(({ attrs: a }) => [
-                c(k, {
-                  message: i.variableButton.tooltipMessage,
-                  placement: "top"
+          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),
+                  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),
+                  "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,
+                  icon: n.icon,
+                  onShiftFocusRight: e.shiftActionBarFocusRight,
+                  onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  anchor: r(() => [
-                    c(p, f(a, {
-                      kind: "muted",
-                      size: "xs",
-                      importance: "clear",
-                      "aria-label": i.variableButton.tooltipMessage,
-                      "data-qa": i.variableButton.dataQA,
-                      "label-class": "d-jc-flex-start"
-                    }), {
-                      icon: r(() => [
-                        (u(), d(b(i.variableButton.icon), { size: "200" }))
+                  content: a(({ close: m }) => [
+                    d(S, {
+                      label: "",
+                      "label-visible": !1,
+                      "show-list": !0,
+                      "click-on-select": !0,
+                      onEscape: (h) => m()
+                    }, {
+                      input: a(({ inputProps: h }) => [
+                        d(A, B({ ref_for: !0 }, h, {
+                          modelValue: r.fontStyleSearch,
+                          "onUpdate:modelValue": o[0] || (o[0] = (c) => r.fontStyleSearch = c),
+                          "root-class": "d-p8 d-pb4 d-w216",
+                          type: "search",
+                          placeholder: r.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_SEARCH_PLACEHOLDER"),
+                          size: "sm",
+                          role: "menuitem"
+                        }), {
+                          leftIcon: a(({ iconSize: c }) => [
+                            d(T, { size: c }, null, 8, ["size"])
+                          ]),
+                          _: 1
+                        }, 16, ["modelValue", "placeholder"])
                       ]),
-                      _: 1
-                    }, 16, ["aria-label", "data-qa"])
-                  ]),
-                  _: 2
-                }, 1032, ["message"])
-              ]),
-              content: r(({ close: a }) => [
-                c(C, {
-                  modelValue: s.variableSearchValue,
-                  "onUpdate:modelValue": e[0] || (e[0] = (n) => s.variableSearchValue = n),
-                  "root-class": "d-p8 d-pb4 d-w264",
-                  type: "search",
-                  placeholder: s.i18n.$t("DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER"),
-                  size: "md",
-                  role: "menuitem"
-                }, {
-                  leftIcon: r(({ iconSize: n }) => [
-                    c(j, { size: n }, null, 8, ["size"])
+                      list: a(({ listProps: h }) => [
+                        k("ul", B({ ref_for: !0 }, h), [
+                          (u(!0), g(_, null, E(e.filteredFontStyles, (c) => (u(), p(C, {
+                            key: c.name,
+                            selected: e.isCurrentFontFamily(c.value),
+                            style: D({ fontFamily: c.value || "inherit" }),
+                            role: "option",
+                            "navigation-type": "arrow-keys",
+                            onClick: (P) => {
+                              m(), e.onFontStyleSelect(c.value);
+                            }
+                          }, {
+                            default: a(() => [
+                              w(I(c.name), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["selected", "style", "onClick"]))), 128))
+                        ], 16)
+                      ]),
+                      _: 2
+                    }, 1032, ["onEscape"])
                   ]),
                   _: 1
-                }, 8, ["modelValue", "placeholder"]),
-                (u(!0), _(w, null, O(i.filteredCategories, (n, I) => (u(), d(X, {
-                  key: n.name,
-                  heading: n.name,
-                  "heading-class": "d-headline--sm-compact d-p8"
+                }, 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),
+                  ref_for: !0,
+                  ref: e.getButtonRef(l.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,
+                  icon: n.icon,
+                  onShiftFocusRight: e.shiftActionBarFocusRight,
+                  onShiftFocusLeft: e.shiftActionBarFocusLeft
                 }, {
-                  default: r(() => [
-                    (u(!0), _(w, null, O(i.getFilteredItemsForCategory(n), (B) => (u(), d(J, {
-                      key: n.name + B.name,
+                  list: a(({ close: m }) => [
+                    (u(!0), g(_, null, E(i.fontSizes, (h) => (u(), p(C, {
+                      key: h.name,
+                      selected: e.isCurrentFontSize(h.value),
                       role: "menuitem",
                       "navigation-type": "arrow-keys",
-                      onClick: (W) => {
-                        i.insertVariable(n.name, B), a();
+                      onClick: (c) => {
+                        m(), e.onFontSizeSelect(h.value, c);
                       }
                     }, {
-                      default: r(() => [
-                        A(m(B.name), 1)
+                      default: a(() => [
+                        k("span", {
+                          style: D({ fontSize: h.value })
+                        }, I(h.name), 5)
                       ]),
                       _: 2
-                    }, 1032, ["onClick"]))), 128)),
-                    I < i.filteredCategories.length - 1 ? (u(), d(Y, { key: 0 })) : D("", !0)
+                    }, 1032, ["selected", "onClick"]))), 128))
                   ]),
-                  _: 2
-                }, 1032, ["heading"]))), 128))
-              ]),
-              _: 1
-            }),
-            e[7] || (e[7] = E("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
+                  _: 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),
+                  ref_for: !0,
+                  ref: e.getButtonRef(l.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,
+                  "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()
+                }, {
+                  default: a(() => [
+                    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",
+                      size: "sm",
+                      type: "color",
+                      onInput: e.onColorPickerInput,
+                      onClick: o[1] || (o[1] = L(() => {
+                      }, ["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),
+                  ref_for: !0,
+                  ref: e.getButtonRef(l.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,
+                  icon: n.icon,
+                  onShiftFocusRight: e.shiftActionBarFocusRight,
+                  onShiftFocusLeft: e.shiftActionBarFocusLeft
+                }, {
+                  content: a(({ close: m }) => [
+                    d(S, {
+                      label: "",
+                      "label-visible": !1,
+                      "show-list": !0,
+                      "click-on-select": !0,
+                      onEscape: (h) => m()
+                    }, {
+                      input: a(({ inputProps: h }) => [
+                        d(A, B({ ref_for: !0 }, h, {
+                          modelValue: r.variableSearchValue,
+                          "onUpdate:modelValue": o[2] || (o[2] = (c) => r.variableSearchValue = c),
+                          "root-class": "d-p8 d-pb4 d-w264",
+                          type: "search",
+                          placeholder: r.i18n.$t("DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER"),
+                          size: "md",
+                          role: "menuitem"
+                        }), {
+                          leftIcon: a(({ iconSize: c }) => [
+                            d(T, { 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, {
+                            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, {
+                                key: c.name + x.name,
+                                role: "option",
+                                "navigation-type": "arrow-keys",
+                                onClick: (Jt) => {
+                                  e.insertVariable(c.name, x), m();
+                                }
+                              }, {
+                                default: a(() => [
+                                  w(I(x.name), 1)
+                                ]),
+                                _: 2
+                              }, 1032, ["onClick"]))), 128)),
+                              P < e.filteredCategories.length - 1 ? (u(), p(ut, { key: 0 })) : F("", !0)
+                            ]),
+                            _: 2
+                          }, 1032, ["heading"]))), 128))
+                        ], 16)
+                      ]),
+                      _: 2
+                    }, 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),
+                  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),
+                  "tooltip-message": n.tooltipMessage,
+                  "data-qa": n.dataQA,
+                  tabindex: e.canFocus(e.getButtonRef(l.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)
+              ], 64);
+            }), 256)),
+            o[8] || (o[8] = k("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
           ]),
-          _: 1
-        })) : D("", !0),
-        i.linkButton.showBtn ? (u(), d(T, {
-          key: 1,
+          _: 2
+        }, 1024))), 128)),
+        e.linkButton.showBtn ? (u(), p(O, {
+          key: 0,
           direction: "row",
           gap: "300"
         }, {
-          default: r(() => [
-            c(R, {
-              open: s.showLinkInput,
+          default: a(() => [
+            d(ft, {
+              open: r.showLinkInput,
               "show-close-button": !1,
               "data-qa": "dt-recipe-editor-link-input-popover",
               padding: "none",
               placement: "bottom-start",
               onClick: [
-                i.onInputFocus,
-                g(i.onInputFocus, ["stop"])
+                e.onInputFocus,
+                L(e.onInputFocus, ["stop"])
               ],
-              onOpened: i.updateInput
+              onOpened: e.updateInput
             }, {
-              anchor: r(() => [
-                (u(), d(k, {
-                  key: i.linkButton.key,
-                  message: i.linkButton.tooltipMessage,
+              anchor: a(() => [
+                (u(), p(ht, {
+                  key: e.linkButton.key,
+                  message: e.linkButton.tooltipMessage,
                   placement: "top"
                 }, {
-                  anchor: r(() => {
-                    var a, n;
+                  anchor: a(() => {
+                    var l, n;
                     return [
-                      c(p, {
-                        ref: i.getButtonRef("custom", "link"),
-                        active: (n = (a = t.$refs.richTextEditor) == null ? void 0 : a.editor) == null ? void 0 : n.isActive(i.linkButton.selector),
-                        "aria-label": i.linkButton.tooltipMessage,
-                        "data-qa": i.linkButton.dataQA,
-                        tabindex: i.canFocus(i.getButtonRef("custom", "link")) ? 0 : -1,
+                      d(y, {
+                        ref: e.getButtonRef("custom", "link"),
+                        active: (n = (l = t.$refs.richTextEditor) == null ? void 0 : l.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: e[1] || (e[1] = (I) => i.linkButton.onClick()),
+                        onClick: o[3] || (o[3] = (R) => e.linkButton.onClick()),
                         onKeydown: [
-                          L(g(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                          L(g(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                          b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                          b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
                         ]
                       }, {
-                        icon: r(() => [
-                          (u(), d(b(i.linkButton.icon), { size: "200" }))
+                        icon: a(() => [
+                          (u(), p(Ct(e.linkButton.icon), { size: "200" }))
                         ]),
                         _: 1
                       }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
@@ -868,60 +1104,60 @@ function It(t, e, o, l, s, i) {
                   _: 1
                 }, 8, ["message"]))
               ]),
-              content: r(() => [
-                E("div", Tt, [
-                  E("span", null, m(i.showAddLinkButtonLabels.title), 1),
-                  c(C, {
-                    modelValue: s.linkInput,
-                    "onUpdate:modelValue": e[2] || (e[2] = (a) => s.linkInput = a),
-                    "input-aria-label": i.showAddLinkButtonLabels["aria-label"],
-                    placeholder: o.setLinkPlaceholder,
+              content: a(() => [
+                k("div", Kt, [
+                  k("span", null, I(e.showAddLinkButtonLabels.title), 1),
+                  d(A, {
+                    modelValue: r.linkInput,
+                    "onUpdate:modelValue": o[4] || (o[4] = (l) => r.linkInput = l),
+                    "input-aria-label": e.showAddLinkButtonLabels["aria-label"],
+                    placeholder: i.setLinkPlaceholder,
                     "data-qa": "dt-recipe-editor-link-input",
                     "input-wrapper-class": "d-recipe-editor-link__input-wrapper",
                     onClick: [
-                      i.onInputFocus,
-                      g(i.onInputFocus, ["stop"])
+                      e.onInputFocus,
+                      L(e.onInputFocus, ["stop"])
                     ],
-                    onFocus: i.onInputFocus,
-                    onKeydown: L(i.setLink, ["enter"])
+                    onFocus: e.onInputFocus,
+                    onKeydown: b(e.setLink, ["enter"])
                   }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
                 ])
               ]),
-              footerContent: r(() => [
-                c(T, {
+              footerContent: a(() => [
+                d(O, {
                   direction: "row",
                   gap: "300",
                   class: "d-recipe-editor__popover-footer"
                 }, {
-                  default: r(() => [
-                    c(p, f({
+                  default: a(() => [
+                    d(y, B({
                       "data-qa": "dt-recipe-editor-remove-link-btn",
                       importance: "clear",
                       kind: "muted",
                       size: "sm"
-                    }, i.removeLinkButtonLabels, { onClick: i.removeLink }), {
-                      default: r(() => [
-                        A(m(i.removeLinkButtonLabels.title), 1)
+                    }, e.removeLinkButtonLabels, { onClick: e.removeLink }), {
+                      default: a(() => [
+                        w(I(e.removeLinkButtonLabels.title), 1)
                       ]),
                       _: 1
                     }, 16, ["onClick"]),
-                    c(p, f({
+                    d(y, B({
                       "data-qa": "dt-recipe-editor-set-link-cancel-btn",
                       importance: "clear",
                       kind: "muted",
                       size: "sm"
-                    }, i.cancelSetLinkButtonLabels, { onClick: i.closeLinkInput }), {
-                      default: r(() => [
-                        A(m(i.cancelSetLinkButtonLabels.title), 1)
+                    }, e.cancelSetLinkButtonLabels, { onClick: e.closeLinkInput }), {
+                      default: a(() => [
+                        w(I(e.cancelSetLinkButtonLabels.title), 1)
                       ]),
                       _: 1
                     }, 16, ["onClick"]),
-                    c(p, f({
+                    d(y, B({
                       "data-qa": "dt-recipe-editor-set-link-confirm-btn",
                       size: "sm"
-                    }, i.confirmSetLinkButtonLabels, { onClick: i.setLink }), {
-                      default: r(() => [
-                        A(m(i.confirmSetLinkButtonLabels.title), 1)
+                    }, e.confirmSetLinkButtonLabels, { onClick: e.setLink }), {
+                      default: a(() => [
+                        w(I(e.confirmSetLinkButtonLabels.title), 1)
                       ]),
                       _: 1
                     }, 16, ["onClick"])
@@ -933,46 +1169,48 @@ function It(t, e, o, l, s, i) {
             }, 8, ["open", "onClick", "onOpened"])
           ]),
           _: 1
-        })) : D("", !0)
+        })) : F("", !0)
       ]),
       _: 1
     }),
-    E("div", {
-      style: rt({ "max-height": o.maxHeight }),
+    k("div", {
+      style: D({ "max-height": i.maxHeight }),
       class: "d-recipe-editor__content"
     }, [
-      c($, f({
+      d(pt, B({
         ref: "richTextEditor",
-        modelValue: s.internalInputValue,
-        "onUpdate:modelValue": e[3] || (e[3] = (a) => s.internalInputValue = a),
+        modelValue: r.internalInputValue,
+        "onUpdate:modelValue": o[5] || (o[5] = (l) => r.internalInputValue = l),
         "allow-font-color": !0,
         "allow-font-family": !0,
         "allow-inline-images": !0,
         "allow-line-breaks": !0,
         "allow-variable": !0,
-        "variable-items": i.flattenedVariableItems,
+        "allow-font-size": i.showFontSizeButton,
+        "variable-items": e.flattenedVariableItems,
         "hide-link-bubble-menu": !0,
-        "auto-focus": o.autoFocus,
-        editable: o.editable,
-        "input-aria-label": o.inputAriaLabel,
-        "input-class": `d-recipe-editor__content-input ${o.inputClass}`,
+        "auto-focus": i.autoFocus,
+        editable: i.editable,
+        "input-aria-label": i.inputAriaLabel,
+        "input-class": `d-recipe-editor__content-input ${i.inputClass}`,
         link: !0,
-        "output-format": i.htmlOutputFormat,
-        placeholder: o.placeholder,
-        "use-div-tags": o.useDivTags,
-        "allow-tables": o.allowTables,
+        "output-format": e.htmlOutputFormat,
+        placeholder: i.placeholder,
+        "use-div-tags": i.useDivTags,
+        "allow-tables": i.allowTables,
         "data-qa": "dt-rich-text-editor"
-      }, i.removeClassStyleAttrs(t.$attrs), {
-        onTextInput: i.onTextInput,
-        onBlur: i.onBlur,
-        onFocus: i.onFocus,
-        onInput: e[4] || (e[4] = (a) => i.onInput(a))
-      }), null, 16, ["modelValue", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "onTextInput", "onBlur", "onFocus"])
+      }, e.removeClassStyleAttrs(t.$attrs), {
+        onTextInput: e.onTextInput,
+        onBlur: e.onBlur,
+        onFocus: e.onFocus,
+        onInput: o[6] || (o[6] = (l) => e.onInput(l)),
+        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)
   ], 16);
 }
-const Ut = /* @__PURE__ */ st(kt, [["render", It]]);
+const fe = /* @__PURE__ */ Rt(Pt, [["render", Ht]]);
 export {
-  Ut as default
+  fe as default
 };
 //# sourceMappingURL=editor.js.map