@dialpad/dialtone-vue 3.156.2 → 3.157.0

package/dist/packages/dialtone-vue3/recipes/conversation_view/editor/editor.vue.cjs

@@ -1,769 +0,0 @@
-"use strict";
-const editor_constants = require("./editor_constants.cjs");
-const vue3 = require("@dialpad/dialtone-icons/vue3");
-const vue = require("vue");
-;/* empty css              */
-const _pluginVue_exportHelper = require("../../../../../_virtual/_plugin-vue_export-helper.cjs");
-const rich_text_editor = require("../../../components/rich_text_editor/rich_text_editor.vue.cjs");
-const button = require("../../../components/button/button.vue.cjs");
-const popover = require("../../../components/popover/popover.vue.cjs");
-const stack = require("../../../components/stack/stack.vue.cjs");
-const input = require("../../../components/input/input.vue.cjs");
-const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
-const rich_text_editor_constants = require("../../../components/rich_text_editor/rich_text_editor_constants.cjs");
-const _sfc_main = {
-  name: "DtRecipeEditor",
-  components: {
-    DtRichTextEditor: rich_text_editor,
-    DtButton: button,
-    DtPopover: popover,
-    DtStack: stack,
-    DtInput: input,
-    DtTooltip: tooltip,
-    DtIconLightningBolt: vue3.DtIconLightningBolt,
-    DtIconBold: vue3.DtIconBold,
-    DtIconItalic: vue3.DtIconItalic,
-    DtIconUnderline: vue3.DtIconUnderline,
-    DtIconStrikethrough: vue3.DtIconStrikethrough,
-    DtIconListBullet: vue3.DtIconListBullet,
-    DtIconListOrdered: vue3.DtIconListOrdered,
-    DtIconAlignLeft: vue3.DtIconAlignLeft,
-    DtIconAlignCenter: vue3.DtIconAlignCenter,
-    DtIconAlignRight: vue3.DtIconAlignRight,
-    DtIconAlignJustify: vue3.DtIconAlignJustify,
-    DtIconQuote: vue3.DtIconQuote,
-    DtIconCodeBlock: vue3.DtIconCodeBlock,
-    DtIconLink2: vue3.DtIconLink2
-  },
-  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_constants.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 add link default config.
-     */
-    showAddLink: {
-      type: Object,
-      default: () => ({
-        showAddLinkButton: true,
-        setLinkTitle: "Add a link",
-        setLinkInputAriaLabel: "Input field to add link"
-      })
-    }
-  },
-  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"
-  ],
-  data() {
-    return {
-      internalInputValue: this.value,
-      // internal input content
-      hasFocus: false,
-      linkOptions: {
-        class: "d-link d-c-text d-d-inline-block"
-      },
-      showLinkInput: false,
-      linkInput: ""
-    };
-  },
-  computed: {
-    inputLength() {
-      return this.internalInputValue.length;
-    },
-    htmlOutputFormat() {
-      return rich_text_editor_constants.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: vue3.DtIconLightningBolt,
-          dataQA: "dt-editor-quick-replies-btn",
-          tooltipMessage: "Quick Reply",
-          onClick: this.onQuickRepliesClick
-        }
-      ].filter((button2) => button2.showBtn);
-    },
-    textFormatButtons() {
-      return [
-        {
-          showBtn: this.showBoldButton,
-          selector: "bold",
-          icon: vue3.DtIconBold,
-          dataQA: "dt-editor-bold-btn",
-          tooltipMessage: "Bold",
-          onClick: this.onBoldTextToggle
-        },
-        {
-          showBtn: this.showItalicsButton,
-          selector: "italic",
-          icon: vue3.DtIconItalic,
-          dataQA: "dt-editor-italics-btn",
-          tooltipMessage: "Italics",
-          onClick: this.onItalicTextToggle
-        },
-        {
-          showBtn: this.showUnderlineButton,
-          selector: "underline",
-          icon: vue3.DtIconUnderline,
-          dataQA: "dt-editor-underline-btn",
-          tooltipMessage: "Underline",
-          onClick: this.onUnderlineTextToggle
-        },
-        {
-          showBtn: this.showStrikeButton,
-          selector: "strike",
-          icon: vue3.DtIconStrikethrough,
-          dataQA: "dt-editor-strike-btn",
-          tooltipMessage: "Strike",
-          onClick: this.onStrikethroughTextToggle
-        }
-      ].filter((button2) => button2.showBtn);
-    },
-    alignmentButtons() {
-      return [
-        {
-          showBtn: this.showAlignLeftButton,
-          selector: { textAlign: "left" },
-          icon: vue3.DtIconAlignLeft,
-          dataQA: "dt-editor-align-left-btn",
-          tooltipMessage: "Align Left",
-          onClick: () => this.onTextAlign("left")
-        },
-        {
-          showBtn: this.showAlignCenterButton,
-          selector: { textAlign: "center" },
-          icon: vue3.DtIconAlignCenter,
-          dataQA: "dt-editor-align-center-btn",
-          tooltipMessage: "Align Center",
-          onClick: () => this.onTextAlign("center")
-        },
-        {
-          showBtn: this.showAlignRightButton,
-          selector: { textAlign: "right" },
-          icon: vue3.DtIconAlignRight,
-          dataQA: "dt-editor-align-right-btn",
-          tooltipMessage: "Align Right",
-          onClick: () => this.onTextAlign("right")
-        },
-        {
-          showBtn: this.showAlignJustifyButton,
-          selector: { textAlign: "justify" },
-          icon: vue3.DtIconAlignJustify,
-          dataQA: "dt-editor-align-justify-btn",
-          tooltipMessage: "Align Justify",
-          onClick: () => this.onTextAlign("justify")
-        }
-      ].filter((button2) => button2.showBtn);
-    },
-    listButtons() {
-      return [
-        {
-          showBtn: this.showListItemsButton,
-          selector: "bulletList",
-          icon: vue3.DtIconListBullet,
-          dataQA: "dt-editor-list-items-btn",
-          tooltipMessage: "Bullet List",
-          onClick: this.onBulletListToggle
-        },
-        {
-          showBtn: this.showOrderedListButton,
-          selector: "orderedList",
-          icon: vue3.DtIconListOrdered,
-          dataQA: "dt-editor-ordered-list-items-btn",
-          tooltipMessage: "Ordered List",
-          onClick: this.onOrderedListToggle
-        }
-      ].filter((button2) => button2.showBtn);
-    },
-    individualButtons() {
-      return [
-        {
-          showBtn: this.showQuoteButton,
-          selector: "blockquote",
-          icon: vue3.DtIconQuote,
-          dataQA: "dt-editor-blockquote-btn",
-          tooltipMessage: "Quote",
-          onClick: this.onBlockquoteToggle
-        },
-        {
-          showBtn: this.showCodeBlockButton,
-          selector: "codeBlock",
-          icon: vue3.DtIconCodeBlock,
-          dataQA: "dt-editor-code-block-btn",
-          tooltipMessage: "Code",
-          onClick: this.onCodeBlockToggle
-        }
-      ].filter((button2) => button2.showBtn);
-    },
-    linkButton() {
-      return {
-        showBtn: this.showAddLink.showAddLinkButton,
-        selector: "link",
-        icon: vue3.DtIconLink2,
-        dataQA: "dt-editor-add-link-btn",
-        tooltipMessage: "Link",
-        onClick: this.openLinkInput
-      };
-    }
-  },
-  watch: {
-    value(newValue) {
-      this.internalInputValue = newValue;
-    }
-  },
-  methods: {
-    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_constants.EDITOR_SUPPORTED_LINK_PROTOCOLS.find(
-        (prefixRegex) => prefixRegex.test(this.linkInput)
-      );
-      if (!prefix) {
-        this.linkInput = `${editor_constants.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");
-    },
-    onBlockquoteToggle() {
-      var _a;
-      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBlockquote().run();
-    },
-    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__ */ vue.createElementVNode("div", { class: "dt-editor--button-group-divider" }, null, -1);
-const _hoisted_2 = { key: 0 };
-const _hoisted_3 = { class: "d-ml8 d-mr12" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_button = vue.resolveComponent("dt-button");
-  const _component_dt_tooltip = vue.resolveComponent("dt-tooltip");
-  const _component_dt_stack = vue.resolveComponent("dt-stack");
-  const _component_dt_input = vue.resolveComponent("dt-input");
-  const _component_dt_popover = vue.resolveComponent("dt-popover");
-  const _component_dt_rich_text_editor = vue.resolveComponent("dt-rich-text-editor");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    "data-qa": "dt-editor",
-    role: "presentation",
-    class: "d-d-flex d-fd-column",
-    onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.richTextEditor.focusEditor())
-  }, [
-    vue.createVNode(_component_dt_stack, {
-      direction: "row",
-      gap: "450",
-      class: "d-p8 dt-editor--top-bar-background"
-    }, {
-      default: vue.withCtx(() => [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.buttonGroups, (buttonGroup) => {
-          return vue.openBlock(), vue.createBlock(_component_dt_stack, {
-            key: buttonGroup.key,
-            direction: "row",
-            gap: "300"
-          }, {
-            default: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttonGroup.buttonGroup, (button2) => {
-                return vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
-                  key: `${buttonGroup.key}-${JSON.stringify(button2.selector)}`,
-                  message: button2.tooltipMessage,
-                  placement: "top"
-                }, {
-                  anchor: vue.withCtx(() => {
-                    var _a, _b;
-                    return [
-                      vue.createVNode(_component_dt_button, {
-                        "data-qa": button2.dataQA,
-                        importance: "clear",
-                        kind: "muted",
-                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button2.selector),
-                        size: "xs",
-                        "aria-label": button2.tooltipMessage,
-                        class: vue.normalizeClass({ "d-btn--icon-only": !button2.label }),
-                        onClick: ($event) => button2.onClick()
-                      }, {
-                        icon: vue.withCtx(() => [
-                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(button2.icon), { size: "200" }))
-                        ]),
-                        default: vue.withCtx(() => [
-                          vue.createTextVNode(" " + vue.toDisplayString(button2 == null ? void 0 : button2.label), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["data-qa", "active", "aria-label", "class", "onClick"])
-                    ];
-                  }),
-                  _: 2
-                }, 1032, ["message"]);
-              }), 128)),
-              _hoisted_1
-            ]),
-            _: 2
-          }, 1024);
-        }), 128)),
-        $options.linkButton.showBtn ? (vue.openBlock(), vue.createBlock(_component_dt_stack, {
-          key: 0,
-          direction: "row",
-          gap: "300"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(_component_dt_popover, {
-              open: $data.showLinkInput,
-              placement: "bottom-start",
-              "visually-hidden-close": true,
-              "visually-hidden-close-label": "Close link input popover",
-              "data-qa": "dt-editor-link-input-popover",
-              "show-close-button": false,
-              onClick: [
-                $options.onInputFocus,
-                vue.withModifiers($options.onInputFocus, ["stop"])
-              ],
-              onOpened: $options.updateInput
-            }, {
-              anchor: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
-                  key: $options.linkButton.key,
-                  message: $options.linkButton.tooltipMessage,
-                  placement: "top"
-                }, {
-                  anchor: vue.withCtx(() => {
-                    var _a, _b;
-                    return [
-                      vue.createVNode(_component_dt_button, {
-                        "data-qa": $options.linkButton.dataQA,
-                        importance: "clear",
-                        kind: "muted",
-                        class: "d-ol-none",
-                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive($options.linkButton.selector),
-                        size: "xs",
-                        "aria-label": $options.linkButton.tooltipMessage,
-                        onClick: _cache[0] || (_cache[0] = ($event) => $options.linkButton.onClick())
-                      }, {
-                        icon: vue.withCtx(() => [
-                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.linkButton.icon), {
-                            size: "200",
-                            class: "d-fw-bold"
-                          }))
-                        ]),
-                        _: 1
-                      }, 8, ["data-qa", "active", "aria-label"])
-                    ];
-                  }),
-                  _: 1
-                }, 8, ["message"]))
-              ]),
-              content: vue.withCtx(() => [
-                $props.showAddLink.setLinkTitle.length > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString($props.showAddLink.setLinkTitle), 1)) : vue.createCommentVNode("", true),
-                vue.createVNode(_component_dt_input, {
-                  modelValue: $data.linkInput,
-                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $data.linkInput = $event),
-                  "input-aria-label": $props.showAddLink.setLinkInputAriaLabel,
-                  "data-qa": "dt-editor-link-input",
-                  placeholder: $props.setLinkPlaceholder,
-                  "input-wrapper-class": "d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none",
-                  onClick: [
-                    $options.onInputFocus,
-                    vue.withModifiers($options.onInputFocus, ["stop"])
-                  ],
-                  onFocus: $options.onInputFocus,
-                  onKeydown: vue.withKeys($options.setLink, ["enter"])
-                }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
-              ]),
-              footerContent: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_3, [
-                  vue.createVNode(_component_dt_button, {
-                    class: "d-mx2",
-                    "aria-label": $props.removeLinkButton.ariaLabel,
-                    importance: "clear",
-                    kind: "muted",
-                    size: "sm",
-                    "data-qa": "dt-editor-remove-link-btn",
-                    onClick: $options.removeLink
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString($props.removeLinkButton.label), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "onClick"]),
-                  vue.createVNode(_component_dt_button, {
-                    class: "d-mx2",
-                    "aria-label": $props.cancelSetLinkButton.ariaLabel,
-                    importance: "clear",
-                    kind: "muted",
-                    size: "sm",
-                    "data-qa": "dt-editor-set-link-cancel-btn",
-                    onClick: $options.closeLinkInput
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString($props.cancelSetLinkButton.label), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "onClick"]),
-                  vue.createVNode(_component_dt_button, {
-                    class: "d-mx2",
-                    size: "sm",
-                    "aria-label": $props.confirmSetLinkButton.ariaLabel,
-                    "data-qa": "dt-editor-set-link-confirm-btn",
-                    onClick: $options.setLink
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString($props.confirmSetLinkButton.label), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "onClick"])
-                ])
-              ]),
-              _: 1
-            }, 8, ["open", "onClick", "onOpened"])
-          ]),
-          _: 1
-        })) : vue.createCommentVNode("", true)
-      ]),
-      _: 1
-    }),
-    vue.createElementVNode("div", {
-      class: "d-of-auto d-mx12 d-mt12 d-mb16 d-c-text",
-      style: vue.normalizeStyle({ "max-height": $props.maxHeight })
-    }, [
-      vue.createVNode(_component_dt_rich_text_editor, vue.mergeProps({
-        ref: "richTextEditor",
-        modelValue: $data.internalInputValue,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.internalInputValue = $event),
-        "data-qa": "dt-rich-text-editor",
-        editable: $props.editable,
-        "input-aria-label": $props.inputAriaLabel,
-        "input-class": `d-ml16 d-ol-none d-my6 ${$props.inputClass}`,
-        "output-format": $options.htmlOutputFormat,
-        "auto-focus": $props.autoFocus,
-        placeholder: $props.placeholder,
-        "allow-line-breaks": true,
-        link: true
-      }, _ctx.$attrs, {
-        onFocus: $options.onFocus,
-        onBlur: $options.onBlur,
-        onInput: _cache[3] || (_cache[3] = ($event) => $options.onInput($event))
-      }), null, 16, ["modelValue", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "placeholder", "onFocus", "onBlur"])
-    ], 4)
-  ]);
-}
-const editor = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
-module.exports = editor;
-//# sourceMappingURL=editor.vue.cjs.map