@mekari/pixel3-rich-text-editor 0.1.2 → 0.1.3-dev.1

package/dist/rich-text-editor.js

@@ -34,8 +34,8 @@ __export(rich_text_editor_exports, {
   MpRichTextEditor: () => MpRichTextEditor
 });
 module.exports = __toCommonJS(rich_text_editor_exports);
-var import_vue20 = require("vue");
-var import_vue21 = require("vue");
+var import_vue22 = require("vue");
+var import_vue23 = require("vue");
 var import_pixel3_utils4 = require("@mekari/pixel3-utils");
 
 // src/modules/rich-text-editor.props.ts
@@ -72,6 +72,10 @@ var richTextEditorProps = {
     type: Array,
     default: () => []
   },
+  variables: {
+    type: Array,
+    default: () => []
+  },
   validateLink: {
     type: Function
   },
@@ -163,7 +167,7 @@ var useRTEStyleProvider = /* @__PURE__ */ __name((props) => {
 }, "useRTEStyleProvider");
 
 // src/rich-text-editor.tsx
-var import_vue_32 = require("@tiptap/vue-3");
+var import_vue_33 = require("@tiptap/vue-3");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
 var import_extension_text_align = __toESM(require("@tiptap/extension-text-align"));
@@ -178,9 +182,9 @@ var import_tokens = require("@mekari/pixel3-styled-system/tokens");
 var import_pixel3_form_control = require("@mekari/pixel3-form-control");
 
 // src/editor-toolbar.tsx
-var import_vue14 = require("vue");
-var import_vue15 = require("vue");
-var import_css5 = require("@mekari/pixel3-styled-system/css");
+var import_vue16 = require("vue");
+var import_vue17 = require("vue");
+var import_css6 = require("@mekari/pixel3-styled-system/css");
 var import_pixel3_divider = require("@mekari/pixel3-divider");
 var import_pixel3_scrollbar = require("@mekari/pixel3-scrollbar");
 
@@ -600,6 +604,33 @@ var LocationIcon = (0, import_vue3.defineComponent)({
     }, null)]);
   }
 });
