@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/editor.js

@@ -27,10 +27,10 @@ import "@tiptap/extension-text-align";
 import "@tiptap/extension-history";
 import "@tiptap/core";
 import "./emoji.js";
-import "../chunks/index-dfdrE-3M.js";
+import "../chunks/index-GVD15GIB.js";
 import "@dialpad/dialtone-emojis";
 import "./skeleton.js";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "@tiptap/pm/state";
 import "@tiptap/suggestion";
@@ -49,14 +49,21 @@ import "./presence.js";
 import "@dialpad/dialtone-icons/vue3/hash";
 import "@dialpad/dialtone-icons/vue3/lock";
 import "../chunks/stack_constants-HraCekPm.js";
-import "../chunks/popover_constants-6YkPPbnk.js";
-import "../chunks/modal-8X6poIZW.js";
-import "../chunks/sr_only_close_button-Ji3Zlts6.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "./lazy-show.js";
-import "../chunks/input-HIysg24t.js";
+import "../chunks/input-NmYDD5bn.js";
 import "../common/validators.js";
 import "./validation-messages.js";
-const EDITOR_SUPPORTED_LINK_PROTOCOLS = [/^https?:\/\//, /^http?:\/\//, /^ftp?:\/\//, /^ftps?:\/\//, /^ftps?:\/\//, /mailto:([^?]*)/];
+const EDITOR_SUPPORTED_LINK_PROTOCOLS = [
+  /^https?:\/\//,
+  /^http?:\/\//,
+  /^ftp?:\/\//,
+  /^ftps?:\/\//,
+  /^ftps?:\/\//,
+  /mailto:([^?]*)/
+];
 const EDITOR_DEFAULT_LINK_PREFIX = "https://";
 const _sfc_main = {
   name: "DtRecipeEditor",
@@ -145,30 +152,21 @@ const _sfc_main = {
      */
     confirmSetLinkButton: {
       type: Object,
-      default: () => ({
-        label: "Confirm",
-        ariaLabel: "Confirm set link"
-      })
+      default: () => ({ label: "Confirm", ariaLabel: "Confirm set link" })
     },
     /**
      * Remove link button defaults.
      */
     removeLinkButton: {
       type: Object,
-      default: () => ({
-        label: "Remove",
-        ariaLabel: "Remove link"
-      })
+      default: () => ({ label: "Remove", ariaLabel: "Remove link" })
     },
     /**
      * Cancel set link button defaults.
      */
     cancelSetLinkButton: {
       type: Object,
-      default: () => ({
-        label: "Cancel",
-        ariaLabel: "Cancel set link"
-      })
+      default: () => ({ label: "Cancel", ariaLabel: "Cancel set link" })
     },
     /**
      * Placeholder text for the set link input field
@@ -339,144 +337,49 @@ const _sfc_main = {
         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);
+      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",
-        iconName: "lightning-bolt",
-        dataQA: "dt-editor-quick-replies-btn",
-        tooltipMessage: "Quick Reply",
-        onClick: this.onQuickRepliesClick
-      }].filter((button) => button.showBtn);
+      return [
+        { showBtn: this.showQuickRepliesButton, label: "Quick reply", selector: "quickReplies", iconName: "lightning-bolt", dataQA: "dt-editor-quick-replies-btn", tooltipMessage: "Quick Reply", onClick: this.onQuickRepliesClick }
+      ].filter((button) => button.showBtn);
     },
     textFormatButtons() {
-      return [{
-        showBtn: this.showBoldButton,
-        selector: "bold",
-        iconName: "bold",
-        dataQA: "dt-editor-bold-btn",
-        tooltipMessage: "Bold",
-        onClick: this.onBoldTextToggle
-      }, {
-        showBtn: this.showItalicsButton,
-        selector: "italic",
-        iconName: "italic",
-        dataQA: "dt-editor-italics-btn",
-        tooltipMessage: "Italics",
-        onClick: this.onItalicTextToggle
-      }, {
-        showBtn: this.showUnderlineButton,
-        selector: "underline",
-        iconName: "underline",
-        dataQA: "dt-editor-underline-btn",
-        tooltipMessage: "Underline",
-        onClick: this.onUnderlineTextToggle
-      }, {
-        showBtn: this.showStrikeButton,
-        selector: "strike",
-        iconName: "strikethrough",
-        dataQA: "dt-editor-strike-btn",
-        tooltipMessage: "Strike",
-        onClick: this.onStrikethroughTextToggle
-      }].filter((button) => button.showBtn);
+      return [
+        { showBtn: this.showBoldButton, selector: "bold", iconName: "bold", dataQA: "dt-editor-bold-btn", tooltipMessage: "Bold", onClick: this.onBoldTextToggle },
+        { showBtn: this.showItalicsButton, selector: "italic", iconName: "italic", dataQA: "dt-editor-italics-btn", tooltipMessage: "Italics", onClick: this.onItalicTextToggle },
+        { showBtn: this.showUnderlineButton, selector: "underline", iconName: "underline", dataQA: "dt-editor-underline-btn", tooltipMessage: "Underline", onClick: this.onUnderlineTextToggle },
+        { showBtn: this.showStrikeButton, selector: "strike", iconName: "strikethrough", dataQA: "dt-editor-strike-btn", tooltipMessage: "Strike", onClick: this.onStrikethroughTextToggle }
+      ].filter((button) => button.showBtn);
     },
     alignmentButtons() {
-      return [{
-        showBtn: this.showAlignLeftButton,
-        selector: {
-          textAlign: "left"
-        },
-        iconName: "align-left",
-        dataQA: "dt-editor-align-left-btn",
-        tooltipMessage: "Align Left",
-        onClick: () => this.onTextAlign("left")
-      }, {
-        showBtn: this.showAlignCenterButton,
-        selector: {
-          textAlign: "center"
-        },
-        iconName: "align-center",
-        dataQA: "dt-editor-align-center-btn",
-        tooltipMessage: "Align Center",
-        onClick: () => this.onTextAlign("center")
-      }, {
-        showBtn: this.showAlignRightButton,
-        selector: {
-          textAlign: "right"
-        },
-        iconName: "align-right",
-        dataQA: "dt-editor-align-right-btn",
-        tooltipMessage: "Align Right",
-        onClick: () => this.onTextAlign("right")
-      }, {
-        showBtn: this.showAlignJustifyButton,
-        selector: {
-          textAlign: "justify"
-        },
-        iconName: "align-justify",
-        dataQA: "dt-editor-align-justify-btn",
-        tooltipMessage: "Align Justify",
-        onClick: () => this.onTextAlign("justify")
-      }].filter((button) => button.showBtn);
+      return [
+        { showBtn: this.showAlignLeftButton, selector: { textAlign: "left" }, iconName: "align-left", dataQA: "dt-editor-align-left-btn", tooltipMessage: "Align Left", onClick: () => this.onTextAlign("left") },
+        { showBtn: this.showAlignCenterButton, selector: { textAlign: "center" }, iconName: "align-center", dataQA: "dt-editor-align-center-btn", tooltipMessage: "Align Center", onClick: () => this.onTextAlign("center") },
+        { showBtn: this.showAlignRightButton, selector: { textAlign: "right" }, iconName: "align-right", dataQA: "dt-editor-align-right-btn", tooltipMessage: "Align Right", onClick: () => this.onTextAlign("right") },
+        { showBtn: this.showAlignJustifyButton, selector: { textAlign: "justify" }, iconName: "align-justify", dataQA: "dt-editor-align-justify-btn", tooltipMessage: "Align Justify", onClick: () => this.onTextAlign("justify") }
+      ].filter((button) => button.showBtn);
     },
     listButtons() {
-      return [{
-        showBtn: this.showListItemsButton,
-        selector: "bulletList",
-        iconName: "list-bullet",
-        dataQA: "dt-editor-list-items-btn",
-        tooltipMessage: "Bullet List",
-        onClick: this.onBulletListToggle
-      }, {
-        showBtn: this.showOrderedListButton,
-        selector: "orderedList",
-        iconName: "list-ordered",
-        dataQA: "dt-editor-ordered-list-items-btn",
-        tooltipMessage: "Ordered List",
-        onClick: this.onOrderedListToggle
-      }].filter((button) => button.showBtn);
+      return [
+        { showBtn: this.showListItemsButton, selector: "bulletList", iconName: "list-bullet", dataQA: "dt-editor-list-items-btn", tooltipMessage: "Bullet List", onClick: this.onBulletListToggle },
+        { showBtn: this.showOrderedListButton, selector: "orderedList", iconName: "list-ordered", dataQA: "dt-editor-ordered-list-items-btn", tooltipMessage: "Ordered List", onClick: this.onOrderedListToggle }
+      ].filter((button) => button.showBtn);
     },
     individualButtons() {
-      return [{
-        showBtn: this.showQuoteButton,
-        selector: "blockquote",
-        iconName: "quote",
-        dataQA: "dt-editor-blockquote-btn",
-        tooltipMessage: "Quote",
-        onClick: this.onBlockquoteToggle
-      }, {
-        showBtn: this.showCodeBlockButton,
-        selector: "codeBlock",
-        iconName: "code-block",
-        dataQA: "dt-editor-code-block-btn",
-        tooltipMessage: "Code",
-        onClick: this.onCodeBlockToggle
-      }].filter((button) => button.showBtn);
+      return [
+        { showBtn: this.showQuoteButton, selector: "blockquote", iconName: "quote", dataQA: "dt-editor-blockquote-btn", tooltipMessage: "Quote", onClick: this.onBlockquoteToggle },
+        { showBtn: this.showCodeBlockButton, selector: "codeBlock", iconName: "code-block", dataQA: "dt-editor-code-block-btn", tooltipMessage: "Code", onClick: this.onCodeBlockToggle }
+      ].filter((button) => button.showBtn);
     },
     linkButton() {
-      return {
-        showBtn: this.showAddLink.showAddLinkButton,
-        selector: "link",
-        iconName: "link-2",
-        dataQA: "dt-editor-add-link-btn",
-        tooltipMessage: "Link",
-        onClick: this.openLinkInput
-      };
+      return { showBtn: this.showAddLink.showAddLinkButton, selector: "link", iconName: "link-2", dataQA: "dt-editor-add-link-btn", tooltipMessage: "Link", onClick: this.openLinkInput };
     }
   },
   watch: {
@@ -508,12 +411,12 @@ const _sfc_main = {
       }
       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();
+        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();
+        editor2.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run();
       }
       this.closeLinkInput();
     },
@@ -551,9 +454,7 @@ const _sfc_main = {
     },
     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
-      })) {
+      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();
@@ -590,15 +491,9 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", {
-  class: "dt-editor--button-group-divider"
-}, null, -1);
-const _hoisted_2 = {
-  key: 0
-};
-const _hoisted_3 = {
-  class: "d-ml8 d-mr12"
-};
+const _hoisted_1 = /* @__PURE__ */ 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_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
@@ -612,163 +507,205 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     role: "presentation",
     class: "d-d-flex d-fd-column",
     onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.richTextEditor.focusEditor())
-  }, [createVNode(_component_dt_stack, {
-    direction: "row",
-    gap: "450",
-    class: "d-p8 dt-editor--top-bar-background"
-  }, {
-    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, {
-                "data-qa": button.dataQA,
-                importance: "clear",
-                kind: "muted",
-                active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button.selector),
-                size: "xs",
-                "aria-label": button.tooltipMessage,
-                class: normalizeClass({
-                  "d-btn--icon-only": !button.label
-                }),
-                onClick: ($event) => button.onClick()
-              }, {
-                icon: withCtx(() => [createVNode(_component_dt_icon, {
-                  name: button.iconName,
-                  size: "200"
-                }, null, 8, ["name"])]),
-                default: withCtx(() => [createTextVNode(" " + toDisplayString(button == null ? void 0 : button.label), 1)]),
-                _: 2
-              }, 1032, ["data-qa", "active", "aria-label", "class", "onClick"])];
-            }),
-            _: 2
-          }, 1032, ["message"]);
-        }), 128)), _hoisted_1]),
-        _: 2
-      }, 1024);
-    }), 128)), $options.linkButton.showBtn ? (openBlock(), createBlock(_component_dt_stack, {
-      key: 0,
+  }, [
+    createVNode(_component_dt_stack, {
       direction: "row",
-      gap: "300"
+      gap: "450",
+      class: "d-p8 dt-editor--top-bar-background"
     }, {
-      default: withCtx(() => [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, withModifiers($options.onInputFocus, ["stop"])],
-        onOpened: $options.updateInput
-      }, {
-        anchor: withCtx(() => [(openBlock(), createBlock(_component_dt_tooltip, {
-          key: $options.linkButton.key,
-          message: $options.linkButton.tooltipMessage,
-          placement: "top"
+      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, {
+                        "data-qa": button.dataQA,
+                        importance: "clear",
+                        kind: "muted",
+                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button.selector),
+                        size: "xs",
+                        "aria-label": button.tooltipMessage,
+                        class: normalizeClass({ "d-btn--icon-only": !button.label }),
+                        onClick: ($event) => button.onClick()
+                      }, {
+                        icon: withCtx(() => [
+                          createVNode(_component_dt_icon, {
+                            name: button.iconName,
+                            size: "200"
+                          }, null, 8, ["name"])
+                        ]),
+                        default: withCtx(() => [
+                          createTextVNode(" " + toDisplayString(button == null ? void 0 : button.label), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["data-qa", "active", "aria-label", "class", "onClick"])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["message"]);
+              }), 128)),
+              _hoisted_1
+            ]),
+            _: 2
+          }, 1024);
+        }), 128)),
+        $options.linkButton.showBtn ? (openBlock(), createBlock(_component_dt_stack, {
+          key: 0,
+          direction: "row",
+          gap: "300"
         }, {
-          anchor: withCtx(() => {
-            var _a, _b;
-            return [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())
+          default: withCtx(() => [
+            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,
+                withModifiers($options.onInputFocus, ["stop"])
+              ],
+              onOpened: $options.updateInput
             }, {
-              icon: withCtx(() => [createVNode(_component_dt_icon, {
-                name: $options.linkButton.iconName,
-                size: "200",
-                class: "d-fw-bold"
-              }, null, 8, ["name"])]),
+              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, {
+                        "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: withCtx(() => [
+                          createVNode(_component_dt_icon, {
+                            name: $options.linkButton.iconName,
+                            size: "200",
+                            class: "d-fw-bold"
+                          }, null, 8, ["name"])
+                        ]),
+                        _: 1
+                      }, 8, ["data-qa", "active", "aria-label"])
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["message"]))
+              ]),
+              content: withCtx(() => [
+                $props.showAddLink.setLinkTitle.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_2, 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,
+                  "data-qa": "dt-editor-link-input",
+                  placeholder: $props.setLinkPlaceholder,
+                  "input-wrapper-class": "d-bgc-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 d-py2 d-ol-none",
+                  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(() => [
+                createElementVNode("div", _hoisted_3, [
+                  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: withCtx(() => [
+                      createTextVNode(toDisplayString($props.removeLinkButton.label), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]),
+                  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: withCtx(() => [
+                      createTextVNode(toDisplayString($props.cancelSetLinkButton.label), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"]),
+                  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: withCtx(() => [
+                      createTextVNode(toDisplayString($props.confirmSetLinkButton.label), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "onClick"])
+                ])
+              ]),
               _: 1
-            }, 8, ["data-qa", "active", "aria-label"])];
-          }),
-          _: 1
-        }, 8, ["message"]))]),
-        content: withCtx(() => [$props.showAddLink.setLinkTitle.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_2, 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,
-          "data-qa": "dt-editor-link-input",
-          placeholder: $props.setLinkPlaceholder,
-          "input-wrapper-class": "d-bgc-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 d-py2 d-ol-none",
-          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(() => [createElementVNode("div", _hoisted_3, [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: withCtx(() => [createTextVNode(toDisplayString($props.removeLinkButton.label), 1)]),
-          _: 1
-        }, 8, ["aria-label", "onClick"]), 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: withCtx(() => [createTextVNode(toDisplayString($props.cancelSetLinkButton.label), 1)]),
-          _: 1
-        }, 8, ["aria-label", "onClick"]), 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: withCtx(() => [createTextVNode(toDisplayString($props.confirmSetLinkButton.label), 1)]),
+            }, 8, ["open", "onClick", "onOpened"])
+          ]),
           _: 1
-        }, 8, ["aria-label", "onClick"])])]),
-        _: 1
-      }, 8, ["open", "onClick", "onOpened"])]),
+        })) : createCommentVNode("", true)
+      ]),
       _: 1
-    })) : createCommentVNode("", true)]),
-    _: 1
-  }), createElementVNode("div", {
-    class: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",
-    style: normalizeStyle({
-      "max-height": $props.maxHeight
-    })
-  }, [createVNode(_component_dt_rich_text_editor, 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)]);
+    }),
+    createElementVNode("div", {
+      class: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",
+      style: normalizeStyle({ "max-height": $props.maxHeight })
+    }, [
+      createVNode(_component_dt_rich_text_editor, 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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {