@dialpad/dialtone 9.158.0 → 9.160.0

package/dist/vue3/lib/editor/editor.js

@@ -1,41 +1,49 @@
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS as z, EDITOR_DEFAULT_LINK_PREFIX as J } from "./editor-constants.js";
-import { addClassStyleAttrs as j, removeClassStyleAttrs as H } from "../../common/utils/index.js";
-import { DtIconImage as w, DtIconLink2 as O, DtIconCodeBlock as D, DtIconQuote as R, DtIconAlignJustify as x, DtIconAlignRight as y, DtIconAlignCenter as C, DtIconAlignLeft as b, DtIconListOrdered as N, DtIconListBullet as S, DtIconStrikethrough as U, DtIconUnderline as F, DtIconItalic as v, DtIconBold as Q, DtIconQuickReply as M } from "@dialpad/dialtone-icons/vue3";
-import { DialtoneLocalization as Y } from "../../localization/index.js";
-import { resolveComponent as h, openBlock as c, createElementBlock as A, mergeProps as f, createVNode as a, withCtx as u, Fragment as q, renderList as V, createBlock as B, withKeys as g, withModifiers as p, createTextVNode as L, toDisplayString as k, resolveDynamicComponent as K, createElementVNode as _, createCommentVNode as X, normalizeStyle as W } from "vue";
-import { _ as Z } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import tt from "../tooltip/tooltip.js";
-import et from "../input/input.js";
-import it from "../stack/stack.js";
-import ot from "../popover/popover.js";
-import nt from "../button/button.js";
-import rt from "../rich-text-editor/rich-text-editor.js";
-import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as st, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as lt } from "../rich-text-editor/rich-text-editor-constants.js";
-const ut = {
+import { EDITOR_SUPPORTED_LINK_PROTOCOLS as Z, EDITOR_DEFAULT_LINK_PREFIX as tt } from "./editor-constants.js";
+import { addClassStyleAttrs as et, removeClassStyleAttrs as it } from "../../common/utils/index.js";
+import { DtIconSearch as ot, DtIconBraces as y, DtIconImage as x, DtIconLink2 as N, DtIconCodeBlock as v, DtIconQuote as S, DtIconAlignJustify as F, DtIconAlignRight as U, DtIconAlignCenter as V, DtIconAlignLeft as M, DtIconListOrdered as Q, DtIconListBullet as q, DtIconStrikethrough as K, DtIconUnderline as P, DtIconItalic as z, DtIconBold as G, DtIconQuickReply as H } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as nt } from "../../localization/index.js";
+import { resolveComponent as h, openBlock as u, createElementBlock as _, mergeProps as f, createVNode as c, withCtx as r, Fragment as w, renderList as O, createBlock as d, withKeys as L, withModifiers as g, createTextVNode as A, toDisplayString as m, resolveDynamicComponent as b, createElementVNode as E, createCommentVNode as D, normalizeStyle as rt } from "vue";
+import { _ as st } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import lt from "../tooltip/tooltip.js";
+import at from "../input/input.js";
+import ut from "../stack/stack.js";
+import ct from "../popover/popover.js";
+import dt from "../button/button.js";
+import ht from "../rich-text-editor/rich-text-editor.js";
+import pt from "../list-item/list-item.js";
+import Bt from "../dropdown/dropdown-separator.js";
+import ft from "../list-item-group/list-item-group.js";
+import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as gt, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as mt } from "../rich-text-editor/rich-text-editor-constants.js";
+const kt = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeEditor",
   components: {
-    DtRichTextEditor: rt,
-    DtButton: nt,
-    DtPopover: ot,
-    DtStack: it,
-    DtInput: et,
-    DtTooltip: tt,
-    DtIconQuickReply: M,
-    DtIconBold: Q,
-    DtIconItalic: v,
-    DtIconUnderline: F,
-    DtIconStrikethrough: U,
-    DtIconListBullet: S,
-    DtIconListOrdered: N,
-    DtIconAlignLeft: b,
-    DtIconAlignCenter: C,
-    DtIconAlignRight: y,
-    DtIconAlignJustify: x,
-    DtIconQuote: R,
-    DtIconCodeBlock: D,
-    DtIconLink2: O,
-    DtIconImage: w
+    DtListItemGroup: ft,
+    DtDropdownSeparator: Bt,
+    DtListItem: pt,
+    DtRichTextEditor: ht,
+    DtButton: dt,
+    DtPopover: ct,
+    DtStack: ut,
+    DtInput: at,
+    DtTooltip: lt,
+    DtIconQuickReply: H,
+    DtIconBold: G,
+    DtIconItalic: z,
+    DtIconUnderline: P,
+    DtIconStrikethrough: K,
+    DtIconListBullet: q,
+    DtIconListOrdered: Q,
+    DtIconAlignLeft: M,
+    DtIconAlignCenter: V,
+    DtIconAlignRight: U,
+    DtIconAlignJustify: F,
+    DtIconQuote: S,
+    DtIconCodeBlock: v,
+    DtIconLink2: N,
+    DtIconImage: x,
+    DtIconBraces: y,
+    DtIconSearch: ot
   },
   mixins: [],
   inheritAttrs: !1,
