@dialpad/dialtone 9.29.0 → 9.30.0

package/dist/vue2/lib/editor.js

@@ -1,11 +1,11 @@
-import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtRichTextEditor as u, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as c, RICH_TEXT_EDITOR_OUTPUT_FORMATS as d } from "./rich-text-editor.js";
-import { DtButton as p } from "./button.js";
-import { DtIcon as h } from "./icon.js";
-import { DtPopover as k } from "./popover.js";
-import { DtStack as f } from "./stack.js";
-import { DtInput as m } from "./input.js";
-import { DtTooltip as g } from "./tooltip.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtRichTextEditor, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "./rich-text-editor.js";
+import { DtButton } from "./button.js";
+import { DtIcon } from "./icon.js";
+import { DtPopover } from "./popover.js";
+import { DtStack } from "./stack.js";
+import { DtInput } from "./input.js";
+import { DtTooltip } from "./tooltip.js";
 import "@tiptap/vue-2";
 import "@tiptap/extension-blockquote";
 import "@tiptap/extension-code-block";
@@ -24,56 +24,59 @@ import "@tiptap/extension-underline";
 import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
 import "@tiptap/core";
-import "../chunks/index-YkSDT8-g.js";
+import "./emoji.js";
+import "../common/emoji.js";
 import "emoji-regex";
 import "emoji-toolkit/emoji_strategy.json";
 import "./skeleton.js";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "@tiptap/pm/state";
 import "@tiptap/suggestion";
 import "@dialpad/dialtone-emojis";
 import "./list-item.js";
-import "../chunks/list_item_constants-LTUc74pD.js";
-import "./utils.js";
-import "./constants.js";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
+import "../common/utils.js";
+import "../common/constants.js";
 import "vue";
 import "./item-layout.js";
 import "@dialpad/dialtone-icons/vue2";
 import "tippy.js";
 import "@tiptap/extension-mention";
 import "./link.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "./avatar.js";
 import "./presence.js";
-import "../chunks/stack_constants-u7tNqGtc.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../chunks/stack_constants-HraCekPm.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-VuMFkZFH.js";
-import "../chunks/sr_only_close_button-JGole5Xi.js";
+import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/sr_only_close_button-81bHIpPu.js";
 import "./lazy-show.js";
-import "../chunks/input-1tm09l_-.js";
-import "./validators.js";
+import "../chunks/input-6kbd8Pju.js";
+import "../common/validators.js";
 import "./validation-messages.js";