+var VariableIcon = (0, import_vue3.defineComponent)({
+  name: "VariableIcon",
+  setup() {
+    return () => (0, import_vue2.createVNode)("svg", {
+      "class": "mp-icon mp-icon--size_sm",
+      "data-pixel-component": "MpIcon",
+      "data-icon-name": "text-editor-inline-code",
+      "viewBox": "0 0 24 24",
+      "role": "presentation",
+      "fill": "none",
+      "focusable": "false",
+      "style": "--mp-icon-color: var(--mp-colors-icon-default);"
+    }, [(0, import_vue2.createVNode)("path", {
+      "d": "M15 6L21 12L15 18",
+      "stroke": "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null), (0, import_vue2.createVNode)("path", {
+      "d": "M9 6L3 12L9 18",
+      "stroke": "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
 
 // src/extensions/heading-extension.tsx
 var HeadingExtention = (0, import_vue5.defineComponent)({
@@ -841,14 +872,13 @@ var SingleExtention = (0, import_vue9.defineComponent)({
     },
     editor: {
       type: Object
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
     }
   },
-  setup({
-    name,
-    tooltipLabel,
-    onClick,
-    editor
-  }) {
+  setup(props) {
     const iconMap = {
       bold: (0, import_vue8.createVNode)(BoldIcon, null, null),
       italic: (0, import_vue8.createVNode)(ItalicIcon, null, null),
@@ -864,16 +894,25 @@ var SingleExtention = (0, import_vue9.defineComponent)({
       file: (0, import_vue8.createVNode)(FileIcon, null, null),
       audio: (0, import_vue8.createVNode)(AudioIcon, null, null),
       mention: (0, import_vue8.createVNode)(MentionIcon, null, null),
+      variable: (0, import_vue8.createVNode)(VariableIcon, null, null),
       location: (0, import_vue8.createVNode)(LocationIcon, null, null)
     };
-    return () => (0, import_vue8.withDirectives)((0, import_vue8.createVNode)("button", {
-      "class": {
-        "is-active": name && (editor == null ? void 0 : editor.isActive(name))
-      },
-      "onClick": onClick
-    }, [name && iconMap[name]]), [[(0, import_vue8.resolveDirective)("tooltip"), {
-      label: tooltipLabel
-    }]]);
+    return () => {
+      var _a;
+      return (0, import_vue8.withDirectives)((0, import_vue8.createVNode)("button", {
+        "class": {
+          "is-active": props.name && ((_a = props.editor) == null ? void 0 : _a.isActive(props.name))
+        },
+        "style": props.isDisabled ? {
+          opacity: "0.4",
+          cursor: "not-allowed"
+        } : void 0,
+        "disabled": props.isDisabled,
+        "onClick": props.isDisabled ? void 0 : props.onClick
+      }, [props.name && iconMap[props.name]]), [[(0, import_vue8.resolveDirective)("tooltip"), {
+        label: props.tooltipLabel
+      }]]);
+    };
   }
 });
 
@@ -1190,10 +1229,313 @@ var LinkExtension = (0, import_vue13.defineComponent)({
   }
 });
 
+// src/extensions/variable-extension.ts
+var import_core2 = require("@tiptap/core");
+var import_suggestion = __toESM(require("@tiptap/suggestion"));
+var Variable = import_core2.Node.create({
+  name: "variable",
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      renderLabel({
+        node
+      }) {
+        var _a;
+        return `{${(_a = node.attrs.label) != null ? _a : node.attrs.id}}`;
+      },
+      suggestion: {}
+    };
+  },
+  group: "inline",
+  inline: true,
+  selectable: false,
+  atom: true,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.id) {
+            return {};
+          }
+          return {
+            "data-id": attributes.id
+          };
+        }
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-label"),
+        renderHTML: (attributes) => {
+          if (!attributes.label) {
+            return {};
+          }
+          return {
+            "data-label": attributes.label
+          };
+        }
+      },
+      category: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-category"),
+        renderHTML: (attributes) => {
+          if (!attributes.category) {
+            return {};
+          }
+          return {
+            "data-category": attributes.category
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: `span[data-type="${this.name}"]`
+    }];
+  },
+  renderHTML({
+    node,
+    HTMLAttributes
+  }) {
+    return ["span", (0, import_core2.mergeAttributes)({
+      "data-type": this.name
+    }, this.options.HTMLAttributes, HTMLAttributes), this.options.renderLabel({
+      options: this.options,
+      node
+    })];
+  },
+  renderText({
+    node
+  }) {
+    return this.options.renderLabel({
+      options: this.options,
+      node
+    });
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({
+        tr,
+        state
+      }) => {
+        let isVariable = false;
+        const {
+          selection
+        } = state;
+        const {
+          empty,
+          anchor
+        } = selection;
+        if (!empty) {
+          return false;
+        }
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            isVariable = true;
+            tr.insertText(this.options.suggestion.char || "", pos, pos + node.nodeSize);
+            return false;
+          }
+        });
+        return isVariable;
+      })
+    };
+  },
+  addProseMirrorPlugins() {
+    return [(0, import_suggestion.default)({
+      editor: this.editor,
+      ...this.options.suggestion
+    })];
+  }
+});
+
+// src/extensions/variable-list-extension.tsx
+var import_vue14 = require("vue");
+var import_vue15 = require("vue");
+var import_css5 = require("@mekari/pixel3-styled-system/css");
+var import_pixel3_popover3 = require("@mekari/pixel3-popover");
+var import_pixel3_text2 = require("@mekari/pixel3-text");
+var VariableList = (0, import_vue15.defineComponent)({
+  name: "VariableList",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    command: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    const selectedIndex = (0, import_vue15.ref)(0);
+    const listRef = (0, import_vue15.ref)(null);
+    const groupedItems = (0, import_vue15.computed)(() => {
+      const groups = {};
+      props.items.forEach((item) => {
+        const category = item.category || "OTHER";
+        if (!groups[category]) {
+          groups[category] = [];
+        }
+        groups[category].push(item);
+      });
+      return Object.entries(groups).map(([category, items]) => ({
+        category,
+        items
+      }));
+    });
+    const scrollToFocusedItem = /* @__PURE__ */ __name(() => {
+      (0, import_vue15.nextTick)(() => {
+        if (!listRef.value)
+          return;
+        const targetItem = listRef.value.querySelector('[data-active="true"], [data-highlight]');
+        if (targetItem) {
+          targetItem.scrollIntoView({
+            block: "nearest"
+          });
+        }
+      });
+    }, "scrollToFocusedItem");
+    (0, import_vue15.watch)(() => props.items, () => {
+      selectedIndex.value = 0;
+    });
+    const onSelect = /* @__PURE__ */ __name((index) => {
+      const item = props.items[index];
+      if (item) {
+        props.command({
+          ...item,
+          label: item.id
+        });
+      }
+    }, "onSelect");
+    const onKeyDown = /* @__PURE__ */ __name(({
+      event
+    }) => {
+      if (!props.items.length) {
+        return false;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const total = props.items.length;
+        selectedIndex.value = (selectedIndex.value + total - 1) % total;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onSelect(selectedIndex.value);
+        return true;
+      }
+      return false;
+    }, "onKeyDown");
+    expose({
+      onKeyDown
+    });
+    return () => (0, import_vue14.createVNode)(import_pixel3_popover3.MpPopover, {
+      "id": "popover-rte-variable-list",
+      "is-manual": true,
+      "is-default-open": true,
+      "is-open": true
+    }, {
+      default: () => [(0, import_vue14.createVNode)(import_pixel3_popover3.MpPopoverContent, {
+        "class": (0, import_css5.css)({
+          width: "280px",
+          maxHeight: "284px",
+          overflowY: "auto"
+        })
+      }, {
+        default: () => [(0, import_vue14.createVNode)(import_pixel3_popover3.MpPopoverList, {
+          "ref": (element) => {
+            var _a;
+            if (!element) {
+              listRef.value = null;
+              return;
+            }
+            listRef.value = (_a = element.$el) != null ? _a : element;
+          },
+          "data-pixel-rte": true
+        }, {
+          default: () => [!props.items.length && (0, import_vue14.createVNode)(import_pixel3_text2.MpText, {
+            "color": "text.secondary",
+            "class": (0, import_css5.css)({
+              px: "3",
+              py: "2"
+            })
+          }, {
+            default: () => [(0, import_vue14.createTextVNode)("No result")]
+          }), groupedItems.value.map((group) => {
+            return (0, import_vue14.createVNode)(import_vue14.Fragment, null, [(0, import_vue14.createVNode)(import_pixel3_text2.MpText, {
+              "size": "label-small",
+              "color": "text.secondary",
+              "class": (0, import_css5.css)({
+                px: "3",
+                py: "2",
+                textTransform: "uppercase",
+                textAlign: "left",
+                letterSpacing: "0.05em",
+                display: "block",
+                width: "full"
+              })
+            }, {
+              default: () => [group.category]
+            }), group.items.map((item) => {
+              const itemIndex = props.items.indexOf(item);
+              return (0, import_vue14.createVNode)(import_pixel3_popover3.MpPopoverListItem, {
+                "key": `${item.id}-${itemIndex}`,
+                "onMousedown": (event) => event.preventDefault(),
+                "onMouseenter": () => {
+                  selectedIndex.value = itemIndex;
+                },
+                "onClick": () => {
+                  onSelect(itemIndex);
+                }
+              }, {
+                default: () => [(0, import_vue14.createVNode)("div", {
+                  "class": (0, import_css5.css)({
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    minWidth: "0",
+                    width: "full",
+                    gap: "0.5"
+                  })
+                }, [(0, import_vue14.createVNode)(import_pixel3_text2.MpText, {
+                  "size": "label",
+                  "is-truncated": true
+                }, {
+                  default: () => [item.name || "Unknown"]
+                }), (0, import_vue14.createVNode)(import_pixel3_text2.MpText, {
+                  "size": "label-small",
+                  "color": "text.secondary",
+                  "is-truncated": true,
+                  "class": (0, import_css5.css)({
+                    fontFamily: "mono"
+                  })
+                }, {
+                  default: () => [`{${item.id}}`]
+                })])]
+              });
+            })]);
+          })]
+        })]
+      })]
+    });
+  }
+});
+
 // src/editor-toolbar.tsx
