@dialpad/dialtone-vue 3.218.3 → 3.218.5

package/dist/lib/editor/editor.js

@@ -1,1274 +1,1100 @@
-import { EDITOR_DEFAULT_FONT_COLOR as H, EDITOR_SUPPORTED_LINK_PROTOCOLS as _t, EDITOR_DEFAULT_LINK_PREFIX as It } from "./editor-constants.js";
-import { addClassStyleAttrs as Lt, removeClassStyleAttrs as Et } from "../../common/utils/index.js";
-import At from "./EditorToolbarButton.js";
-import yt from "./EditorToolbarDropdownButton.js";
-import wt from "./EditorToolbarPopoverButton.js";
-import { DtIconStopFilled as J, DtIconFontSize as Y, DtIconChevronDown as bt, DtIconBraces as j, DtIconType as G, DtIconSearch as Ct, DtIconImage as X, DtIconLink2 as W, DtIconCodeBlock as Z, DtIconQuote as $, DtIconAlignJustify as tt, DtIconAlignRight as et, DtIconAlignCenter as ot, DtIconAlignLeft as it, DtIconListOrdered as nt, DtIconListBullet as rt, DtIconStrikethrough as lt, DtIconUnderline as st, DtIconItalic as at, DtIconBold as ut, DtIconQuickReply as ct } from "@dialpad/dialtone-icons/vue3";
-import { DialtoneLocalization as Ot } from "../../localization/index.js";
-import { resolveComponent as p, resolveDirective as Rt, openBlock as u, createElementBlock as T, mergeProps as B, createVNode as d, withCtx as a, Fragment as k, renderList as A, createBlock as f, createElementVNode as _, normalizeStyle as O, createTextVNode as w, toDisplayString as I, withDirectives as xt, withKeys as b, withModifiers as L, resolveDynamicComponent as dt, createCommentVNode as D, normalizeClass as Ft } from "vue";
-import { _ as Dt } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import St from "../combobox/combobox.js";
-import vt from "../tooltip/tooltip.js";
-import Nt from "../input/input.js";
-import Ut from "../stack/stack.js";
-import Vt from "../popover/popover.js";
-import zt from "../button/button.js";
-import Qt from "../rich-text-editor/rich-text-editor.js";
-import Mt from "../list-item/list-item.js";
-import qt from "../dropdown/dropdown-separator.js";
-import Pt from "../list-item-group/list-item-group.js";
-import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as Kt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as Ht } from "../rich-text-editor/rich-text-editor-constants.js";
-const Jt = {
-  compatConfig: { MODE: 3 },
-  name: "DtRecipeEditor",
-  components: {
-    DtListItemGroup: Pt,
-    DtDropdownSeparator: qt,
-    DtListItem: Mt,
-    DtRichTextEditor: Qt,
-    DtButton: zt,
-    DtPopover: Vt,
-    DtStack: Ut,
-    DtInput: Nt,
-    DtTooltip: vt,
-    DtCombobox: St,
-    EditorToolbarButton: At,
-    EditorToolbarDropdownButton: yt,
-    EditorToolbarPopoverButton: wt,
-    DtIconQuickReply: ct,
-    DtIconBold: ut,
-    DtIconItalic: at,
-    DtIconUnderline: st,
-    DtIconStrikethrough: lt,
-    DtIconListBullet: rt,
-    DtIconListOrdered: nt,
-    DtIconAlignLeft: it,
-    DtIconAlignCenter: ot,
-    DtIconAlignRight: et,
-    DtIconAlignJustify: tt,
-    DtIconQuote: $,
-    DtIconCodeBlock: Z,
-    DtIconLink2: W,
-    DtIconImage: X,
-    DtIconSearch: Ct,
-    DtIconType: G,
-    DtIconBraces: j,
-    DtIconChevronDown: bt,
-    DtIconFontSize: Y,
-    DtIconStopFilled: J
-  },
-  mixins: [],
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Value of the input. The object format should match TipTap's JSON
-     * document structure: https://tiptap.dev/guide/output#option-1-json
-     */
-    modelValue: {
-      type: [Object, String],
-      default: ""
-    },
-    /**
-     * Whether the input is editable
-     */
-    editable: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Descriptive label for the input element
-     */
-    inputAriaLabel: {
-      type: String,
-      required: !0,
-      default: ""
-    },
-    /**
-     * Additional class name for the input element. Only accepts a String value
-     * because this is passed to the editor via options. For multiple classes,
-     * join them into one string, e.g. "d-p8 d-hmx96"
-     */
-    inputClass: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Whether the input should receive focus after the component has been
-     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
-     * - `start`  Sets the focus to the beginning of the input
-     * - `end`    Sets the focus to the end of the input
-     * - `all`    Selects the whole contents of the input
-     * - `Number` Sets the focus to a specific position in the input
-     * - `true`   Defaults to `start`
-     * - `false`  Disables autofocus
-     * @values true, false, start, end, all, number
-     */
-    autoFocus: {
-      type: [Boolean, String, Number],
-      default: !1,
-      validator(t) {
-        return typeof t == "string" ? Ht.includes(t) : !0;
-      }
-    },
-    /**
-     * Placeholder text
-     */
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Content area needs to dynamically adjust height based on the conversation area height.
-     * can be vh|px|rem|em|%
-     */
-    maxHeight: {
-      type: String,
-      default: "unset"
-    },
-    /**
-     * Placeholder text for the set link input field
-     */
-    setLinkPlaceholder: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Show button to render text as bold
-     */
-    showBoldButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to render text in italics
-     */
-    showItalicsButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to underline text
-     */
-    showUnderlineButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to strike text
-     */
-    showStrikeButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to render list items
-     */
-    showListItemsButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to render ordered list items
-     */
-    showOrderedListButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to align text to the left
-     */
-    showAlignLeftButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to align text to the center
-     */
-    showAlignCenterButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to align text to the right
-     */
-    showAlignRightButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to justify text
-     */
-    showAlignJustifyButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to add quote format to text
-     */
-    showQuoteButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to add code block
-     */
-    showCodeBlockButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to handle quick replies
-     */
-    showQuickRepliesButton: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Show button to add an inline image
-     */
-    showInlineImageButton: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show button to add a variable
-     */
-    showVariableButton: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Variable categories to display when variable button is clicked
-     */
-    variableCategories: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Show add link default config.
-     */
-    showAddLink: {
-      type: Object,
-      default: () => ({
-        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" }
-      ]
-    },
-    /**
-     * Whether the input allows background color to be introduced in the text.
-     */
-    allowBackgroundColor: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Whether the input allows line height to be introduced in the text.
-     */
-    allowLineHeight: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Controls how whitespace is handled when parsing HTML content.
-     * - 'full': All whitespace is preserved
-     * - true: Whitespace in inline content is preserved, whitespace-only nodes between blocks are removed
-     * - false: Standard HTML whitespace collapsing
-     * @values full, true, false
-     */
-    preserveWhitespace: {
-      type: [Boolean, String],
-      default: "full"
-    },
-    /**
-     * Use div tags instead of paragraph tags to show text
-     */
-    useDivTags: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Allow Tables to be used in to the editor
-     */
-    allowTables: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Allow image resizing
-     */
-    allowImageResize: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    /**
-     * Native focus event
-     * @event input
-     * @type {String|JSON}
-     */
-    "focus",
-    /**
-     * Native blur event
-     * @event input
-     * @type {String|JSON}
-     */
-    "blur",
-    /**
-     * Native input event
-     * @event input
-     * @type {String|JSON}
-     */
-    "input",
-    /**
-     * Event fired to sync the modelValue prop with the parent component
-     * @event input
-     * @type {String|JSON}
-     */
-    "update:modelValue",
-    /**
-     * Quick replies button
-     * pressed event
-     * @event quick-replies-click
-     */
-    "quick-replies-click",
-    /**
-     * Emit when inline image button is clicked
-     * @event inline-image-click
-     */
-    "inline-image-click",
-    /**
-     * Emit when text input is changed
-     * @event text-input
-     * @type {String}
-     */
-    "text-input"
-  ],
-  data() {
-    return {
-      internalInputValue: this.modelValue,
-      // internal input content
-      hasFocus: !1,
-      linkOptions: {
-        class: "d-recipe-editor__link"
-      },
-      currentFontColor: void 0,
-      showLinkInput: !1,
-      fontStyleSearch: "",
-      linkInput: "",
-      currentButtonRefIndex: 0,
-      variableSearchValue: "",
-      i18n: new Ot()
-    };
-  },
-  computed: {
-    inputLength() {
-      return this.internalInputValue.length;
-    },
-    htmlOutputFormat() {
-      return Kt[2];
-    },
-    flattenedVariableItems() {
-      return this.variableCategories ? this.variableCategories.reduce((t, o) => t.concat(o.items || []), []) : [];
-    },
-    showingTextFormatButtons() {
-      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
-    },
-    showingAlignmentButtons() {
-      return this.showAlignLeftButton || this.showAlignCenterButton || this.showAlignRightButton || this.showAlignJustifyButton;
-    },
-    showingListButtons() {
-      return this.showListItemsButton || this.showOrderedListButton;
-    },
-    orderedRefs() {
-      const t = this.buttonGroups.reduce((function(o, i) {
-        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;
-    },
-    buttonGroups() {
-      const t = this.individualButtons.map((o) => ({
-        key: o.selector,
-        buttonGroup: [o]
-      }));
-      return [
-        { key: "new", buttonGroup: this.newButtons },
-        { key: "format", buttonGroup: this.textFormatButtons },
-        { key: "alignment", buttonGroup: this.alignmentButtons },
-        { key: "list", buttonGroup: this.listButtons },
-        ...t
-      ].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: ct,
-          dataQA: "dt-recipe-editor-quick-replies-btn",
-          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
-          onClick: this.onQuickRepliesClick
-        }
-      ].filter((t) => t.showBtn);
-    },
-    textFormatButtons() {
-      return [
-        {
-          showBtn: this.showFontStyleButton,
-          buttonType: "popover",
-          selector: "fontStyle",
-          icon: G,
-          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: Y,
-          dataQA: "dt-recipe-editor-font-size-btn",
-          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL")
-        },
-        {
-          showBtn: this.showFontColorButton,
-          buttonType: "custom",
-          selector: "fontColor",
-          icon: J,
-          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: ut,
-          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: at,
-          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: st,
-          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: lt,
-          dataQA: "dt-recipe-editor-strike-btn",
-          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
-          onClick: this.onStrikethroughTextToggle
-        }
-      ].filter((t) => t.showBtn);
-    },
-    alignmentButtons() {
-      return [
-        {
-          showBtn: this.showAlignLeftButton,
-          buttonType: "button",
-          selector: { textAlign: "left" },
-          icon: it,
-          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: ot,
-          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: et,
-          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: tt,
-          dataQA: "dt-recipe-editor-align-justify-btn",
-          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
-          onClick: () => this.onTextAlign("justify")
-        }
-      ].filter((t) => t.showBtn);
-    },
-    listButtons() {
-      return [
-        {
-          showBtn: this.showListItemsButton,
-          buttonType: "button",
-          selector: "bulletList",
-          icon: rt,
-          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: nt,
-          dataQA: "dt-recipe-editor-ordered-list-items-btn",
-          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
-          onClick: this.onOrderedListToggle
-        }
-      ].filter((t) => t.showBtn);
-    },
-    individualButtons() {
-      return [
-        {
-          showBtn: this.showQuoteButton,
-          buttonType: "button",
-          selector: "blockquote",
-          icon: $,
-          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: Z,
-          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,
-          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: j,
-          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: W,
-        dataQA: "dt-recipe-editor-add-link-btn",
-        tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
-        onClick: this.openLinkInput
-      };
-    },
-    confirmSetLinkButtonLabels() {
-      return this.i18n.$ta("DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON");
-    },
-    cancelSetLinkButtonLabels() {
-      return this.i18n.$ta("DIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON");
-    },
-    removeLinkButtonLabels() {
-      return this.i18n.$ta("DIALTONE_EDITOR_REMOVE_LINK_BUTTON");
-    },
-    showAddLinkButtonLabels() {
-      return this.i18n.$ta("DIALTONE_EDITOR_ADD_LINK_BUTTON");
-    },
-    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() {
-      var t;
-      return (t = this.$refs.editorRoot) == null ? void 0 : t.querySelector(".colorPickerInput");
-    },
-    isDefaultFontColor() {
-      return this.currentFontColor === H;
-    },
-    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: {
-    modelValue(t) {
-      this.internalInputValue = t;
-    }
-  },
-  methods: {
-    removeClassStyleAttrs: Et,
-    addClassStyleAttrs: Lt,
-    focusEditor() {
-      var t, o;
-      (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null || o.commands.focus();
-    },
-    onInputFocus(t) {
-      t == null || t.stopPropagation();
-    },
-    removeLink() {
-      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, g;
-      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;
-      }
-      _t.find((E) => E.test(this.linkInput)) || (this.linkInput = `${It}${this.linkInput}`);
-      const l = (g = (e = o == null ? void 0 : o.view) == null ? void 0 : e.state) == null ? void 0 : g.selection;
-      l.anchor === l.head ? o.chain().focus().insertContentAt(
-        l.anchor,
-        `<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();
-    },
-    openLinkInput() {
-      this.showLinkInput = !0;
-    },
-    updateInput(t) {
-      var o, i, l;
-      if (!t)
-        return this.closeLinkInput();
-      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;
-      this.showLinkInput = !1, this.linkInput = "", (t = this.$refs.richTextEditor.editor) == null || t.chain().focus();
-    },
-    onBoldTextToggle() {
-      var t, o;
-      (o = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null || o.chain().focus().toggleBold().run();
-    },
-    onItalicTextToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleItalic().run();
-    },
-    onUnderlineTextToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleUnderline().run();
-    },
-    onStrikethroughTextToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
-    },
-    onTextAlign(t) {
-      var o, i, l, r;
-      if ((i = (o = this.$refs.richTextEditor) == null ? void 0 : o.editor) != null && i.isActive({ textAlign: t }))
-        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() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleBulletList().run();
-    },
-    onOrderedListToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleOrderedList().run();
-    },
-    onCodeBlockToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleCodeBlock().run();
-    },
-    onQuickRepliesClick() {
-      this.$emit("quick-replies-click");
-    },
-    onInsertInlineImageClick() {
-      this.$emit("inline-image-click");
-    },
-    insertVariable(t, o) {
-      var i;
-      (i = this.$refs.richTextEditor) == null || i.editor.chain().focus().insertVariable({
-        id: o.id,
-        placeholder: o.placeholder || "",
-        altText: "",
-        enableAltText: o.enableAltText
-      }).run();
-    },
-    insertInlineImage(t) {
-      var o;
-      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus().setImage({ src: t }).run();
-    },
-    insertInMessageBody(t) {
-      var o;
-      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus().insertContent(t).run();
-    },
-    setCursorPosition(t = null) {
-      var o;
-      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus(t).run();
-    },
-    onBlockquoteToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleBlockquote().run();
-    },
-    onTextInput(t) {
-      this.$emit("text-input", t);
-    },
-    onFocus(t) {
-      this.hasFocus = !0, this.$emit("focus", t);
-    },
-    onBlur(t) {
-      this.hasFocus = !1, this.$emit("blur", t);
-    },
-    onInput(t) {
-      this.$emit("input", t), this.$emit("update:modelValue", t);
-    },
-    onSelected() {
-      this.updateFontColorInput();
-    },
-    getButtonKey(t, o) {
-      return `${t}-${JSON.stringify(o)}`;
-    },
-    // Unique Button Ref Key to identify 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
-     * @param {string} refKey - unique identifier for the ref element in DOM
-     */
-    canFocus(t) {
-      return t === this.orderedRefs[this.currentButtonRefIndex];
-    },
-    shiftActionBarFocusRight() {
-      this.shiftButtonRefIndex(1);
-    },
-    shiftActionBarFocusLeft() {
-      this.shiftButtonRefIndex(-1);
-    },
-    shiftButtonRefIndex(t) {
-      const o = this.actionBarBtn, i = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
-      this.currentButtonRefIndex = i >= 0 ? i : this.orderedRefs.length + i;
-      const l = this.actionBarBtn;
-      o.$el.blur(), l.$el.focus();
-    },
-    onFontStyleSelect(t) {
-      var o, i, l, r, e, g;
-      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(), (g = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null || g.commands.focus();
-    },
-    isCurrentFontFamily(t) {
-      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, 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, 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();
-      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) || H;
-    },
-    onColorPickerButtonClick() {
-      var t;
-      (t = this.colorPickerInput) == null || t.click();
-    },
-    onColorPickerInput(t) {
-      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();
-    }
-  }
-}, Yt = { class: "d-recipe-editor__popover-content" };
-function jt(t, o, i, l, r, e) {
-  const g = p("dt-icon-search"), E = p("dt-input"), R = p("dt-list-item"), S = p("dt-combobox"), v = p("editor-toolbar-popover-button"), ht = p("editor-toolbar-dropdown-button"), y = p("dt-button"), ft = p("dt-dropdown-separator"), pt = p("dt-list-item-group"), Bt = p("editor-toolbar-button"), C = p("dt-stack"), gt = p("dt-tooltip"), mt = p("dt-popover"), Tt = p("dt-rich-text-editor"), kt = Rt("dt-tooltip");
-  return u(), T("div", B({
-    ref: "editorRoot",
-    class: "d-recipe-editor"
-  }, e.addClassStyleAttrs(t.$attrs), {
-    "data-qa": "dt-recipe-editor",
-    role: "presentation",
-    onClick: o[7] || (o[7] = (s) => t.$refs.richTextEditor.focusEditor())
-  }), [
-    d(C, {
-      class: "d-recipe-editor__top-bar",
-      direction: "row",
-      gap: "450"
-    }, {
-      default: a(() => [
-        (u(!0), T(k, null, A(e.buttonGroups, (s) => (u(), f(C, {
-          key: s.key,
-          direction: "row",
-          gap: "300"
-        }, {
-          default: a(() => [
-            (u(!0), T(k, null, A(s.buttonGroup, (n) => {
-              var x, N, U, V, z, Q, M, q, P;
-              return u(), T(k, null, [
-                n.buttonType === "popover" && n.selector === "fontStyle" ? (u(), f(v, {
-                  key: e.getButtonKey(s.key, n.selector),
-                  ref_for: !0,
-                  ref: e.getButtonRef(s.key, n.selector),
-                  "is-active": (N = (x = t.$refs.richTextEditor) == null ? void 0 : x.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(s.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(E, 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(g, { size: c }, null, 8, ["size"])
-                          ]),
-                          _: 1
-                        }, 16, ["modelValue", "placeholder"])
-                      ]),
-                      list: a(({ listProps: h }) => [
-                        _("ul", B({ ref_for: !0 }, h), [
-                          (u(!0), T(k, null, A(e.filteredFontStyles, (c) => (u(), f(R, {
-                            key: c.name,
-                            selected: e.isCurrentFontFamily(c.value),
-                            style: O({ fontFamily: c.value || "inherit" }),
-                            role: "option",
-                            "navigation-type": "arrow-keys",
-                            onClick: (K) => {
-                              m(e.focusEditor), e.onFontStyleSelect(c.value);
-                            }
-                          }, {
-                            default: a(() => [
-                              w(I(c.name), 1)
-                            ]),
-                            _: 2
-                          }, 1032, ["selected", "style", "onClick"]))), 128))
-                        ], 16)
-                      ]),
-                      _: 2
-                    }, 1032, ["onEscape"])
-                  ]),
-                  _: 1
-                }, 8, ["is-active", "tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "popover" && n.selector === "fontSize" ? (u(), f(ht, {
-                  key: e.getButtonKey(s.key, n.selector),
-                  ref_for: !0,
-                  ref: e.getButtonRef(s.key, n.selector),
-                  "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(s.key, n.selector)) ? 0 : -1,
-                  icon: n.icon,
-                  onShiftFocusRight: e.shiftActionBarFocusRight,
-                  onShiftFocusLeft: e.shiftActionBarFocusLeft
-                }, {
-                  list: a(({ close: m }) => [
-                    (u(!0), T(k, null, A(i.fontSizes, (h) => (u(), f(R, {
-                      key: h.name,
-                      selected: e.isCurrentFontSize(h.value),
-                      role: "menuitem",
-                      "navigation-type": "arrow-keys",
-                      onClick: (c) => {
-                        m(e.focusEditor), e.onFontSizeSelect(h.value, c);
-                      }
-                    }, {
-                      default: a(() => [
-                        _("span", {
-                          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" ? xt((u(), f(y, {
-                  key: e.getButtonKey(s.key, n.selector),
-                  ref_for: !0,
-                  ref: e.getButtonRef(s.key, n.selector),
-                  kind: "muted",
-                  importance: "clear",
-                  size: "xs",
-                  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()
-                }, {
-                  icon: a(() => [
-                    (u(), f(dt(n.icon), {
-                      size: "200",
-                      style: O(e.isDefaultFontColor ? {} : { color: r.currentFontColor })
-                    }, null, 8, ["style"])),
-                    d(E, {
-                      value: r.currentFontColor,
-                      "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,
-                      onClick: o[1] || (o[1] = L(() => {
-                      }, ["stop"]))
-                    }, null, 8, ["value", "onInput"])
-                  ]),
-                  _: 2
-                }, 1032, ["active", "tabindex", "aria-label", "data-qa", "onKeydown", "onClick"])), [
-                  [kt, {
-                    message: n.tooltipMessage,
-                    placement: "top",
-                    externalAnchorElement: (M = t.$refs[e.getButtonRef(s.key, n.selector)]) == null ? void 0 : M.$el
-                  }]
-                ]) : n.buttonType === "popover" && n.selector === "variable" ? (u(), f(v, {
-                  key: e.getButtonKey(s.key, n.selector),
-                  ref_for: !0,
-                  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(s.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(E, 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(g, { size: c }, null, 8, ["size"])
-                          ]),
-                          _: 1
-                        }, 16, ["modelValue", "placeholder"])
-                      ]),
-                      list: a(({ listProps: h }) => [
-                        _("div", B({ ref_for: !0 }, h), [
-                          (u(!0), T(k, null, A(e.filteredCategories, (c, K) => (u(), f(pt, {
-                            key: c.name,
-                            heading: c.name,
-                            "heading-class": "d-headline--sm-compact d-p8"
-                          }, {
-                            default: a(() => [
-                              (u(!0), T(k, null, A(e.getFilteredItemsForCategory(c), (F) => (u(), f(R, {
-                                key: c.name + F.name,
-                                role: "option",
-                                "navigation-type": "arrow-keys",
-                                onClick: (Gt) => {
-                                  e.insertVariable(c.name, F), m(e.focusEditor);
-                                }
-                              }, {
-                                default: a(() => [
-                                  w(I(F.name), 1)
-                                ]),
-                                _: 2
-                              }, 1032, ["onClick"]))), 128)),
-                              K < e.filteredCategories.length - 1 ? (u(), f(ft, { key: 0 })) : D("", !0)
-                            ]),
-                            _: 2
-                          }, 1032, ["heading"]))), 128))
-                        ], 16)
-                      ]),
-                      _: 2
-                    }, 1032, ["onEscape"])
-                  ]),
-                  _: 1
-                }, 8, ["tooltip-message", "data-qa", "tabindex", "icon", "onShiftFocusRight", "onShiftFocusLeft"])) : n.buttonType === "button" ? (u(), f(Bt, {
-                  key: e.getButtonKey(s.key, n.selector),
-                  ref_for: !0,
-                  ref: e.getButtonRef(s.key, n.selector),
-                  "is-active": (P = (q = t.$refs.richTextEditor) == null ? void 0 : q.editor) == null ? void 0 : P.isActive(n.selector),
-                  "tooltip-message": n.tooltipMessage,
-                  "data-qa": n.dataQA,
-                  tabindex: e.canFocus(e.getButtonRef(s.key, n.selector)) ? 0 : -1,
-                  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"])) : D("", !0)
-              ], 64);
-            }), 256)),
-            o[8] || (o[8] = _("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
-          ]),
-          _: 2
-        }, 1024))), 128)),
-        e.linkButton.showBtn ? (u(), f(C, {
-          key: 0,
-          direction: "row",
-          gap: "300"
-        }, {
-          default: a(() => [
-            d(mt, {
-              open: r.showLinkInput,
-              "show-close-button": !1,
-              "data-qa": "dt-recipe-editor-link-input-popover",
-              padding: "none",
-              placement: "bottom-start",
-              onClick: [
-                e.onInputFocus,
-                L(e.onInputFocus, ["stop"])
-              ],
-              onOpened: e.updateInput
-            }, {
-              anchor: a(() => [
-                (u(), f(gt, {
-                  key: e.linkButton.key,
-                  message: e.linkButton.tooltipMessage,
-                  placement: "top"
-                }, {
-                  anchor: a(() => {
-                    var s, n;
-                    return [
-                      d(y, {
-                        ref: e.getButtonRef("custom", "link"),
-                        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] = (x) => e.linkButton.onClick()),
-                        onKeydown: [
-                          b(L(e.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                          b(L(e.shiftActionBarFocusLeft, ["stop"]), ["left"])
-                        ]
-                      }, {
-                        icon: a(() => [
-                          (u(), f(dt(e.linkButton.icon), { size: "200" }))
-                        ]),
-                        _: 1
-                      }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
-                    ];
-                  }),
-                  _: 1
-                }, 8, ["message"]))
-              ]),
-              content: a(() => [
-                _("div", Yt, [
-                  _("span", null, I(e.showAddLinkButtonLabels.title), 1),
-                  d(E, {
-                    modelValue: r.linkInput,
-                    "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",
-                    "input-wrapper-class": "d-recipe-editor-link__input-wrapper",
-                    onClick: [
-                      e.onInputFocus,
-                      L(e.onInputFocus, ["stop"])
-                    ],
-                    onFocus: e.onInputFocus,
-                    onKeydown: b(e.setLink, ["enter"])
-                  }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
-                ])
-              ]),
-              footerContent: a(() => [
-                d(C, {
-                  direction: "row",
-                  gap: "300",
-                  class: "d-recipe-editor__popover-footer"
-                }, {
-                  default: a(() => [
-                    d(y, B({
-                      "data-qa": "dt-recipe-editor-remove-link-btn",
-                      importance: "clear",
-                      kind: "muted",
-                      size: "sm"
-                    }, e.removeLinkButtonLabels, { onClick: e.removeLink }), {
-                      default: a(() => [
-                        w(I(e.removeLinkButtonLabels.title), 1)
-                      ]),
-                      _: 1
-                    }, 16, ["onClick"]),
-                    d(y, B({
-                      "data-qa": "dt-recipe-editor-set-link-cancel-btn",
-                      importance: "clear",
-                      kind: "muted",
-                      size: "sm"
-                    }, e.cancelSetLinkButtonLabels, { onClick: e.closeLinkInput }), {
-                      default: a(() => [
-                        w(I(e.cancelSetLinkButtonLabels.title), 1)
-                      ]),
-                      _: 1
-                    }, 16, ["onClick"]),
-                    d(y, B({
-                      "data-qa": "dt-recipe-editor-set-link-confirm-btn",
-                      size: "sm"
-                    }, e.confirmSetLinkButtonLabels, { onClick: e.setLink }), {
-                      default: a(() => [
-                        w(I(e.confirmSetLinkButtonLabels.title), 1)
-                      ]),
-                      _: 1
-                    }, 16, ["onClick"])
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["open", "onClick", "onOpened"])
-          ]),
-          _: 1
-        })) : D("", !0)
-      ]),
-      _: 1
-    }),
-    _("div", {
-      style: O({ "max-height": i.maxHeight }),
-      class: Ft(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": i.allowImageResize }])
-    }, [
-      d(Tt, B({
-        ref: "richTextEditor",
-        modelValue: r.internalInputValue,
-        "onUpdate:modelValue": o[5] || (o[5] = (s) => r.internalInputValue = s),
-        "allow-font-color": !0,
-        "allow-font-family": !0,
-        "allow-inline-images": !0,
-        "allow-line-breaks": !0,
-        "allow-variable": !0,
-        "allow-font-size": i.showFontSizeButton,
-        "allow-background-color": i.allowBackgroundColor,
-        "allow-line-height": i.allowLineHeight,
-        "variable-items": e.flattenedVariableItems,
-        "hide-link-bubble-menu": !0,
-        "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": e.htmlOutputFormat,
-        placeholder: i.placeholder,
-        "preserve-whitespace": i.preserveWhitespace,
-        "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] = (s) => e.onInput(s)),
-        onSelected: e.onSelected
-      }), null, 16, ["modelValue", "allow-font-size", "allow-background-color", "allow-line-height", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "preserve-whitespace", "use-div-tags", "allow-tables", "allow-image-resize", "onTextInput", "onBlur", "onFocus", "onSelected"])
-    ], 6)
-  ], 16);
+import { addClassStyleAttrs as e, removeClassStyleAttrs as t } from "../../common/utils/index.js";
+import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { DialtoneLocalization as r } from "../../localization/index.js";
+import i from "../button/button.js";
+import a from "../list-item/list-item.js";
+import { t as o } from "../../combobox-DgClbLOg.js";
+import s from "../stack/stack.js";
+import c from "../tooltip/tooltip.js";
+import l from "../popover/popover.js";
+import u from "../dropdown/dropdown-separator.js";
+import d from "../input/input.js";
+import f from "../list-item-group/list-item-group.js";
+import { t as p } from "../../rich_text_editor-Cu0E6GWr.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as m, RICH_TEXT_EDITOR_OUTPUT_FORMATS as h } from "../rich-text-editor/rich-text-editor-constants.js";
+import "../../markdownRenderer-D14GhUiu.js";
+import { EDITOR_DEFAULT_FONT_COLOR as g, EDITOR_DEFAULT_LINK_PREFIX as _, EDITOR_SUPPORTED_LINK_PROTOCOLS as v } from "./editor-constants.js";
+import y from "./EditorToolbarButton.js";
+import b from "./EditorToolbarDropdownButton.js";
+import ee from "./EditorToolbarPopoverButton.js";
+import { Fragment as x, createBlock as S, createCommentVNode as C, createElementBlock as w, createElementVNode as T, createTextVNode as E, createVNode as D, mergeProps as O, normalizeClass as te, normalizeStyle as k, openBlock as A, renderList as j, resolveComponent as M, resolveDirective as ne, resolveDynamicComponent as N, toDisplayString as P, withCtx as F, withDirectives as re, withKeys as I, withModifiers as L } from "vue";
+import { DtIconAlignCenter as R, DtIconAlignJustify as z, DtIconAlignLeft as B, DtIconAlignRight as V, DtIconBold as H, DtIconBraces as U, DtIconChevronDown as ie, DtIconCodeBlock as W, DtIconFontSize as G, DtIconImage as K, DtIconItalic as q, DtIconLink2 as J, DtIconListBullet as Y, DtIconListOrdered as X, DtIconQuickReply as Z, DtIconQuote as Q, DtIconSearch as ae, DtIconStopFilled as oe, DtIconStrikethrough as se, DtIconType as ce, DtIconUnderline as $ } from "@dialpad/dialtone-icons/vue3";
+//#region recipes/conversation_view/editor/editor.vue
+var le = {
+	compatConfig: { MODE: 3 },
+	name: "DtRecipeEditor",
+	components: {
+		DtListItemGroup: f,
+		DtDropdownSeparator: u,
+		DtListItem: a,
+		DtRichTextEditor: p,
+		DtButton: i,
+		DtPopover: l,
+		DtStack: s,
+		DtInput: d,
+		DtTooltip: c,
+		DtCombobox: o,
+		EditorToolbarButton: y,
+		EditorToolbarDropdownButton: b,
+		EditorToolbarPopoverButton: ee,
+		DtIconQuickReply: Z,
+		DtIconBold: H,
+		DtIconItalic: q,
+		DtIconUnderline: $,
+		DtIconStrikethrough: se,
+		DtIconListBullet: Y,
+		DtIconListOrdered: X,
+		DtIconAlignLeft: B,
+		DtIconAlignCenter: R,
+		DtIconAlignRight: V,
+		DtIconAlignJustify: z,
+		DtIconQuote: Q,
+		DtIconCodeBlock: W,
+		DtIconLink2: J,
+		DtIconImage: K,
+		DtIconSearch: ae,
+		DtIconType: ce,
+		DtIconBraces: U,
+		DtIconChevronDown: ie,
+		DtIconFontSize: G,
+		DtIconStopFilled: oe
+	},
+	mixins: [],
+	inheritAttrs: !1,
+	props: {
+		modelValue: {
+			type: [Object, String],
+			default: ""
+		},
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		inputAriaLabel: {
+			type: String,
+			required: !0,
+			default: ""
+		},
+		inputClass: {
+			type: String,
+			default: ""
+		},
+		autoFocus: {
+			type: [
+				Boolean,
+				String,
+				Number
+			],
+			default: !1,
+			validator(e) {
+				return typeof e == "string" ? m.includes(e) : !0;
+			}
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		maxHeight: {
+			type: String,
+			default: "unset"
+		},
+		setLinkPlaceholder: {
+			type: String,
+			default: ""
+		},
+		showBoldButton: {
+			type: Boolean,
+			default: !0
+		},
+		showItalicsButton: {
+			type: Boolean,
+			default: !0
+		},
+		showUnderlineButton: {
+			type: Boolean,
+			default: !0
+		},
+		showStrikeButton: {
+			type: Boolean,
+			default: !0
+		},
+		showListItemsButton: {
+			type: Boolean,
+			default: !0
+		},
+		showOrderedListButton: {
+			type: Boolean,
+			default: !0
+		},
+		showAlignLeftButton: {
+			type: Boolean,
+			default: !0
+		},
+		showAlignCenterButton: {
+			type: Boolean,
+			default: !0
+		},
+		showAlignRightButton: {
+			type: Boolean,
+			default: !0
+		},
+		showAlignJustifyButton: {
+			type: Boolean,
+			default: !0
+		},
+		showQuoteButton: {
+			type: Boolean,
+			default: !0
+		},
+		showCodeBlockButton: {
+			type: Boolean,
+			default: !0
+		},
+		showQuickRepliesButton: {
+			type: Boolean,
+			default: !0
+		},
+		showInlineImageButton: {
+			type: Boolean,
+			default: !1
+		},
+		showVariableButton: {
+			type: Boolean,
+			default: !1
+		},
+		variableCategories: {
+			type: Array,
+			default: () => []
+		},
+		showAddLink: {
+			type: Object,
+			default: () => ({ showAddLinkButton: !0 })
+		},
+		showFontStyleButton: {
+			type: Boolean,
+			default: !1
+		},
+		showFontSizeButton: {
+			type: Boolean,
+			default: !1
+		},
+		showFontColorButton: {
+			type: Boolean,
+			default: !1
+		},
+		fontStyles: {
+			type: Array,
+			default: () => [
+				{
+					name: "Arial",
+					value: null
+				},
+				{
+					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"
+				}
+			]
+		},
+		allowBackgroundColor: {
+			type: Boolean,
+			default: !1
+		},
+		allowLineHeight: {
+			type: Boolean,
+			default: !1
+		},
+		preserveWhitespace: {
+			type: [Boolean, String],
+			default: "full"
+		},
+		useDivTags: {
+			type: Boolean,
+			default: !1
+		},
+		allowTables: {
+			type: Boolean,
+			default: !1
+		},
+		allowImageResize: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"focus",
+		"blur",
+		"input",
+		"update:modelValue",
+		"quick-replies-click",
+		"inline-image-click",
+		"text-input"
+	],
+	data() {
+		return {
+			internalInputValue: this.modelValue,
+			hasFocus: !1,
+			linkOptions: { class: "d-recipe-editor__link" },
+			currentFontColor: void 0,
+			showLinkInput: !1,
+			fontStyleSearch: "",
+			linkInput: "",
+			currentButtonRefIndex: 0,
+			variableSearchValue: "",
+			i18n: new r()
+		};
+	},
+	computed: {
+		inputLength() {
+			return this.internalInputValue.length;
+		},
+		htmlOutputFormat() {
+			return h[2];
+		},
+		flattenedVariableItems() {
+			return this.variableCategories ? this.variableCategories.reduce((e, t) => e.concat(t.items || []), []) : [];
+		},
+		showingTextFormatButtons() {
+			return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
+		},
+		showingAlignmentButtons() {
+			return this.showAlignLeftButton || this.showAlignCenterButton || this.showAlignRightButton || this.showAlignJustifyButton;
+		},
+		showingListButtons() {
+			return this.showListItemsButton || this.showOrderedListButton;
+		},
+		orderedRefs() {
+			let e = this.buttonGroups.reduce(function(e, t) {
+				return t.buttonGroup.forEach((n) => {
+					e.push(this.getButtonRef(t.key, n.selector));
+				}, this), e;
+			}.bind(this), []);
+			return e.push(this.getButtonRef("custom", "link")), e;
+		},
+		buttonGroups() {
+			let e = this.individualButtons.map((e) => ({
+				key: e.selector,
+				buttonGroup: [e]
+			}));
+			return [
+				{
+					key: "new",
+					buttonGroup: this.newButtons
+				},
+				{
+					key: "format",
+					buttonGroup: this.textFormatButtons
+				},
+				{
+					key: "alignment",
+					buttonGroup: this.alignmentButtons
+				},
+				{
+					key: "list",
+					buttonGroup: this.listButtons
+				},
+				...e
+			].filter((e) => e.buttonGroup.length > 0);
+		},
+		newButtons() {
+			return [{
+				showBtn: this.showQuickRepliesButton,
+				buttonType: "button",
+				label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
+				selector: "quickReplies",
+				icon: Z,
+				dataQA: "dt-recipe-editor-quick-replies-btn",
+				tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
+				onClick: this.onQuickRepliesClick
+			}].filter((e) => e.showBtn);
+		},
+		textFormatButtons() {
+			return [
+				{
+					showBtn: this.showFontStyleButton,
+					buttonType: "popover",
+					selector: "fontStyle",
+					icon: ce,
+					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: G,
+					dataQA: "dt-recipe-editor-font-size-btn",
+					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_FONT_SIZE_BUTTON_LABEL")
+				},
+				{
+					showBtn: this.showFontColorButton,
+					buttonType: "custom",
+					selector: "fontColor",
+					icon: oe,
+					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: H,
+					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: q,
+					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: $,
+					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: se,
+					dataQA: "dt-recipe-editor-strike-btn",
+					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
+					onClick: this.onStrikethroughTextToggle
+				}
+			].filter((e) => e.showBtn);
+		},
+		alignmentButtons() {
+			return [
+				{
+					showBtn: this.showAlignLeftButton,
+					buttonType: "button",
+					selector: { textAlign: "left" },
+					icon: B,
+					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: R,
+					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: V,
+					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: z,
+					dataQA: "dt-recipe-editor-align-justify-btn",
+					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
+					onClick: () => this.onTextAlign("justify")
+				}
+			].filter((e) => e.showBtn);
+		},
+		listButtons() {
+			return [{
+				showBtn: this.showListItemsButton,
+				buttonType: "button",
+				selector: "bulletList",
+				icon: Y,
+				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: X,
+				dataQA: "dt-recipe-editor-ordered-list-items-btn",
+				tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
+				onClick: this.onOrderedListToggle
+			}].filter((e) => e.showBtn);
+		},
+		individualButtons() {
+			return [
+				{
+					showBtn: this.showQuoteButton,
+					buttonType: "button",
+					selector: "blockquote",
+					icon: Q,
+					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: W,
+					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: K,
+					dataQA: "dt-recipe-editor-inline-image-btn",
+					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
+					onClick: this.onInsertInlineImageClick
+				},
+				{
+					showBtn: this.showVariableButton,
+					buttonType: "popover",
+					selector: "variable",
+					icon: U,
+					dataQA: "dt-recipe-editor-variable-btn",
+					tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
+				}
+			].filter((e) => e.showBtn);
+		},
+		linkButton() {
+			return {
+				showBtn: this.showAddLink.showAddLinkButton,
+				buttonType: "custom",
+				selector: "link",
+				icon: J,
+				dataQA: "dt-recipe-editor-add-link-btn",
+				tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
+				onClick: this.openLinkInput
+			};
+		},
+		confirmSetLinkButtonLabels() {
+			return this.i18n.$ta("DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON");
+		},
+		cancelSetLinkButtonLabels() {
+			return this.i18n.$ta("DIALTONE_EDITOR_CANCEL_SET_LINK_BUTTON");
+		},
+		removeLinkButtonLabels() {
+			return this.i18n.$ta("DIALTONE_EDITOR_REMOVE_LINK_BUTTON");
+		},
+		showAddLinkButtonLabels() {
+			return this.i18n.$ta("DIALTONE_EDITOR_ADD_LINK_BUTTON");
+		},
+		filteredFontStyles() {
+			let e = this.fontStyleSearch.toLowerCase();
+			return this.fontStyles.filter((t) => t.name.toLowerCase().includes(e));
+		},
+		filteredCategories() {
+			return this.variableCategories.filter((e) => this.getFilteredItemsForCategory(e).length);
+		},
+		colorPickerInput() {
+			return this.$refs.editorRoot?.querySelector(".colorPickerInput");
+		},
+		isDefaultFontColor() {
+			return this.currentFontColor === g;
+		},
+		actionBarBtn() {
+			let e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]][0]?.$refs?.buttonRef || this.$refs[this.orderedRefs[this.currentButtonRefIndex]];
+			return Array.isArray(e) ? e[0] : e;
+		}
+	},
+	watch: { modelValue(e) {
+		this.internalInputValue = e;
+	} },
+	methods: {
+		removeClassStyleAttrs: t,
+		addClassStyleAttrs: e,
+		focusEditor() {
+			this.$refs.richTextEditor?.editor?.commands.focus();
+		},
+		onInputFocus(e) {
+			e?.stopPropagation();
+		},
+		removeLink() {
+			this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run(), this.closeLinkInput();
+		},
+		setLink(e) {
+			let t = this.$refs.richTextEditor?.editor;
+			if (e?.preventDefault(), e?.stopPropagation(), !this.linkInput) {
+				this.removeLink();
+				return;
+			}
+			v.find((e) => e.test(this.linkInput)) || (this.linkInput = `${_}${this.linkInput}`);
+			let n = t?.view?.state?.selection;
+			n.anchor === n.head ? t.chain().focus().insertContentAt(n.anchor, `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`).run() : t.chain().focus().extendMarkRange("link").setLink({
+				href: this.linkInput,
+				class: this.linkOptions.class
+			}).run(), this.closeLinkInput();
+		},
+		openLinkInput() {
+			this.showLinkInput = !0;
+		},
+		updateInput(e) {
+			if (!e) return this.closeLinkInput();
+			this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes("link")?.href;
+		},
+		closeLinkInput() {
+			this.showLinkInput = !1, this.linkInput = "", this.$refs.richTextEditor.editor?.chain().focus();
+		},
+		onBoldTextToggle() {
+			this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();
+		},
+		onItalicTextToggle() {
+			this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();
+		},
+		onUnderlineTextToggle() {
+			this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();
+		},
+		onStrikethroughTextToggle() {
+			this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();
+		},
+		onTextAlign(e) {
+			if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: e })) return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();
+			this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(e).run();
+		},
+		onBulletListToggle() {
+			this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();
+		},
+		onOrderedListToggle() {
+			this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();
+		},
+		onCodeBlockToggle() {
+			this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();
+		},
+		onQuickRepliesClick() {
+			this.$emit("quick-replies-click");
+		},
+		onInsertInlineImageClick() {
+			this.$emit("inline-image-click");
+		},
+		insertVariable(e, t) {
+			this.$refs.richTextEditor?.editor.chain().focus().insertVariable({
+				id: t.id,
+				placeholder: t.placeholder || "",
+				altText: "",
+				enableAltText: t.enableAltText
+			}).run();
+		},
+		insertInlineImage(e) {
+			this.$refs.richTextEditor?.editor.chain().focus().setImage({ src: e }).run();
+		},
+		insertInMessageBody(e) {
+			this.$refs.richTextEditor?.editor.chain().focus().insertContent(e).run();
+		},
+		setCursorPosition(e = null) {
+			this.$refs.richTextEditor?.editor.chain().focus(e).run();
+		},
+		onBlockquoteToggle() {
+			this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();
+		},
+		onTextInput(e) {
+			this.$emit("text-input", e);
+		},
+		onFocus(e) {
+			this.hasFocus = !0, this.$emit("focus", e);
+		},
+		onBlur(e) {
+			this.hasFocus = !1, this.$emit("blur", e);
+		},
+		onInput(e) {
+			this.$emit("input", e), this.$emit("update:modelValue", e);
+		},
+		onSelected() {
+			this.updateFontColorInput();
+		},
+		getButtonKey(e, t) {
+			return `${e}-${JSON.stringify(t)}`;
+		},
+		getButtonRef(e, t) {
+			return `${this.getButtonKey(e, t)}-ref`;
+		},
+		canFocus(e) {
+			return e === this.orderedRefs[this.currentButtonRefIndex];
+		},
+		shiftActionBarFocusRight() {
+			this.shiftButtonRefIndex(1);
+		},
+		shiftActionBarFocusLeft() {
+			this.shiftButtonRefIndex(-1);
+		},
+		shiftButtonRefIndex(e) {
+			let t = this.actionBarBtn, n = (this.currentButtonRefIndex + e) % this.orderedRefs.length;
+			this.currentButtonRefIndex = n >= 0 ? n : this.orderedRefs.length + n;
+			let r = this.actionBarBtn;
+			t.$el.blur(), r.$el.focus();
+		},
+		onFontStyleSelect(e) {
+			e ? this.$refs.richTextEditor?.editor?.chain().focus().setFontFamily(e).run() : this.$refs.richTextEditor?.editor?.chain().focus().unsetFontFamily().run(), this.$refs.richTextEditor?.editor?.commands.focus();
+		},
+		isCurrentFontFamily(e) {
+			return e ? this.$refs.richTextEditor?.editor?.isActive("textStyle", { fontFamily: e }) : !this.$refs.richTextEditor?.editor?.getAttributes("textStyle")?.fontFamily;
+		},
+		onFontSizeSelect(e) {
+			this.$refs.richTextEditor?.editor?.chain().focus().setFontSize(e).run(), this.$refs.richTextEditor?.editor?.commands.focus();
+		},
+		isCurrentFontSize(e) {
+			return e ? this.$refs.richTextEditor?.editor?.isActive("textStyle", { fontSize: e }) : !this.$refs.richTextEditor?.editor?.getAttributes("textStyle")?.fontSize;
+		},
+		getFilteredItemsForCategory(e) {
+			let t = this.variableSearchValue.toLowerCase();
+			return e.name.toLowerCase().includes(t) ? e.items : e.items.filter((e) => e.name.toLowerCase().includes(t));
+		},
+		updateFontColorInput() {
+			this.currentFontColor = this.$refs.richTextEditor?.editor?.getAttributes("textStyle")?.color || "#000000";
+		},
+		onColorPickerButtonClick() {
+			this.colorPickerInput?.click();
+		},
+		onColorPickerInput(e) {
+			this.$refs.richTextEditor?.editor?.chain().focus().setColor(e).run(), this.$refs.richTextEditor?.editor?.commands.focus(), this.updateFontColorInput();
+		}
+	}
+}, ue = { class: "d-recipe-editor__popover-content" };
+function de(e, t, n, r, i, a) {
+	let o = M("dt-icon-search"), s = M("dt-input"), c = M("dt-list-item"), l = M("dt-combobox"), u = M("editor-toolbar-popover-button"), d = M("editor-toolbar-dropdown-button"), f = M("dt-button"), p = M("dt-dropdown-separator"), m = M("dt-list-item-group"), h = M("editor-toolbar-button"), g = M("dt-stack"), _ = M("dt-tooltip"), v = M("dt-popover"), y = M("dt-rich-text-editor"), b = ne("dt-tooltip");
+	return A(), w("div", O({
+		ref: "editorRoot",
+		class: "d-recipe-editor"
+	}, a.addClassStyleAttrs(e.$attrs), {
+		"data-qa": "dt-recipe-editor",
+		role: "presentation",
+		onClick: t[7] || (t[7] = (t) => e.$refs.richTextEditor.focusEditor())
+	}), [D(g, {
+		class: "d-recipe-editor__top-bar",
+		direction: "row",
+		gap: "450"
+	}, {
+		default: F(() => [(A(!0), w(x, null, j(a.buttonGroups, (r) => (A(), S(g, {
+			key: r.key,
+			direction: "row",
+			gap: "300"
+		}, {
+			default: F(() => [(A(!0), w(x, null, j(r.buttonGroup, (g) => (A(), w(x, null, [g.buttonType === "popover" && g.selector === "fontStyle" ? (A(), S(u, {
+				key: a.getButtonKey(r.key, g.selector),
+				ref_for: !0,
+				ref: a.getButtonRef(r.key, g.selector),
+				"is-active": e.$refs.richTextEditor?.editor?.isActive(g.selector),
+				"tooltip-message": g.tooltipMessage,
+				"data-qa": g.dataQA,
+				"popover-data-qa": "dt-recipe-editor-font-style-input-popover",
+				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
+				icon: g.icon,
+				onShiftFocusRight: a.shiftActionBarFocusRight,
+				onShiftFocusLeft: a.shiftActionBarFocusLeft
+			}, {
+				content: F(({ close: e }) => [D(l, {
+					label: "",
+					"label-visible": !1,
+					"show-list": !0,
+					"click-on-select": !0,
+					onEscape: (t) => e()
+				}, {
+					input: F(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
+						modelValue: i.fontStyleSearch,
+						"onUpdate:modelValue": t[0] || (t[0] = (e) => i.fontStyleSearch = e),
+						"root-class": "d-p8 d-pb4 d-w216",
+						type: "search",
+						placeholder: i.i18n.$t("DIALTONE_EDITOR_FONT_STYLE_SEARCH_PLACEHOLDER"),
+						size: "sm",
+						role: "menuitem"
+					}), {
+						leftIcon: F(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
+						_: 1
+					}, 16, ["modelValue", "placeholder"])]),
+					list: F(({ listProps: t }) => [T("ul", O({ ref_for: !0 }, t), [(A(!0), w(x, null, j(a.filteredFontStyles, (t) => (A(), S(c, {
+						key: t.name,
+						selected: a.isCurrentFontFamily(t.value),
+						style: k({ fontFamily: t.value || "inherit" }),
+						role: "option",
+						"navigation-type": "arrow-keys",
+						onClick: (n) => {
+							e(a.focusEditor), a.onFontStyleSelect(t.value);
+						}
+					}, {
+						default: F(() => [E(P(t.name), 1)]),
+						_: 2
+					}, 1032, [
+						"selected",
+						"style",
+						"onClick"
+					]))), 128))], 16)]),
+					_: 2
+				}, 1032, ["onEscape"])]),
+				_: 1
+			}, 8, [
+				"is-active",
+				"tooltip-message",
+				"data-qa",
+				"tabindex",
+				"icon",
+				"onShiftFocusRight",
+				"onShiftFocusLeft"
+			])) : g.buttonType === "popover" && g.selector === "fontSize" ? (A(), S(d, {
+				key: a.getButtonKey(r.key, g.selector),
+				ref_for: !0,
+				ref: a.getButtonRef(r.key, g.selector),
+				"is-active": e.$refs.richTextEditor?.editor?.isActive(g.selector),
+				"tooltip-message": g.tooltipMessage,
+				"data-qa": g.dataQA,
+				"dropdown-data-qa": "dt-recipe-editor-font-size-input-popover",
+				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
+				icon: g.icon,
+				onShiftFocusRight: a.shiftActionBarFocusRight,
+				onShiftFocusLeft: a.shiftActionBarFocusLeft
+			}, {
+				list: F(({ close: e }) => [(A(!0), w(x, null, j(n.fontSizes, (t) => (A(), S(c, {
+					key: t.name,
+					selected: a.isCurrentFontSize(t.value),
+					role: "menuitem",
+					"navigation-type": "arrow-keys",
+					onClick: (n) => {
+						e(a.focusEditor), a.onFontSizeSelect(t.value, n);
+					}
+				}, {
+					default: F(() => [T("span", { style: k({ fontSize: t.value }) }, P(t.name), 5)]),
+					_: 2
+				}, 1032, ["selected", "onClick"]))), 128))]),
+				_: 1
+			}, 8, [
+				"is-active",
+				"tooltip-message",
+				"data-qa",
+				"tabindex",
+				"icon",
+				"onShiftFocusRight",
+				"onShiftFocusLeft"
+			])) : g.buttonType === "custom" && g.selector === "fontColor" ? re((A(), S(f, {
+				key: a.getButtonKey(r.key, g.selector),
+				ref_for: !0,
+				ref: a.getButtonRef(r.key, g.selector),
+				kind: "muted",
+				importance: "clear",
+				size: "xs",
+				active: e.$refs.richTextEditor?.editor?.isActive(g.selector),
+				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
+				"aria-label": g.tooltipMessage,
+				"data-qa": g.dataQA,
+				onKeydown: [I(L(a.shiftActionBarFocusRight, ["stop"]), ["right"]), I(L(a.shiftActionBarFocusLeft, ["stop"]), ["left"])],
+				onClick: (e) => g.onClick()
+			}, {
+				icon: F(() => [(A(), S(N(g.icon), {
+					size: "200",
+					style: k(a.isDefaultFontColor ? {} : { color: i.currentFontColor })
+				}, null, 8, ["style"])), D(s, {
+					value: i.currentFontColor,
+					"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: a.onColorPickerInput,
+					onClick: t[1] || (t[1] = L(() => {}, ["stop"]))
+				}, null, 8, ["value", "onInput"])]),
+				_: 2
+			}, 1032, [
+				"active",
+				"tabindex",
+				"aria-label",
+				"data-qa",
+				"onKeydown",
+				"onClick"
+			])), [[b, {
+				message: g.tooltipMessage,
+				placement: "top",
+				externalAnchorElement: e.$refs[a.getButtonRef(r.key, g.selector)]?.$el
+			}]]) : g.buttonType === "popover" && g.selector === "variable" ? (A(), S(u, {
+				key: a.getButtonKey(r.key, g.selector),
+				ref_for: !0,
+				ref: a.getButtonRef(r.key, g.selector),
+				"is-active": !1,
+				"tooltip-message": g.tooltipMessage,
+				"data-qa": g.dataQA,
+				"popover-data-qa": "dt-recipe-editor-variable-popover",
+				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
+				icon: g.icon,
+				onShiftFocusRight: a.shiftActionBarFocusRight,
+				onShiftFocusLeft: a.shiftActionBarFocusLeft
+			}, {
+				content: F(({ close: e }) => [D(l, {
+					label: "",
+					"label-visible": !1,
+					"show-list": !0,
+					"click-on-select": !0,
+					onEscape: (t) => e()
+				}, {
+					input: F(({ inputProps: e }) => [D(s, O({ ref_for: !0 }, e, {
+						modelValue: i.variableSearchValue,
+						"onUpdate:modelValue": t[2] || (t[2] = (e) => i.variableSearchValue = e),
+						"root-class": "d-p8 d-pb4 d-w264",
+						type: "search",
+						placeholder: i.i18n.$t("DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER"),
+						size: "md",
+						role: "menuitem"
+					}), {
+						leftIcon: F(({ iconSize: e }) => [D(o, { size: e }, null, 8, ["size"])]),
+						_: 1
+					}, 16, ["modelValue", "placeholder"])]),
+					list: F(({ listProps: t }) => [T("div", O({ ref_for: !0 }, t), [(A(!0), w(x, null, j(a.filteredCategories, (t, n) => (A(), S(m, {
+						key: t.name,
+						heading: t.name,
+						"heading-class": "d-headline--sm-compact d-p8"
+					}, {
+						default: F(() => [(A(!0), w(x, null, j(a.getFilteredItemsForCategory(t), (n) => (A(), S(c, {
+							key: t.name + n.name,
+							role: "option",
+							"navigation-type": "arrow-keys",
+							onClick: (r) => {
+								a.insertVariable(t.name, n), e(a.focusEditor);
+							}
+						}, {
+							default: F(() => [E(P(n.name), 1)]),
+							_: 2
+						}, 1032, ["onClick"]))), 128)), n < a.filteredCategories.length - 1 ? (A(), S(p, { key: 0 })) : C("", !0)]),
+						_: 2
+					}, 1032, ["heading"]))), 128))], 16)]),
+					_: 2
+				}, 1032, ["onEscape"])]),
+				_: 1
+			}, 8, [
+				"tooltip-message",
+				"data-qa",
+				"tabindex",
+				"icon",
+				"onShiftFocusRight",
+				"onShiftFocusLeft"
+			])) : g.buttonType === "button" ? (A(), S(h, {
+				key: a.getButtonKey(r.key, g.selector),
+				ref_for: !0,
+				ref: a.getButtonRef(r.key, g.selector),
+				"is-active": e.$refs.richTextEditor?.editor?.isActive(g.selector),
+				"tooltip-message": g.tooltipMessage,
+				"data-qa": g.dataQA,
+				tabindex: a.canFocus(a.getButtonRef(r.key, g.selector)) ? 0 : -1,
+				icon: g.icon,
+				label: g.label,
+				"on-click": g.onClick,
+				onShiftFocusRight: a.shiftActionBarFocusRight,
+				onShiftFocusLeft: a.shiftActionBarFocusLeft
+			}, null, 8, [
+				"is-active",
+				"tooltip-message",
+				"data-qa",
+				"tabindex",
+				"icon",
+				"label",
+				"on-click",
+				"onShiftFocusRight",
+				"onShiftFocusLeft"
+			])) : C("", !0)], 64))), 256)), t[8] || (t[8] = T("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))]),
+			_: 2
+		}, 1024))), 128)), a.linkButton.showBtn ? (A(), S(g, {
+			key: 0,
+			direction: "row",
+			gap: "300"
+		}, {
+			default: F(() => [D(v, {
+				open: i.showLinkInput,
+				"show-close-button": !1,
+				"data-qa": "dt-recipe-editor-link-input-popover",
+				padding: "none",
+				placement: "bottom-start",
+				onClick: [a.onInputFocus, L(a.onInputFocus, ["stop"])],
+				onOpened: a.updateInput
+			}, {
+				anchor: F(() => [(A(), S(_, {
+					key: a.linkButton.key,
+					message: a.linkButton.tooltipMessage,
+					placement: "top"
+				}, {
+					anchor: F(() => [D(f, {
+						ref: a.getButtonRef("custom", "link"),
+						active: e.$refs.richTextEditor?.editor?.isActive(a.linkButton.selector),
+						"aria-label": a.linkButton.tooltipMessage,
+						"data-qa": a.linkButton.dataQA,
+						tabindex: a.canFocus(a.getButtonRef("custom", "link")) ? 0 : -1,
+						importance: "clear",
+						kind: "muted",
+						size: "xs",
+						onClick: t[3] || (t[3] = (e) => a.linkButton.onClick()),
+						onKeydown: [I(L(a.shiftActionBarFocusRight, ["stop"]), ["right"]), I(L(a.shiftActionBarFocusLeft, ["stop"]), ["left"])]
+					}, {
+						icon: F(() => [(A(), S(N(a.linkButton.icon), { size: "200" }))]),
+						_: 1
+					}, 8, [
+						"active",
+						"aria-label",
+						"data-qa",
+						"tabindex",
+						"onKeydown"
+					])]),
+					_: 1
+				}, 8, ["message"]))]),
+				content: F(() => [T("div", ue, [T("span", null, P(a.showAddLinkButtonLabels.title), 1), D(s, {
+					modelValue: i.linkInput,
+					"onUpdate:modelValue": t[4] || (t[4] = (e) => i.linkInput = e),
+					"input-aria-label": a.showAddLinkButtonLabels["aria-label"],
+					placeholder: n.setLinkPlaceholder,
+					"data-qa": "dt-recipe-editor-link-input",
+					"input-wrapper-class": "d-recipe-editor-link__input-wrapper",
+					onClick: [a.onInputFocus, L(a.onInputFocus, ["stop"])],
+					onFocus: a.onInputFocus,
+					onKeydown: I(a.setLink, ["enter"])
+				}, null, 8, [
+					"modelValue",
+					"input-aria-label",
+					"placeholder",
+					"onClick",
+					"onFocus",
+					"onKeydown"
+				])])]),
+				footerContent: F(() => [D(g, {
+					direction: "row",
+					gap: "300",
+					class: "d-recipe-editor__popover-footer"
+				}, {
+					default: F(() => [
+						D(f, O({
+							"data-qa": "dt-recipe-editor-remove-link-btn",
+							importance: "clear",
+							kind: "muted",
+							size: "sm"
+						}, a.removeLinkButtonLabels, { onClick: a.removeLink }), {
+							default: F(() => [E(P(a.removeLinkButtonLabels.title), 1)]),
+							_: 1
+						}, 16, ["onClick"]),
+						D(f, O({
+							"data-qa": "dt-recipe-editor-set-link-cancel-btn",
+							importance: "clear",
+							kind: "muted",
+							size: "sm"
+						}, a.cancelSetLinkButtonLabels, { onClick: a.closeLinkInput }), {
+							default: F(() => [E(P(a.cancelSetLinkButtonLabels.title), 1)]),
+							_: 1
+						}, 16, ["onClick"]),
+						D(f, O({
+							"data-qa": "dt-recipe-editor-set-link-confirm-btn",
+							size: "sm"
+						}, a.confirmSetLinkButtonLabels, { onClick: a.setLink }), {
+							default: F(() => [E(P(a.confirmSetLinkButtonLabels.title), 1)]),
+							_: 1
+						}, 16, ["onClick"])
+					]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"open",
+				"onClick",
+				"onOpened"
+			])]),
+			_: 1
+		})) : C("", !0)]),
+		_: 1
+	}), T("div", {
+		style: k({ "max-height": n.maxHeight }),
+		class: te(["d-recipe-editor__content", { "d-recipe-editor__content-image-resize": n.allowImageResize }])
+	}, [D(y, O({
+		ref: "richTextEditor",
+		modelValue: i.internalInputValue,
+		"onUpdate:modelValue": t[5] || (t[5] = (e) => i.internalInputValue = e),
+		"allow-font-color": !0,
+		"allow-font-family": !0,
+		"allow-inline-images": !0,
+		"allow-line-breaks": !0,
+		"allow-variable": !0,
+		"allow-font-size": n.showFontSizeButton,
+		"allow-background-color": n.allowBackgroundColor,
+		"allow-line-height": n.allowLineHeight,
+		"variable-items": a.flattenedVariableItems,
+		"hide-link-bubble-menu": !0,
+		"auto-focus": n.autoFocus,
+		editable: n.editable,
+		"input-aria-label": n.inputAriaLabel,
+		"input-class": `d-recipe-editor__content-input ${n.inputClass}`,
+		link: !0,
+		"output-format": a.htmlOutputFormat,
+		placeholder: n.placeholder,
+		"preserve-whitespace": n.preserveWhitespace,
+		"use-div-tags": n.useDivTags,
+		"allow-tables": n.allowTables,
+		"allow-image-resize": n.allowImageResize,
+		"data-qa": "dt-rich-text-editor"
+	}, a.removeClassStyleAttrs(e.$attrs), {
+		onTextInput: a.onTextInput,
+		onBlur: a.onBlur,
+		onFocus: a.onFocus,
+		onInput: t[6] || (t[6] = (e) => a.onInput(e)),
+		onSelected: a.onSelected
+	}), null, 16, [
+		"modelValue",
+		"allow-font-size",
+		"allow-background-color",
+		"allow-line-height",
+		"variable-items",
+		"auto-focus",
+		"editable",
+		"input-aria-label",
+		"input-class",
+		"output-format",
+		"placeholder",
+		"preserve-whitespace",
+		"use-div-tags",
+		"allow-tables",
+		"allow-image-resize",
+		"onTextInput",
+		"onBlur",
+		"onFocus",
+		"onSelected"
+	])], 6)], 16);
 }
-const ge = /* @__PURE__ */ Dt(Jt, [["render", jt]]);
-export {
-  ge as default
-};
-//# sourceMappingURL=editor.js.map
+var fe = /* @__PURE__ */ n(le, [["render", de]]);
+//#endregion
+export { fe as default };
+
+//# sourceMappingURL=editor.js.map