@dialpad/dialtone-vue 3.176.2 → 3.177.0

package/dist/recipes/conversation_view/editor/editor.vue.js

@@ -1,827 +0,0 @@
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS, EDITOR_DEFAULT_LINK_PREFIX } from "./editor_constants.js";
-import { removeClassStyleAttrs, addClassStyleAttrs } from "../../../common/utils.js";
-import { DtIconLightningBolt, DtIconBold, DtIconItalic, DtIconUnderline, DtIconStrikethrough, DtIconListBullet, DtIconListOrdered, DtIconAlignLeft, DtIconAlignCenter, DtIconAlignRight, DtIconAlignJustify, DtIconQuote, DtIconCodeBlock, DtIconLink2, DtIconImage } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, Fragment, renderList, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString, withModifiers, createElementVNode, createCommentVNode, withKeys, normalizeStyle } from "vue";
-import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
-import DtRichTextEditor from "../../../components/rich_text_editor/rich_text_editor.vue.js";
-import DtButton from "../../../components/button/button.vue.js";
-import DtPopover from "../../../components/popover/popover.vue.js";
-import DtStack from "../../../components/stack/stack.vue.js";
-import DtInput from "../../../components/input/input.vue.js";
-import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
-import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "../../../components/rich_text_editor/rich_text_editor_constants.js";
-const _sfc_main = {
-  compatConfig: { MODE: 3 },
-  name: "DtRecipeEditor",
-  components: {
-    DtRichTextEditor,
-    DtButton,
-    DtPopover,
-    DtStack,
-    DtInput,
-    DtTooltip,
-    DtIconLightningBolt,
-    DtIconBold,
-    DtIconItalic,
-    DtIconUnderline,
-    DtIconStrikethrough,
-    DtIconListBullet,
-    DtIconListOrdered,
-    DtIconAlignLeft,
-    DtIconAlignCenter,
-    DtIconAlignRight,
-    DtIconAlignJustify,
-    DtIconQuote,
-    DtIconCodeBlock,
-    DtIconLink2,
-    DtIconImage
-  },
-  mixins: [],
-  inheritAttrs: false,
-  props: {
-    /**
-     * Value of the input. The object format should match TipTap's JSON
-     * document structure: https://tiptap.dev/guide/output#option-1-json
-     */
-    value: {
-      type: [Object, String],
-      default: ""
-    },
-    /**
-     * Whether the input is editable
-     */
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Descriptive label for the input element
-     */
-    inputAriaLabel: {
-      type: String,
-      required: true,
-      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: false,
-      validator(autoFocus) {
-        if (typeof autoFocus === "string") {
-          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
-        }
-        return true;
-      }
-    },
-    /**
-     * 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"
-    },
-    /**
-     * Confirm set link button defaults.
-     */
-    confirmSetLinkButton: {
-      type: Object,
-      default: () => ({ label: "Confirm", ariaLabel: "Confirm set link" })
-    },
-    /**
-     * Remove link button defaults.
-     */
-    removeLinkButton: {
-      type: Object,
-      default: () => ({ label: "Remove", ariaLabel: "Remove link" })
-    },
-    /**
-     * Cancel set link button defaults.
-     */
-    cancelSetLinkButton: {
-      type: Object,
-      default: () => ({ label: "Cancel", ariaLabel: "Cancel set link" })
-    },
-    /**
-     * Placeholder text for the set link input field
-     */
-    setLinkPlaceholder: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Show button to render text as bold
-     */
-    showBoldButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to render text in italics
-     */
-    showItalicsButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to underline text
-     */
-    showUnderlineButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to strike text
-     */
-    showStrikeButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to render list items
-     */
-    showListItemsButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to render ordered list items
-     */
-    showOrderedListButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to align text to the left
-     */
-    showAlignLeftButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to align text to the center
-     */
-    showAlignCenterButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to align text to the right
-     */
-    showAlignRightButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to justify text
-     */
-    showAlignJustifyButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to add quote format to text
-     */
-    showQuoteButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to add code block
-     */
-    showCodeBlockButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to handle quick replies
-     */
-    showQuickRepliesButton: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Show button to add an inline image
-     */
-    showInlineImageButton: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Show add link default config.
-     */
-    showAddLink: {
-      type: Object,
-      default: () => ({
-        showAddLinkButton: true,
-        setLinkTitle: "Add a link",
-        setLinkInputAriaLabel: "Input field to add link"
-      })
-    },
-    /**
-     * Use div tags instead of paragraph tags to show text
-     */
-    useDivTags: {
-      type: Boolean,
-      default: false
-    }
-  },
-  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",
-    /**
-     * 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.value,
-      // internal input content
-      hasFocus: false,
-      linkOptions: {
-        class: "d-recipe-editor__link"
-      },
-      showLinkInput: false,
-      linkInput: ""
-    };
-  },
-  computed: {
-    inputLength() {
-      return this.internalInputValue.length;
-    },
-    htmlOutputFormat() {
-      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[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;
-    },
-    buttonGroups() {
-      const individualButtonStacks = this.individualButtons.map((buttonData) => ({
-        key: buttonData.selector,
-        buttonGroup: [buttonData]
-      }));
-      return [
-        { key: "new", buttonGroup: this.newButtons },
-        { key: "format", buttonGroup: this.textFormatButtons },
-        { key: "alignment", buttonGroup: this.alignmentButtons },
-        { key: "list", buttonGroup: this.listButtons },
-        ...individualButtonStacks
-      ].filter((buttonGroupData) => buttonGroupData.buttonGroup.length > 0);
-    },
-    newButtons() {
-      return [
-        {
-          showBtn: this.showQuickRepliesButton,
-          label: "Quick reply",
-          selector: "quickReplies",
-          icon: DtIconLightningBolt,
-          dataQA: "dt-recipe-editor-quick-replies-btn",
-          tooltipMessage: "Quick Reply",
-          onClick: this.onQuickRepliesClick
-        }
-      ].filter((button) => button.showBtn);
-    },
-    textFormatButtons() {
-      return [
-        {
-          showBtn: this.showBoldButton,
-          selector: "bold",
-          icon: DtIconBold,
-          dataQA: "dt-recipe-editor-bold-btn",
-          tooltipMessage: "Bold",
-          onClick: this.onBoldTextToggle
-        },
-        {
-          showBtn: this.showItalicsButton,
-          selector: "italic",
-          icon: DtIconItalic,
-          dataQA: "dt-recipe-editor-italics-btn",
-          tooltipMessage: "Italics",
-          onClick: this.onItalicTextToggle
-        },
-        {
-          showBtn: this.showUnderlineButton,
-          selector: "underline",
-          icon: DtIconUnderline,
-          dataQA: "dt-recipe-editor-underline-btn",
-          tooltipMessage: "Underline",
-          onClick: this.onUnderlineTextToggle
-        },
-        {
-          showBtn: this.showStrikeButton,
-          selector: "strike",
-          icon: DtIconStrikethrough,
-          dataQA: "dt-recipe-editor-strike-btn",
-          tooltipMessage: "Strike",
-          onClick: this.onStrikethroughTextToggle
-        }
-      ].filter((button) => button.showBtn);
-    },
-    alignmentButtons() {
-      return [
-        {
-          showBtn: this.showAlignLeftButton,
-          selector: { textAlign: "left" },
-          icon: DtIconAlignLeft,
-          dataQA: "dt-recipe-editor-align-left-btn",
-          tooltipMessage: "Align Left",
-          onClick: () => this.onTextAlign("left")
-        },
-        {
-          showBtn: this.showAlignCenterButton,
-          selector: { textAlign: "center" },
-          icon: DtIconAlignCenter,
-          dataQA: "dt-recipe-editor-align-center-btn",
-          tooltipMessage: "Align Center",
-          onClick: () => this.onTextAlign("center")
-        },
-        {
-          showBtn: this.showAlignRightButton,
-          selector: { textAlign: "right" },
-          icon: DtIconAlignRight,
-          dataQA: "dt-recipe-editor-align-right-btn",
-          tooltipMessage: "Align Right",
-          onClick: () => this.onTextAlign("right")
-        },
-        {
-          showBtn: this.showAlignJustifyButton,
-          selector: { textAlign: "justify" },
-          icon: DtIconAlignJustify,
-          dataQA: "dt-recipe-editor-align-justify-btn",
-          tooltipMessage: "Align Justify",
-          onClick: () => this.onTextAlign("justify")
-        }
-      ].filter((button) => button.showBtn);
-    },
-    listButtons() {
-      return [
-        {
-          showBtn: this.showListItemsButton,
-          selector: "bulletList",
-          icon: DtIconListBullet,
-          dataQA: "dt-recipe-editor-list-items-btn",
-          tooltipMessage: "Bullet List",
-          onClick: this.onBulletListToggle
-        },
-        {
-          showBtn: this.showOrderedListButton,
-          selector: "orderedList",
-          icon: DtIconListOrdered,
-          dataQA: "dt-recipe-editor-ordered-list-items-btn",
-          tooltipMessage: "Ordered List",
-          onClick: this.onOrderedListToggle
-        }
-      ].filter((button) => button.showBtn);
-    },
-    individualButtons() {
-      return [
-        {
-          showBtn: this.showQuoteButton,
-          selector: "blockquote",
-          icon: DtIconQuote,
-          dataQA: "dt-recipe-editor-blockquote-btn",
-          tooltipMessage: "Quote",
-          onClick: this.onBlockquoteToggle
-        },
-        {
-          showBtn: this.showCodeBlockButton,
-          selector: "codeBlock",
-          icon: DtIconCodeBlock,
-          dataQA: "dt-recipe-editor-code-block-btn",
-          tooltipMessage: "Code",
-          onClick: this.onCodeBlockToggle
-        },
-        {
-          showBtn: this.showInlineImageButton,
-          selector: "image",
-          icon: DtIconImage,
-          dataQA: "dt-recipe-editor-inline-image-btn",
-          tooltipMessage: "Image",
-          // Handle getting image
-          onClick: this.onInsertInlineImageClick
-        }
-      ].filter((button) => button.showBtn);
-    },
-    linkButton() {
-      return {
-        showBtn: this.showAddLink.showAddLinkButton,
-        selector: "link",
-        icon: DtIconLink2,
-        dataQA: "dt-recipe-editor-add-link-btn",
-        tooltipMessage: "Link",
-        onClick: this.openLinkInput
-      };
-    }
-  },
-  watch: {
-    value(newValue) {
-      this.internalInputValue = newValue;
-    }
-  },
-  methods: {
-    removeClassStyleAttrs,
-    addClassStyleAttrs,
-    onInputFocus(event) {
-      event == null ? void 0 : event.stopPropagation();
-    },
-    removeLink() {
-      var _a, _b, _c, _d, _e;
-      (_e = (_d = (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.chain()) == null ? void 0 : _c.focus()) == null ? void 0 : _d.unsetLink()) == null ? void 0 : _e.run();
-      this.closeLinkInput();
-    },
-    setLink(event) {
-      var _a, _b, _c;
-      const editor2 = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor;
-      event == null ? void 0 : event.preventDefault();
-      event == null ? void 0 : event.stopPropagation();
-      if (!this.linkInput) {
-        this.removeLink();
-        return;
-      }
-      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find((prefixRegex) => prefixRegex.test(this.linkInput));
-      if (!prefix) {
-        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;
-      }
-      const selection = (_c = (_b = editor2 == null ? void 0 : editor2.view) == null ? void 0 : _b.state) == null ? void 0 : _c.selection;
-      if (selection.anchor === selection.head) {
-        editor2.chain().focus().insertContentAt(
-          selection.anchor,
-          `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
-        ).run();
-      } else {
-        editor2.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run();
-      }
-      this.closeLinkInput();
-    },
-    openLinkInput() {
-      this.showLinkInput = true;
-    },
-    updateInput(openedInput) {
-      var _a, _b, _c;
-      if (!openedInput) {
-        return this.closeLinkInput();
-      }
-      this.linkInput = (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.getAttributes("link")) == null ? void 0 : _c.href;
-    },
-    closeLinkInput() {
-      var _a;
-      this.showLinkInput = false;
-      this.linkInput = "";
-      (_a = this.$refs.richTextEditor.editor) == null ? void 0 : _a.chain().focus();
-    },
-    onBoldTextToggle() {
-      var _a, _b;
-      (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.chain().focus().toggleBold().run();
-    },
-    onItalicTextToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleItalic().run();
-    },
-    onUnderlineTextToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleUnderline().run();
-    },
-    onStrikethroughTextToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleStrike().run();
-    },
-    onTextAlign(alignment) {
-      var _a, _b, _c, _d;
-      if ((_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive({ textAlign: alignment })) {
-        return (_c = this.$refs.richTextEditor) == null ? void 0 : _c.editor.chain().focus().unsetTextAlign().run();
-      }
-      (_d = this.$refs.richTextEditor) == null ? void 0 : _d.editor.chain().focus().setTextAlign(alignment).run();
-    },
-    onBulletListToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBulletList().run();
-    },
-    onOrderedListToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleOrderedList().run();
-    },
-    onCodeBlockToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleCodeBlock().run();
-    },
-    onQuickRepliesClick() {
-      this.$emit("quick-replies-click");
-    },
-    onInsertInlineImageClick() {
-      this.$emit("inline-image-click");
-    },
-    insertInlineImage(imageUrl) {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().setImage({ src: imageUrl }).run();
-    },
-    insertInMessageBody(messageContent) {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().insertContent(messageContent).run();
-    },
-    setCursorPosition(position = null) {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus(position).run();
-    },
-    onBlockquoteToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBlockquote().run();
-    },
-    onTextInput(input) {
-      this.$emit("text-input", input);
-    },
-    onFocus(event) {
-      this.hasFocus = true;
-      this.$emit("focus", event);
-    },
-    onBlur(event) {
-      this.hasFocus = false;
-      this.$emit("blur", event);
-    },
-    onInput(event) {
-      this.$emit("input", event);
-    }
-  }
-};
-const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "d-recipe-editor__button-group-divider" }, null, -1);
-const _hoisted_2 = { class: "d-recipe-editor__popover-content" };
-const _hoisted_3 = { key: 0 };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_button = resolveComponent("dt-button");
-  const _component_dt_tooltip = resolveComponent("dt-tooltip");
-  const _component_dt_stack = resolveComponent("dt-stack");
-  const _component_dt_input = resolveComponent("dt-input");
-  const _component_dt_popover = resolveComponent("dt-popover");
-  const _component_dt_rich_text_editor = resolveComponent("dt-rich-text-editor");
-  return openBlock(), createElementBlock("div", mergeProps({ class: "d-recipe-editor" }, $options.addClassStyleAttrs(_ctx.$attrs), {
-    "data-qa": "dt-recipe-editor",
-    role: "presentation",
-    onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.richTextEditor.focusEditor())
-  }), [
-    createVNode(_component_dt_stack, {
-      class: "d-recipe-editor__top-bar",
-      direction: "row",
-      gap: "450"
-    }, {
-      default: withCtx(() => [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($options.buttonGroups, (buttonGroup) => {
-          return openBlock(), createBlock(_component_dt_stack, {
-            key: buttonGroup.key,
-            direction: "row",
-            gap: "300"
-          }, {
-            default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(buttonGroup.buttonGroup, (button) => {
-                return openBlock(), createBlock(_component_dt_tooltip, {
-                  key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`,
-                  message: button.tooltipMessage,
-                  placement: "top"
-                }, {
-                  anchor: withCtx(() => {
-                    var _a, _b;
-                    return [
-                      createVNode(_component_dt_button, {
-                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button.selector),
-                        "aria-label": button.tooltipMessage,
-                        "data-qa": button.dataQA,
-                        importance: "clear",
-                        kind: "muted",
-                        size: "xs",
-                        onClick: ($event) => button.onClick()
-                      }, {
-                        icon: withCtx(() => [
-                          (openBlock(), createBlock(resolveDynamicComponent(button.icon), { size: "200" }))
-                        ]),
-                        default: withCtx(() => [
-                          createTextVNode(" " + toDisplayString(button == null ? void 0 : button.label), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["active", "aria-label", "data-qa", "onClick"])
-                    ];
-                  }),
-                  _: 2
-                }, 1032, ["message"]);
-              }), 128)),
-              _hoisted_1
-            ]),
-            _: 2
-          }, 1024);
-        }), 128)),
-        $options.linkButton.showBtn ? (openBlock(), createBlock(_component_dt_stack, {
-          key: 0,
-          direction: "row",
-          gap: "300"
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_dt_popover, {
-              open: $data.showLinkInput,
-              "show-close-button": false,
-              "visually-hidden-close": true,
-              "visually-hidden-close-label": "Close link input popover",
-              "data-qa": "dt-recipe-editor-link-input-popover",
-              padding: "none",
-              placement: "bottom-start",
-              onClick: [
-                $options.onInputFocus,
-                withModifiers($options.onInputFocus, ["stop"])
-              ],
-              onOpened: $options.updateInput
-            }, {
-              anchor: withCtx(() => [
-                (openBlock(), createBlock(_component_dt_tooltip, {
-                  key: $options.linkButton.key,
-                  message: $options.linkButton.tooltipMessage,
-                  placement: "top"
-                }, {
-                  anchor: withCtx(() => {
-                    var _a, _b;
-                    return [
-                      createVNode(_component_dt_button, {
-                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive($options.linkButton.selector),
-                        "aria-label": $options.linkButton.tooltipMessage,
-                        "data-qa": $options.linkButton.dataQA,
-                        importance: "clear",
-                        kind: "muted",
-                        size: "xs",
-                        onClick: _cache[0] || (_cache[0] = ($event) => $options.linkButton.onClick())
-                      }, {
-                        icon: withCtx(() => [
-                          (openBlock(), createBlock(resolveDynamicComponent($options.linkButton.icon), { size: "200" }))
-                        ]),
-                        _: 1
-                      }, 8, ["active", "aria-label", "data-qa"])
-                    ];
-                  }),
-                  _: 1
-                }, 8, ["message"]))
-              ]),
-              content: withCtx(() => [
-                createElementVNode("div", _hoisted_2, [
-                  $props.showAddLink.setLinkTitle.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString($props.showAddLink.setLinkTitle), 1)) : createCommentVNode("", true),
-                  createVNode(_component_dt_input, {
-                    modelValue: $data.linkInput,
-                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.linkInput = $event),
-                    "input-aria-label": $props.showAddLink.setLinkInputAriaLabel,
-                    placeholder: $props.setLinkPlaceholder,
-                    "data-qa": "dt-recipe-editor-link-input",
-                    "input-wrapper-class": "d-recipe-editor-link__input-wrapper",
-                    onClick: [
-                      $options.onInputFocus,
-                      withModifiers($options.onInputFocus, ["stop"])
-                    ],
-                    onFocus: $options.onInputFocus,
-                    onKeydown: withKeys($options.setLink, ["enter"])
-                  }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
-                ])
-              ]),
-              footerContent: withCtx(() => [
-                createVNode(_component_dt_stack, {
-                  direction: "row",
-                  gap: "300",
-                  class: "d-recipe-editor__popover-footer"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_dt_button, {
-                      "aria-label": $props.removeLinkButton.ariaLabel,
-                      "data-qa": "dt-recipe-editor-remove-link-btn",
-                      importance: "clear",
-                      kind: "muted",
-                      size: "sm",
-                      onClick: $options.removeLink
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString($props.removeLinkButton.label), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["aria-label", "onClick"]),
-                    createVNode(_component_dt_button, {
-                      "aria-label": $props.cancelSetLinkButton.ariaLabel,
-                      "data-qa": "dt-recipe-editor-set-link-cancel-btn",
-                      importance: "clear",
-                      kind: "muted",
-                      size: "sm",
-                      onClick: $options.closeLinkInput
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString($props.cancelSetLinkButton.label), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["aria-label", "onClick"]),
-                    createVNode(_component_dt_button, {
-                      "aria-label": $props.confirmSetLinkButton.ariaLabel,
-                      "data-qa": "dt-recipe-editor-set-link-confirm-btn",
-                      size: "sm",
-                      onClick: $options.setLink
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString($props.confirmSetLinkButton.label), 1)
-                      ]),
-                      _: 1
-                    }, 8, ["aria-label", "onClick"])
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["open", "onClick", "onOpened"])
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ]),
-      _: 1
-    }),
-    createElementVNode("div", {
-      style: normalizeStyle({ "max-height": $props.maxHeight }),
-      class: "d-recipe-editor__content"
-    }, [
-      createVNode(_component_dt_rich_text_editor, mergeProps({
-        ref: "richTextEditor",
-        modelValue: $data.internalInputValue,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.internalInputValue = $event),
-        "allow-inline-images": true,
-        "allow-line-breaks": true,
-        "hide-link-bubble-menu": true,
-        "auto-focus": $props.autoFocus,
-        editable: $props.editable,
-        "input-aria-label": $props.inputAriaLabel,
-        "input-class": `d-recipe-editor__content-input ${$props.inputClass}`,
-        link: true,
-        "output-format": $options.htmlOutputFormat,
-        placeholder: $props.placeholder,
-        "use-div-tags": $props.useDivTags,
-        "data-qa": "dt-rich-text-editor"
-      }, $options.removeClassStyleAttrs(_ctx.$attrs), {
-        onTextInput: $options.onTextInput,
-        onBlur: $options.onBlur,
-        onFocus: $options.onFocus,
-        onInput: _cache[3] || (_cache[3] = ($event) => $options.onInput($event))
-      }), null, 16, ["modelValue", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "onTextInput", "onBlur", "onFocus"])
-    ], 4)
-  ], 16);
-}
-const editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export {
-  editor as default
-};
-//# sourceMappingURL=editor.vue.js.map