@dialpad/dialtone 9.158.0 → 9.160.0

package/dist/vue3/lib/rich-text-editor/rich-text-editor.js

@@ -1,67 +1,70 @@
-import { nodeViewProps as $, NodeViewWrapper as v, VueRenderer as R, VueNodeViewRenderer as I, BubbleMenu as Q, EditorContent as Z, Editor as ee } from "../../node_modules/@tiptap/vue-3.js";
-import { Node as te, nodePasteRule as A, InputRule as ne, mergeAttributes as b, getMarksBetween as oe, combineTransactionSteps as re, getChangedRanges as se, findChildrenInRange as ie, Mark as ae, nodeInputRule as ce, Extension as le } from "@tiptap/core";
-import de from "@tiptap/extension-blockquote";
-import ue from "@tiptap/extension-code-block";
-import me from "@tiptap/extension-code";
-import he from "@tiptap/extension-document";
-import pe from "@tiptap/extension-gapcursor";
-import fe from "@tiptap/extension-hard-break";
-import W from "@tiptap/extension-paragraph";
-import ge from "@tiptap/extension-placeholder";
-import _e from "@tiptap/extension-bold";
-import ke from "@tiptap/extension-bullet-list";
-import ye from "@tiptap/extension-italic";
-import we from "@tiptap/extension-link";
+import { nodeViewProps as L, NodeViewWrapper as v, VueRenderer as R, VueNodeViewRenderer as S, BubbleMenu as ne, EditorContent as oe, Editor as re } from "../../node_modules/@tiptap/vue-3.js";
+import { Node as W, nodePasteRule as O, InputRule as se, mergeAttributes as T, getMarksBetween as ie, combineTransactionSteps as ae, getChangedRanges as ce, findChildrenInRange as le, Mark as de, nodeInputRule as ue, Extension as me } from "@tiptap/core";
+import he from "@tiptap/extension-blockquote";
+import pe from "@tiptap/extension-code-block";
+import fe from "@tiptap/extension-code";
+import ge from "@tiptap/extension-document";
+import _e from "@tiptap/extension-gapcursor";
+import ke from "@tiptap/extension-hard-break";
+import z from "@tiptap/extension-paragraph";
+import ye from "@tiptap/extension-placeholder";
+import be from "@tiptap/extension-bold";
+import we from "@tiptap/extension-bullet-list";
+import Te from "@tiptap/extension-italic";
+import xe from "@tiptap/extension-link";
 import Ce from "@tiptap/extension-list-item";
-import be from "@tiptap/extension-ordered-list";
-import xe from "@tiptap/extension-strike";
-import Te from "@tiptap/extension-underline";
-import Ee from "@tiptap/extension-text";
-import Se from "@tiptap/extension-text-align";
-import Le from "@tiptap/extension-history";
-import $e from "@tiptap/extension-table";
-import ve from "@tiptap/extension-table-cell";
-import Re from "@tiptap/extension-table-header";
-import Ie from "@tiptap/extension-table-row";
-import Me from "@tiptap/extension-text-style";
-import Be from "@tiptap/extension-color";
-import Ne from "@tiptap/extension-font-family";
-import { PluginKey as T, Plugin as Oe } from "@tiptap/pm/state";
-import De from "@tiptap/suggestion";
-import { emojiPattern as z } from "regex-combined-emojis";
-import { resolveComponent as d, openBlock as l, createBlock as m, withCtx as u, createVNode as f, createElementBlock as _, withDirectives as Ae, createElementVNode as k, Fragment as Pe, renderList as je, withModifiers as j, normalizeClass as X, resolveDynamicComponent as He, vShow as Ke, createTextVNode as C, toDisplayString as h, markRaw as M, createCommentVNode as w, mergeProps as Fe } from "vue";
+import Ee from "@tiptap/extension-ordered-list";
+import Le from "@tiptap/extension-strike";
+import ve from "@tiptap/extension-underline";
+import Se from "@tiptap/extension-text";
+import $e from "@tiptap/extension-text-align";
+import Ie from "@tiptap/extension-history";
+import Ae from "@tiptap/extension-table";
+import Re from "@tiptap/extension-table-cell";
+import Me from "@tiptap/extension-table-header";
+import Be from "@tiptap/extension-table-row";
+import Ne from "@tiptap/extension-text-style";
+import De from "@tiptap/extension-color";
+import Oe from "@tiptap/extension-font-family";
+import { PluginKey as $, Plugin as He } from "@tiptap/pm/state";
+import Pe from "@tiptap/suggestion";
+import { emojiPattern as X } from "regex-combined-emojis";
+import { resolveComponent as l, openBlock as d, createBlock as p, withCtx as u, createVNode as m, createElementBlock as y, withDirectives as je, createElementVNode as b, Fragment as Ve, renderList as Ke, withModifiers as P, normalizeClass as G, resolveDynamicComponent as Fe, vShow as Ue, createTextVNode as C, toDisplayString as f, markRaw as M, createCommentVNode as w, withKeys as qe, mergeProps as J } from "vue";
 import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import J from "../emoji/emoji.js";
-import { getEmojiData as Ve, emojiRegex as qe, stringToUnicode as Ue, codeToEmojiData as H, emojiShortCodeRegex as We } from "../../common/emoji/index.js";
-import ze from "../list-item/list-item.js";
-import E from "../stack/stack.js";
+import Y from "../emoji/emoji.js";
+import { getEmojiData as We, emojiRegex as ze, stringToUnicode as Xe, codeToEmojiData as j, emojiShortCodeRegex as Ge } from "../../common/emoji/index.js";
+import Je from "../list-item/list-item.js";
+import I from "../stack/stack.js";
 import B from "tippy.js";
-import { linkRegex as Xe, getPhoneNumberRegex as Je, warnIfUnmounted as Ge, returnFirstEl as F } from "../../common/utils/index.js";
-import Ye from "@tiptap/extension-image";
-import K from "@tiptap/extension-mention";
-import G from "../link/link.js";
-import { DtIconLock as Qe } from "@dialpad/dialtone-icons/vue3";
-import { RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as V, RICH_TEXT_EDITOR_OUTPUT_FORMATS as Ze, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as et } from "./rich-text-editor-constants.js";
-import tt from "../avatar/avatar.js";
-import nt from "@dialpad/dialtone-icons/vue3/hash";
-import ot from "@dialpad/dialtone-icons/vue3/lock";
-import rt from "deep-equal";
-import { DialtoneLocalization as st } from "../../localization/index.js";
-import it from "../button/button.js";
-const at = {
+import { linkRegex as Ye, getPhoneNumberRegex as Qe, warnIfUnmounted as Ze, returnFirstEl as K } from "../../common/utils/index.js";
+import et from "@tiptap/extension-image";
+import V from "@tiptap/extension-mention";
+import Q from "../link/link.js";
+import { DtIconLock as tt } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as Z } from "../../localization/index.js";
+import nt from "../input/input.js";
+import ot from "../popover/popover.js";
+import ee from "../button/button.js";
+import rt from "../badge/badge.js";
+import { RICH_TEXT_EDITOR_SUPPORTED_LINK_PROTOCOLS as F, RICH_TEXT_EDITOR_OUTPUT_FORMATS as st, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as it } from "./rich-text-editor-constants.js";
+import at from "../avatar/avatar.js";
+import ct from "@dialpad/dialtone-icons/vue3/hash";
+import lt from "@dialpad/dialtone-icons/vue3/lock";
+import dt from "deep-equal";
+const ut = {
   compatConfig: { MODE: 3 },
   name: "EmojiComponent",
   components: {
     NodeViewWrapper: v,
-    DtEmoji: J
+    DtEmoji: Y
   },
-  props: $
+  props: L
 };