@@ -87,7 +95,7 @@ const ut = {
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? lt.includes(t) : !0;
+        return typeof t == "string" ? mt.includes(t) : !0;
       }
     },
     /**
@@ -210,6 +218,20 @@ const ut = {
       type: Boolean,
       default: !1
     },
+    /**
+     * Show button to add a variable
+     */
+    showVariableButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Variable categories to display when variable button is clicked
+     */
+    variableCategories: {
+      type: Array,
+      default: () => []
+    },
     /**
      * Show add link default config.
      */
@@ -288,7 +310,8 @@ const ut = {
       showLinkInput: !1,
       linkInput: "",
       currentButtonRefIndex: 0,
-      i18n: new Y()
+      variableSearchValue: "",
+      i18n: new nt()
     };
   },
   computed: {
@@ -296,7 +319,10 @@ const ut = {
       return this.internalInputValue.length;
     },
     htmlOutputFormat() {
-      return st[2];
+      return gt[2];
+    },
+    flattenedVariableItems() {
+      return this.variableCategories ? this.variableCategories.reduce((t, e) => t.concat(e.items || []), []) : [];
     },
     showingTextFormatButtons() {
       return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;
@@ -309,8 +335,8 @@ const ut = {
     },
     orderedRefs() {
       const t = this.buttonGroups.reduce((function(e, o) {
-        return o.buttonGroup.forEach((n) => {
-          e.push(this.getButtonRef(o.key, n.selector));
+        return o.buttonGroup.forEach((l) => {
+          e.push(this.getButtonRef(o.key, l.selector));
         }, this), e;
       }).bind(this), []);
       return t.push(this.getButtonRef("custom", "link")), t;
@@ -334,7 +360,7 @@ const ut = {
           showBtn: this.showQuickRepliesButton,
           label: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           selector: "quickReplies",
-          icon: M,
+          icon: H,
           dataQA: "dt-recipe-editor-quick-replies-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUICK_REPLY_BUTTON_LABEL"),
           onClick: this.onQuickRepliesClick
@@ -346,7 +372,7 @@ const ut = {
         {
           showBtn: this.showBoldButton,
           selector: "bold",
-          icon: Q,
+          icon: G,
           dataQA: "dt-recipe-editor-bold-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BOLD_BUTTON_LABEL"),
           onClick: this.onBoldTextToggle
@@ -354,7 +380,7 @@ const ut = {
         {
           showBtn: this.showItalicsButton,
           selector: "italic",
-          icon: v,
+          icon: z,
           dataQA: "dt-recipe-editor-italics-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ITALICS_BUTTON_LABEL"),
           onClick: this.onItalicTextToggle
@@ -362,7 +388,7 @@ const ut = {
         {
           showBtn: this.showUnderlineButton,
           selector: "underline",
-          icon: F,
+          icon: P,
           dataQA: "dt-recipe-editor-underline-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_UNDERLINE_BUTTON_LABEL"),
           onClick: this.onUnderlineTextToggle
@@ -370,7 +396,7 @@ const ut = {
         {
           showBtn: this.showStrikeButton,
           selector: "strike",
-          icon: U,
+          icon: K,
           dataQA: "dt-recipe-editor-strike-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_STRIKE_BUTTON_LABEL"),
           onClick: this.onStrikethroughTextToggle
@@ -382,7 +408,7 @@ const ut = {
         {
           showBtn: this.showAlignLeftButton,
           selector: { textAlign: "left" },
-          icon: b,
+          icon: M,
           dataQA: "dt-recipe-editor-align-left-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_LEFT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("left")
@@ -390,7 +416,7 @@ const ut = {
         {
           showBtn: this.showAlignCenterButton,
           selector: { textAlign: "center" },
-          icon: C,
+          icon: V,
           dataQA: "dt-recipe-editor-align-center-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_CENTER_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("center")
@@ -398,7 +424,7 @@ const ut = {
         {
           showBtn: this.showAlignRightButton,
           selector: { textAlign: "right" },
-          icon: y,
+          icon: U,
           dataQA: "dt-recipe-editor-align-right-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_RIGHT_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("right")
@@ -406,7 +432,7 @@ const ut = {
         {
           showBtn: this.showAlignJustifyButton,
           selector: { textAlign: "justify" },
-          icon: x,
+          icon: F,
           dataQA: "dt-recipe-editor-align-justify-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ALIGN_JUSTIFY_BUTTON_LABEL"),
           onClick: () => this.onTextAlign("justify")
@@ -418,7 +444,7 @@ const ut = {
         {
           showBtn: this.showListItemsButton,
           selector: "bulletList",
-          icon: S,
+          icon: q,
           dataQA: "dt-recipe-editor-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_BULLET_LIST_BUTTON_LABEL"),
           onClick: this.onBulletListToggle
@@ -426,7 +452,7 @@ const ut = {
         {
           showBtn: this.showOrderedListButton,
           selector: "orderedList",
-          icon: N,
+          icon: Q,
           dataQA: "dt-recipe-editor-ordered-list-items-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_ORDERED_LIST_BUTTON_LABEL"),
           onClick: this.onOrderedListToggle
@@ -438,7 +464,7 @@ const ut = {
         {
           showBtn: this.showQuoteButton,
           selector: "blockquote",
-          icon: R,
+          icon: S,
           dataQA: "dt-recipe-editor-blockquote-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_QUOTE_BUTTON_LABEL"),
           onClick: this.onBlockquoteToggle
@@ -446,7 +472,7 @@ const ut = {
         {
           showBtn: this.showCodeBlockButton,
           selector: "codeBlock",
-          icon: D,
+          icon: v,
           dataQA: "dt-recipe-editor-code-block-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_CODE_BUTTON_LABEL"),
           onClick: this.onCodeBlockToggle
@@ -454,7 +480,7 @@ const ut = {
         {
           showBtn: this.showInlineImageButton,
           selector: "image",
-          icon: w,
+          icon: x,
           dataQA: "dt-recipe-editor-inline-image-btn",
           tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_IMAGE_BUTTON_LABEL"),
           // Handle getting image
@@ -466,12 +492,21 @@ const ut = {
       return {
         showBtn: this.showAddLink.showAddLinkButton,
         selector: "link",
-        icon: O,
+        icon: N,
         dataQA: "dt-recipe-editor-add-link-btn",
         tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_LINK_BUTTON_LABEL"),
         onClick: this.openLinkInput
       };
     },
+    variableButton() {
+      return {
+        showBtn: this.showVariableButton,
+        selector: "variable",
+        icon: y,
+        dataQA: "dt-recipe-editor-variable-btn",
+        tooltipMessage: this.i18n.$t("DIALTONE_EDITOR_VARIABLE_BUTTON_LABEL")
+      };
+    },
     confirmSetLinkButtonLabels() {
       return this.i18n.$ta("DIALTONE_EDITOR_CONFIRM_SET_LINK_BUTTON");
     },
@@ -483,6 +518,11 @@ const ut = {
     },
     showAddLinkButtonLabels() {
       return this.i18n.$ta("DIALTONE_EDITOR_ADD_LINK_BUTTON");
+    },
+    filteredCategories() {
+      return this.variableCategories.filter(
+        (t) => this.getFilteredItemsForCategory(t).length
+      );
     }
   },
   watch: {
@@ -491,26 +531,26 @@ const ut = {
     }
   },
   methods: {
-    removeClassStyleAttrs: H,
-    addClassStyleAttrs: j,
+    removeClassStyleAttrs: it,
+    addClassStyleAttrs: et,
     onInputFocus(t) {
       t == null || t.stopPropagation();
     },
     removeLink() {
-      var t, e, o, n, r;
-      (r = (n = (o = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : o.focus()) == null ? void 0 : n.unsetLink()) == null || r.run(), this.closeLinkInput();
+      var t, e, o, l, s;
+      (s = (l = (o = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.chain()) == null ? void 0 : o.focus()) == null ? void 0 : l.unsetLink()) == null || s.run(), this.closeLinkInput();
     },
     setLink(t) {
-      var r, i, d;
-      const e = (r = this.$refs.richTextEditor) == null ? void 0 : r.editor;
+      var s, i, p;
+      const e = (s = this.$refs.richTextEditor) == null ? void 0 : s.editor;
       if (t == null || t.preventDefault(), t == null || t.stopPropagation(), !this.linkInput) {
         this.removeLink();
         return;
       }
-      z.find((T) => T.test(this.linkInput)) || (this.linkInput = `${J}${this.linkInput}`);
-      const n = (d = (i = e == null ? void 0 : e.view) == null ? void 0 : i.state) == null ? void 0 : d.selection;
-      n.anchor === n.head ? e.chain().focus().insertContentAt(
-        n.anchor,
+      Z.find((k) => k.test(this.linkInput)) || (this.linkInput = `${tt}${this.linkInput}`);
+      const l = (p = (i = e == null ? void 0 : e.view) == null ? void 0 : i.state) == null ? void 0 : p.selection;
+      l.anchor === l.head ? e.chain().focus().insertContentAt(
+        l.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();
     },
@@ -518,10 +558,10 @@ const ut = {
       this.showLinkInput = !0;
     },
     updateInput(t) {
-      var e, o, n;
+      var e, o, l;
       if (!t)
         return this.closeLinkInput();
-      this.linkInput = (n = (o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : o.getAttributes("link")) == null ? void 0 : n.href;
+      this.linkInput = (l = (o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : o.getAttributes("link")) == null ? void 0 : l.href;
     },
     closeLinkInput() {
       var t;
@@ -544,10 +584,10 @@ const ut = {
       (t = this.$refs.richTextEditor) == null || t.editor.chain().focus().toggleStrike().run();
     },
     onTextAlign(t) {
-      var e, o, n, r;
+      var e, o, l, s;
       if ((o = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) != null && o.isActive({ textAlign: t }))
-        return (n = this.$refs.richTextEditor) == null ? void 0 : n.editor.chain().focus().unsetTextAlign().run();
-      (r = this.$refs.richTextEditor) == null || r.editor.chain().focus().setTextAlign(t).run();
+        return (l = this.$refs.richTextEditor) == null ? void 0 : l.editor.chain().focus().unsetTextAlign().run();
+      (s = this.$refs.richTextEditor) == null || s.editor.chain().focus().setTextAlign(t).run();
     },
     onBulletListToggle() {
       var t;
@@ -567,6 +607,14 @@ const ut = {
     onInsertInlineImageClick() {
       this.$emit("inline-image-click");
     },
+    insertVariable(t, e) {
+      var o;
+      (o = this.$refs.richTextEditor) == null || o.editor.chain().focus().insertVariable({
+        id: e.id,
+        placeholder: e.placeholder || "",
+        altText: ""
+      }).run();
+    },
     insertInlineImage(t) {
       var e;
       (e = this.$refs.richTextEditor) == null || e.editor.chain().focus().setImage({ src: t }).run();
@@ -616,61 +664,67 @@ const ut = {
       this.shiftButtonRefIndex(-1);
     },
     shiftButtonRefIndex(t) {
-      const e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], o = Array.isArray(e) ? e[0] : e, n = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
-      this.currentButtonRefIndex = n >= 0 ? n : this.orderedRefs.length + n;
-      const r = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], i = Array.isArray(r) ? r[0] : r;
+      const e = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], o = Array.isArray(e) ? e[0] : e, l = (this.currentButtonRefIndex + t) % this.orderedRefs.length;
+      this.currentButtonRefIndex = l >= 0 ? l : this.orderedRefs.length + l;
+      const s = this.$refs[this.orderedRefs[this.currentButtonRefIndex]], i = Array.isArray(s) ? s[0] : s;
       o.$el.blur(), i.$el.focus();
+    },
+    getFilteredItemsForCategory(t) {
+      const e = this.variableSearchValue.toLowerCase();
+      return t.name.toLowerCase().includes(e) ? t.items : t.items.filter(
+        (o) => o.name.toLowerCase().includes(e)
+      );
     }
   }
-}, at = { class: "d-recipe-editor__popover-content" };
-function ct(t, e, o, n, r, i) {
-  const d = h("dt-button"), T = h("dt-tooltip"), I = h("dt-stack"), P = h("dt-input"), G = h("dt-popover"), $ = h("dt-rich-text-editor");
-  return c(), A("div", f({ class: "d-recipe-editor" }, i.addClassStyleAttrs(t.$attrs), {
+}, Tt = { class: "d-recipe-editor__popover-content" };
+function It(t, e, o, l, s, i) {
+  const p = h("dt-button"), k = h("dt-tooltip"), T = h("dt-stack"), j = h("dt-icon-search"), C = h("dt-input"), J = h("dt-list-item"), Y = h("dt-dropdown-separator"), X = h("dt-list-item-group"), R = h("dt-popover"), $ = h("dt-rich-text-editor");
+  return u(), _("div", f({ class: "d-recipe-editor" }, i.addClassStyleAttrs(t.$attrs), {
     "data-qa": "dt-recipe-editor",
     role: "presentation",
-    onClick: e[4] || (e[4] = (s) => t.$refs.richTextEditor.focusEditor())
+    onClick: e[5] || (e[5] = (a) => t.$refs.richTextEditor.focusEditor())
   }), [
-    a(I, {
+    c(T, {
       class: "d-recipe-editor__top-bar",
       direction: "row",
       gap: "450"
     }, {
-      default: u(() => [
-        (c(!0), A(q, null, V(i.buttonGroups, (s) => (c(), B(I, {
-          key: s.key,
+      default: r(() => [
+        (u(!0), _(w, null, O(i.buttonGroups, (a) => (u(), d(T, {
+          key: a.key,
           direction: "row",
           gap: "300"
         }, {
-          default: u(() => [
-            (c(!0), A(q, null, V(s.buttonGroup, (l) => (c(), B(T, {
-              key: i.getButtonKey(s.key, l.selector),
-              message: l.tooltipMessage,
+          default: r(() => [
+            (u(!0), _(w, null, O(a.buttonGroup, (n) => (u(), d(k, {
+              key: i.getButtonKey(a.key, n.selector),
+              message: n.tooltipMessage,
               placement: "top"
             }, {
-              anchor: u(() => {
-                var m, E;
+              anchor: r(() => {
+                var I, B;
                 return [
-                  a(d, {
+                  c(p, {
                     ref_for: !0,
-                    ref: i.getButtonRef(s.key, l.selector),
-                    active: (E = (m = t.$refs.richTextEditor) == null ? void 0 : m.editor) == null ? void 0 : E.isActive(l.selector),
-                    "aria-label": l.tooltipMessage,
-                    "data-qa": l.dataQA,
-                    tabindex: i.canFocus(i.getButtonRef(s.key, l.selector)) ? 0 : -1,
+                    ref: i.getButtonRef(a.key, n.selector),
+                    active: (B = (I = t.$refs.richTextEditor) == null ? void 0 : I.editor) == null ? void 0 : B.isActive(n.selector),
+                    "aria-label": n.tooltipMessage,
+                    "data-qa": n.dataQA,
+                    tabindex: i.canFocus(i.getButtonRef(a.key, n.selector)) ? 0 : -1,
                     importance: "clear",
                     kind: "muted",
                     size: "xs",
-                    onClick: (dt) => l.onClick(),
+                    onClick: (W) => n.onClick(),
                     onKeydown: [
-                      g(p(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                      g(p(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                      L(g(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                      L(g(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                     ]
                   }, {
-                    icon: u(() => [
-                      (c(), B(K(l.icon), { size: "200" }))
+                    icon: r(() => [
+                      (u(), d(b(n.icon), { size: "200" }))
                     ]),
-                    default: u(() => [
-                      L(" " + k(l == null ? void 0 : l.label), 1)
+                    default: r(() => [
+                      A(" " + m(n == null ? void 0 : n.label), 1)
                     ]),
                     _: 2
                   }, 1032, ["active", "aria-label", "data-qa", "tabindex", "onClick", "onKeydown"])
@@ -678,54 +732,134 @@ function ct(t, e, o, n, r, i) {
               }),
               _: 2
             }, 1032, ["message"]))), 128)),
-            e[5] || (e[5] = _("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
+            e[6] || (e[6] = E("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
           ]),
           _: 2
         }, 1024))), 128)),
-        i.linkButton.showBtn ? (c(), B(I, {
+        i.variableButton.showBtn ? (u(), d(T, {
           key: 0,
           direction: "row",
           gap: "300"
         }, {
-          default: u(() => [
-            a(G, {
-              open: r.showLinkInput,
+          default: r(() => [
+            c(R, {
+              padding: "small",
+              "navigation-type": "arrow-keys",
+              modal: !1,
+              placement: "bottom-start"
+            }, {
+              anchor: r(({ attrs: a }) => [
+                c(k, {
+                  message: i.variableButton.tooltipMessage,
+                  placement: "top"
+                }, {
+                  anchor: r(() => [
+                    c(p, f(a, {
+                      kind: "muted",
+                      size: "xs",
+                      importance: "clear",
+                      "aria-label": i.variableButton.tooltipMessage,
+                      "data-qa": i.variableButton.dataQA,
+                      "label-class": "d-jc-flex-start"
+                    }), {
+                      icon: r(() => [
+                        (u(), d(b(i.variableButton.icon), { size: "200" }))
+                      ]),
+                      _: 1
+                    }, 16, ["aria-label", "data-qa"])
+                  ]),
+                  _: 2
+                }, 1032, ["message"])
+              ]),
+              content: r(({ close: a }) => [
+                c(C, {
+                  modelValue: s.variableSearchValue,
+                  "onUpdate:modelValue": e[0] || (e[0] = (n) => s.variableSearchValue = n),
+                  "root-class": "d-p8 d-pb4 d-w264",
+                  type: "search",
+                  placeholder: s.i18n.$t("DIALTONE_EDITOR_VARIABLE_POPOVER_SEARCH_PLACEHOLDER"),
+                  size: "md",
+                  role: "menuitem"
+                }, {
+                  leftIcon: r(({ iconSize: n }) => [
+                    c(j, { size: n }, null, 8, ["size"])
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "placeholder"]),
+                (u(!0), _(w, null, O(i.filteredCategories, (n, I) => (u(), d(X, {
+                  key: n.name,
+                  heading: n.name,
+                  "heading-class": "d-headline--sm-compact d-p8"
+                }, {
+                  default: r(() => [
+                    (u(!0), _(w, null, O(i.getFilteredItemsForCategory(n), (B) => (u(), d(J, {
+                      key: n.name + B.name,
+                      role: "menuitem",
+                      "navigation-type": "arrow-keys",
+                      onClick: (W) => {
+                        i.insertVariable(n.name, B), a();
+                      }
+                    }, {
+                      default: r(() => [
+                        A(m(B.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"]))), 128)),
+                    I < i.filteredCategories.length - 1 ? (u(), d(Y, { key: 0 })) : D("", !0)
+                  ]),
+                  _: 2
+                }, 1032, ["heading"]))), 128))
+              ]),
+              _: 1
+            }),
+            e[7] || (e[7] = E("div", { class: "d-recipe-editor__button-group-divider" }, null, -1))
+          ]),
+          _: 1
+        })) : D("", !0),
+        i.linkButton.showBtn ? (u(), d(T, {
+          key: 1,
+          direction: "row",
+          gap: "300"
+        }, {
+          default: r(() => [
+            c(R, {
+              open: s.showLinkInput,
               "show-close-button": !1,
               "data-qa": "dt-recipe-editor-link-input-popover",
               padding: "none",
               placement: "bottom-start",
               onClick: [
                 i.onInputFocus,
-                p(i.onInputFocus, ["stop"])
+                g(i.onInputFocus, ["stop"])
               ],
               onOpened: i.updateInput
             }, {
-              anchor: u(() => [
-                (c(), B(T, {
+              anchor: r(() => [
+                (u(), d(k, {
                   key: i.linkButton.key,
                   message: i.linkButton.tooltipMessage,
                   placement: "top"
                 }, {
-                  anchor: u(() => {
-                    var s, l;
+                  anchor: r(() => {
+                    var a, n;
                     return [
-                      a(d, {
+                      c(p, {
                         ref: i.getButtonRef("custom", "link"),
-                        active: (l = (s = t.$refs.richTextEditor) == null ? void 0 : s.editor) == null ? void 0 : l.isActive(i.linkButton.selector),
+                        active: (n = (a = t.$refs.richTextEditor) == null ? void 0 : a.editor) == null ? void 0 : n.isActive(i.linkButton.selector),
                         "aria-label": i.linkButton.tooltipMessage,
                         "data-qa": i.linkButton.dataQA,
                         tabindex: i.canFocus(i.getButtonRef("custom", "link")) ? 0 : -1,
                         importance: "clear",
                         kind: "muted",
                         size: "xs",
-                        onClick: e[0] || (e[0] = (m) => i.linkButton.onClick()),
+                        onClick: e[1] || (e[1] = (I) => i.linkButton.onClick()),
                         onKeydown: [
-                          g(p(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
-                          g(p(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
+                          L(g(i.shiftActionBarFocusRight, ["stop"]), ["right"]),
+                          L(g(i.shiftActionBarFocusLeft, ["stop"]), ["left"])
                         ]
                       }, {
-                        icon: u(() => [
-                          (c(), B(K(i.linkButton.icon), { size: "200" }))
+                        icon: r(() => [
+                          (u(), d(b(i.linkButton.icon), { size: "200" }))
                         ]),
                         _: 1
                       }, 8, ["active", "aria-label", "data-qa", "tabindex", "onKeydown"])
@@ -734,60 +868,60 @@ function ct(t, e, o, n, r, i) {
                   _: 1
                 }, 8, ["message"]))
               ]),
-              content: u(() => [
-                _("div", at, [
-                  _("span", null, k(i.showAddLinkButtonLabels.title), 1),
-                  a(P, {
-                    modelValue: r.linkInput,
-                    "onUpdate:modelValue": e[1] || (e[1] = (s) => r.linkInput = s),
+              content: r(() => [
+                E("div", Tt, [
+                  E("span", null, m(i.showAddLinkButtonLabels.title), 1),
+                  c(C, {
+                    modelValue: s.linkInput,
+                    "onUpdate:modelValue": e[2] || (e[2] = (a) => s.linkInput = a),
                     "input-aria-label": i.showAddLinkButtonLabels["aria-label"],
                     placeholder: o.setLinkPlaceholder,
                     "data-qa": "dt-recipe-editor-link-input",
                     "input-wrapper-class": "d-recipe-editor-link__input-wrapper",
                     onClick: [
                       i.onInputFocus,
-                      p(i.onInputFocus, ["stop"])
+                      g(i.onInputFocus, ["stop"])
                     ],
                     onFocus: i.onInputFocus,
-                    onKeydown: g(i.setLink, ["enter"])
+                    onKeydown: L(i.setLink, ["enter"])
                   }, null, 8, ["modelValue", "input-aria-label", "placeholder", "onClick", "onFocus", "onKeydown"])
                 ])
               ]),
-              footerContent: u(() => [
-                a(I, {
+              footerContent: r(() => [
+                c(T, {
                   direction: "row",
                   gap: "300",
                   class: "d-recipe-editor__popover-footer"
                 }, {
-                  default: u(() => [
-                    a(d, f({
+                  default: r(() => [
+                    c(p, f({
                       "data-qa": "dt-recipe-editor-remove-link-btn",
                       importance: "clear",
                       kind: "muted",
                       size: "sm"
                     }, i.removeLinkButtonLabels, { onClick: i.removeLink }), {
-                      default: u(() => [
-                        L(k(i.removeLinkButtonLabels.title), 1)
+                      default: r(() => [
+                        A(m(i.removeLinkButtonLabels.title), 1)
                       ]),
                       _: 1
                     }, 16, ["onClick"]),
-                    a(d, f({
+                    c(p, f({
                       "data-qa": "dt-recipe-editor-set-link-cancel-btn",
                       importance: "clear",
                       kind: "muted",
                       size: "sm"
                     }, i.cancelSetLinkButtonLabels, { onClick: i.closeLinkInput }), {
-                      default: u(() => [
-                        L(k(i.cancelSetLinkButtonLabels.title), 1)
+                      default: r(() => [
+                        A(m(i.cancelSetLinkButtonLabels.title), 1)
                       ]),
                       _: 1
                     }, 16, ["onClick"]),
-                    a(d, f({
+                    c(p, f({
                       "data-qa": "dt-recipe-editor-set-link-confirm-btn",
                       size: "sm"
                     }, i.confirmSetLinkButtonLabels, { onClick: i.setLink }), {
-                      default: u(() => [
-                        L(k(i.confirmSetLinkButtonLabels.title), 1)
+                      default: r(() => [
+                        A(m(i.confirmSetLinkButtonLabels.title), 1)
                       ]),
                       _: 1
                     }, 16, ["onClick"])
@@ -799,22 +933,24 @@ function ct(t, e, o, n, r, i) {
             }, 8, ["open", "onClick", "onOpened"])
           ]),
           _: 1
-        })) : X("", !0)
+        })) : D("", !0)
       ]),
       _: 1
     }),
-    _("div", {
-      style: W({ "max-height": o.maxHeight }),
+    E("div", {
+      style: rt({ "max-height": o.maxHeight }),
       class: "d-recipe-editor__content"
     }, [
-      a($, f({
+      c($, f({
         ref: "richTextEditor",
-        modelValue: r.internalInputValue,
-        "onUpdate:modelValue": e[2] || (e[2] = (s) => r.internalInputValue = s),
+        modelValue: s.internalInputValue,
+        "onUpdate:modelValue": e[3] || (e[3] = (a) => s.internalInputValue = a),
         "allow-font-color": !0,
         "allow-font-family": !0,
         "allow-inline-images": !0,
         "allow-line-breaks": !0,
+        "allow-variable": !0,
+        "variable-items": i.flattenedVariableItems,
         "hide-link-bubble-menu": !0,
         "auto-focus": o.autoFocus,
         editable: o.editable,
@@ -830,13 +966,13 @@ function ct(t, e, o, n, r, i) {
         onTextInput: i.onTextInput,
         onBlur: i.onBlur,
         onFocus: i.onFocus,
-        onInput: e[3] || (e[3] = (s) => i.onInput(s))
-      }), null, 16, ["modelValue", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "onTextInput", "onBlur", "onFocus"])
+        onInput: e[4] || (e[4] = (a) => i.onInput(a))
+      }), null, 16, ["modelValue", "variable-items", "auto-focus", "editable", "input-aria-label", "input-class", "output-format", "placeholder", "use-div-tags", "allow-tables", "onTextInput", "onBlur", "onFocus"])
     ], 4)
   ], 16);
 }
-const wt = /* @__PURE__ */ Z(ut, [["render", ct]]);
+const Ut = /* @__PURE__ */ st(kt, [["render", It]]);
 export {
-  wt as default
+  Ut as default
 };
 //# sourceMappingURL=editor.js.map