@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue2/lib/editor.cjs

@@ -28,10 +28,10 @@ require("@tiptap/extension-text-align");
 require("@tiptap/extension-history");
 require("@tiptap/core");
 require("./emoji.cjs");
-require("../chunks/index-NYFNZeHH.js");
+require("../chunks/index-anN_sx1F.js");
 require("emoji-toolkit/emoji_strategy.json");
 require("./skeleton.cjs");
-require("../chunks/icon_constants-VEA0wI5C.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("@tiptap/pm/state");
 require("@tiptap/suggestion");
@@ -52,15 +52,22 @@ require("./presence.cjs");
 require("@dialpad/dialtone-icons/vue2/hash");
 require("@dialpad/dialtone-icons/vue2/lock");
 require("../chunks/stack_constants-SMzMWnAQ.js");
-require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("@linusborg/vue-simple-portal");
-require("../chunks/modal-OaWxzqNt.js");
-require("../chunks/sr_only_close_button-2Q9Ny1Nc.js");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/sr_only_close_button-ZaGdAHz7.js");
 require("./lazy-show.cjs");
-require("../chunks/input-Hqw33WBe.js");
+require("../chunks/input-Axw-wFj2.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",
@@ -148,30 +155,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
@@ -342,144 +340,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: {
@@ -511,12 +414,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();
     },
@@ -554,9 +457,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();
@@ -595,264 +496,63 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", {
-    staticClass: "d-d-flex d-fd-column",
-    attrs: {
-      "data-qa": "dt-editor",
-      "role": "presentation"
-    },
-    on: {
-      "click": function($event) {
-        return _vm.$refs.richTextEditor.focusEditor();
-      }
-    }
-  }, [_c("dt-stack", {
-    staticClass: "d-p8 dt-editor--top-bar-background",
-    attrs: {
-      "direction": "row",
-      "gap": "450"
-    }
-  }, [_vm._l(_vm.buttonGroups, function(buttonGroup) {
-    return _c("dt-stack", {
-      key: buttonGroup.key,
-      attrs: {
-        "direction": "row",
-        "gap": "300"
-      }
-    }, [_vm._l(buttonGroup.buttonGroup, function(button) {
-      return _c("dt-tooltip", {
-        key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`,
-        attrs: {
-          "message": button.tooltipMessage,
-          "placement": "top"
-        },
-        scopedSlots: _vm._u([{
-          key: "anchor",
-          fn: function() {
-            var _a, _b;
-            return [_c("dt-button", {
-              attrs: {
-                "data-qa": button.dataQA,
-                "importance": "clear",
-                "kind": "muted",
-                "active": (_b = (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button.selector),
-                "size": "xs",
-                "aria-label": button.tooltipMessage
-              },
-              on: {
-                "click": function($event) {
-                  return button.onClick();
-                }
-              },
-              scopedSlots: _vm._u([{
-                key: "icon",
-                fn: function() {
-                  return [_c("dt-icon", {
-                    attrs: {
-                      "name": button.iconName,
-                      "size": "200"
-                    }
-                  })];
-                },
-                proxy: true
-              }], null, true)
-            }, [button.label ? _c("span", [_vm._v(_vm._s(button.label))]) : _vm._e()])];
-          },
-          proxy: true
-        }], null, true)
-      });
-    }), _c("div", {
-      staticClass: "dt-editor--button-group-divider"
-    })], 2);
-  }), _vm.linkButton.showBtn ? _c("dt-stack", {
-    attrs: {
-      "direction": "row",
-      "gap": "300"
-    }
-  }, [_c("dt-popover", {
-    attrs: {
-      "open": _vm.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
-    },
-    on: {
-      "update:open": function($event) {
-        _vm.showLinkInput = $event;
-      },
-      "click": _vm.onInputFocus,
-      "opened": _vm.updateInput
-    },
-    nativeOn: {
-      "click": function($event) {
-        $event.stopPropagation();
-        return _vm.onInputFocus.apply(null, arguments);
-      }
-    },
-    scopedSlots: _vm._u([{
-      key: "anchor",
-      fn: function() {
-        return [_c("dt-tooltip", {
-          key: _vm.linkButton.key,
-          attrs: {
-            "message": _vm.linkButton.tooltipMessage,
-            "placement": "top"
-          },
-          scopedSlots: _vm._u([{
-            key: "anchor",
-            fn: function() {
-              var _a, _b;
-              return [_c("dt-button", {
-                staticClass: "d-ol-none",
-                attrs: {
-                  "data-qa": _vm.linkButton.dataQA,
-                  "importance": "clear",
-                  "kind": "muted",
-                  "active": (_b = (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(_vm.linkButton.selector),
-                  "size": "xs",
-                  "aria-label": _vm.linkButton.tooltipMessage
-                },
-                on: {
-                  "click": function($event) {
-                    return _vm.linkButton.onClick();
-                  }
-                },
-                scopedSlots: _vm._u([{
-                  key: "icon",
-                  fn: function() {
-                    return [_c("dt-icon", {
-                      staticClass: "d-fw-bold",
-                      attrs: {
-                        "name": _vm.linkButton.iconName,
-                        "size": "200"
-                      }
-                    })];
-                  },
-                  proxy: true
-                }], null, false, 540616731)
-              })];
-            },
-            proxy: true
-          }], null, false, 2091397100)
-        })];
-      },
-      proxy: true
-    }, {
-      key: "content",
-      fn: function() {
-        return [_vm.showAddLink.setLinkTitle.length > 0 ? _c("span", [_vm._v(" " + _vm._s(_vm.showAddLink.setLinkTitle) + " ")]) : _vm._e(), _c("dt-input", {
-          attrs: {
-            "input-aria-label": _vm.showAddLink.setLinkInputAriaLabel,
-            "data-qa": "dt-editor-link-input",
-            "placeholder": _vm.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"
-          },
-          on: {
-            "click": _vm.onInputFocus,
-            "focus": _vm.onInputFocus,
-            "keydown": function($event) {
-              if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
-                return null;
-              return _vm.setLink.apply(null, arguments);
-            }
-          },
-          nativeOn: {
-            "click": function($event) {
-              $event.stopPropagation();
-              return _vm.onInputFocus.apply(null, arguments);
-            }
-          },
-          model: {
-            value: _vm.linkInput,
-            callback: function($$v) {
-              _vm.linkInput = $$v;
-            },
-            expression: "linkInput"
-          }
-        })];
-      },
-      proxy: true
-    }, {
-      key: "footerContent",
-      fn: function() {
-        return [_c("div", {
-          staticClass: "d-ml8 d-mr12"
-        }, [_c("dt-button", {
-          staticClass: "d-mx2",
-          attrs: {
-            "aria-label": _vm.removeLinkButton.ariaLabel,
-            "importance": "clear",
-            "kind": "muted",
-            "size": "sm",
-            "data-qa": "dt-editor-remove-link-btn"
-          },
-          on: {
-            "click": _vm.removeLink
-          }
-        }, [_vm._v(" " + _vm._s(_vm.removeLinkButton.label) + " ")]), _c("dt-button", {
-          staticClass: "d-mx2",
-          attrs: {
-            "aria-label": _vm.cancelSetLinkButton.ariaLabel,
-            "importance": "clear",
-            "kind": "muted",
-            "size": "sm",
-            "data-qa": "dt-editor-set-link-cancel-btn"
-          },
-          on: {
-            "click": _vm.closeLinkInput
-          }
-        }, [_vm._v(" " + _vm._s(_vm.cancelSetLinkButton.label) + " ")]), _c("dt-button", {
-          staticClass: "d-mx2",
-          attrs: {
-            "size": "sm",
-            "aria-label": _vm.confirmSetLinkButton.ariaLabel,
-            "data-qa": "dt-editor-set-link-confirm-btn"
-          },
-          on: {
-            "click": _vm.setLink
-          }
-        }, [_vm._v(" " + _vm._s(_vm.confirmSetLinkButton.label) + " ")])], 1)];
-      },
-      proxy: true
-    }], null, false, 1792797475)
-  })], 1) : _vm._e()], 2), _c("div", {
-    staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",
-    style: {
-      "max-height": _vm.maxHeight
-    }
-  }, [_c("dt-rich-text-editor", _vm._b({
-    ref: "richTextEditor",
-    attrs: {
-      "data-qa": "dt-rich-text-editor",
-      "editable": _vm.editable,
-      "input-aria-label": _vm.inputAriaLabel,
-      "input-class": `d-ml16 d-ol-none d-my6 ${_vm.inputClass}`,
-      "output-format": _vm.htmlOutputFormat,
-      "auto-focus": _vm.autoFocus,
-      "placeholder": _vm.placeholder,
-      "allow-line-breaks": true,
-      "link": true
-    },
-    on: {
-      "focus": _vm.onFocus,
-      "blur": _vm.onBlur,
-      "input": function($event) {
-        return _vm.onInput($event);
-      }
-    },
-    model: {
-      value: _vm.internalInputValue,
-      callback: function($$v) {
-        _vm.internalInputValue = $$v;
-      },
-      expression: "internalInputValue"
-    }
-  }, "dt-rich-text-editor", _vm.$attrs, false))], 1)], 1);
+  return _c("div", { staticClass: "d-d-flex d-fd-column", attrs: { "data-qa": "dt-editor", "role": "presentation" }, on: { "click": function($event) {
+    return _vm.$refs.richTextEditor.focusEditor();
+  } } }, [_c("dt-stack", { staticClass: "d-p8 dt-editor--top-bar-background", attrs: { "direction": "row", "gap": "450" } }, [_vm._l(_vm.buttonGroups, function(buttonGroup) {
+    return _c("dt-stack", { key: buttonGroup.key, attrs: { "direction": "row", "gap": "300" } }, [_vm._l(buttonGroup.buttonGroup, function(button) {
+      return _c("dt-tooltip", { key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`, attrs: { "message": button.tooltipMessage, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+        var _a, _b;
+        return [_c("dt-button", { attrs: { "data-qa": button.dataQA, "importance": "clear", "kind": "muted", "active": (_b = (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(button.selector), "size": "xs", "aria-label": button.tooltipMessage }, on: { "click": function($event) {
+          return button.onClick();
+        } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+          return [_c("dt-icon", { attrs: { "name": button.iconName, "size": "200" } })];
+        }, proxy: true }], null, true) }, [button.label ? _c("span", [_vm._v(_vm._s(button.label))]) : _vm._e()])];
+      }, proxy: true }], null, true) });
+    }), _c("div", { staticClass: "dt-editor--button-group-divider" })], 2);
+  }), _vm.linkButton.showBtn ? _c("dt-stack", { attrs: { "direction": "row", "gap": "300" } }, [_c("dt-popover", { attrs: { "open": _vm.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 }, on: { "update:open": function($event) {
+    _vm.showLinkInput = $event;
+  }, "click": _vm.onInputFocus, "opened": _vm.updateInput }, nativeOn: { "click": function($event) {
+    $event.stopPropagation();
+    return _vm.onInputFocus.apply(null, arguments);
+  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-tooltip", { key: _vm.linkButton.key, attrs: { "message": _vm.linkButton.tooltipMessage, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+      var _a, _b;
+      return [_c("dt-button", { staticClass: "d-ol-none", attrs: { "data-qa": _vm.linkButton.dataQA, "importance": "clear", "kind": "muted", "active": (_b = (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive(_vm.linkButton.selector), "size": "xs", "aria-label": _vm.linkButton.tooltipMessage }, on: { "click": function($event) {
+        return _vm.linkButton.onClick();
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c("dt-icon", { staticClass: "d-fw-bold", attrs: { "name": _vm.linkButton.iconName, "size": "200" } })];
+      }, proxy: true }], null, false, 540616731) })];
+    }, proxy: true }], null, false, 2091397100) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_vm.showAddLink.setLinkTitle.length > 0 ? _c("span", [_vm._v(" " + _vm._s(_vm.showAddLink.setLinkTitle) + " ")]) : _vm._e(), _c("dt-input", { attrs: { "input-aria-label": _vm.showAddLink.setLinkInputAriaLabel, "data-qa": "dt-editor-link-input", "placeholder": _vm.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" }, on: { "click": _vm.onInputFocus, "focus": _vm.onInputFocus, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+        return null;
+      return _vm.setLink.apply(null, arguments);
+    } }, nativeOn: { "click": function($event) {
+      $event.stopPropagation();
+      return _vm.onInputFocus.apply(null, arguments);
+    } }, model: { value: _vm.linkInput, callback: function($$v) {
+      _vm.linkInput = $$v;
+    }, expression: "linkInput" } })];
+  }, proxy: true }, { key: "footerContent", fn: function() {
+    return [_c("div", { staticClass: "d-ml8 d-mr12" }, [_c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.removeLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-remove-link-btn" }, on: { "click": _vm.removeLink } }, [_vm._v(" " + _vm._s(_vm.removeLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.cancelSetLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-set-link-cancel-btn" }, on: { "click": _vm.closeLinkInput } }, [_vm._v(" " + _vm._s(_vm.cancelSetLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "size": "sm", "aria-label": _vm.confirmSetLinkButton.ariaLabel, "data-qa": "dt-editor-set-link-confirm-btn" }, on: { "click": _vm.setLink } }, [_vm._v(" " + _vm._s(_vm.confirmSetLinkButton.label) + " ")])], 1)];
+  }, proxy: true }], null, false, 1792797475) })], 1) : _vm._e()], 2), _c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "data-qa": "dt-rich-text-editor", "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": `d-ml16 d-ol-none d-my6 ${_vm.inputClass}`, "output-format": _vm.htmlOutputFormat, "auto-focus": _vm.autoFocus, "placeholder": _vm.placeholder, "allow-line-breaks": true, "link": true }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+    return _vm.onInput($event);
+  } }, model: { value: _vm.internalInputValue, callback: function($$v) {
+    _vm.internalInputValue = $$v;
+  }, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false))], 1)], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const editor = __component__.exports;
 exports.DtRecipeEditor = editor;
 //# sourceMappingURL=editor.cjs.map