@dialpad/dialtone-vue 3.146.0 → 3.147.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-fEp0B-5Z.js");
+require("../chunks/index-lu2o2f4r.js");
 require("@dialpad/dialtone-emojis");
 require("./skeleton.cjs");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("@tiptap/pm/state");
 require("@tiptap/suggestion");
@@ -51,14 +51,21 @@ 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-h9MD6WUt.js");
-require("../chunks/modal-OaWxzqNt.js");
-require("../chunks/sr_only_close_button-gKr0Vlbz.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-xGrHFjwA.js");
 require("./lazy-show.cjs");
-require("../chunks/input-dLLo3Wtg.js");
+require("../chunks/input-ttnte8zB.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",
@@ -147,30 +154,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
@@ -341,144 +339,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: {
@@ -510,12 +413,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();
     },
@@ -553,9 +456,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();
@@ -592,15 +493,9 @@ 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");
@@ -614,163 +509,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())
-  }, [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"
-          }, {
-            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]),
-        _: 2
-      }, 1024);
-    }), 128)), $options.linkButton.showBtn ? (vue.openBlock(), vue.createBlock(_component_dt_stack, {
-      key: 0,
+  }, [
+    vue.createVNode(_component_dt_stack, {
       direction: "row",
-      gap: "300"
+      gap: "450",
+      class: "d-p8 dt-editor--top-bar-background"
     }, {
-      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.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"
+                }, {
+                  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
+            ]),
+            _: 2
+          }, 1024);
+        }), 128)),
+        $options.linkButton.showBtn ? (vue.openBlock(), vue.createBlock(_component_dt_stack, {
+          key: 0,
+          direction: "row",
+          gap: "300"
         }, {
-          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())
+          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
             }, {
-              icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
-                name: $options.linkButton.iconName,
-                size: "200",
-                class: "d-fw-bold"
-              }, null, 8, ["name"])]),
+              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"])
+                ])
+              ]),
               _: 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)]),
+            }, 8, ["open", "onClick", "onOpened"])
+          ]),
           _: 1
-        }, 8, ["aria-label", "onClick"])])]),
-        _: 1
-      }, 8, ["open", "onClick", "onOpened"])]),
+        })) : vue.createCommentVNode("", true)
+      ]),
       _: 1
-    })) : 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)]);
+    }),
+    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;