-const B = [
+const EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   /^https?:\/\//,
   /^http?:\/\//,
   /^ftp?:\/\//,
   /^ftps?:\/\//,
   /^ftps?:\/\//,
   /mailto:([^?]*)/
-], b = "https://", w = {
+];
+const EDITOR_DEFAULT_LINK_PREFIX = "https://";
+const _sfc_main = {
   name: "DtRecipeEditor",
   components: {
-    DtRichTextEditor: u,
-    DtButton: p,
-    DtIcon: h,
-    DtPopover: k,
-    DtStack: f,
-    DtInput: m,
-    DtTooltip: g
+    DtRichTextEditor,
+    DtButton,
+    DtIcon,
+    DtPopover,
+    DtStack,
+    DtInput,
+    DtTooltip
   },
-  inheritAttrs: !1,
+  inheritAttrs: false,
   props: {
     /**
      * Value of the input. The object format should match TipTap's JSON
@@ -88,14 +91,14 @@ const B = [
      */
     editable: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Descriptive label for the input element
      */
     inputAriaLabel: {
       type: String,
-      required: !0,
+      required: true,
       default: ""
     },
     /**
@@ -120,9 +123,12 @@ const B = [
      */
     autoFocus: {
       type: [Boolean, String, Number],
-      default: !1,
-      validator(e) {
-        return typeof e == "string" ? c.includes(e) : !0;
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
       }
     },
     /**
@@ -173,91 +179,91 @@ const B = [
      */
     showBoldButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to render text in italics
      */
     showItalicsButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to underline text
      */
     showUnderlineButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to strike text
      */
     showStrikeButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to render list items
      */
     showListItemsButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to render ordered list items
      */
     showOrderedListButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to align text to the left
      */
     showAlignLeftButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to align text to the center
      */
     showAlignCenterButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to align text to the right
      */
     showAlignRightButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to justify text
      */
     showAlignJustifyButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to add quote format to text
      */
     showQuoteButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to add code block
      */
     showCodeBlockButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show button to handle quick replies
      */
     showQuickRepliesButton: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Show add link default config.
@@ -265,7 +271,7 @@ const B = [
     showAddLink: {
       type: Object,
       default: () => ({
-        showAddLinkButton: !0,
+        showAddLinkButton: true,
         setLinkTitle: "Add a link",
         setLinkInputAriaLabel: "Input field to add link"
       })
@@ -301,11 +307,11 @@ const B = [
     return {
       internalInputValue: this.value,
       // internal input content
-      hasFocus: !1,
+      hasFocus: false,
       linkOptions: {
         class: "d-link d-c-text d-d-inline-block"
       },
-      showLinkInput: !1,
+      showLinkInput: false,
       linkInput: ""
     };
   },
@@ -314,7 +320,7 @@ const B = [
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return d[2];
+      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];
     },
     showingTextFormatButtons() {
       return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
@@ -326,22 +332,22 @@ const B = [
       return this.showListItemsButton || this.showOrderedListButton;
     },
     buttonGroups() {
-      const e = this.individualButtons.map((t) => ({
-        key: t.selector,
-        buttonGroup: [t]
+      const individualButtonStacks = this.individualButtons.map((buttonData) => ({
+        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 },
-        ...e
-      ].filter((t) => t.buttonGroup.length > 0);
+        ...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((e) => e.showBtn);
+      ].filter((button) => button.showBtn);
     },
     textFormatButtons() {
       return [
@@ -349,7 +355,7 @@ const B = [
         { 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((e) => e.showBtn);
+      ].filter((button) => button.showBtn);
     },
     alignmentButtons() {
       return [
@@ -357,171 +363,194 @@ const B = [
         { 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((e) => e.showBtn);
+      ].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((e) => e.showBtn);
+      ].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((e) => e.showBtn);
+      ].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 };
     }
   },
   watch: {
-    value(e) {
-      this.internalInputValue = e;
+    value(newValue) {
+      this.internalInputValue = newValue;
     }
   },
   methods: {
-    onInputFocus(e) {
-      e == null || e.stopPropagation();
+    onInputFocus(event) {
+      event == null ? void 0 : event.stopPropagation();
     },
     removeLink() {
-      var e, t, i, o, n;
-      (n = (o = (i = (t = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : t.chain()) == null ? void 0 : i.focus()) == null ? void 0 : o.unsetLink()) == null || n.run(), this.closeLinkInput();
-    },
-    setLink(e) {
-      var n, r, s;
-      const t = (n = this.$refs.richTextEditor) == null ? void 0 : n.editor;
-      if (e == null || e.preventDefault(), e == null || e.stopPropagation(), !this.linkInput) {
+      var _a, _b, _c, _d, _e;
+      (_e = (_d = (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.chain()) == null ? void 0 : _c.focus()) == null ? void 0 : _d.unsetLink()) == null ? void 0 : _e.run();
+      this.closeLinkInput();
+    },
+    setLink(event) {
+      var _a, _b, _c;
+      const editor2 = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor;
+      event == null ? void 0 : event.preventDefault();
+      event == null ? void 0 : event.stopPropagation();
+      if (!this.linkInput) {
         this.removeLink();
         return;
       }
-      B.find((l) => l.test(this.linkInput)) || (this.linkInput = `${b}${this.linkInput}`);
-      const o = (s = (r = t == null ? void 0 : t.view) == null ? void 0 : r.state) == null ? void 0 : s.selection;
-      o.anchor === o.head ? t.chain().focus().insertContentAt(
-        o.anchor,
-        `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
-      ).run() : t.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run(), this.closeLinkInput();
+      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find((prefixRegex) => prefixRegex.test(this.linkInput));
+      if (!prefix) {
+        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;
+      }
+      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();
+      } else {
+        editor2.chain().focus().extendMarkRange("link").setLink({ href: this.linkInput, class: this.linkOptions.class }).run();
+      }
+      this.closeLinkInput();
     },
     openLinkInput() {
-      this.showLinkInput = !0;
+      this.showLinkInput = true;
     },
-    updateInput(e) {
-      var t, i, o;
-      if (!e)
+    updateInput(openedInput) {
+      var _a, _b, _c;
+      if (!openedInput) {
         return this.closeLinkInput();
-      this.linkInput = (o = (i = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : o.href;
+      }
+      this.linkInput = (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.getAttributes("link")) == null ? void 0 : _c.href;
     },
     closeLinkInput() {
-      var e;
-      this.showLinkInput = !1, this.linkInput = "", (e = this.$refs.richTextEditor.editor) == null || e.chain().focus();
+      var _a;
+      this.showLinkInput = false;
+      this.linkInput = "";
+      (_a = this.$refs.richTextEditor.editor) == null ? void 0 : _a.chain().focus();
     },
     onBoldTextToggle() {
-      var e, t;
-      (t = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null || t.chain().focus().toggleBold().run();
+      var _a, _b;
+      (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.chain().focus().toggleBold().run();
     },
     onItalicTextToggle() {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleItalic().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleItalic().run();
     },
     onUnderlineTextToggle() {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleUnderline().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleUnderline().run();
     },
     onStrikethroughTextToggle() {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleStrike().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleStrike().run();
     },
-    onTextAlign(e) {
-      var t, i, o, n;
-      if ((i = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) != null && i.isActive({ textAlign: e }))
-        return (o = this.$refs.richTextEditor) == null ? void 0 : o.editor.chain().focus().unsetTextAlign().run();
-      (n = this.$refs.richTextEditor) == null || n.editor.chain().focus().setTextAlign(e).run();
+    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 })) {
+        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();
     },
     onBulletListToggle() {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleBulletList().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBulletList().run();
     },
     onOrderedListToggle() {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleOrderedList().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleOrderedList().run();
     },
     onCodeBlockToggle() {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleCodeBlock().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleCodeBlock().run();
     },
     onQuickRepliesClick() {
       this.$emit("quick-replies-click");
     },
     onBlockquoteToggle() {
-      var e;
-      (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().toggleBlockquote().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBlockquote().run();
     },
-    onFocus(e) {
-      this.hasFocus = !0, this.$emit("focus", e);
+    onFocus(event) {
+      this.hasFocus = true;
+      this.$emit("focus", event);
     },
-    onBlur(e) {
-      this.hasFocus = !1, this.$emit("blur", e);
+    onBlur(event) {
+      this.hasFocus = false;
+      this.$emit("blur", event);
     },
-    onInput(e) {
-      this.$emit("input", e);
+    onInput(event) {
+      this.$emit("input", event);
     }
   }
 };
-var L = function() {
-  var t = this, i = t._self._c;
-  return i("div", { staticClass: "d-d-flex d-fd-column", attrs: { "data-qa": "dt-editor", role: "presentation" }, on: { click: function(o) {
-    return t.$refs.richTextEditor.focusEditor();
-  } } }, [i("dt-stack", { staticClass: "d-p8 dt-editor--top-bar-background", attrs: { direction: "row", gap: "450" } }, [t._l(t.buttonGroups, function(o) {
-    return i("dt-stack", { key: o.key, attrs: { direction: "row", gap: "300" } }, [t._l(o.buttonGroup, function(n) {
-      return i("dt-tooltip", { key: `${o.key}-${JSON.stringify(n.selector)}`, attrs: { message: n.tooltipMessage, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
-        var r, s;
-        return [i("dt-button", { attrs: { "data-qa": n.dataQA, importance: "clear", kind: "muted", active: (s = (r = t.$refs.richTextEditor) == null ? void 0 : r.editor) == null ? void 0 : s.isActive(n.selector), size: "xs", "aria-label": n.tooltipMessage }, on: { click: function(l) {
-          return n.onClick();
-        } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-          return [i("dt-icon", { attrs: { name: n.iconName, size: "200" } })];
-        }, proxy: !0 }], null, !0) }, [n.label ? i("span", [t._v(t._s(n.label))]) : t._e()])];
-      }, proxy: !0 }], null, !0) });
-    }), i("div", { staticClass: "dt-editor--button-group-divider" })], 2);
-  }), t.linkButton.showBtn ? i("dt-stack", { attrs: { direction: "row", gap: "300" } }, [i("dt-popover", { attrs: { open: t.showLinkInput, placement: "bottom-start", "visually-hidden-close": !0, "visually-hidden-close-label": "Close link input popover", "data-qa": "dt-editor-link-input-popover", "show-close-button": !1 }, on: { "update:open": function(o) {
-    t.showLinkInput = o;
-  }, click: t.onInputFocus, opened: t.updateInput }, nativeOn: { click: function(o) {
-    return o.stopPropagation(), t.onInputFocus.apply(null, arguments);
-  } }, scopedSlots: t._u([{ key: "anchor", fn: function() {
-    return [i("dt-tooltip", { key: t.linkButton.key, attrs: { message: t.linkButton.tooltipMessage, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
-      var o, n;
-      return [i("dt-button", { staticClass: "d-ol-none", attrs: { "data-qa": t.linkButton.dataQA, importance: "clear", kind: "muted", active: (n = (o = t.$refs.richTextEditor) == null ? void 0 : o.editor) == null ? void 0 : n.isActive(t.linkButton.selector), size: "xs", "aria-label": t.linkButton.tooltipMessage }, on: { click: function(r) {
-        return t.linkButton.onClick();
-      } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-        return [i("dt-icon", { staticClass: "d-fw-bold", attrs: { name: t.linkButton.iconName, size: "200" } })];
-      }, proxy: !0 }], null, !1, 540616731) })];
-    }, proxy: !0 }], null, !1, 2091397100) })];
-  }, proxy: !0 }, { key: "content", fn: function() {
-    return [t.showAddLink.setLinkTitle.length > 0 ? i("span", [t._v(" " + t._s(t.showAddLink.setLinkTitle) + " ")]) : t._e(), i("dt-input", { attrs: { "input-aria-label": t.showAddLink.setLinkInputAriaLabel, "data-qa": "dt-editor-link-input", placeholder: t.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: t.onInputFocus, focus: t.onInputFocus, keydown: function(o) {
-      return !o.type.indexOf("key") && t._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : t.setLink.apply(null, arguments);
-    } }, nativeOn: { click: function(o) {
-      return o.stopPropagation(), t.onInputFocus.apply(null, arguments);
-    } }, model: { value: t.linkInput, callback: function(o) {
-      t.linkInput = o;
+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: !0 }, { key: "footerContent", fn: function() {
-    return [i("div", { staticClass: "d-ml8 d-mr12" }, [i("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": t.removeLinkButton.ariaLabel, importance: "clear", kind: "muted", size: "sm", "data-qa": "dt-editor-remove-link-btn" }, on: { click: t.removeLink } }, [t._v(" " + t._s(t.removeLinkButton.label) + " ")]), i("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": t.cancelSetLinkButton.ariaLabel, importance: "clear", kind: "muted", size: "sm", "data-qa": "dt-editor-set-link-cancel-btn" }, on: { click: t.closeLinkInput } }, [t._v(" " + t._s(t.cancelSetLinkButton.label) + " ")]), i("dt-button", { staticClass: "d-mx2", attrs: { size: "sm", "aria-label": t.confirmSetLinkButton.ariaLabel, "data-qa": "dt-editor-set-link-confirm-btn" }, on: { click: t.setLink } }, [t._v(" " + t._s(t.confirmSetLinkButton.label) + " ")])], 1)];
-  }, proxy: !0 }], null, !1, 1792797475) })], 1) : t._e()], 2), i("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text", style: { "max-height": t.maxHeight } }, [i("dt-rich-text-editor", t._b({ ref: "richTextEditor", attrs: { "data-qa": "dt-rich-text-editor", editable: t.editable, "input-aria-label": t.inputAriaLabel, "input-class": `d-ml16 d-ol-none d-my6 ${t.inputClass}`, "output-format": t.htmlOutputFormat, "auto-focus": t.autoFocus, placeholder: t.placeholder, "allow-line-breaks": !0, link: !1 }, on: { focus: t.onFocus, blur: t.onBlur, input: function(o) {
-    return t.onInput(o);
-  } }, model: { value: t.internalInputValue, callback: function(o) {
-    t.internalInputValue = o;
-  }, expression: "internalInputValue" } }, "dt-rich-text-editor", t.$attrs, !1))], 1)], 1);
-}, y = [], x = /* @__PURE__ */ a(
-  w,
-  L,
-  y,
-  !1,
+  }, 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": false }, 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
 );
-const Ct = x.exports;
+const editor = __component__.exports;
 export {
-  Ct as DtRecipeEditor
+  editor as DtRecipeEditor
 };
 //# sourceMappingURL=editor.js.map