import { EDITOR_SUPPORTED_LINK_PROTOCOLS as z, EDITOR_DEFAULT_LINK_PREFIX as J } from "./editor-constants.js";
import { removeClassStyleAttrs as j, addClassStyleAttrs as H } from "../../common/utils/index.js";
import { DtIconQuickReply as w, DtIconBold as O, DtIconItalic as D, DtIconUnderline as R, DtIconStrikethrough as x, DtIconListBullet as y, DtIconListOrdered as C, DtIconAlignLeft as b, DtIconAlignCenter as N, DtIconAlignRight as S, DtIconAlignJustify as U, DtIconQuote as F, DtIconCodeBlock as v, DtIconLink2 as Q, DtIconImage as M } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as Y } from "../../localization/index.js";
import { resolveComponent as h, openBlock as c, createElementBlock as A, mergeProps as f, createVNode as a, withCtx as u, Fragment as q, renderList as V, createBlock as p, withKeys as g, withModifiers as B, resolveDynamicComponent as K, createTextVNode as L, toDisplayString as k, createElementVNode as _, createCommentVNode as X, normalizeStyle as W } from "vue";
import { _ as Z } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import tt from "../rich-text-editor/rich-text-editor.js";
import et from "../button/button.js";
import it from "../popover/popover.js";
import nt from "../stack/stack.js";
import ot from "../input/input.js";
import rt from "../tooltip/tooltip.js";
import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as st, RICH_TEXT_EDITOR_OUTPUT_FORMATS as lt } from "../rich-text-editor/rich-text-editor-constants.js";
const ut = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeEditor",
  components: {
    DtRichTextEditor: tt,
    DtButton: et,
    DtPopover: it,
    DtStack: nt,
    DtInput: ot,
    DtTooltip: rt,
    DtIconQuickReply: w,
    DtIconBold: O,
    DtIconItalic: D,
    DtIconUnderline: R,
    DtIconStrikethrough: x,
    DtIconListBullet: y,
    DtIconListOrdered: C,
    DtIconAlignLeft: b,
    DtIconAlignCenter: N,
    DtIconAlignRight: S,
    DtIconAlignJustify: U,
    DtIconQuote: F,
    DtIconCodeBlock: v,
    DtIconLink2: Q,
    DtIconImage: M
  },
  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" ? st.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 add link default config.
     */
    showAddLink: {
      type: Object,
      default: () => ({
        showAddLinkButton: !0
      })
    },
    /**
     * Use div tags instead of paragraph tags to show text
     */
    useDivTags: {
      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"
      },
      showLinkInput: !1,
      linkInput: "",
      currentButtonRefIndex: 0,
      i18n: new Y()
    };
  },
  computed: {
    inputLength() {
      return this.internalInputValue.length;
    },
    htmlOutputFormat() {
      return lt[2];
    },
    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(e, n) {
        return n.buttonGroup.forEach((o) => {
          e.push(this.getButtonRef(n.key, o.selector));
        }, this), e;
      }).bind(this), []);
      return t.push(this.getButtonRef("custom", "link")), t;
    },
    buttonGroups() {
      const t = 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 },
        ...t
      ].filter((e) => e.buttonGroup.length > 0);
    },
    newButtons() {
      return [
        {
          showBtn: this.showQuickRepliesButton,
          label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
          selector: "quickReplies",
          icon: w,
          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.showBoldButton,
          selector: "bold",
          icon: O,
          dataQA: "dt-recipe-editor-bold-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
          onClick: this.onBoldTextToggle
        },
        {
          showBtn: this.showItalicsButton,
          selector: "italic",
          icon: D,
          dataQA: "dt-recipe-editor-italics-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
          onClick: this.onItalicTextToggle
        },
        {
          showBtn: this.showUnderlineButton,
          selector: "underline",
          icon: R,
          dataQA: "dt-recipe-editor-underline-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
          onClick: this.onUnderlineTextToggle
        },
        {
          showBtn: this.showStrikeButton,
          selector: "strike",
          icon: x,
          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,
          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,
          selector: { textAlign: "center" },
          icon: N,
          dataQA: "dt-recipe-editor-align-center-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
          onClick: () => this.onTextAlign("center")
        },
        {
          showBtn: this.showAlignRightButton,
          selector: { textAlign: "right" },
          icon: S,
          dataQA: "dt-recipe-editor-align-right-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
          onClick: () => this.onTextAlign("right")
        },
        {
          showBtn: this.showAlignJustifyButton,
          selector: { textAlign: "justify" },
          icon: U,
          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,
          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,
          selector: "orderedList",
          icon: C,
          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,
          selector: "blockquote",
          icon: F,
          dataQA: "dt-recipe-editor-blockquote-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
          onClick: this.onBlockquoteToggle
        },
        {
          showBtn: this.showCodeBlockButton,
          selector: "codeBlock",
          icon: v,
          dataQA: "dt-recipe-editor-code-block-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
          onClick: this.onCodeBlockToggle
        },
        {
          showBtn: this.showInlineImageButton,
          selector: "image",
          icon: M,
          dataQA: "dt-recipe-editor-inline-image-btn",
          tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
          // Handle getting image
          onClick: this.onInsertInlineImageClick
        }
      ].filter((t) => t.showBtn);
    },
    linkButton() {
      return {
        showBtn: this.showAddLink.showAddLinkButton,
        selector: "link",
        icon: Q,
        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");
    }
  },
  watch: {
    modelValue(t) {
      this.internalInputValue = t;
    }
  },
  methods: {
    removeClassStyleAttrs: j,
    addClassStyleAttrs: H,
    onInputFocus(t) {
      t == null || t.stopPropagation();
    },
    removeLink() {
      var t, e, n, o, r;
      (r = (o = (n = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : n.focus()) == null ? void 0 : o.unsetLink()) == null || r.run(), this.closeLinkInput();
    },
    setLink(t) {
      var r, i, d;
      const e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor;
      if (t == null || t.preventDefault(), t == null || t.stopPropagation(), !this.linkInput) {
        this.removeLink();
        return;
      }
      z.find((T) => T.test(this.linkInput)) || (this.linkInput = `${J}${this.linkInput}`);
      const o = (d = (i = e == null ? void 0 : e.view) == null ? void 0 : i.state) == null ? void 0 : d.selection;
      o.anchor === o.head ? e.chain().focus().insertContentAt(
        o.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();
    },
    openLinkInput() {
      this.showLinkInput = !0;
    },
    updateInput(t) {
      var e, n, o;
      if (!t)
        return this.closeLinkInput();
      this.linkInput = (o = (n = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : n.getAttributes("link")) == null ? void 0 : o.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();
    },
    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 e, n, o, r;
      if ((n = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) != null && n.isActive({ textAlign: t }))
        return (o = this.$refs.richTextEditor) == null ? void 0 : o.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");
    },
    insertInlineImage(t) {
      var e;
      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().setImage({ src: t }).run();
    },
    insertInMessageBody(t) {
      var e;
      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().insertContent(t).run();
    },
    setCursorPosition(t = null) {
      var e;
      (e = this.$refs.richTextEditor) == null || e.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);
    },
    getButtonKey(t, e) {
      return `${t}-${JSON.stringify(e)}`;
    },
    // Unique Button Ref Key to identify ref
    getButtonRef(t, e) {
      return `${this.getButtonKey(t, e)}-ref`;
    },
    /**
     * Determines if an element in the action bar button list is focusable with tab key
     * @param {string} refKey - unique identifier for the ref element in DOM
     */
    canFocus(t) {
      return t === this.orderedRefs[this.currentButtonRefIndex];
    },
    shiftActionBarFocusRight() {
      this.shiftButtonRefIndex(1);
    },
    shiftActionBarFocusLeft() {
      this.shiftButtonRefIndex(-1);
    },
    shiftButtonRefIndex(t) {
      const e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], n = Array.isArray(e) ? e[0] : e, o = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
      this.currentButtonRefIndex = o >= 0 ? o : this.orderedRefs.length + o;
      const r = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], i = Array.isArray(r) ? r[0] : r;
      n.$el.blur(), i.$el.focus();
    }
  }
}, at = /* @__PURE__ */ _("div", { class: "d-recipe-editor__button-group-divider" }, null, -1), ct = { class: "d-recipe-editor__popover-content" };
function dt(t, e, n, o, r, i) {
  const d = h("dt-button"), T = h("dt-tooltip"), I = h("dt-stack"), P = h("dt-input"), G = h("dt-popover"), $ = h("dt-rich-text-editor");
  return c(), A("div", f({ class: "d-recipe-editor" }, i.addClassStyleAttrs(t.$attrs), {
    "data-qa": "dt-recipe-editor",
    role: "presentation",
    onClick: e[4] || (e[4] = (s) => t.$refs.richTextEditor.focusEditor())
  }), [
    a(I, {
      class: "d-recipe-editor__top-bar",
      direction: "row",
      gap: "450"
    }, {
      default: u(() => [
        (c(!0), A(q, null, V(i.buttonGroups, (s) => (c(), p(I, {
          key: s.key,
          direction: "row",
          gap: "300"
        }, {
          default: u(() => [
            (c(!0), A(q, null, V(s.buttonGroup, (l) => (c(), p(T, {
              key: i.getButtonKey(s.key, l.selector),
              message: l.tooltipMessage,
              placement: "top"
            }, {
              anchor: u(() => {
                var m, E;
                return [
                  a(d, {
                    ref_for: !0,
                    ref: i.getButtonRef(s.key, l.selector),
                    active: (E = (m = t.$refs.richTextEditor) == null ? void 0 : m.editor) == null ? void 0 : E.isActive(l.selector),
                    "aria-label": l.tooltipMessage,
                    "data-qa": l.dataQA,
                    tabindex: i.canFocus(i.getButtonRef(s.key, l.selector)) ? 0 : -1,
                    importance: "clear",
                    kind: "muted",
                    size: "xs",
                    onClick: (ht) => l.onClick(),
                    onKeydown: [
                      g(B(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
                      g(B(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                    ]
                  }, {
                    icon: u(() => [
                      (c(), p(K(l.icon), { size: "200" }))
                    ]),
                    default: u(() => [
                      L(" " + k(l == null ? void 0 : l.label), 1)
                    ]),
                    _: 2
                  }, 1032, ["active", "aria-label", "data-qa", "tabindex", "onClick", "onKeydown"])
                ];
              }),
              _: 2
            }, 1032, ["message"]))), 128)),
            at
          ]),
          _: 2
        }, 1024))), 128)),
        i.linkButton.showBtn ? (c(), p(I, {
          key: 0,
          direction: "row",
          gap: "300"
        }, {
          default: u(() => [
            a(G, {
              open: r.showLinkInput,
              "show-close-button": !1,
              "data-qa": "dt-recipe-editor-link-input-popover",
              padding: "none",
              placement: "bottom-start",
              onClick: [
                i.onInputFocus,
                B(i.onInputFocus, ["stop"])
              ],
              onOpened: i.updateInput
            }, {
              anchor: u(() => [
                (c(), p(T, {
                  key: i.linkButton.key,
                  message: i.linkButton.tooltipMessage,
                  placement: "top"
                }, {
                  anchor: u(() => {
                    var s, l;
                    return [
                      a(d, {
                        ref: i.getButtonRef("custom", "link"),
                        active: (l = (s = t.$refs.richTextEditor) == null ? void 0 : s.editor) == null ? void 0 : l.isActive(i.linkButton.selector),
                        "aria-label": i.linkButton.tooltipMessage,
                        "data-qa": i.linkButton.dataQA,
                        tabindex: i.canFocus(i.getButtonRef("custom", "link")) ? 0 : -1,
                        importance: "clear",
                        kind: "muted",
                        size: "xs",
                        onClick: e[0] || (e[0] = (m) => i.linkButton.onClick()),
                        onKeydown: [
                          g(B(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
                          g(B(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                        ]
                      }, {
                        icon: u(() => [
                          (c(), p(K(i.linkButton.icon), { size: "200" }))
                        ]),
                        _: 1
                      }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
                    ];
                  }),
                  _: 1
                }, 8, ["message"]))
              ]),
              content: u(() => [
                _("div", ct, [
                  _("span", null, k(i.showAddLinkButtonLabels.title), 1),
                  a(P, {
                    modelValue: r.linkInput,
                    "onUpdate:modelValue": e[1] || (e[1] = (s) => r.linkInput = s),
                    "input-aria-label": i.showAddLinkButtonLabels["aria-label"],
                    placeholder: n.setLinkPlaceholder,
                    "data-qa": "dt-recipe-editor-link-input",
                    "input-wrapper-class": "d-recipe-editor-link__input-wrapper",
                    onClick: [
                      i.onInputFocus,
                      B(i.onInputFocus, ["stop"])
                    ],
                    onFocus: i.onInputFocus,
                    onKeydown: g(i.setLink, ["enter"])
                  }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
                ])
              ]),
              footerContent: u(() => [
                a(I, {
                  direction: "row",
                  gap: "300",
                  class: "d-recipe-editor__popover-footer"
                }, {
                  default: u(() => [
                    a(d, f({
                      "data-qa": "dt-recipe-editor-remove-link-btn",
                      importance: "clear",
                      kind: "muted",
                      size: "sm"
                    }, i.removeLinkButtonLabels, { onClick: i.removeLink }), {
                      default: u(() => [
                        L(k(i.removeLinkButtonLabels.title), 1)
                      ]),
                      _: 1
                    }, 16, ["onClick"]),
                    a(d, f({
                      "data-qa": "dt-recipe-editor-set-link-cancel-btn",
                      importance: "clear",
                      kind: "muted",
                      size: "sm"
                    }, i.cancelSetLinkButtonLabels, { onClick: i.closeLinkInput }), {
                      default: u(() => [
                        L(k(i.cancelSetLinkButtonLabels.title), 1)
                      ]),
                      _: 1
                    }, 16, ["onClick"]),
                    a(d, f({
                      "data-qa": "dt-recipe-editor-set-link-confirm-btn",
                      size: "sm"
                    }, i.confirmSetLinkButtonLabels, { onClick: i.setLink }), {
                      default: u(() => [
                        L(k(i.confirmSetLinkButtonLabels.title), 1)
                      ]),
                      _: 1
                    }, 16, ["onClick"])
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }, 8, ["open", "onClick", "onOpened"])
          ]),
          _: 1
        })) : X("", !0)
      ]),
      _: 1
    }),
    _("div", {
      style: W({ "max-height": n.maxHeight }),
      class: "d-recipe-editor__content"
    }, [
      a($, f({
        ref: "richTextEditor",
        modelValue: r.internalInputValue,
        "onUpdate:modelValue": e[2] || (e[2] = (s) => r.internalInputValue = s),
        "allow-font-color": !0,
        "allow-font-family": !0,
        "allow-inline-images": !0,
        "allow-line-breaks": !0,
        "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": i.htmlOutputFormat,
        placeholder: n.placeholder,
        "use-div-tags": n.useDivTags,
        "data-qa": "dt-rich-text-editor"
      }, i.removeClassStyleAttrs(t.$attrs), {
        onTextInput: i.onTextInput,
        onBlur: i.onBlur,
        onFocus: i.onFocus,
        onInput: e[3] || (e[3] = (s) => i.onInput(s))
      }), null, 16, ["modelValue", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "onTextInput", "onBlur", "onFocus"])
    ], 4)
  ], 16);
}
const Ot = /* @__PURE__ */ Z(ut, [["render", dt]]);
export {
  Ot as default
};
//# sourceMappingURL=editor.js.map
