@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/editor.js

@@ -1,12 +1,12 @@
-import { resolveComponent as h, openBlock as d, createElementBlock as k, createVNode as u, withCtx as r, Fragment as A, renderList as x, createBlock as g, normalizeClass as O, createTextVNode as f, toDisplayString as m, withModifiers as y, createCommentVNode as I, withKeys as S, createElementVNode as b, normalizeStyle as v, mergeProps as F } from "vue";
-import { _ as R } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtRichTextEditor as Q, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as N, RICH_TEXT_EDITOR_OUTPUT_FORMATS as q } from "./rich-text-editor.js";
-import { DtButton as M } from "./button.js";
-import { DtIcon as D } from "./icon.js";
-import { DtPopover as U } from "./popover.js";
-import { DtStack as V } from "./stack.js";
-import { DtInput as P } from "./input.js";
-import { DtTooltip as j } from "./tooltip.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createBlock, normalizeClass, createTextVNode, toDisplayString, withModifiers, createCommentVNode, withKeys, createElementVNode, normalizeStyle, mergeProps } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.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-3";
 import "@tiptap/extension-blockquote";
 import "@tiptap/extension-code-block";
@@ -25,54 +25,57 @@ import "@tiptap/extension-underline";
 import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
 import "@tiptap/core";
-import "../chunks/index-mRmwpCBG.js";
+import "./emoji.js";
+import "../common/emoji.js";
 import "emoji-regex";
 import "@dialpad/dialtone-emojis";
 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 "./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 "./item-layout.js";
 import "@dialpad/dialtone-icons/vue3";
 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/modal-VuMFkZFH.js";
-import "../chunks/sr_only_close_button-7O-Ev8uM.js";
+import "../chunks/stack_constants-HraCekPm.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
+import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "./lazy-show.js";
-import "../chunks/input-4UQWegUk.js";
-import "./validators.js";
+import "../chunks/input-NmYDD5bn.js";
+import "../common/validators.js";
 import "./validation-messages.js";
-const z = [
+const EDITOR_SUPPORTED_LINK_PROTOCOLS = [
   /^https?:\/\//,
   /^http?:\/\//,
   /^ftp?:\/\//,
   /^ftps?:\/\//,
   /^ftps?:\/\//,
   /mailto:([^?]*)/
-], G = "https://", J = {
+];
+const EDITOR_DEFAULT_LINK_PREFIX = "https://";
+const _sfc_main = {
   name: "DtRecipeEditor",
   components: {
-    DtRichTextEditor: Q,
-    DtButton: M,
-    DtIcon: D,
-    DtPopover: U,
-    DtStack: V,
-    DtInput: P,
-    DtTooltip: j
+    DtRichTextEditor,
+    DtButton,
+    DtIcon,
+    DtPopover,
+    DtStack,
+    DtInput,
+    DtTooltip
   },
   mixins: [],
-  inheritAttrs: !1,
+  inheritAttrs: false,
   props: {
     /**
      * Value of the input. The object format should match TipTap's JSON
@@ -87,14 +90,14 @@ const z = [
      */
     editable: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Descriptive label for the input element
      */
     inputAriaLabel: {
       type: String,
-      required: !0,
+      required: true,
       default: ""
     },
     /**
@@ -119,9 +122,12 @@ const z = [
      */
     autoFocus: {
       type: [Boolean, String, Number],
-      default: !1,
-      validator(t) {
-        return typeof t == "string" ? N.includes(t) : !0;
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
       }
     },
     /**
@@ -172,91 +178,91 @@ const z = [
      */
     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.
@@ -264,7 +270,7 @@ const z = [
     showAddLink: {
       type: Object,
       default: () => ({
-        showAddLinkButton: !0,
+        showAddLinkButton: true,
         setLinkTitle: "Add a link",
         setLinkInputAriaLabel: "Input field to add link"
       })
@@ -300,11 +306,11 @@ const z = [
     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: ""
     };
   },
@@ -313,7 +319,7 @@ const z = [
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return q[2];
+      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];
     },
     showingTextFormatButtons() {
       return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
@@ -325,22 +331,22 @@ const z = [
       return this.showListItemsButton || this.showOrderedListButton;
     },
     buttonGroups() {
-      const t = this.individualButtons.map((e) => ({
-        key: e.selector,
-        buttonGroup: [e]
+      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 },
-        ...t
-      ].filter((e) => e.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((t) => t.showBtn);
+      ].filter((button) => button.showBtn);
     },
     textFormatButtons() {
       return [
@@ -348,7 +354,7 @@ const z = [
         { 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((t) => t.showBtn);
+      ].filter((button) => button.showBtn);
     },
     alignmentButtons() {
       return [
@@ -356,214 +362,244 @@ const z = [
         { 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((t) => t.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((t) => t.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((t) => t.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(t) {
-      this.internalInputValue = t;
+    value(newValue) {
+      this.internalInputValue = newValue;
     }
   },
   methods: {
-    onInputFocus(t) {
-      t == null || t.stopPropagation();
+    onInputFocus(event) {
+      event == null ? void 0 : event.stopPropagation();
     },
     removeLink() {
-      var t, e, i, s, n;
-      (n = (s = (i = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : i.focus()) == null ? void 0 : s.unsetLink()) == null || n.run(), this.closeLinkInput();
-    },
-    setLink(t) {
-      var n, o, p;
-      const e = (n = this.$refs.richTextEditor) == null ? void 0 : n.editor;
-      if (t == null || t.preventDefault(), t == null || t.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;
       }
-      z.find((c) => c.test(this.linkInput)) || (this.linkInput = `${G}${this.linkInput}`);
-      const s = (p = (o = e == null ? void 0 : e.view) == null ? void 0 : o.state) == null ? void 0 : p.selection;
-      s.anchor === s.head ? e.chain().focus().insertContentAt(
-        s.anchor,
-        `<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`
-      ).run() : e.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(t) {
-      var e, i, s;
-      if (!t)
+    updateInput(openedInput) {
+      var _a, _b, _c;
+      if (!openedInput) {
         return this.closeLinkInput();
-      this.linkInput = (s = (i = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : i.getAttributes("link")) == null ? void 0 : s.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 t;
-      this.showLinkInput = !1, this.linkInput = "", (t = this.$refs.richTextEditor.editor) == null || t.chain().focus();
+      var _a;
+      this.showLinkInput = false;
+      this.linkInput = "";
+      (_a = this.$refs.richTextEditor.editor) == null ? void 0 : _a.chain().focus();
     },
     onBoldTextToggle() {
-      var t, e;
-      (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null || e.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 t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleItalic().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleItalic().run();
     },
     onUnderlineTextToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleUnderline().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleUnderline().run();
     },
     onStrikethroughTextToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleStrike().run();
     },
-    onTextAlign(t) {
-      var e, i, s, n;
-      if ((i = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) != null && i.isActive({ textAlign: t }))
-        return (s = this.$refs.richTextEditor) == null ? void 0 : s.editor.chain().focus().unsetTextAlign().run();
-      (n = this.$refs.richTextEditor) == null || n.editor.chain().focus().setTextAlign(t).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 t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleBulletList().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBulletList().run();
     },
     onOrderedListToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleOrderedList().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleOrderedList().run();
     },
     onCodeBlockToggle() {
-      var t;
-      (t = this.$refs.richTextEditor) == null || t.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 t;
-      (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleBlockquote().run();
+      var _a;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor.chain().focus().toggleBlockquote().run();
     },
-    onFocus(t) {
-      this.hasFocus = !0, this.$emit("focus", t);
+    onFocus(event) {
+      this.hasFocus = true;
+      this.$emit("focus", event);
     },
-    onBlur(t) {
-      this.hasFocus = !1, this.$emit("blur", t);
+    onBlur(event) {
+      this.hasFocus = false;
+      this.$emit("blur", event);
     },
-    onInput(t) {
-      this.$emit("input", t);
+    onInput(event) {
+      this.$emit("input", event);
     }
   }
-}, K = /* @__PURE__ */ b("div", { class: "dt-editor--button-group-divider" }, null, -1), H = { key: 0 }, X = { class: "d-ml8 d-mr12" };
-function W(t, e, i, s, n, o) {
-  const p = h("dt-icon"), c = h("dt-button"), L = h("dt-tooltip"), B = h("dt-stack"), C = h("dt-input"), _ = h("dt-popover"), E = h("dt-rich-text-editor");
-  return d(), k("div", {
+};
+const _hoisted_1 = /* @__PURE__ */ 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 = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  const _component_dt_tooltip = resolveComponent("dt-tooltip");
+  const _component_dt_stack = resolveComponent("dt-stack");
+  const _component_dt_input = resolveComponent("dt-input");
+  const _component_dt_popover = resolveComponent("dt-popover");
+  const _component_dt_rich_text_editor = resolveComponent("dt-rich-text-editor");
+  return openBlock(), createElementBlock("div", {
     "data-qa": "dt-editor",
     role: "presentation",
     class: "d-d-flex d-fd-column",
-    onClick: e[4] || (e[4] = (a) => t.$refs.richTextEditor.focusEditor())
+    onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.richTextEditor.focusEditor())
   }, [
-    u(B, {
+    createVNode(_component_dt_stack, {
       direction: "row",
       gap: "450",
       class: "d-p8 dt-editor--top-bar-background"
     }, {
-      default: r(() => [
-        (d(!0), k(A, null, x(o.buttonGroups, (a) => (d(), g(B, {
-          key: a.key,
-          direction: "row",
-          gap: "300"
-        }, {
-          default: r(() => [
-            (d(!0), k(A, null, x(a.buttonGroup, (l) => (d(), g(L, {
-              key: `${a.key}-${JSON.stringify(l.selector)}`,
-              message: l.tooltipMessage,
-              placement: "top"
-            }, {
-              anchor: r(() => {
-                var w, T;
-                return [
-                  u(c, {
-                    "data-qa": l.dataQA,
-                    importance: "clear",
-                    kind: "muted",
-                    active: (T = (w = t.$refs.richTextEditor) == null ? void 0 : w.editor) == null ? void 0 : T.isActive(l.selector),
-                    size: "xs",
-                    "aria-label": l.tooltipMessage,
-                    class: O({ "d-btn--icon-only": !l.label }),
-                    onClick: (Y) => l.onClick()
-                  }, {
-                    icon: r(() => [
-                      u(p, {
-                        name: l.iconName,
-                        size: "200"
-                      }, null, 8, ["name"])
-                    ]),
-                    default: r(() => [
-                      f(" " + m(l == null ? void 0 : l.label), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["data-qa", "active", "aria-label", "class", "onClick"])
-                ];
-              }),
-              _: 2
-            }, 1032, ["message"]))), 128)),
-            K
-          ]),
-          _: 2
-        }, 1024))), 128)),
-        o.linkButton.showBtn ? (d(), g(B, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($options.buttonGroups, (buttonGroup) => {
+          return openBlock(), createBlock(_component_dt_stack, {
+            key: buttonGroup.key,
+            direction: "row",
+            gap: "300"
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(buttonGroup.buttonGroup, (button) => {
+                return openBlock(), createBlock(_component_dt_tooltip, {
+                  key: `${buttonGroup.key}-${JSON.stringify(button.selector)}`,
+                  message: button.tooltipMessage,
+                  placement: "top"
+                }, {
+                  anchor: withCtx(() => {
+                    var _a, _b;
+                    return [
+                      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: normalizeClass({ "d-btn--icon-only": !button.label }),
+                        onClick: ($event) => button.onClick()
+                      }, {
+                        icon: withCtx(() => [
+                          createVNode(_component_dt_icon, {
+                            name: button.iconName,
+                            size: "200"
+                          }, null, 8, ["name"])
+                        ]),
+                        default: withCtx(() => [
+                          createTextVNode(" " + 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 ? (openBlock(), createBlock(_component_dt_stack, {
           key: 0,
           direction: "row",
           gap: "300"
         }, {
-          default: r(() => [
-            u(_, {
-              open: n.showLinkInput,
+          default: withCtx(() => [
+            createVNode(_component_dt_popover, {
+              open: $data.showLinkInput,
               placement: "bottom-start",
-              "visually-hidden-close": !0,
+              "visually-hidden-close": true,
               "visually-hidden-close-label": "Close link input popover",
               "data-qa": "dt-editor-link-input-popover",
-              "show-close-button": !1,
+              "show-close-button": false,
               onClick: [
-                o.onInputFocus,
-                y(o.onInputFocus, ["stop"])
+                $options.onInputFocus,
+                withModifiers($options.onInputFocus, ["stop"])
               ],
-              onOpened: o.updateInput
+              onOpened: $options.updateInput
             }, {
-              anchor: r(() => [
-                (d(), g(L, {
-                  key: o.linkButton.key,
-                  message: o.linkButton.tooltipMessage,
+              anchor: withCtx(() => [
+                (openBlock(), createBlock(_component_dt_tooltip, {
+                  key: $options.linkButton.key,
+                  message: $options.linkButton.tooltipMessage,
                   placement: "top"
                 }, {
-                  anchor: r(() => {
-                    var a, l;
+                  anchor: withCtx(() => {
+                    var _a, _b;
                     return [
-                      u(c, {
-                        "data-qa": o.linkButton.dataQA,
+                      createVNode(_component_dt_button, {
+                        "data-qa": $options.linkButton.dataQA,
                         importance: "clear",
                         kind: "muted",
                         class: "d-ol-none",
-                        active: (l = (a = t.$refs.richTextEditor) == null ? void 0 : a.editor) == null ? void 0 : l.isActive(o.linkButton.selector),
+                        active: (_b = (_a = _ctx.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.isActive($options.linkButton.selector),
                         size: "xs",
-                        "aria-label": o.linkButton.tooltipMessage,
-                        onClick: e[0] || (e[0] = (w) => o.linkButton.onClick())
+                        "aria-label": $options.linkButton.tooltipMessage,
+                        onClick: _cache[0] || (_cache[0] = ($event) => $options.linkButton.onClick())
                       }, {
-                        icon: r(() => [
-                          u(p, {
-                            name: o.linkButton.iconName,
+                        icon: withCtx(() => [
+                          createVNode(_component_dt_icon, {
+                            name: $options.linkButton.iconName,
                             size: "200",
                             class: "d-fw-bold"
                           }, null, 8, ["name"])
@@ -575,62 +611,62 @@ function W(t, e, i, s, n, o) {
                   _: 1
                 }, 8, ["message"]))
               ]),
-              content: r(() => [
-                i.showAddLink.setLinkTitle.length > 0 ? (d(), k("span", H, m(i.showAddLink.setLinkTitle), 1)) : I("", !0),
-                u(C, {
-                  modelValue: n.linkInput,
-                  "onUpdate:modelValue": e[1] || (e[1] = (a) => n.linkInput = a),
-                  "input-aria-label": i.showAddLink.setLinkInputAriaLabel,
+              content: withCtx(() => [
+                $props.showAddLink.setLinkTitle.length > 0 ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($props.showAddLink.setLinkTitle), 1)) : createCommentVNode("", true),
+                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: i.setLinkPlaceholder,
+                  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: [
-                    o.onInputFocus,
-                    y(o.onInputFocus, ["stop"])
+                    $options.onInputFocus,
+                    withModifiers($options.onInputFocus, ["stop"])
                   ],
-                  onFocus: o.onInputFocus,
-                  onKeydown: S(o.setLink, ["enter"])
+                  onFocus: $options.onInputFocus,
+                  onKeydown: withKeys($options.setLink, ["enter"])
                 }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
               ]),
-              footerContent: r(() => [
-                b("div", X, [
-                  u(c, {
+              footerContent: withCtx(() => [
+                createElementVNode("div", _hoisted_3, [
+                  createVNode(_component_dt_button, {
                     class: "d-mx2",
-                    "aria-label": i.removeLinkButton.ariaLabel,
+                    "aria-label": $props.removeLinkButton.ariaLabel,
                     importance: "clear",
                     kind: "muted",
                     size: "sm",
                     "data-qa": "dt-editor-remove-link-btn",
-                    onClick: o.removeLink
+                    onClick: $options.removeLink
                   }, {
-                    default: r(() => [
-                      f(m(i.removeLinkButton.label), 1)
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString($props.removeLinkButton.label), 1)
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]),
-                  u(c, {
+                  createVNode(_component_dt_button, {
                     class: "d-mx2",
-                    "aria-label": i.cancelSetLinkButton.ariaLabel,
+                    "aria-label": $props.cancelSetLinkButton.ariaLabel,
                     importance: "clear",
                     kind: "muted",
                     size: "sm",
                     "data-qa": "dt-editor-set-link-cancel-btn",
-                    onClick: o.closeLinkInput
+                    onClick: $options.closeLinkInput
                   }, {
-                    default: r(() => [
-                      f(m(i.cancelSetLinkButton.label), 1)
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString($props.cancelSetLinkButton.label), 1)
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"]),
-                  u(c, {
+                  createVNode(_component_dt_button, {
                     class: "d-mx2",
                     size: "sm",
-                    "aria-label": i.confirmSetLinkButton.ariaLabel,
+                    "aria-label": $props.confirmSetLinkButton.ariaLabel,
                     "data-qa": "dt-editor-set-link-confirm-btn",
-                    onClick: o.setLink
+                    onClick: $options.setLink
                   }, {
-                    default: r(() => [
-                      f(m(i.confirmSetLinkButton.label), 1)
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString($props.confirmSetLinkButton.label), 1)
                     ]),
                     _: 1
                   }, 8, ["aria-label", "onClick"])
@@ -640,37 +676,37 @@ function W(t, e, i, s, n, o) {
             }, 8, ["open", "onClick", "onOpened"])
           ]),
           _: 1
-        })) : I("", !0)
+        })) : createCommentVNode("", true)
       ]),
       _: 1
     }),
-    b("div", {
+    createElementVNode("div", {
       class: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",
-      style: v({ "max-height": i.maxHeight })
+      style: normalizeStyle({ "max-height": $props.maxHeight })
     }, [
-      u(E, F({
+      createVNode(_component_dt_rich_text_editor, mergeProps({
         ref: "richTextEditor",
-        modelValue: n.internalInputValue,
-        "onUpdate:modelValue": e[2] || (e[2] = (a) => n.internalInputValue = a),
+        modelValue: $data.internalInputValue,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $data.internalInputValue = $event),
         "data-qa": "dt-rich-text-editor",
-        editable: i.editable,
-        "input-aria-label": i.inputAriaLabel,
-        "input-class": `d-ml16 d-ol-none d-my6 ${i.inputClass}`,
-        "output-format": o.htmlOutputFormat,
-        "auto-focus": i.autoFocus,
-        placeholder: i.placeholder,
-        "allow-line-breaks": !0,
-        link: !1
-      }, t.$attrs, {
-        onFocus: o.onFocus,
-        onBlur: o.onBlur,
-        onInput: e[3] || (e[3] = (a) => o.onInput(a))
+        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: false
+      }, _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 $t = /* @__PURE__ */ R(J, [["render", W]]);
+const editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  $t as DtRecipeWysiwygEditor
+  editor as DtRecipeWysiwygEditor
 };
 //# sourceMappingURL=editor.js.map