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

package/dist/{chunk-XNM3YX37.mjs → chunk-ZYSEHV5N.mjs}

@@ -1,19 +1,25 @@
 import {
   EditorToolbar
-} from "./chunk-YE6FEVD4.mjs";
+} from "./chunk-UD5PDCGC.mjs";
+import {
+  Variable
+} from "./chunk-ENKUUZPM.mjs";
 import {
   MpRTEStyleProvider
-} from "./chunk-MKTM47RO.mjs";
+} from "./chunk-AIWY3FHJ.mjs";
 import {
   useRichTextEditor
 } from "./chunk-ZRAXSVO5.mjs";
 import {
   richTextEditorEmits,
   richTextEditorProps
-} from "./chunk-7BEXEMOE.mjs";
+} from "./chunk-6O4HSL2C.mjs";
 import {
   createMentionSuggestion
 } from "./chunk-4KJOYLJI.mjs";
+import {
+  createVariableSuggestion
+} from "./chunk-BWRU2WZN.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -89,6 +95,9 @@ var MpRichTextEditor = defineComponent({
         }),
         ...props.suggestions && props.suggestions.length > 0 ? [Mention.configure({
           suggestion: createMentionSuggestion(() => props.suggestions || [])
+        })] : [],
+        ...props.variables && props.variables.length > 0 ? [Variable.configure({
+          suggestion: createVariableSuggestion(() => props.variables || [])
         })] : []
       ],
       onFocus({
@@ -119,6 +128,7 @@ var MpRichTextEditor = defineComponent({
       onClickFile: () => onClickToolbar("file"),
       onClickAudio: () => onClickToolbar("audio"),
       onClickMention: () => onClickToolbar("mention"),
+      onClickVariable: () => onClickToolbar("variable"),
       onClickLocation: () => onClickToolbar("location")
     };
     return () => {

package/dist/editor-toolbar.d.mts

@@ -21,7 +21,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     transformLink: {
         type: PropType<(url: string) => string>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
     };
@@ -42,6 +42,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     onClickFile?: ((...args: any[]) => any) | undefined;
     onClickAudio?: ((...args: any[]) => any) | undefined;
     onClickMention?: ((...args: any[]) => any) | undefined;
+    onClickVariable?: ((...args: any[]) => any) | undefined;
     onClickLocation?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 

package/dist/editor-toolbar.d.ts

@@ -21,7 +21,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     transformLink: {
         type: PropType<(url: string) => string>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
     };
@@ -42,6 +42,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     onClickFile?: ((...args: any[]) => any) | undefined;
     onClickAudio?: ((...args: any[]) => any) | undefined;
     onClickMention?: ((...args: any[]) => any) | undefined;
+    onClickVariable?: ((...args: any[]) => any) | undefined;
     onClickLocation?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 

package/dist/editor-toolbar.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/editor-toolbar.tsx
@@ -24,9 +34,9 @@ __export(editor_toolbar_exports, {
   EditorToolbar: () => EditorToolbar
 });
 module.exports = __toCommonJS(editor_toolbar_exports);
-var import_vue13 = require("vue");
-var import_vue14 = require("vue");
-var import_css5 = require("@mekari/pixel3-styled-system/css");
+var import_vue15 = require("vue");
+var import_vue16 = 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");
 
@@ -446,6 +456,33 @@ var LocationIcon = (0, import_vue2.defineComponent)({
     }, null)]);
   }
 });
+var VariableIcon = (0, import_vue2.defineComponent)({
+  name: "VariableIcon",
+  setup() {
+    return () => (0, import_vue.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_vue.createVNode)("path", {
+      "d": "M15 6L21 12L15 18",
+      "stroke": "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null), (0, import_vue.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_vue4.defineComponent)({
@@ -710,6 +747,7 @@ var SingleExtention = (0, import_vue8.defineComponent)({
       file: (0, import_vue7.createVNode)(FileIcon, null, null),
       audio: (0, import_vue7.createVNode)(AudioIcon, null, null),
       mention: (0, import_vue7.createVNode)(MentionIcon, null, null),
+      variable: (0, import_vue7.createVNode)(VariableIcon, null, null),
       location: (0, import_vue7.createVNode)(LocationIcon, null, null)
     };
     return () => (0, import_vue7.withDirectives)((0, import_vue7.createVNode)("button", {
@@ -1036,10 +1074,313 @@ var LinkExtension = (0, import_vue12.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_vue13 = require("vue");
+var import_vue14 = 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_vue14.defineComponent)({
+  name: "VariableList",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    command: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    const selectedIndex = (0, import_vue14.ref)(0);
+    const listRef = (0, import_vue14.ref)(null);
+    const groupedItems = (0, import_vue14.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_vue14.nextTick)(() => {
+        if (!listRef.value)
+          return;
+        const targetItem = listRef.value.querySelector('[data-active="true"], [data-highlight]');
+        if (targetItem) {
+          targetItem.scrollIntoView({
+            block: "nearest"
+          });
+        }
+      });
+    }, "scrollToFocusedItem");
+    (0, import_vue14.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_vue13.createVNode)(import_pixel3_popover3.MpPopover, {
+      "id": "popover-rte-variable-list",
+      "is-manual": true,
+      "is-default-open": true,
+      "is-open": true
+    }, {
+      default: () => [(0, import_vue13.createVNode)(import_pixel3_popover3.MpPopoverContent, {
+        "class": (0, import_css5.css)({
+          width: "280px",
+          maxHeight: "284px",
+          overflowY: "auto"
+        })
+      }, {
+        default: () => [(0, import_vue13.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_vue13.createVNode)(import_pixel3_text2.MpText, {
+            "color": "text.secondary",
+            "class": (0, import_css5.css)({
+              px: "3",
+              py: "2"
+            })
+          }, {
+            default: () => [(0, import_vue13.createTextVNode)("No result")]
+          }), groupedItems.value.map((group) => {
+            return (0, import_vue13.createVNode)(import_vue13.Fragment, null, [(0, import_vue13.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_vue13.createVNode)(import_pixel3_popover3.MpPopoverListItem, {
+                "key": `${item.id}-${itemIndex}`,
+                "onMousedown": (event) => event.preventDefault(),
+                "onMouseenter": () => {
+                  selectedIndex.value = itemIndex;
+                },
+                "onClick": () => {
+                  onSelect(itemIndex);
+                }
+              }, {
+                default: () => [(0, import_vue13.createVNode)("div", {
+                  "class": (0, import_css5.css)({
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    minWidth: "0",
+                    width: "full",
+                    gap: "0.5"
+                  })
+                }, [(0, import_vue13.createVNode)(import_pixel3_text2.MpText, {
+                  "size": "label",
+                  "is-truncated": true
+                }, {
+                  default: () => [item.name || "Unknown"]
+                }), (0, import_vue13.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_vue14.defineComponent)({
+var EditorToolbar = (0, import_vue16.defineComponent)({
   name: "EditorToolbar",
-  emits: ["clickImage", "clickFile", "clickAudio", "clickMention", "clickLocation"],
+  emits: ["clickImage", "clickFile", "clickAudio", "clickMention", "clickVariable", "clickLocation"],
   props: {
     editor: {
       type: Object
@@ -1062,7 +1403,7 @@ var EditorToolbar = (0, import_vue14.defineComponent)({
   }, {
     emit
   }) {
-    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention", "location"];
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention", "variable", "location"];
     const itemOptions = {
       heading: {
         tooltipLabel: "Text style",
@@ -1147,6 +1488,15 @@ var EditorToolbar = (0, import_vue14.defineComponent)({
           emit("clickMention");
         }
       },
+      variable: {
+        tooltipLabel: "Insert variable",
+        editor,
+        onClick: () => {
+          ;
+          (editor == null ? void 0 : editor.chain()).focus().insertContent("{").run();
+          emit("clickVariable");
+        }
+      },
       location: {
         tooltipLabel: "Add location",
         onClick: () => emit("clickLocation")
@@ -1177,31 +1527,31 @@ var EditorToolbar = (0, import_vue14.defineComponent)({
       const tooltipLabel = tooltip || resolvedOptions.tooltipLabel;
       switch (resolvedItem) {
         case "heading":
-          return (0, import_vue13.createVNode)(HeadingExtention, {
+          return (0, import_vue15.createVNode)(HeadingExtention, {
             "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         case "align":
-          return (0, import_vue13.createVNode)(AlignExtention, {
+          return (0, import_vue15.createVNode)(AlignExtention, {
             "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         case "textColor":
         case "fillColor":
-          return (0, import_vue13.createVNode)(ColorExtension, {
+          return (0, import_vue15.createVNode)(ColorExtension, {
             "tooltipLabel": tooltipLabel,
             "editor": editor,
             "type": resolvedOptions.type
           }, null);
         case "textLink":
-          return (0, import_vue13.createVNode)(LinkExtension, {
+          return (0, import_vue15.createVNode)(LinkExtension, {
             "tooltipLabel": tooltipLabel,
             "editor": editor,
             "validateLink": validateLink,
             "transformLink": transformLink
           }, null);
         default:
-          return (0, import_vue13.createVNode)(SingleExtention, {
+          return (0, import_vue15.createVNode)(SingleExtention, {
             "name": resolvedItem,
             "tooltipLabel": tooltipLabel,
             "onClick": resolvedOptions.onClick,
@@ -1209,7 +1559,7 @@ var EditorToolbar = (0, import_vue14.defineComponent)({
           }, null);
       }
     }, "renderExtension");
-    return () => (0, import_vue13.createVNode)(import_pixel3_scrollbar.MpScrollbar, {
+    return () => (0, import_vue15.createVNode)(import_pixel3_scrollbar.MpScrollbar, {
       "options": {
         overflow: {
           y: "hide",
@@ -1217,18 +1567,18 @@ var EditorToolbar = (0, import_vue14.defineComponent)({
         }
       }
     }, {
-      default: () => [(0, import_vue13.createVNode)("div", {
-        "class": (0, import_css5.css)({
+      default: () => [(0, import_vue15.createVNode)("div", {
+        "class": (0, import_css6.css)({
           display: "flex",
           alignItems: "stretch",
           gap: "1"
         })
-      }, [options == null ? void 0 : options.map((option, index) => (0, import_vue13.createVNode)(import_vue13.Fragment, null, [option.map((item) => {
+      }, [options == null ? void 0 : options.map((option, index) => (0, import_vue15.createVNode)(import_vue15.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_vue13.createVNode)(import_pixel3_divider.MpDivider, {
+      }), index !== (options == null ? void 0 : options.length) - 1 && (0, import_vue15.createVNode)(import_pixel3_divider.MpDivider, {
         "id": "divider-toolbar",
         "orientation": "vertical"
       }, null)]))])]

package/dist/editor-toolbar.mjs

@@ -1,13 +1,15 @@
 import {
   EditorToolbar
-} from "./chunk-YE6FEVD4.mjs";
-import "./chunk-VYCDVS5I.mjs";
-import "./chunk-ZO6THAT6.mjs";
-import "./chunk-25RKPG44.mjs";
-import "./chunk-UBJOZ2IA.mjs";
-import "./chunk-5S2LSGJV.mjs";
-import "./chunk-YIEQVTEO.mjs";
-import "./chunk-Q7QLZISF.mjs";
+} from "./chunk-UD5PDCGC.mjs";
+import "./chunk-HIHIKPNN.mjs";
+import "./chunk-X2CB42A3.mjs";
+import "./chunk-COZ45QUD.mjs";
+import "./chunk-47IOAHWN.mjs";
+import "./chunk-ENKUUZPM.mjs";
+import "./chunk-76GEEOAG.mjs";
+import "./chunk-YWVVMJGP.mjs";
+import "./chunk-Y6UPQ6EU.mjs";
+import "./chunk-IFRJVX2K.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   EditorToolbar

package/dist/extensions/align-extension.js

@@ -438,6 +438,33 @@ var LocationIcon = (0, import_vue2.defineComponent)({
     }, null)]);
   }
 });
+var VariableIcon = (0, import_vue2.defineComponent)({
+  name: "VariableIcon",
+  setup() {
+    return () => (0, import_vue.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_vue.createVNode)("path", {
+      "d": "M15 6L21 12L15 18",
+      "stroke": "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null), (0, import_vue.createVNode)("path", {
+      "d": "M9 6L3 12L9 18",
+      "stroke": "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
 
 // src/extensions/align-extension.tsx
 var AlignExtention = (0, import_vue4.defineComponent)({

package/dist/extensions/align-extension.mjs

@@ -1,7 +1,7 @@
 import {
   AlignExtention
-} from "../chunk-UBJOZ2IA.mjs";
-import "../chunk-Q7QLZISF.mjs";
+} from "../chunk-YWVVMJGP.mjs";
+import "../chunk-IFRJVX2K.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   AlignExtention

package/dist/extensions/color-extension.js

@@ -436,6 +436,33 @@ var LocationIcon = (0, import_vue2.defineComponent)({
     }, null)]);
   }
 });
+var VariableIcon = (0, import_vue2.defineComponent)({
+  name: "VariableIcon",
+  setup() {
+    return () => (0, import_vue.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_vue.createVNode)("path", {
+      "d": "M15 6L21 12L15 18",
+      "stroke": "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null), (0, import_vue.createVNode)("path", {
+      "d": "M9 6L3 12L9 18",
+      "stroke": "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null)]);
+  }
+});
 
 // src/extensions/color-extension.tsx
 var import_pixel3_color_picker = require("@mekari/pixel3-color-picker");

package/dist/extensions/color-extension.mjs

@@ -1,7 +1,7 @@
 import {
   ColorExtension
-} from "../chunk-5S2LSGJV.mjs";
-import "../chunk-Q7QLZISF.mjs";
+} from "../chunk-Y6UPQ6EU.mjs";
+import "../chunk-IFRJVX2K.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   ColorExtension