@dialpad/dialtone-vue 3.145.1 → 3.146.0

package/dist/lib/editor.cjs

@@ -29,10 +29,10 @@ require("@tiptap/extension-text-align");
 require("@tiptap/extension-history");
 require("@tiptap/core");
 require("./emoji.cjs");
-require("../chunks/index-lu2o2f4r.js");
+require("../chunks/index-fEp0B-5Z.js");
 require("@dialpad/dialtone-emojis");
 require("./skeleton.cjs");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("@tiptap/pm/state");
 require("@tiptap/suggestion");
@@ -51,21 +51,14 @@ require("./presence.cjs");
 require("@dialpad/dialtone-icons/vue3/hash");
 require("@dialpad/dialtone-icons/vue3/lock");
 require("../chunks/stack_constants-SMzMWnAQ.js");
-require("../chunks/popover_constants-XnGWXaxX.js");
-require("../chunks/modal-VgxXAQFP.js");
-require("../chunks/sr_only_close_button-xGrHFjwA.js");
+require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/modal-OaWxzqNt.js");
+require("../chunks/sr_only_close_button-gKr0Vlbz.js");
 require("./lazy-show.cjs");
-require("../chunks/input-ttnte8zB.js");
+require("../chunks/input-dLLo3Wtg.js");
 require("../common/validators.cjs");
 require("./validation-messages.cjs");
-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",
@@ -154,21 +147,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
@@ -339,49 +341,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: {
@@ -413,12 +510,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();
     },
@@ -456,7 +553,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();
@@ -493,9 +592,15 @@ const _sfc_main = {
     }
   }
 };
-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" };
+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_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
@@ -509,205 +614,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())
-  }, [
-    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"
+  }, [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, (button) => {
+          return vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
+            key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`,
+            message: button.tooltipMessage,
+            placement: "top"
           }, {
-            default: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttonGroup.buttonGroup, (button) => {
-                return vue.openBlock(), vue.createBlock(_component_dt_tooltip, {
-                  key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`,
-                  message: button.tooltipMessage,
-                  placement: "top"
-                }, {
-                  anchor: vue.withCtx(() => {
-                    var _a, _b;
-                    return [
-                      vue.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: vue.normalizeClass({ "d-btn--icon-only": !button.label }),
-                        onClick: ($event) => button.onClick()
-                      }, {
-                        icon: vue.withCtx(() => [
-                          vue.createVNode(_component_dt_icon, {
-                            name: button.iconName,
-                            size: "200"
-                          }, null, 8, ["name"])
-                        ]),
-                        default: vue.withCtx(() => [
-                          vue.createTextVNode(" " + vue.toDisplayString(button == null ? void 0 : button.label), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["data-qa", "active", "aria-label", "class", "onClick"])
-                    ];
-                  }),
-                  _: 2
-                }, 1032, ["message"]);
-              }), 128)),
-              _hoisted_1
-            ]),
+            anchor: vue.withCtx(() => {
+              var _a, _b;
+              return [vue.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: vue.normalizeClass({
+                  "d-btn--icon-only": !button.label
+                }),
+                onClick: ($event) => button.onClick()
+              }, {
+                icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
+                  name: button.iconName,
+                  size: "200"
+                }, null, 8, ["name"])]),
+                default: vue.withCtx(() => [vue.createTextVNode(" " + vue.toDisplayString(button == null ? void 0 : button.label), 1)]),
+                _: 2
+              }, 1032, ["data-qa", "active", "aria-label", "class", "onClick"])];
+            }),
             _: 2
-          }, 1024);
-        }), 128)),
-        $options.linkButton.showBtn ? (vue.openBlock(), vue.createBlock(_component_dt_stack, {
-          key: 0,
-          direction: "row",
-          gap: "300"
+          }, 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"
         }, {
-          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(() => {
+            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())
             }, {
-              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.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: 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-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 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"])
-                ])
-              ]),
+              icon: vue.withCtx(() => [vue.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: 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-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 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
-        })) : vue.createCommentVNode("", true)
-      ]),
+        }, 8, ["aria-label", "onClick"])])]),
+        _: 1
+      }, 8, ["open", "onClick", "onOpened"])]),
       _: 1
-    }),
-    vue.createElementVNode("div", {
-      class: "d-of-auto d-mx16 d-mt8 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)
-  ]);
+    })) : vue.createCommentVNode("", true)]),
+    _: 1
+  }), vue.createElementVNode("div", {
+    class: "d-of-auto d-mx16 d-mt8 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._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtRecipeWysiwygEditor = editor;