@dialpad/dialtone-vue 3.156.0 → 3.156.2

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

@@ -0,0 +1,769 @@
+"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