-function ct(e, t, o, n, r, s) {
-  const i = d("dt-emoji"), a = d("node-view-wrapper");
-  return l(), m(a, { class: "d-d-inline-block d-va-bottom d-lh0" }, {
+function mt(e, t, o, n, r, s) {
+  const i = l("dt-emoji"), a = l("node-view-wrapper");
+  return d(), p(a, { class: "d-d-inline-block d-va-bottom d-lh0" }, {
     default: u(() => [
-      f(i, {
+      m(i, {
         size: "500",
         code: e.node.attrs.code
       }, null, 8, ["code"])
@@ -69,11 +72,11 @@ function ct(e, t, o, n, r, s) {
     _: 1
   });
 }
-const lt = /* @__PURE__ */ g(at, [["render", ct]]), dt = {
+const ht = /* @__PURE__ */ g(ut, [["render", mt]]), pt = {
   compatConfig: { MODE: 3 },
   name: "SuggestionList",
   components: {
-    DtListItem: ze
+    DtListItem: Je
   },
   props: {
     items: {
@@ -142,40 +145,40 @@ const lt = /* @__PURE__ */ g(at, [["render", ct]]), dt = {
       }
     }
   }
-}, ut = { class: "d-popover__dialog d-suggestion-list__container" }, mt = {
+}, ft = { class: "d-popover__dialog d-suggestion-list__container" }, gt = {
   ref: "suggestionList",
   class: "d-suggestion-list"
 };
-function ht(e, t, o, n, r, s) {
-  const i = d("dt-list-item");
-  return l(), _("div", ut, [
-    Ae(k("ul", mt, [
-      (l(!0), _(Pe, null, je(o.items, (a, c) => (l(), m(i, {
+function _t(e, t, o, n, r, s) {
+  const i = l("dt-list-item");
+  return d(), y("div", ft, [
+    je(b("ul", gt, [
+      (d(!0), y(Ve, null, Ke(o.items, (a, c) => (d(), p(i, {
         key: a.id,
-        class: X([
+        class: G([
           "d-suggestion-list__item",
           { "d-list-item--highlighted": c === r.selectedIndex }
         ]),
         "navigation-type": "arrow-keys",
-        onClick: (p) => s.selectItem(c),
-        onKeydown: j(s.onKeyDown, ["prevent"])
+        onClick: (h) => s.selectItem(c),
+        onKeydown: P(s.onKeyDown, ["prevent"])
       }, {
         default: u(() => [
-          (l(), m(He(o.itemComponent), { item: a }, null, 8, ["item"]))
+          (d(), p(Fe(o.itemComponent), { item: a }, null, 8, ["item"]))
         ]),
         _: 2
       }, 1032, ["class", "onClick", "onKeydown"]))), 128))
     ], 512), [
-      [Ke, o.items.length]
+      [Ue, o.items.length]
     ])
   ]);
 }
-const N = /* @__PURE__ */ g(dt, [["render", ht]]), pt = {
+const N = /* @__PURE__ */ g(pt, [["render", _t]]), kt = {
   compatConfig: { MODE: 3 },
   name: "EmojiSuggestion",
   components: {
-    DtEmoji: J,
-    DtStack: E
+    DtEmoji: Y,
+    DtStack: I
   },
   props: {
     item: {
@@ -184,23 +187,23 @@ const N = /* @__PURE__ */ g(dt, [["render", ht]]), pt = {
     }
   }
 };
-function ft(e, t, o, n, r, s) {
-  const i = d("dt-emoji"), a = d("dt-stack");
-  return l(), m(a, {
+function yt(e, t, o, n, r, s) {
+  const i = l("dt-emoji"), a = l("dt-stack");
+  return d(), p(a, {
     direction: "row",
     gap: "400"
   }, {
     default: u(() => [
-      f(i, {
+      m(i, {
         size: "200",
         code: o.item.code
       }, null, 8, ["code"]),
-      C(" " + h(o.item.code), 1)
+      C(" " + f(o.item.code), 1)
     ]),
     _: 1
   });
 }
-const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
+const bt = /* @__PURE__ */ g(kt, [["render", yt]]), D = {
   name: "hideOnEsc",
   defaultValue: !0,
   fn({ hide: e }) {
@@ -216,15 +219,15 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
       }
     };
   }
-}, _t = 20, kt = (e, t, o) => {
+}, wt = 20, Tt = (e, t, o) => {
   var a, c;
   const n = (a = e.shortname) == null ? void 0 : a.replaceAll(":", ""), r = (c = t.shortname) == null ? void 0 : c.replaceAll(":", ""), s = n.startsWith(o), i = r.startsWith(o);
   return s && !i ? -1 : !s && i ? 1 : n.localeCompare(r);
-}, yt = {
+}, xt = {
   items: ({ query: e }) => {
     if (e.length < 2)
       return [];
-    const t = Object.values(Ve());
+    const t = Object.values(We());
     return e = e.toLowerCase(), t.filter(
       (n) => {
         var r;
@@ -234,7 +237,7 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
           ...n.keywords || []
         ].some((s) => s && s.startsWith(e));
       }
-    ).splice(0, _t).sort((n, r) => kt(n, r, e)).map((n) => ({ code: n.shortname }));
+    ).splice(0, wt).sort((n, r) => Tt(n, r, e)).map((n) => ({ code: n.shortname }));
   },
   command: ({ editor: e, range: t, props: o }) => {
     var s, i;
@@ -252,7 +255,7 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
       onStart: (n) => {
         e = new R(N, {
           props: {
-            itemComponent: M(gt),
+            itemComponent: M(bt),
             itemType: "emoji",
             ...n
           },
@@ -272,7 +275,7 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
           trigger: "manual",
           placement: "top-start",
           zIndex: 650,
-          plugins: [O]
+          plugins: [D]
         }), n.items.length > 0 && (t == null || t[0].show()));
       },
       onUpdate(n) {
@@ -290,14 +293,14 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
       }
     };
   }
-}, wt = /(:\w+:)$/, Ct = new RegExp(z + "$"), bt = (e) => {
-  if (e && H(e[0]))
+}, Ct = /(:\w+:)$/, Et = new RegExp(X + "$"), Lt = (e) => {
+  if (e && j(e[0]))
     return { text: e[2] || e[0] };
-}, xt = (e) => [...e.matchAll(We)].filter((o) => H(o[0])).map((o) => ({
+}, vt = (e) => [...e.matchAll(Ge)].filter((o) => j(o[0])).map((o) => ({
   index: o.index,
   text: o[0],
   match: o
-})), Tt = te.create({
+})), St = W.create({
   name: "emoji",
   addOptions() {
     return {
@@ -309,7 +312,7 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
   selectable: !1,
   atom: !0,
   addNodeView() {
-    return I(lt);
+    return S(ht);
   },
   addAttributes() {
     return {
@@ -326,18 +329,18 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
     ];
   },
   renderText({ node: e }) {
-    return Ue(H(e.attrs.code).unicode_output);
+    return Xe(j(e.attrs.code).unicode_output);
   },
   renderHTML({ HTMLAttributes: e }) {
-    return ["emoji-component", b(this.options.HTMLAttributes, e)];
+    return ["emoji-component", T(this.options.HTMLAttributes, e)];
   },
   addInputRules() {
     return [
-      new ne({
+      new se({
         find: (e) => {
-          const t = e.match(wt) || e.match(Ct);
+          const t = e.match(Ct) || e.match(Et);
           if (t)
-            return bt(t);
+            return Lt(t);
         },
         handler: ({ state: e, range: t, match: o }) => {
           const { tr: n } = e, r = t.from, s = t.to;
@@ -348,8 +351,8 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
   },
   addPasteRules() {
     return [
-      A({
-        find: xt,
+      O({
+        find: vt,
         type: this.type,
         getAttributes(e) {
           return {
@@ -357,8 +360,8 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
           };
         }
       }),
-      A({
-        find: qe,
+      O({
+        find: ze,
         type: this.type,
         getAttributes(e) {
           return {
@@ -370,12 +373,12 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
   },
   addProseMirrorPlugins() {
     return [
-      De({
+      Pe({
         char: ":",
-        pluginKey: new T("emoji"),
+        pluginKey: new $("emoji"),
         editor: this.editor,
         ...this.options.suggestion,
-        ...yt
+        ...xt
       })
     ];
   },
@@ -392,7 +395,7 @@ const gt = /* @__PURE__ */ g(pt, [["render", ft]]), O = {
     };
   }
 });
-function Et(e, t, o = () => !0) {
+function $t(e, t, o = () => !0) {
   const n = [];
   t.lastIndex = 0;
   let r;
@@ -400,10 +403,10 @@ function Et(e, t, o = () => !0) {
     o(e, r) && n.push(r);
   return n;
 }
-function St(e, t) {
+function It(e, t) {
   return !["#", "@"].includes(e.charAt(t.index)) && !["#", "@"].includes(e.charAt(t.index - 1));
 }
-function Lt(e) {
+function At(e) {
   const t = new RegExp(
     "(?:" + [
       `[!?.,:;'"]`,
@@ -413,7 +416,7 @@ function Lt(e) {
   );
   return e.replace(t, "");
 }
-function $t(e, t) {
+function Rt(e, t) {
   const o = e.slice(0, t + 1).search(/\S+\s*$/), n = e.slice(t).search(/\s/);
   if (n < 0) {
     const r = e.slice(o);
@@ -429,65 +432,65 @@ function $t(e, t) {
     to: n + t
   };
 }
-function P(e, t, o, n) {
-  const r = $t(e, t);
+function H(e, t, o, n) {
+  const r = Rt(e, t);
   if (n.lastIndex = 0, !n.test(r.text))
     return r;
   const s = o === "left" ? r.from - 1 : r.to + 1;
-  return s <= 0 || s >= e.length || s === t ? r : P(e, s, o, n);
+  return s <= 0 || s >= e.length || s === t ? r : H(e, s, o, n);
 }
-function vt(e, t, o, n) {
-  const r = Math.max(e.from - 1, 0), s = Math.min(e.to + 1, t.content.size), i = oe(r, s, t);
+function Mt(e, t, o, n) {
+  const r = Math.max(e.from - 1, 0), s = Math.min(e.to + 1, t.content.size), i = ie(r, s, t);
   for (const a of i)
     a.mark.type === n && o.removeMark(a.from, a.to, n);
 }
-const q = Je(1, 15);
-function U(e, t, o, n, r, s) {
+const U = Qe(1, 15);
+function q(e, t, o, n, r, s) {
   if (!e)
     return;
   let i = o - t - 1;
   i = i < 0 ? 0 : i;
-  const a = n - t, c = P(
+  const a = n - t, c = H(
     e,
     i,
     "left",
-    q
-  ), p = P(
+    U
+  ), h = H(
     e,
     a,
     "right",
-    q
-  ), y = e.slice(c.from, p.to);
-  Et(y, Xe, St).forEach((D) => {
-    const x = Lt(D[0]), L = t + c.from + D.index + 1, Y = L + x.length;
-    r.addMark(L, Y, s.create());
+    U
+  ), _ = e.slice(c.from, h.to);
+  $t(_, Ye, It).forEach((x) => {
+    const E = At(x[0]), A = t + c.from + x.index + 1, te = A + E.length;
+    r.addMark(A, te, s.create());
   });
 }
-function Rt(e) {
+function Bt(e) {
   let t = !1;
-  return new Oe({
-    key: new T("autolink"),
+  return new He({
+    key: new $("autolink"),
     appendTransaction: (o, n, r) => {
-      const s = o.some((y) => y.docChanged) && !n.doc.eq(r.doc);
+      const s = o.some((_) => _.docChanged) && !n.doc.eq(r.doc);
       if (t && !s)
         return;
       const { tr: i } = r, { textContent: a } = r.doc;
-      t || U(a, 0, 0, a.length, i, e.type), t = !0;
-      const c = re(
+      t || q(a, 0, 0, a.length, i, e.type), t = !0;
+      const c = ae(
         n.doc,
         [...o]
       );
-      return se(c).forEach(({ oldRange: y, newRange: S }) => {
-        vt(S, r.doc, i, e.type), ie(
+      return ce(c).forEach(({ oldRange: _, newRange: k }) => {
+        Mt(k, r.doc, i, e.type), le(
           r.doc,
-          S,
-          (x) => x.isTextblock
-        ).forEach(({ node: x, pos: L }) => {
-          U(
-            x.textContent,
-            L,
-            y.from,
-            S.to,
+          k,
+          (E) => E.isTextblock
+        ).forEach(({ node: E, pos: A }) => {
+          q(
+            E.textContent,
+            A,
+            _.from,
+            k.to,
             i,
             e.type
           );
@@ -496,18 +499,18 @@ function Rt(e) {
     }
   });
 }
-const It = {
+const Nt = {
   class: "d-link d-c-text d-d-inline-block d-wb-break-all",
   rel: "noopener noreferrer nofollow"
-}, Mt = ae.create({
+}, Dt = de.create({
   name: "CustomLink",
   renderHTML({ HTMLAttributes: e }) {
     return [
       "a",
-      b(
+      T(
         this.options.HTMLAttributes,
         e,
-        It
+        Nt
       )
     ];
   },
@@ -516,10 +519,10 @@ const It = {
   },
   addProseMirrorPlugins() {
     return [
-      Rt({ type: this.type })
+      Bt({ type: this.type })
     ];
   }
-}), Bt = Ye.extend({
+}), Ot = et.extend({
   name: "ConfigurableImage",
   addAttributes() {
     return {
@@ -543,21 +546,21 @@ const It = {
       }
     };
   }
-}).configure({ inline: !0, allowBase64: !0 }), Nt = W.extend({
+}).configure({ inline: !0, allowBase64: !0 }), Ht = z.extend({
   parseHTML() {
     return [{ tag: "div" }];
   },
   renderHTML({ HTMLAttributes: e }) {
-    return ["div", b(this.options.HTMLAttributes, e), 0];
+    return ["div", T(this.options.HTMLAttributes, e), 0];
   }
-}), Ot = {
+}), Pt = {
   compatConfig: { MODE: 3 },
   name: "MentionComponent",
   components: {
     NodeViewWrapper: v,
-    DtLink: G
+    DtLink: Q
   },
-  props: $,
+  props: L,
   computed: {
     text() {
       return "@" + this.$props.node.attrs.name;
@@ -575,16 +578,16 @@ const It = {
     }
   }
 };
-function Dt(e, t, o, n, r, s) {
-  const i = d("dt-link"), a = d("node-view-wrapper");
-  return l(), m(a, { class: "d-d-inline-block" }, {
+function jt(e, t, o, n, r, s) {
+  const i = l("dt-link"), a = l("node-view-wrapper");
+  return d(), p(a, { class: "d-d-inline-block" }, {
     default: u(() => [
-      f(i, {
+      m(i, {
         kind: "mention",
-        onClick: j(s.handleClick, ["prevent"])
+        onClick: P(s.handleClick, ["prevent"])
       }, {
         default: u(() => [
-          C(h(s.text), 1)
+          C(f(s.text), 1)
         ]),
         _: 1
       }, 8, ["onClick"])
@@ -592,9 +595,9 @@ function Dt(e, t, o, n, r, s) {
     _: 1
   });
 }
-const At = /* @__PURE__ */ g(Ot, [["render", Dt]]), Pt = K.extend({
+const Vt = /* @__PURE__ */ g(Pt, [["render", jt]]), Kt = V.extend({
   addNodeView() {
-    return I(At);
+    return S(Vt);
   },
   parseHTML() {
     return [
@@ -623,23 +626,23 @@ const At = /* @__PURE__ */ g(Ot, [["render", Dt]]), Pt = K.extend({
     return `@${e.attrs.id}`;
   },
   renderHTML({ HTMLAttributes: e }) {
-    return ["mention-component", b(this.options.HTMLAttributes, e)];
+    return ["mention-component", T(this.options.HTMLAttributes, e)];
   }
 }).configure({
   suggestion: {
     char: "@",
-    pluginKey: new T("mentionSuggestion")
+    pluginKey: new $("mentionSuggestion")
   }
-}), jt = {
+}), Ft = {
   compatConfig: { MODE: 3 },
   name: "ChannelComponent",
   components: {
     NodeViewWrapper: v,
-    DtLink: G,
-    DtIconLock: Qe,
-    DtStack: E
+    DtLink: Q,
+    DtIconLock: tt,
+    DtStack: I
   },
-  props: $,
+  props: L,
   computed: {
     text() {
       return this.$props.node.attrs.locked ? this.$props.node.attrs.name : "#" + this.$props.node.attrs.name;
@@ -657,25 +660,25 @@ const At = /* @__PURE__ */ g(Ot, [["render", Dt]]), Pt = K.extend({
     }
   }
 };
-function Ht(e, t, o, n, r, s) {
-  const i = d("dt-icon-lock"), a = d("dt-stack"), c = d("dt-link"), p = d("node-view-wrapper");
-  return l(), m(p, { class: "d-d-inline-block" }, {
+function Ut(e, t, o, n, r, s) {
+  const i = l("dt-icon-lock"), a = l("dt-stack"), c = l("dt-link"), h = l("node-view-wrapper");
+  return d(), p(h, { class: "d-d-inline-block" }, {
     default: u(() => [
-      f(c, {
+      m(c, {
         kind: "mention",
-        onClick: j(s.handleClick, ["prevent"])
+        onClick: P(s.handleClick, ["prevent"])
       }, {
         default: u(() => [
-          f(a, {
+          m(a, {
             direction: "row",
             gap: "0"
           }, {
             default: u(() => [
-              e.$props.node.attrs.locked ? (l(), m(i, {
+              e.$props.node.attrs.locked ? (d(), p(i, {
                 key: 0,
                 size: "200"
               })) : w("", !0),
-              k("span", null, h(s.text), 1)
+              b("span", null, f(s.text), 1)
             ]),
             _: 1
           })
@@ -686,10 +689,10 @@ function Ht(e, t, o, n, r, s) {
     _: 1
   });
 }
-const Kt = /* @__PURE__ */ g(jt, [["render", Ht]]), Ft = K.extend({
+const qt = /* @__PURE__ */ g(Ft, [["render", Ut]]), Wt = V.extend({
   name: "channel",
   addNodeView() {
-    return I(Kt);
+    return S(qt);
   },
   parseHTML() {
     return [
@@ -718,21 +721,21 @@ const Kt = /* @__PURE__ */ g(jt, [["render", Ht]]), Ft = K.extend({
     return `#${e.attrs.id}`;
   },
   renderHTML({ HTMLAttributes: e }) {
-    return ["channel-component", b(this.options.HTMLAttributes, e)];
+    return ["channel-component", T(this.options.HTMLAttributes, e)];
   }
 }).configure({
   suggestion: {
     char: "#",
-    pluginKey: new T("channelSuggestion")
+    pluginKey: new $("channelSuggestion")
   }
-}), Vt = {
+}), zt = {
   compatConfig: { MODE: 3 },
   name: "SlashCommandsComponent",
   components: {
     NodeViewWrapper: v
   },
   props: {
-    ...$
+    ...L
   },
   emits: ["selected-command"],
   computed: {
@@ -748,23 +751,23 @@ const Kt = /* @__PURE__ */ g(jt, [["render", Ht]]), Ft = K.extend({
     t && typeof t == "function" && t(e);
   }
 };
-function qt(e, t, o, n, r, s) {
-  const i = d("node-view-wrapper");
-  return l(), m(i, { class: "d-d-inline-block" }, {
+function Xt(e, t, o, n, r, s) {
+  const i = l("node-view-wrapper");
+  return d(), p(i, { class: "d-d-inline-block" }, {
     default: u(() => [
-      C(h(s.text), 1)
+      C(f(s.text), 1)
     ]),
     _: 1
   });
 }
-const Ut = /* @__PURE__ */ g(Vt, [["render", qt]]), Wt = (e, t) => [...e.matchAll(t)].map((n) => {
+const Gt = /* @__PURE__ */ g(zt, [["render", Xt]]), Jt = (e, t) => [...e.matchAll(t)].map((n) => {
   let r = n[2];
   return r.endsWith(" ") || (r += " "), {
     index: n.index,
     text: r,
     match: n
   };
-}), zt = K.extend({
+}), Yt = V.extend({
   name: "slash-commands",
   group: "inline",
   inline: !0,
@@ -781,7 +784,7 @@ const Ut = /* @__PURE__ */ g(Vt, [["render", qt]]), Wt = (e, t) => [...e.matchAl
     };
   },
   addNodeView() {
-    return I(Ut);
+    return S(Gt);
   },
   parseHTML() {
     return [
@@ -807,13 +810,13 @@ const Ut = /* @__PURE__ */ g(Vt, [["render", qt]]), Wt = (e, t) => [...e.matchAl
     return `/${e.attrs.command}`;
   },
   renderHTML({ HTMLAttributes: e }) {
-    return ["command-component", b(this.options.HTMLAttributes, e)];
+    return ["command-component", T(this.options.HTMLAttributes, e)];
   },
   addInputRules() {
     var o;
     const e = (o = this.options.suggestion) == null ? void 0 : o.items({ query: "" }).map((n) => n.command), t = new RegExp(`^((?:\\/)(${e.join("|")})) $`);
     return [
-      ce({
+      ue({
         find: t,
         type: this.type,
         getAttributes(n) {
@@ -826,8 +829,8 @@ const Ut = /* @__PURE__ */ g(Vt, [["render", qt]]), Wt = (e, t) => [...e.matchAl
     var o;
     const e = (o = this.options.suggestion) == null ? void 0 : o.items({ query: "" }).map((n) => n.command), t = new RegExp(`^((?:\\/)(${e.join("|")})) ?$`, "g");
     return [
-      A({
-        find: (n) => Wt(n, t),
+      O({
+        find: (n) => Jt(n, t),
         type: this.type,
         getAttributes(n) {
           return { command: n[0].trim() };
@@ -838,14 +841,172 @@ const Ut = /* @__PURE__ */ g(Vt, [["render", qt]]), Wt = (e, t) => [...e.matchAl
 }).configure({
   suggestion: {
     char: "/",
-    pluginKey: new T("slashCommandSuggestion")
+    pluginKey: new $("slashCommandSuggestion")
   }
-}), Xt = {
+}), Qt = 100, Zt = {
+  name: "VariableComponent",
+  components: {
+    DtBadge: rt,
+    DtButton: ee,
+    DtPopover: ot,
+    DtInput: nt,
+    NodeViewWrapper: v
+  },
+  props: L,
+  data() {
+    return {
+      i18n: new Z(),
+      MAX_VARIABLE_ALT_LENGTH: Qt
+    };
+  },
+  computed: {
+    altText: {
+      get() {
+        var e, t;
+        return ((t = (e = this.node) == null ? void 0 : e.attrs) == null ? void 0 : t.altText) || "";
+      },
+      set(e) {
+        this.updateAttributes({ altText: e });
+      }
+    },
+    variableId() {
+      var e, t;
+      return (t = (e = this.node) == null ? void 0 : e.attrs) == null ? void 0 : t.id;
+    },
+    placeholder() {
+      var e;
+      return ((e = this.variableData) == null ? void 0 : e.placeholder) || "";
+    },
+    variableItems() {
+      var e, t;
+      return ((t = (e = this.extension) == null ? void 0 : e.options) == null ? void 0 : t.variableItems) || [];
+    },
+    variableData() {
+      return this.variableItems.find((e) => e.id === this.variableId);
+    },
+    badgeLabel() {
+      return `{} ${this.placeholder}`;
+    },
+    placeholderText() {
+      return `Replaces ${this.placeholder}`;
+    }
+  }
+};
+function en(e, t, o, n, r, s) {
+  const i = l("dt-badge"), a = l("dt-button"), c = l("dt-input"), h = l("dt-popover"), _ = l("node-view-wrapper");
+  return d(), p(_, { class: "d-d-inline-block" }, {
+    default: u(() => [
+      m(h, {
+        padding: "small",
+        "navigation-type": "arrow-keys",
+        placement: "top-start",
+        modal: !1
+      }, {
+        anchor: u(({ attrs: k }) => [
+          m(a, J(k, { kind: "unstyled" }), {
+            default: u(() => [
+              m(i, {
+                text: s.badgeLabel,
+                contenteditable: "false"
+              }, null, 8, ["text"])
+            ]),
+            _: 1
+          }, 16)
+        ]),
+        content: u(({ close: k }) => [
+          m(c, {
+            modelValue: s.altText,
+            "onUpdate:modelValue": t[0] || (t[0] = (x) => s.altText = x),
+            "root-class": "d-p8 d-w332",
+            label: r.i18n.$t("DIALTONE_EDITOR_VARIABLE_LABEL"),
+            placeholder: s.placeholderText,
+            validate: {
+              length: {
+                description: r.i18n.$t("DIALTONE_EDITOR_VARIABLE_VALIDATE_DESCRIPTION"),
+                message: r.i18n.$t("DIALTONE_EDITOR_VARIABLE_VALIDATE_MESSAGE"),
+                max: r.MAX_VARIABLE_ALT_LENGTH,
+                warn: r.MAX_VARIABLE_ALT_LENGTH,
+                limitMaxLength: !0
+              }
+            },
+            onKeyup: qe((x) => k(), ["enter"])
+          }, null, 8, ["modelValue", "label", "placeholder", "validate", "onKeyup"])
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  });
+}
+const tn = /* @__PURE__ */ g(Zt, [["render", en]]), nn = W.create({
+  name: "variable",
+  group: "inline",
+  inline: !0,
+  selectable: !0,
+  atom: !0,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      variableItems: []
+    };
+  },
+  addNodeView() {
+    return S(tn);
+  },
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (e) => e.getAttribute("data-variable-id"),
+        renderHTML: (e) => e.id ? {
+          "data-variable-id": e.id
+        } : {}
+      },
+      altText: {
+        default: "",
+        parseHTML: (e) => e.getAttribute("data-alt-text"),
+        renderHTML: (e) => e.altText ? {
+          "data-alt-text": e.altText
+        } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "variable"
+      }
+    ];
+  },
+  renderText({ node: e }) {
+    return e.attrs.altText;
+  },
+  renderHTML({ node: e, HTMLAttributes: t }) {
+    return [
+      "variable",
+      T(this.options.HTMLAttributes, t, {
+        "data-variable-id": e.attrs.id,
+        "data-alt-text": e.attrs.altText
+      })
+    ];
+  },
+  addCommands() {
+    return {
+      insertVariable: (e = {}) => ({ commands: t }) => t.insertContent({
+        type: this.name,
+        attrs: {
+          id: e.id || null,
+          altText: e.altText || ""
+        }
+      })
+    };
+  }
+}), on = {
   compatConfig: { MODE: 3 },
   name: "MentionSuggestion",
   components: {
-    DtAvatar: tt,
-    DtStack: E
+    DtAvatar: at,
+    DtStack: I
   },
   props: {
     item: {
@@ -881,22 +1042,22 @@ const Ut = /* @__PURE__ */ g(Vt, [["render", qt]]), Wt = (e, t) => [...e.matchAl
       return this.item.showDetails;
     }
   }
-}, Jt = { class: "d-mention-suggestion__name" }, Gt = {
+}, rn = { class: "d-mention-suggestion__name" }, sn = {
   key: 1,
   class: "d-mention-suggestion__divider"
-}, Yt = {
+}, an = {
   key: 2,
   class: "d-mention-suggestion__status"
 };
-function Qt(e, t, o, n, r, s) {
-  const i = d("dt-avatar"), a = d("dt-stack");
-  return l(), m(a, {
+function cn(e, t, o, n, r, s) {
+  const i = l("dt-avatar"), a = l("dt-stack");
+  return d(), p(a, {
     direction: "row",
     class: "d-mention-suggestion__container",
     gap: "400"
   }, {
     default: u(() => [
-      f(i, {
+      m(i, {
         "full-name": s.name,
         "image-src": s.avatarSrc,
         "image-alt": s.name,
@@ -904,25 +1065,25 @@ function Qt(e, t, o, n, r, s) {
         presence: s.presence,
         size: "sm"
       }, null, 8, ["full-name", "image-src", "image-alt", "show-presence", "presence"]),
-      f(a, {
+      m(a, {
         class: "d-mention-suggestion__details-container",
         gap: "100"
       }, {
         default: u(() => [
-          k("span", Jt, h(s.name), 1),
-          s.showDetails ? (l(), m(a, {
+          b("span", rn, f(s.name), 1),
+          s.showDetails ? (d(), p(a, {
             key: 0,
             direction: "row",
             gap: "300",
             class: "d-label--sm-plain"
           }, {
             default: u(() => [
-              s.presenceText ? (l(), _("span", {
+              s.presenceText ? (d(), y("span", {
                 key: 0,
-                class: X(["d-mention-suggestion__presence", [s.presenceFontColorClass]])
-              }, h(s.presenceText), 3)) : w("", !0),
-              s.status && s.presenceText ? (l(), _("div", Gt, " • ")) : w("", !0),
-              s.status ? (l(), _("div", Yt, h(s.status), 1)) : w("", !0)
+                class: G(["d-mention-suggestion__presence", [s.presenceFontColorClass]])
+              }, f(s.presenceText), 3)) : w("", !0),
+              s.status && s.presenceText ? (d(), y("div", sn, " • ")) : w("", !0),
+              s.status ? (d(), y("div", an, f(s.status), 1)) : w("", !0)
             ]),
             _: 1
           })) : w("", !0)
@@ -933,7 +1094,7 @@ function Qt(e, t, o, n, r, s) {
     _: 1
   });
 }
-const Zt = /* @__PURE__ */ g(Xt, [["render", Qt]]), en = {
+const ln = /* @__PURE__ */ g(on, [["render", cn]]), dn = {
   // This function comes from the user and passed to the editor directly.
   // This will also activate the mention plugin on the editor
   // items: ({ query }) => { return [] },
@@ -944,7 +1105,7 @@ const Zt = /* @__PURE__ */ g(Xt, [["render", Qt]]), en = {
       onStart: (n) => {
         e = new R(N, {
           props: {
-            itemComponent: M(Zt),
+            itemComponent: M(ln),
             itemType: "mention",
             ...n
           },
@@ -964,7 +1125,7 @@ const Zt = /* @__PURE__ */ g(Xt, [["render", Qt]]), en = {
           trigger: "manual",
           placement: "top-start",
           zIndex: 650,
-          plugins: [O]
+          plugins: [D]
         }), n.items.length > 0 && (t == null || t[0].show()));
       },
       onUpdate(n) {
@@ -982,13 +1143,13 @@ const Zt = /* @__PURE__ */ g(Xt, [["render", Qt]]), en = {
       }
     };
   }
-}, tn = {
+}, un = {
   compatConfig: { MODE: 3 },
   name: "ChannelSuggestion",
   components: {
-    DtStack: E,
-    DtIconHash: nt,
-    DtIconLock: ot
+    DtStack: I,
+    DtIconHash: ct,
+    DtIconLock: lt
   },
   props: {
     item: {
@@ -1002,26 +1163,26 @@ const Zt = /* @__PURE__ */ g(Xt, [["render", Qt]]), en = {
     }
   }
 };
-function nn(e, t, o, n, r, s) {
-  const i = d("dt-icon-hash"), a = d("dt-icon-lock"), c = d("dt-stack");
-  return l(), m(c, {
+function mn(e, t, o, n, r, s) {
+  const i = l("dt-icon-hash"), a = l("dt-icon-lock"), c = l("dt-stack");
+  return d(), p(c, {
     direction: "row",
     gap: "400"
   }, {
     default: u(() => [
-      o.item.locked ? (l(), m(a, {
+      o.item.locked ? (d(), p(a, {
         key: 1,
         size: "300"
-      })) : (l(), m(i, {
+      })) : (d(), p(i, {
         key: 0,
         size: "300"
       })),
-      k("span", null, h(s.name), 1)
+      b("span", null, f(s.name), 1)
     ]),
     _: 1
   });
 }
-const on = /* @__PURE__ */ g(tn, [["render", nn]]), rn = {
+const hn = /* @__PURE__ */ g(un, [["render", mn]]), pn = {
   // This function comes from the user and passed to the editor directly.
   // This will also activate the mention plugin on the editor
   // items: ({ query }) => { return [] },
@@ -1032,7 +1193,7 @@ const on = /* @__PURE__ */ g(tn, [["render", nn]]), rn = {
       onStart: (n) => {
         e = new R(N, {
           props: {
-            itemComponent: M(on),
+            itemComponent: M(hn),
             itemType: "channel",
             ...n
           },
@@ -1052,7 +1213,7 @@ const on = /* @__PURE__ */ g(tn, [["render", nn]]), rn = {
           trigger: "manual",
           placement: "top-start",
           zIndex: 650,
-          plugins: [O]
+          plugins: [D]
         }), n.items.length > 0 && (t == null || t[0].show()));
       },
       onUpdate(n) {
@@ -1070,7 +1231,7 @@ const on = /* @__PURE__ */ g(tn, [["render", nn]]), rn = {
       }
     };
   }
-}, sn = {
+}, fn = {
   compatConfig: { MODE: 3 },
   name: "SlashCommandSuggestion",
   props: {
@@ -1090,17 +1251,17 @@ const on = /* @__PURE__ */ g(tn, [["render", nn]]), rn = {
       return this.item.parametersExample;
     }
   }
-}, an = { class: "d-body--md-compact" }, cn = { key: 0 }, ln = { class: "d-body--sm d-fc-tertiary" };
-function dn(e, t, o, n, r, s) {
-  return l(), _("div", null, [
-    k("div", an, [
-      k("span", null, "/" + h(s.command), 1),
-      s.parametersExample ? (l(), _("span", cn, h(s.parametersExample), 1)) : w("", !0)
+}, gn = { class: "d-body--md-compact" }, _n = { key: 0 }, kn = { class: "d-body--sm d-fc-tertiary" };
+function yn(e, t, o, n, r, s) {
+  return d(), y("div", null, [
+    b("div", gn, [
+      b("span", null, "/" + f(s.command), 1),
+      s.parametersExample ? (d(), y("span", _n, f(s.parametersExample), 1)) : w("", !0)
     ]),
-    k("div", ln, h(s.description), 1)
+    b("div", kn, f(s.description), 1)
   ]);
 }
-const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
+const bn = /* @__PURE__ */ g(fn, [["render", yn]]), wn = {
   // This function comes from the user and passed to the editor directly.
   // This will also activate the mention plugin on the editor
   // items: ({ query }) => { return [] },
@@ -1113,7 +1274,7 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
         e = new R(N, {
           parent: void 0,
           props: {
-            itemComponent: M(un),
+            itemComponent: M(bn),
             itemType: "slash-command",
             ...n
           },
@@ -1133,7 +1294,7 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
           trigger: "manual",
           placement: "top-start",
           zIndex: 650,
-          plugins: [O]
+          plugins: [D]
         }), n.items.length > 0 && (t == null || t[0].show()));
       },
       onUpdate(n) {
@@ -1151,14 +1312,14 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
       }
     };
   }
-}, hn = {
+}, Tn = {
   compatConfig: { MODE: 3 },
   name: "DtRichTextEditor",
   components: {
-    EditorContent: Z,
-    BubbleMenu: Q,
-    DtButton: it,
-    DtStack: E
+    EditorContent: oe,
+    BubbleMenu: ne,
+    DtButton: ee,
+    DtStack: I
   },
   props: {
     /**
@@ -1230,7 +1391,7 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
       type: [Boolean, String, Number],
       default: !1,
       validator(e) {
-        return typeof e == "string" ? et.includes(e) : !0;
+        return typeof e == "string" ? it.includes(e) : !0;
       }
     },
     /**
@@ -1243,7 +1404,7 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
       type: String,
       default: "html",
       validator(e) {
-        return Ze.includes(e);
+        return st.includes(e);
       }
     },
     /**
@@ -1402,6 +1563,20 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
       type: Boolean,
       default: !1
     },
+    /**
+     * Whether the input allows variables to be introduced in the text.
+     */
+    allowVariable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Array of available variable items that can be inserted.
+     */
+    variableItems: {
+      type: Array,
+      default: () => []
+    },
     /**
      * Additional TipTap extensions to be added to the editor.
      */
@@ -1527,11 +1702,11 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
       tippyOptions: {
         appendTo: () => {
           var e;
-          return (e = F(this.$refs.editor.$el).getRootNode()) == null ? void 0 : e.querySelector("body");
+          return (e = K(this.$refs.editor.$el).getRootNode()) == null ? void 0 : e.querySelector("body");
         },
         placement: "top-start"
       },
-      i18n: new st(),
+      i18n: new Z(),
       // JSON-to-markdown converter
       jsonToMarkdownConverter: {
         convertToMarkdown(e) {
@@ -1555,7 +1730,8 @@ const un = /* @__PURE__ */ g(sn, [["render", dn]]), mn = {
             mention: (n) => this.processMentionNode(n),
             channel: (n) => this.processChannelNode(n),
             "slash-commands": (n) => this.processSlashCommandsNode(n),
-            emoji: (n) => this.processEmojiNode(n)
+            emoji: (n) => this.processEmojiNode(n),
+            variable: (n) => this.processVariableNode(n)
           }[e.type];
           return o ? o(e) : this.processUnknownNode(e);
         },
@@ -1617,6 +1793,11 @@ ${this.processNodeContent(e)}
           var t;
           return ((t = e.attrs) == null ? void 0 : t.code) || "";
         },
+        processVariableNode(e) {
+          var n, r;
+          const t = ((n = e.attrs) == null ? void 0 : n.id) || "", o = ((r = e.attrs) == null ? void 0 : r.altText) || "";
+          return `{{${t}=${o}}}`;
+        },
         processUnknownNode(e) {
           return this.processNodeContent(e);
         },
@@ -1665,15 +1846,15 @@ ${this.processNodeContent(e)}
     },
     // eslint-disable-next-line complexity
     extensions() {
-      const e = [he, Ee, Le, fe];
-      e.push(this.useDivTags ? Nt : W), this.allowBold && e.push(_e), this.allowBlockquote && e.push(de), this.allowBulletList && (e.push(ke), e.push(Ce.extend({
+      const e = [ge, Se, Ie, ke];
+      e.push(this.useDivTags ? Ht : z), this.allowBold && e.push(be), this.allowBlockquote && e.push(he), this.allowBulletList && (e.push(we), e.push(Ce.extend({
         renderText({ node: n }) {
           return n.textContent;
         }
-      })), e.push(be)), this.allowItalic && e.push(ye), this.allowStrike && e.push(xe), this.allowUnderline && e.push(Te), this.placeholder && e.push(
-        ge.configure({ placeholder: this.placeholder })
+      })), e.push(Ee)), this.allowItalic && e.push(Te), this.allowStrike && e.push(Le), this.allowUnderline && e.push(ve), this.placeholder && e.push(
+        ye.configure({ placeholder: this.placeholder })
       );
-      const t = this, o = le.create({
+      const t = this, o = me.create({
         addKeyboardShortcuts() {
           return {
             "Shift-Enter": ({ editor: n }) => t.allowLineBreaks ? !1 : (n.commands.first(({ commands: r }) => [
@@ -1687,7 +1868,7 @@ ${this.processNodeContent(e)}
           };
         }
       });
-      if (e.push(o), this.link && e.push(we.extend({
+      if (e.push(o), this.link && e.push(xe.extend({
         inclusive: !1,
         addKeyboardShortcuts() {
           return {
@@ -1700,27 +1881,29 @@ ${this.processNodeContent(e)}
         },
         openOnClick: !1,
         autolink: !0,
-        protocols: V
-      })), this.customLink && e.push(this.getExtension(Mt, this.customLink)), this.mentionSuggestion) {
-        const n = { ...this.mentionSuggestion, ...en };
-        e.push(Pt.configure({ suggestion: n }));
+        protocols: F
+      })), this.customLink && e.push(this.getExtension(Dt, this.customLink)), this.mentionSuggestion) {
+        const n = { ...this.mentionSuggestion, ...dn };
+        e.push(Kt.configure({ suggestion: n }));
       }
       if (this.channelSuggestion) {
-        const n = { ...this.channelSuggestion, ...rn };
-        e.push(Ft.configure({ suggestion: n }));
+        const n = { ...this.channelSuggestion, ...pn };
+        e.push(Wt.configure({ suggestion: n }));
       }
       if (this.slashCommandSuggestion) {
-        const n = { ...this.slashCommandSuggestion, ...mn };
-        e.push(zt.configure({
+        const n = { ...this.slashCommandSuggestion, ...wn };
+        e.push(Yt.configure({
           suggestion: n,
           onSelectedCommand: (r) => {
             this.$emit("selected-command", r);
           }
         }));
       }
-      return e.push(Tt), e.push(Se.configure({
+      return this.allowVariable && e.push(nn.configure({
+        variableItems: this.variableItems
+      })), e.push(St), e.push($e.configure({
         types: ["paragraph"]
-      })), this.allowCode && e.push(me), this.allowCodeblock && e.push(ue.extend({
+      })), this.allowCode && e.push(fe), this.allowCodeblock && e.push(pe.extend({
         renderText({ node: n }) {
           return `\`\`\`
 ${n.textContent}
@@ -1730,7 +1913,7 @@ ${n.textContent}
         HTMLAttributes: {
           class: "d-rich-text-editor__code-block"
         }
-      })), this.allowInlineImages && e.push(Bt), (this.allowFontFamily || this.allowFontColor) && (e.push(Me), this.allowFontColor && e.push(Be), this.allowFontFamily && e.push(Ne)), this.additionalExtensions.length && e.push(...this.additionalExtensions), this.allowTables && e.push($e.configure({ resizable: !0 }), Ie, Re, ve, pe), e;
+      })), this.allowInlineImages && e.push(Ot), (this.allowFontFamily || this.allowFontColor) && (e.push(Ne), this.allowFontColor && e.push(De), this.allowFontFamily && e.push(Oe)), this.additionalExtensions.length && e.push(...this.additionalExtensions), this.allowTables && e.push(Ae.configure({ resizable: !0 }), Be, Me, Re, _e), e;
     },
     inputAttrs() {
       const e = {
@@ -1770,11 +1953,11 @@ ${n.textContent}
     this.destroyEditor();
   },
   mounted() {
-    Ge(F(this.$el), this.$options.name), this.processValue(this.modelValue, !1);
+    Ze(K(this.$el), this.$options.name), this.processValue(this.modelValue, !1);
   },
   methods: {
     createEditor() {
-      this.editor = new ee({
+      this.editor = new re({
         autofocus: this.autoFocus,
         content: this.modelValue,
         editable: this.editable,
@@ -1813,9 +1996,9 @@ ${n.textContent}
      * @param editor the editor instance.
      */
     getSelectedLinkText(e) {
-      var a, c, p;
+      var a, c, h;
       const { view: t, state: o } = e, { from: n, to: r } = t.state.selection, s = o.doc.textBetween(n, r, ""), i = this.editor.state.doc.nodeAt(n);
-      return i && ((p = (c = (a = i.marks) == null ? void 0 : a.at(0)) == null ? void 0 : c.type) == null ? void 0 : p.name) === "link" ? i.textContent : s;
+      return i && ((h = (c = (a = i.marks) == null ? void 0 : a.at(0)) == null ? void 0 : c.type) == null ? void 0 : h.name) === "link" ? i.textContent : s;
     },
     editLink() {
       const e = this.getSelectedLinkText(this.editor), t = {
@@ -1834,21 +2017,21 @@ ${n.textContent}
       const e = this.editor.getAttributes("link").href;
       window.open(e, "_blank");
     },
-    setLink(e, t, o, n = V, r) {
-      var a, c, p;
+    setLink(e, t, o, n = F, r) {
+      var a, c, h;
       if (!e) {
         this.removeLink();
         return;
       }
-      n.find((y) => y.test(e)) || (e = `${r}${e}`), this.editor.chain().focus().extendMarkRange("link").run();
-      const i = (p = (c = (a = this.editor) == null ? void 0 : a.view) == null ? void 0 : c.state) == null ? void 0 : p.selection;
+      n.find((_) => _.test(e)) || (e = `${r}${e}`), this.editor.chain().focus().extendMarkRange("link").run();
+      const i = (h = (c = (a = this.editor) == null ? void 0 : a.view) == null ? void 0 : c.state) == null ? void 0 : h.selection;
       this.editor.chain().focus().insertContent(t).setTextSelection({ from: i.from, to: i.from + t.length }).setLink({ href: e, class: o.class }).run();
     },
     processValue(e, t = !0) {
       const o = this.getOutput();
-      if (!(t && rt(e, o))) {
+      if (!(t && dt(e, o))) {
         if (typeof e == "string" && this.outputFormat === "text") {
-          const n = new RegExp(`(${z})`, "g");
+          const n = new RegExp(`(${X})`, "g");
           e = e == null ? void 0 : e.replace(n, '<emoji-component code="$1"></emoji-component>');
         }
         this.editor.commands.setContent(e, !1, { preserveWhitespace: "full" });
@@ -1987,11 +2170,11 @@ ${n.textContent}
       this.editor.commands.focus();
     }
   }
-}, pn = { class: "d-popover__dialog" };
-function fn(e, t, o, n, r, s) {
-  const i = d("dt-button"), a = d("dt-stack"), c = d("bubble-menu"), p = d("editor-content");
-  return l(), _("div", null, [
-    r.editor && o.link && !o.hideLinkBubbleMenu ? (l(), m(c, {
+}, xn = { class: "d-popover__dialog" };
+function Cn(e, t, o, n, r, s) {
+  const i = l("dt-button"), a = l("dt-stack"), c = l("bubble-menu"), h = l("editor-content");
+  return d(), y("div", null, [
+    r.editor && o.link && !o.hideLinkBubbleMenu ? (d(), p(c, {
       key: 0,
       editor: r.editor,
       "should-show": s.bubbleMenuShouldShow,
@@ -1999,40 +2182,40 @@ function fn(e, t, o, n, r, s) {
       style: { visibility: "visible" }
     }, {
       default: u(() => [
-        k("div", pn, [
-          f(a, {
+        b("div", xn, [
+          m(a, {
             direction: "row",
             class: "d-rich-text-editor-bubble-menu__button-stack",
             gap: "0"
           }, {
             default: u(() => [
-              f(i, {
+              m(i, {
                 kind: "muted",
                 importance: "clear",
                 onClick: s.editLink
               }, {
                 default: u(() => [
-                  C(h(r.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_EDIT_BUTTON_LABEL")), 1)
+                  C(f(r.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_EDIT_BUTTON_LABEL")), 1)
                 ]),
                 _: 1
               }, 8, ["onClick"]),
-              f(i, {
+              m(i, {
                 kind: "muted",
                 importance: "clear",
                 onClick: s.openLink
               }, {
                 default: u(() => [
-                  C(h(r.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_OPEN_LINK_BUTTON_LABEL")), 1)
+                  C(f(r.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_OPEN_LINK_BUTTON_LABEL")), 1)
                 ]),
                 _: 1
               }, 8, ["onClick"]),
-              f(i, {
+              m(i, {
                 kind: "danger",
                 importance: "clear",
                 onClick: s.removeLink
               }, {
                 default: u(() => [
-                  C(h(r.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_REMOVE_BUTTON_LABEL")), 1)
+                  C(f(r.i18n.$t("DIALTONE_RICH_TEXT_EDITOR_REMOVE_BUTTON_LABEL")), 1)
                 ]),
                 _: 1
               }, 8, ["onClick"])
@@ -2043,7 +2226,7 @@ function fn(e, t, o, n, r, s) {
       ]),
       _: 1
     }, 8, ["editor", "should-show", "tippy-options"])) : w("", !0),
-    f(p, Fe({
+    m(h, J({
       ref: "editor",
       editor: r.editor,
       class: "d-rich-text-editor",
@@ -2051,8 +2234,8 @@ function fn(e, t, o, n, r, s) {
     }, s.attrs), null, 16, ["editor"])
   ]);
 }
-const ho = /* @__PURE__ */ g(hn, [["render", fn]]);
+const Eo = /* @__PURE__ */ g(Tn, [["render", Cn]]);
 export {
-  ho as default
+  Eo as default
 };
 //# sourceMappingURL=rich-text-editor.js.map