-var EditorToolbar = (0, import_vue15.defineComponent)({
+var EditorToolbar = (0, import_vue17.defineComponent)({
   name: "EditorToolbar",
-  emits: ["clickImage", "clickFile", "clickAudio", "clickMention", "clickLocation"],
+  emits: ["clickImage", "clickFile", "clickAudio", "clickMention", "clickVariable", "clickLocation"],
   props: {
     editor: {
       type: Object
@@ -1208,77 +1550,102 @@ var EditorToolbar = (0, import_vue15.defineComponent)({
       type: Function
     }
   },
-  setup({
-    editor,
-    options,
-    validateLink,
-    transformLink
-  }, {
+  setup(props, {
     emit
   }) {
-    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention", "location"];
-    const itemOptions = {
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention", "variable", "location"];
+    const getItemOptions = /* @__PURE__ */ __name(() => ({
       heading: {
         tooltipLabel: "Text style",
-        editor
+        editor: props.editor
       },
       bold: {
         tooltipLabel: "Bold",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBold().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleBold().run();
+        }
       },
       italic: {
         tooltipLabel: "Italic",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleItalic().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleItalic().run();
+        }
       },
       underline: {
         tooltipLabel: "Underline",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleUnderline().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleUnderline().run();
+        }
       },
       strike: {
         tooltipLabel: "Strike",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleStrike().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleStrike().run();
+        }
       },
       blockquote: {
         tooltipLabel: "Blockquote",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBlockquote().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleBlockquote().run();
+        }
       },
       bulletList: {
         tooltipLabel: "Bullet list",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBulletList().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleBulletList().run();
+        }
       },
       orderedList: {
         tooltipLabel: "Number list",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleOrderedList().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleOrderedList().run();
+        }
       },
       textColor: {
         tooltipLabel: "Text color",
-        editor,
+        editor: props.editor,
         type: "text"
       },
       fillColor: {
         tooltipLabel: "Fill color",
-        editor,
+        editor: props.editor,
         type: "fill"
       },
       textLink: {
         tooltipLabel: "Insert link",
-        editor
+        editor: props.editor
       },
       align: {
         tooltipLabel: "Text alignment",
-        editor
+        editor: props.editor
       },
       undo: {
         tooltipLabel: "Undo",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().undo().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().undo().run();
+        }
       },
       redo: {
         tooltipLabel: "Redo",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().redo().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().redo().run();
+        }
       },
       clear: {
         tooltipLabel: "Reset format",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().unsetAllMarks().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().unsetAllMarks().run();
+        }
       },
       image: {
         tooltipLabel: "Add image",
@@ -1294,18 +1661,29 @@ var EditorToolbar = (0, import_vue15.defineComponent)({
       },
       mention: {
         tooltipLabel: "Mention",
-        editor,
+        editor: props.editor,
         onClick: () => {
+          var _a;
           ;
-          (editor == null ? void 0 : editor.chain()).focus().insertContent("@").run();
+          ((_a = props.editor) == null ? void 0 : _a.chain()).focus().insertContent("@").run();
           emit("clickMention");
         }
       },
+      variable: {
+        tooltipLabel: "Insert variable",
+        editor: props.editor,
+        onClick: () => {
+          var _a;
+          ;
+          ((_a = props.editor) == null ? void 0 : _a.chain()).focus().insertContent("{").run();
+          emit("clickVariable");
+        }
+      },
       location: {
         tooltipLabel: "Add location",
         onClick: () => emit("clickLocation")
       }
-    };
+    }), "getItemOptions");
     const getResolvedItem = /* @__PURE__ */ __name((option) => {
       if (typeof option === "string") {
         return {
@@ -1314,56 +1692,60 @@ var EditorToolbar = (0, import_vue15.defineComponent)({
       }
       return {
         item: option.value,
-        tooltip: option.tooltip
+        tooltip: option.tooltip,
+        disabled: option.disabled
       };
     }, "getResolvedItem");
     const renderExtension = /* @__PURE__ */ __name((option) => {
       const {
         item,
-        tooltip
+        tooltip,
+        disabled
       } = getResolvedItem(option);
       if (!items.includes(item))
         return null;
       const resolvedItem = item;
+      const itemOptions = getItemOptions();
       const resolvedOptions = itemOptions[resolvedItem];
       if (!resolvedOptions)
         return null;
       const tooltipLabel = tooltip || resolvedOptions.tooltipLabel;
       switch (resolvedItem) {
         case "heading":
-          return (0, import_vue14.createVNode)(HeadingExtention, {
+          return (0, import_vue16.createVNode)(HeadingExtention, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": props.editor
           }, null);
         case "align":
-          return (0, import_vue14.createVNode)(AlignExtention, {
+          return (0, import_vue16.createVNode)(AlignExtention, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": props.editor
           }, null);
         case "textColor":
         case "fillColor":
-          return (0, import_vue14.createVNode)(ColorExtension, {
+          return (0, import_vue16.createVNode)(ColorExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor,
+            "editor": props.editor,
             "type": resolvedOptions.type
           }, null);
         case "textLink":
-          return (0, import_vue14.createVNode)(LinkExtension, {
+          return (0, import_vue16.createVNode)(LinkExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor,
-            "validateLink": validateLink,
-            "transformLink": transformLink
+            "editor": props.editor,
+            "validateLink": props.validateLink,
+            "transformLink": props.transformLink
           }, null);
         default:
-          return (0, import_vue14.createVNode)(SingleExtention, {
+          return (0, import_vue16.createVNode)(SingleExtention, {
             "name": resolvedItem,
             "tooltipLabel": tooltipLabel,
             "onClick": resolvedOptions.onClick,
-            "editor": editor
+            "editor": props.editor,
+            "isDisabled": disabled
           }, null);
       }
     }, "renderExtension");
-    return () => (0, import_vue14.createVNode)(import_pixel3_scrollbar.MpScrollbar, {
+    return () => (0, import_vue16.createVNode)(import_pixel3_scrollbar.MpScrollbar, {
       "options": {
         overflow: {
           y: "hide",
@@ -1371,29 +1753,35 @@ var EditorToolbar = (0, import_vue15.defineComponent)({
         }
       }
     }, {
-      default: () => [(0, import_vue14.createVNode)("div", {
-        "class": (0, import_css5.css)({
-          display: "flex",
-          alignItems: "stretch",
-          gap: "1"
-        })
-      }, [options == null ? void 0 : options.map((option, index) => (0, import_vue14.createVNode)(import_vue14.Fragment, null, [option.map((item) => {
-        const resolvedItem = typeof item === "string" ? item : item.value;
-        if (items.includes(resolvedItem)) {
-          return renderExtension(item);
-        }
-      }), index !== (options == null ? void 0 : options.length) - 1 && (0, import_vue14.createVNode)(import_pixel3_divider.MpDivider, {
-        "id": "divider-toolbar",
-        "orientation": "vertical"
-      }, null)]))])]
+      default: () => {
+        var _a;
+        return [(0, import_vue16.createVNode)("div", {
+          "class": (0, import_css6.css)({
+            display: "flex",
+            alignItems: "stretch",
+            gap: "1"
+          })
+        }, [(_a = props.options) == null ? void 0 : _a.map((option, index) => {
+          var _a2, _b;
+          return (0, import_vue16.createVNode)(import_vue16.Fragment, null, [option.map((item) => {
+            const resolvedItem = typeof item === "string" ? item : item.value;
+            if (items.includes(resolvedItem)) {
+              return renderExtension(item);
+            }
+          }), index !== ((_b = (_a2 = props.options) == null ? void 0 : _a2.length) != null ? _b : 0) - 1 && (0, import_vue16.createVNode)(import_pixel3_divider.MpDivider, {
+            "id": "divider-toolbar",
+            "orientation": "vertical"
+          }, null)]);
+        })])];
+      }
     });
   }
 });
 
 // src/rte-style-provider.tsx
-var import_vue16 = require("vue");
-var import_vue17 = require("vue");
-var MpRTEStyleProvider = (0, import_vue17.defineComponent)({
+var import_vue18 = require("vue");
+var import_vue19 = require("vue");
+var MpRTEStyleProvider = (0, import_vue19.defineComponent)({
   name: "MpRTEStyleProvider",
   props: RTEStyleProviderProps,
   setup(props, {
@@ -1402,27 +1790,27 @@ var MpRTEStyleProvider = (0, import_vue17.defineComponent)({
     const api = useRTEStyleProvider(props);
     return () => {
       var _a;
-      return (0, import_vue16.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      return (0, import_vue18.createVNode)("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
 
 // src/rte-suggestion.ts
 var import_vue_3 = require("@tiptap/vue-3");
-var import_core2 = require("@popperjs/core");
+var import_core3 = require("@popperjs/core");
 
 // src/extensions/mention-list-extension.tsx
-var import_vue18 = require("vue");
-var import_vue19 = require("vue");
-var import_css6 = require("@mekari/pixel3-styled-system/css");
+var import_vue20 = require("vue");
+var import_vue21 = require("vue");
+var import_css7 = require("@mekari/pixel3-styled-system/css");
 var import_pixel3_avatar = require("@mekari/pixel3-avatar");
-var import_pixel3_popover3 = require("@mekari/pixel3-popover");
-var import_pixel3_text2 = require("@mekari/pixel3-text");
+var import_pixel3_popover4 = require("@mekari/pixel3-popover");
+var import_pixel3_text3 = require("@mekari/pixel3-text");
 var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
 var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
   return avatarVariantColors[index % avatarVariantColors.length];
 }, "getAvatarVariantColor");
-var MentionList = (0, import_vue19.defineComponent)({
+var MentionList = (0, import_vue21.defineComponent)({
   name: "MentionList",
   props: {
     items: {
@@ -1437,10 +1825,10 @@ var MentionList = (0, import_vue19.defineComponent)({
   setup(props, {
     expose
   }) {
-    const selectedIndex = (0, import_vue19.ref)(0);
-    const listRef = (0, import_vue19.ref)(null);
+    const selectedIndex = (0, import_vue21.ref)(0);
+    const listRef = (0, import_vue21.ref)(null);
     const scrollToFocusedItem = /* @__PURE__ */ __name(() => {
-      (0, import_vue19.nextTick)(() => {
+      (0, import_vue21.nextTick)(() => {
         if (!listRef.value)
           return;
         const targetItem = listRef.value.querySelector('[data-active="true"], [data-highlight]');
@@ -1451,7 +1839,7 @@ var MentionList = (0, import_vue19.defineComponent)({
         }
       });
     }, "scrollToFocusedItem");
-    (0, import_vue19.watch)(() => props.items, () => {
+    (0, import_vue21.watch)(() => props.items, () => {
       selectedIndex.value = 0;
     });
     const onSelect = /* @__PURE__ */ __name((index) => {
@@ -1492,20 +1880,20 @@ var MentionList = (0, import_vue19.defineComponent)({
     expose({
       onKeyDown
     });
-    return () => (0, import_vue18.createVNode)(import_pixel3_popover3.MpPopover, {
+    return () => (0, import_vue20.createVNode)(import_pixel3_popover4.MpPopover, {
       "id": "popover-rte-mention-list",
       "is-manual": true,
       "is-default-open": true,
       "is-open": true
     }, {
-      default: () => [(0, import_vue18.createVNode)(import_pixel3_popover3.MpPopoverContent, {
-        "class": (0, import_css6.css)({
+      default: () => [(0, import_vue20.createVNode)(import_pixel3_popover4.MpPopoverContent, {
+        "class": (0, import_css7.css)({
           width: "280px",
           maxHeight: "284px",
           overflowY: "auto"
         })
       }, {
-        default: () => [(0, import_vue18.createVNode)(import_pixel3_popover3.MpPopoverList, {
+        default: () => [(0, import_vue20.createVNode)(import_pixel3_popover4.MpPopoverList, {
           "ref": (element) => {
             var _a;
             if (!element) {
@@ -1516,16 +1904,16 @@ var MentionList = (0, import_vue19.defineComponent)({
           },
           "data-pixel-rte": true
         }, {
-          default: () => [!props.items.length && (0, import_vue18.createVNode)(import_pixel3_text2.MpText, {
+          default: () => [!props.items.length && (0, import_vue20.createVNode)(import_pixel3_text3.MpText, {
             "color": "text.secondary",
-            "class": (0, import_css6.css)({
+            "class": (0, import_css7.css)({
               px: "3",
               py: "2"
             })
           }, {
-            default: () => [(0, import_vue18.createTextVNode)("No result")]
+            default: () => [(0, import_vue20.createTextVNode)("No result")]
           }), props.items.map((item, index) => {
-            return (0, import_vue18.createVNode)(import_pixel3_popover3.MpPopoverListItem, {
+            return (0, import_vue20.createVNode)(import_pixel3_popover4.MpPopoverListItem, {
               "key": `${item.id}-${index}`,
               "is-active": selectedIndex.value === index,
               "onMousedown": (event) => event.preventDefault(),
@@ -1536,33 +1924,33 @@ var MentionList = (0, import_vue19.defineComponent)({
                 onSelect(index);
               }
             }, {
-              default: () => [(0, import_vue18.createVNode)("div", {
-                "class": (0, import_css6.css)({
+              default: () => [(0, import_vue20.createVNode)("div", {
+                "class": (0, import_css7.css)({
                   display: "flex",
                   alignItems: "center",
                   gap: "2",
                   width: "full",
                   minWidth: "0"
                 })
-              }, [item.avatar && (0, import_vue18.createVNode)(import_pixel3_avatar.MpAvatar, {
+              }, [item.avatar && (0, import_vue20.createVNode)(import_pixel3_avatar.MpAvatar, {
                 "id": `avatar-rte-mention-${index}`,
                 "name": item.avatar,
                 "size": "lg",
                 "variant-color": getAvatarVariantColor(index)
-              }, null), (0, import_vue18.createVNode)("div", {
-                "class": (0, import_css6.css)({
+              }, null), (0, import_vue20.createVNode)("div", {
+                "class": (0, import_css7.css)({
                   display: "flex",
                   flexDirection: "column",
                   alignItems: "flex-start",
                   minWidth: "0",
                   flex: "1 1 0%"
                 })
-              }, [(0, import_vue18.createVNode)(import_pixel3_text2.MpText, {
+              }, [(0, import_vue20.createVNode)(import_pixel3_text3.MpText, {
                 "size": "label",
                 "is-truncated": true
               }, {
                 default: () => [item.name || "Unknown"]
-              }), item.description && (0, import_vue18.createVNode)(import_pixel3_text2.MpText, {
+              }), item.description && (0, import_vue20.createVNode)(import_pixel3_text3.MpText, {
                 "size": "label-small",
                 "color": "text.secondary",
                 "is-truncated": true
@@ -1669,7 +2057,7 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
           return;
         }
         if (!popperInstance) {
-          popperInstance = (0, import_core2.createPopper)(virtualElement, popoverWrapper, {
+          popperInstance = (0, import_core3.createPopper)(virtualElement, popoverWrapper, {
             placement: "bottom-start",
             modifiers: [{
               name: "offset",
@@ -1733,8 +2121,199 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
   };
 }, "createMentionSuggestion");
 
+// src/rte-variable-suggestion.ts
+var import_vue_32 = require("@tiptap/vue-3");
+var import_core4 = require("@popperjs/core");
+var import_state = require("@tiptap/pm/state");
+var VariablePluginKey = new import_state.PluginKey("variable");
+var MAX_SUGGESTION_ITEMS2 = 50;
+var getFilteredSuggestionItems2 = /* @__PURE__ */ __name((items, query) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  return items.filter((item) => {
+    var _a, _b;
+    if (!normalizedQuery) {
+      return true;
+    }
+    const id = item.id.toLowerCase();
+    const name = ((_a = item.name) != null ? _a : "").toLowerCase();
+    const category = ((_b = item.category) != null ? _b : "").toLowerCase();
+    return id.includes(normalizedQuery) || name.includes(normalizedQuery) || category.includes(normalizedQuery);
+  }).slice(0, MAX_SUGGESTION_ITEMS2);
+}, "getFilteredSuggestionItems");
+var createVariableSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () => []) => {
+  return {
+    char: "{",
+    pluginKey: VariablePluginKey,
+    command: ({
+      editor,
+      range,
+      props
+    }) => {
+      var _a, _b;
+      const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+      const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
+      if (overrideSpace) {
+        range.to += 1;
+      }
+      editor.chain().focus().insertContentAt(range, [{
+        type: "variable",
+        attrs: props
+      }, {
+        type: "text",
+        text: " "
+      }]).run();
+      (_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
+    },
+    allow: ({
+      state,
+      range
+    }) => {
+      const $from = state.doc.resolve(range.from);
+      const type = state.schema.nodes["variable"];
+      const allow = !!$from.parent.type.contentMatch.matchType(type);
+      return allow;
+    },
+    items: ({
+      query
+    }) => {
+      return getFilteredSuggestionItems2(getSuggestionItems(), query);
+    },
+    render: () => {
+      let component = null;
+      let popperInstance = null;
+      let popoverWrapper = null;
+      let clientRectProvider;
+      let editorElement = null;
+      let removeOutsideListeners = null;
+      const destroyVariablePopover = /* @__PURE__ */ __name(() => {
+        removeOutsideListeners == null ? void 0 : removeOutsideListeners();
+        removeOutsideListeners = null;
+        popperInstance == null ? void 0 : popperInstance.destroy();
+        popperInstance = null;
+        popoverWrapper == null ? void 0 : popoverWrapper.remove();
+        popoverWrapper = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
+      }, "destroyVariablePopover");
+      const isWithinVariableContext = /* @__PURE__ */ __name((target) => {
+        if (!(target instanceof Node)) {
+          return false;
+        }
+        return Boolean((editorElement == null ? void 0 : editorElement.contains(target)) || (popoverWrapper == null ? void 0 : popoverWrapper.contains(target)));
+      }, "isWithinVariableContext");
+      const setupOutsideListeners = /* @__PURE__ */ __name(() => {
+        if (!editorElement || removeOutsideListeners) {
+          return;
+        }
+        const handleDocumentFocusIn = /* @__PURE__ */ __name((event) => {
+          if (!isWithinVariableContext(event.target)) {
+            destroyVariablePopover();
+          }
+        }, "handleDocumentFocusIn");
+        const handleDocumentPointerDown = /* @__PURE__ */ __name((event) => {
+          if (!isWithinVariableContext(event.target)) {
+            destroyVariablePopover();
+          }
+        }, "handleDocumentPointerDown");
+        const handleEditorFocusOut = /* @__PURE__ */ __name((event) => {
+          if (!isWithinVariableContext(event.relatedTarget)) {
+            destroyVariablePopover();
+          }
+        }, "handleEditorFocusOut");
+        document.addEventListener("focusin", handleDocumentFocusIn);
+        document.addEventListener("mousedown", handleDocumentPointerDown, true);
+        document.addEventListener("touchstart", handleDocumentPointerDown, true);
+        editorElement.addEventListener("focusout", handleEditorFocusOut);
+        removeOutsideListeners = /* @__PURE__ */ __name(() => {
+          document.removeEventListener("focusin", handleDocumentFocusIn);
+          document.removeEventListener("mousedown", handleDocumentPointerDown, true);
+          document.removeEventListener("touchstart", handleDocumentPointerDown, true);
+          editorElement == null ? void 0 : editorElement.removeEventListener("focusout", handleEditorFocusOut);
+        }, "removeOutsideListeners");
+      }, "setupOutsideListeners");
+      const getVirtualElement = /* @__PURE__ */ __name(() => {
+        if (!clientRectProvider) {
+          return null;
+        }
+        return {
+          getBoundingClientRect: () => {
+            var _a;
+            return (_a = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a : new DOMRect();
+          }
+        };
+      }, "getVirtualElement");
+      const updatePopoverPosition = /* @__PURE__ */ __name(() => {
+        const virtualElement = getVirtualElement();
+        if (!virtualElement || !popoverWrapper) {
+          return;
+        }
+        if (!popperInstance) {
+          popperInstance = (0, import_core4.createPopper)(virtualElement, popoverWrapper, {
+            placement: "bottom-start",
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 8]
+              }
+            }, {
+              name: "flip",
+              options: {
+                fallbackPlacements: ["top-start"]
+              }
+            }]
+          });
+          return;
+        }
+        popperInstance.update();
+      }, "updatePopoverPosition");
+      return {
+        onStart: (props) => {
+          clientRectProvider = props.clientRect;
+          editorElement = props.editor.view.dom;
+          component = new import_vue_32.VueRenderer(VariableList, {
+            editor: props.editor,
+            props: {
+              items: props.items,
+              command: props.command
+            }
+          });
+          popoverWrapper = document.createElement("div");
+          popoverWrapper.style.position = "absolute";
+          popoverWrapper.style.zIndex = "var(--mp-z-index-popover)";
+          if (component.element) {
+            popoverWrapper.append(component.element);
+          }
+          document.body.append(popoverWrapper);
+          setupOutsideListeners();
+          updatePopoverPosition();
+        },
+        onUpdate: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            items: props.items,
+            command: props.command
+          });
+          updatePopoverPosition();
+        },
+        onKeyDown: (props) => {
+          var _a, _b;
+          if (props.event.key === "Escape") {
+            destroyVariablePopover();
+            return true;
+          }
+          return (_b = (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) != null ? _b : false;
+        },
+        onExit: () => {
+          destroyVariablePopover();
+          editorElement = null;
+        }
+      };
+    }
+  };
+}, "createVariableSuggestion");
+
 // src/rich-text-editor.tsx
-var MpRichTextEditor = (0, import_vue21.defineComponent)({
+var MpRichTextEditor = (0, import_vue23.defineComponent)({
   name: "MpRichTextEditor",
   props: richTextEditorProps,
   emits: richTextEditorEmits,
@@ -1743,11 +2322,11 @@ var MpRichTextEditor = (0, import_vue21.defineComponent)({
   }) {
     const formControlProp = (0, import_pixel3_form_control.useFormControlContext)();
     const api = useRichTextEditor(props);
-    const isFocused = (0, import_vue21.ref)(false);
+    const isFocused = (0, import_vue23.ref)(false);
     const {
       isNextTheme
     } = (0, import_pixel3_utils4.usePixelTheme)();
-    const editor = new import_vue_32.Editor({
+    const editor = new import_vue_33.Editor({
       content: api.value.value,
       editable: (formControlProp == null ? void 0 : formControlProp.value.isDisabled) === void 0 ? !api.value.isDisabled : !(formControlProp == null ? void 0 : formControlProp.value.isDisabled),
       editorProps: {
@@ -1788,6 +2367,9 @@ var MpRichTextEditor = (0, import_vue21.defineComponent)({
         }),
         ...props.suggestions && props.suggestions.length > 0 ? [import_extension_mention.default.configure({
           suggestion: createMentionSuggestion(() => props.suggestions || [])
+        })] : [],
+        ...props.variables && props.variables.length > 0 ? [Variable.configure({
+          suggestion: createVariableSuggestion(() => props.variables || [])
         })] : []
       ],
       onFocus({
@@ -1818,25 +2400,26 @@ var MpRichTextEditor = (0, import_vue21.defineComponent)({
       onClickFile: () => onClickToolbar("file"),
       onClickAudio: () => onClickToolbar("audio"),
       onClickMention: () => onClickToolbar("mention"),
+      onClickVariable: () => onClickToolbar("variable"),
       onClickLocation: () => onClickToolbar("location")
     };
     return () => {
-      return (0, import_vue20.createVNode)("div", (0, import_vue20.mergeProps)(api.value.rootProps, {
+      return (0, import_vue22.createVNode)("div", (0, import_vue22.mergeProps)(api.value.rootProps, {
         "style": {
           "--mp-rich-text-editor--border-color-hover": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? isNextTheme.value ? import_tokens.token.var("colors.border.danger") : import_tokens.token.var("colors.red.400") : isFocused.value ? isNextTheme.value ? import_tokens.token.var("colors.border.focused") : import_tokens.token.var("colors.blue.400") : isNextTheme.value ? import_tokens.token.var("colors.border.form") : import_tokens.token.var("colors.gray.400"),
           "--mp-rich-text-editor--border-color": (formControlProp == null ? void 0 : formControlProp.value.isInvalid) || api.value.isInvalid ? isNextTheme.value ? import_tokens.token.var("colors.border.danger") : import_tokens.token.var("colors.red.400") : isFocused.value ? isNextTheme.value ? import_tokens.token.var("colors.border.focused") : import_tokens.token.var("colors.blue.400") : isNextTheme.value ? import_tokens.token.var("colors.border.form") : import_tokens.token.var("colors.gray.100"),
           "--mp-rich-text-editor--box-shadow": isFocused.value ? isNextTheme.value ? import_tokens.token.var("shadows.focus") : import_tokens.token.var("shadows.outer") : void 0,
           "--mp-rich-text-editor--background-color": (formControlProp == null ? void 0 : formControlProp.value.isDisabled) || api.value.isDisabled ? isNextTheme.value ? import_tokens.token.var("colors.background.disabled") : import_tokens.token.var("colors.gray.50") : isNextTheme.value ? import_tokens.token.var("colors.background.neutral") : import_tokens.token.var("colors.white")
         }
-      }), [(0, import_vue20.createVNode)(EditorToolbar, (0, import_vue20.mergeProps)({
+      }), [(0, import_vue22.createVNode)(EditorToolbar, (0, import_vue22.mergeProps)({
         "editor": editor,
         "options": api.value.options,
         "validateLink": props.validateLink,
         "transformLink": props.transformLink
-      }, api.value.toolbarProps, toolbarActionHandlers), null), (0, import_vue20.createVNode)(MpRTEStyleProvider, {
+      }, api.value.toolbarProps, toolbarActionHandlers), null), (0, import_vue22.createVNode)(MpRTEStyleProvider, {
         "id": `${api.value.id}-style-provider`
       }, {
-        default: () => [(0, import_vue20.createVNode)(import_vue_32.EditorContent, (0, import_vue20.mergeProps)({
+        default: () => [(0, import_vue22.createVNode)(import_vue_33.EditorContent, (0, import_vue22.mergeProps)({
           "editor": editor
         }, api.value.areaProps), null)]
       })]);