@dialpad/dialtone 9.65.0 → 9.66.0

package/dist/vue2/lib/editor.js

@@ -26,10 +26,10 @@ import "@tiptap/extension-text-align";
 import "@tiptap/extension-history";
 import "@tiptap/core";
 import "./emoji.js";
-import "../chunks/index-ODod4Oj_.js";
+import "../chunks/index-i65YVk-U.js";
 import "emoji-toolkit/emoji_strategy.json";
 import "./skeleton.js";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "@tiptap/pm/state";
 import "@tiptap/suggestion";
@@ -50,22 +50,15 @@ import "./presence.js";
 import "@dialpad/dialtone-icons/vue2/hash";
 import "@dialpad/dialtone-icons/vue2/lock";
 import "../chunks/stack_constants-HraCekPm.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/popover_constants-6YkPPbnk.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-XOr4kiNZ.js";
-import "../chunks/sr_only_close_button-81bHIpPu.js";
+import "../chunks/modal-8X6poIZW.js";
+import "../chunks/sr_only_close_button-IjMVfBDE.js";
 import "./lazy-show.js";
-import "../chunks/input-6kbd8Pju.js";
+import "../chunks/input-PhJeBN6r.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",
@@ -153,21 +146,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
@@ -338,49 +340,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: {
@@ -412,12 +509,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();
     },
@@ -455,7 +552,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();
@@ -494,63 +593,264 @@ 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__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const editor = __component__.exports;
 export {
   editor as DtRecipeEditor