@yurikilian/lex4 0.2.0 → 0.2.1

package/dist/lex4-editor.js

@@ -4352,6 +4352,36 @@ function astExtension() {
     }
   };
 }
+const EMPTY_CONTEXT = {
+  definitions: [],
+  refreshDefinitions: () => {
+  },
+  getDefinition: () => void 0
+};
+const VariableContext = createContext(EMPTY_CONTEXT);
+const VariableProvider = ({
+  initialDefinitions = [],
+  children
+}) => {
+  const [definitions, setDefinitions] = useState(initialDefinitions);
+  const refresh = useCallback((newDefinitions) => {
+    setDefinitions(newDefinitions);
+  }, []);
+  const getDefinition = useCallback(
+    (key) => {
+      return definitions.find((d) => d.key === key);
+    },
+    [definitions]
+  );
+  const value = useMemo(
+    () => ({ definitions, refreshDefinitions: refresh, getDefinition }),
+    [definitions, refresh, getDefinition]
+  );
+  return /* @__PURE__ */ jsx(VariableContext.Provider, { value, children });
+};
+function useVariables() {
+  return useContext(VariableContext);
+}
 class VariableNode extends DecoratorNode {
   constructor(variableKey, key) {
     super(key);
@@ -4411,17 +4441,23 @@ class VariableNode extends DecoratorNode {
   }
   // -- Rendering --
   decorate() {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "lex4-variable-chip inline-flex items-center rounded bg-white px-1.5 py-0.5\n                   text-xs font-medium text-blue-700 border border-blue-300 select-none\n                   cursor-default whitespace-nowrap mx-0.5",
-        "data-testid": `variable-chip-${this.__variableKey}`,
-        title: this.__variableKey,
-        children: `{{${this.__variableKey}}}`
-      }
-    );
+    return /* @__PURE__ */ jsx(VariableChip, { variableKey: this.__variableKey });
   }
 }
+function VariableChip({ variableKey }) {
+  var _a;
+  const { getDefinition } = useVariables();
+  const label = ((_a = getDefinition(variableKey)) == null ? void 0 : _a.label) ?? variableKey;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "lex4-variable-chip inline-flex items-center rounded-full border border-blue-300\n                 bg-white px-2 py-0.5 text-[11px] font-medium text-blue-700 select-none\n                 cursor-default whitespace-nowrap mx-0.5",
+      "data-testid": `variable-chip-${variableKey}`,
+      title: variableKey,
+      children: label
+    }
+  );
+}
 function $createVariableNode(variableKey) {
   return $applyNodeReplacement(new VariableNode(variableKey));
 }
@@ -4448,36 +4484,6 @@ const VariablePlugin = () => {
   }, [editor]);
   return null;
 };
-const EMPTY_CONTEXT = {
-  definitions: [],
-  refreshDefinitions: () => {
-  },
-  getDefinition: () => void 0
-};
-const VariableContext = createContext(EMPTY_CONTEXT);
-const VariableProvider = ({
-  initialDefinitions = [],
-  children
-}) => {
-  const [definitions, setDefinitions] = useState(initialDefinitions);
-  const refresh = useCallback((newDefinitions) => {
-    setDefinitions(newDefinitions);
-  }, []);
-  const getDefinition = useCallback(
-    (key) => {
-      return definitions.find((d) => d.key === key);
-    },
-    [definitions]
-  );
-  const value = useMemo(
-    () => ({ definitions, refreshDefinitions: refresh, getDefinition }),
-    [definitions, refresh, getDefinition]
-  );
-  return /* @__PURE__ */ jsx(VariableContext.Provider, { value, children });
-};
-function useVariables() {
-  return useContext(VariableContext);
-}
 const VariablePicker = ({ onInsert, disabled = false }) => {
   const { definitions } = useVariables();
   const [open, setOpen] = useState(false);