@dialpad/dialtone 9.65.0 → 9.66.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-GVD15GIB.js";
+import "../chunks/index-dfdrE-3M.js";
 import "@dialpad/dialtone-emojis";
 import "./skeleton.js";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "@tiptap/pm/state";
 import "@tiptap/suggestion";
@@ -49,21 +49,14 @@ 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-WsOUIY-m.js";
-import "../chunks/modal-XOr4kiNZ.js";
-import "../chunks/sr_only_close_button-3EdsV-dH.js";
+import "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/modal-8X6poIZW.js";
+import "../chunks/sr_only_close_button-Ji3Zlts6.js";
 import "./lazy-show.js";
-import "../chunks/input-NmYDD5bn.js";
+import "../chunks/input-HIysg24t.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",
@@ -152,21 +145,30 @@ 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
@@ -337,49 +339,144 @@ 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: {
@@ -411,12 +508,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();
     },
@@ -454,7 +551,9 @@ 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();
@@ -491,9 +590,15 @@ 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");
@@ -507,205 +612,163 @@ 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"
+  }, [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"
           }, {
-            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
-            ]),
+            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
-          }, 1024);
-        }), 128)),
-        $options.linkButton.showBtn ? (openBlock(), createBlock(_component_dt_stack, {
-          key: 0,
-          direction: "row",
-          gap: "300"
+          }, 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,
+        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(() => [
-            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(() => {
+            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())
             }, {
-              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"])
-                ])
-              ]),
+              icon: withCtx(() => [createVNode(_component_dt_icon, {
+                name: $options.linkButton.iconName,
+                size: "200",
+                class: "d-fw-bold"
+              }, null, 8, ["name"])]),
               _: 1
-            }, 8, ["open", "onClick", "onOpened"])
-          ]),
+            }, 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
-        })) : createCommentVNode("", true)
-      ]),
+        }, 8, ["aria-label", "onClick"])])]),
+        _: 1
+      }, 8, ["open", "onClick", "onOpened"])]),
       _: 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)
-  ]);
+    })) : 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)]);
 }
 const editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {