jaml-ui 0.23.0 → 0.24.0

package/dist/components/JamlCodeEditor.d.ts

@@ -4,4 +4,4 @@ export interface JamlCodeEditorProps {
     placeholder?: string;
     minHeight?: number;
 }
-export declare function JamlCodeEditor({ value, onChange, minHeight, }: JamlCodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function JamlCodeEditor({ value, onChange, placeholder, minHeight, }: JamlCodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/JamlCodeEditor.js

@@ -1,102 +1,131 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import Editor from "@monaco-editor/react";
+import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection, placeholder as cmPlaceholder } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { yaml } from "@codemirror/lang-yaml";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { syntaxHighlighting, HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
 import { JimboColorOption } from "../ui/tokens.js";
-// Monaco needs hex strings for its colors API. We strip the leading `#` from
-// JimboColor tokens where Monaco expects raw hex for syntax rules (token
-// foreground), and pass the full `#...` form for UI colors. Alpha suffix
-// (e.g. WHITE + "20") is valid for Monaco colors but not for rules.
-const hex = (token) => token.replace(/^#/, "");
-const defineBalatroTheme = (monaco) => {
-    monaco.editor.defineTheme("jaml-balatro-dark", {
-        base: "vs-dark",
-        inherit: true,
-        rules: [
-            { token: "comment", foreground: hex(JimboColorOption.GREY), fontStyle: "italic" },
-            { token: "keyword", foreground: hex(JimboColorOption.RED) },
-            { token: "string", foreground: hex(JimboColorOption.GOLD_TEXT) },
-            { token: "number", foreground: hex(JimboColorOption.BLUE) },
-            { token: "type", foreground: hex(JimboColorOption.GREEN_TEXT) },
-        ],
-        colors: {
-            "editor.background": JimboColorOption.DARKEST,
-            "editor.foreground": JimboColorOption.WHITE,
-            "editorLineNumber.foreground": JimboColorOption.GREY,
-            "editorLineNumber.activeForeground": JimboColorOption.GOLD_TEXT,
-            "editor.selectionBackground": `${JimboColorOption.WHITE}20`,
-            "editor.inactiveSelectionBackground": `${JimboColorOption.WHITE}10`,
-            "editor.lineHighlightBackground": `${JimboColorOption.BLACK}20`,
-            "editorCursor.foreground": JimboColorOption.GOLD_TEXT,
-            "editorWidget.background": JimboColorOption.DARK_GREY,
-            "editorWidget.border": `${JimboColorOption.WHITE}20`,
-            "editorWidget.foreground": JimboColorOption.WHITE,
-            "list.activeSelectionBackground": JimboColorOption.GOLD,
-            "list.activeSelectionForeground": JimboColorOption.DARKEST,
-            "list.hoverBackground": JimboColorOption.PANEL_EDGE,
-            "list.hoverForeground": JimboColorOption.WHITE,
-            "list.focusBackground": JimboColorOption.GOLD,
-            "list.focusForeground": JimboColorOption.DARKEST,
-        },
-    });
-};
-export function JamlCodeEditor({ value, onChange, minHeight = 320, }) {
-    const editorRef = useRef(null);
-    const monacoRef = useRef(null);
-    // Suppress our onChange while we're applying a programmatic edit, so the
-    // streamed parent value doesn't loop back through onChange and bounce.
+const balatroHighlight = HighlightStyle.define([
+    { tag: tags.comment, color: JimboColorOption.GREY, fontStyle: "italic" },
+    { tag: tags.keyword, color: JimboColorOption.RED },
+    { tag: tags.string, color: JimboColorOption.GOLD_TEXT },
+    { tag: tags.number, color: JimboColorOption.BLUE },
+    { tag: tags.bool, color: JimboColorOption.BLUE },
+    { tag: tags.null, color: JimboColorOption.GREY },
+    { tag: tags.propertyName, color: JimboColorOption.GREEN_TEXT },
+    { tag: tags.typeName, color: JimboColorOption.GREEN_TEXT },
+]);
+const balatroTheme = EditorView.theme({
+    "&": {
+        backgroundColor: JimboColorOption.DARKEST,
+        color: JimboColorOption.WHITE,
+        fontSize: "13px",
+        height: "100%",
+    },
+    ".cm-content": {
+        fontFamily: "'m6x11mono', 'm6x11plus', ui-monospace, monospace",
+        lineHeight: "22px",
+        padding: "12px 0",
+        caretColor: JimboColorOption.GOLD_TEXT,
+        minHeight: "100%",
+    },
+    ".cm-gutters": {
+        backgroundColor: JimboColorOption.DARKEST,
+        color: JimboColorOption.GREY,
+        border: "none",
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+        minWidth: "2ch",
+        padding: "0 6px 0 8px",
+    },
+    ".cm-activeLineGutter": {
+        color: JimboColorOption.GOLD_TEXT,
+        backgroundColor: "transparent",
+    },
+    ".cm-activeLine": {
+        backgroundColor: `${JimboColorOption.BLACK}20`,
+    },
+    ".cm-selectionBackground": {
+        backgroundColor: `${JimboColorOption.WHITE}20 !important`,
+    },
+    "&.cm-focused .cm-selectionBackground": {
+        backgroundColor: `${JimboColorOption.WHITE}20`,
+    },
+    ".cm-cursor, .cm-dropCursor": {
+        borderLeftColor: JimboColorOption.GOLD_TEXT,
+    },
+    ".cm-scroller": {
+        overflow: "auto",
+    },
+    ".cm-placeholder": {
+        color: JimboColorOption.GREY,
+        fontStyle: "italic",
+    },
+}, { dark: true });
+export function JamlCodeEditor({ value, onChange, placeholder = "", minHeight = 320, }) {
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
     const suppressEmitRef = useRef(false);
-    // Capture initial value for the uncontrolled editor mount; subsequent
-    // updates flow through the useEffect below.
-    const initialValueRef = useRef(value);
-    // Track value across renders so we can apply only the streamed delta when
-    // the new value is a strict suffix-extension of what's already in the model.
     const lastSyncedValueRef = useRef(value);
-    const handleMount = (editor, m) => {
-        editorRef.current = editor;
-        monacoRef.current = m;
-    };
+    const onChangeRef = useRef(onChange);
+    useEffect(() => { onChangeRef.current = onChange; });
     useEffect(() => {
-        const editor = editorRef.current;
-        const m = monacoRef.current;
-        if (!editor || !m)
+        if (!containerRef.current)
             return;
-        const model = editor.getModel();
-        if (!model)
+        const view = new EditorView({
+            state: EditorState.create({
+                doc: lastSyncedValueRef.current,
+                extensions: [
+                    history(),
+                    lineNumbers(),
+                    highlightActiveLine(),
+                    drawSelection(),
+                    yaml(),
+                    syntaxHighlighting(balatroHighlight),
+                    balatroTheme,
+                    EditorView.lineWrapping,
+                    keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
+                    ...(placeholder ? [cmPlaceholder(placeholder)] : []),
+                    EditorView.updateListener.of((update) => {
+                        if (update.docChanged && !suppressEmitRef.current) {
+                            onChangeRef.current(update.state.doc.toString());
+                        }
+                    }),
+                ],
+            }),
+            parent: containerRef.current,
+        });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
             return;
-        const current = editor.getValue();
+        const current = view.state.doc.toString();
         if (current === value) {
             lastSyncedValueRef.current = value;
             return;
         }
         suppressEmitRef.current = true;
         try {
-            // Streaming-friendly path: when the new value just appends to what
-            // Monaco already has, push an insert at end-of-document. Monaco
-            // re-tokenizes only from the insertion point — no full-doc churn,
-            // no syntax-color strobe, no cursor reset.
+            // Streaming-friendly: append only the suffix when new value extends current.
             if (value.length > current.length && value.startsWith(current)) {
-                const suffix = value.slice(current.length);
-                const lastLine = model.getLineCount();
-                const lastCol = model.getLineMaxColumn(lastLine);
-                model.applyEdits([
-                    {
-                        range: new m.Range(lastLine, lastCol, lastLine, lastCol),
-                        text: suffix,
-                        forceMoveMarkers: false,
-                    },
-                ]);
+                view.dispatch({
+                    changes: { from: view.state.doc.length, insert: value.slice(current.length) },
+                });
             }
             else {
-                // Real replacement (paste from outside, parent rewrite, undo, etc.).
-                editor.executeEdits("", [
-                    {
-                        range: model.getFullModelRange(),
-                        text: value,
-                        forceMoveMarkers: true,
-                    },
-                ]);
-                editor.pushUndoStop();
+                view.dispatch({
+                    changes: { from: 0, to: view.state.doc.length, insert: value },
+                });
             }
         }
         finally {
@@ -104,35 +133,5 @@ export function JamlCodeEditor({ value, onChange, minHeight = 320, }) {
             lastSyncedValueRef.current = value;
         }
     }, [value]);
-    return (_jsxs("div", { style: { width: "100%", minHeight, background: JimboColorOption.DARKEST }, children: [_jsx("style", { children: `
-        .monaco-editor .iPadShowKeyboard,
-        .monaco-editor [class*="iPadShowKeyboard"] { display: none !important; }
-      ` }), _jsx(Editor, { height: `${minHeight}px`, defaultLanguage: "yaml", defaultValue: initialValueRef.current, theme: "jaml-balatro-dark", onChange: (next) => {
-                    if (suppressEmitRef.current)
-                        return;
-                    onChange(next ?? "");
-                }, onMount: handleMount, beforeMount: defineBalatroTheme, options: {
-                    minimap: { enabled: false },
-                    scrollBeyondLastLine: false,
-                    fontSize: 13,
-                    lineHeight: 22,
-                    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                    lineNumbers: "on",
-                    lineNumbersMinChars: 2,
-                    lineDecorationsWidth: 4,
-                    glyphMargin: false,
-                    folding: false,
-                    automaticLayout: true,
-                    padding: { top: 12, bottom: 12 },
-                    wordWrap: "on",
-                    formatOnPaste: true,
-                    formatOnType: true,
-                    renderLineHighlight: "line",
-                    scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
-                    // Mobile/chat-WebView UX: kill the context menu ("Change All Occurrences" etc. covering half
-                    // the file on long-press) and the accessibility-help keyboard widget that's just clutter when
-                    // the OS keyboard is already open.
-                    contextmenu: false,
-                    accessibilitySupport: "off",
-                } })] }));
+    return (_jsx("div", { ref: containerRef, style: { width: "100%", minHeight, background: JimboColorOption.DARKEST } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jaml-ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Balatro rendering components, sprite metadata, and optional Motely helpers for React apps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -71,11 +71,9 @@
   "author": "pifreak",
   "license": "MIT",
   "peerDependencies": {
-    "@monaco-editor/react": ">=4.0.0",
     "@react-spring/three": ">=9.0.0",
     "@react-three/drei": ">=9.0.0",
     "@react-three/fiber": ">=8.0.0",
-    "monaco-editor": ">=0.50.0",
     "motely-wasm": "^14.4.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
@@ -105,7 +103,6 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.1.2",
     "@google/design.md": "^0.1.1",
-    "@monaco-editor/react": "^4.7.0",
     "@react-spring/three": "^10.0.3",
     "@react-three/drei": ">=9.0.0",
     "@react-three/fiber": "^9.6.0",
@@ -124,7 +121,6 @@
     "clsx": "^2.1.1",
     "js-yaml": "^4.1.1",
     "lucide-react": "^1.14.0",
-    "monaco-editor": "^0.55.1",
     "motely-wasm": "^14.4.0",
     "playwright": "^1.59.1",
     "react": "^19.2.4",
@@ -139,7 +135,13 @@
     "zustand": "^5.0.0"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.41.1",
     "@json-render/core": "^0.18.0",
+    "@lezer/highlight": "^1.2.3",
     "@types/js-yaml": "^4.0.9"
   }
 }