added grammar highlight for lilylet editor.

app.py

@@ -340,10 +340,15 @@ def build_head ():
 		os.path.join(vendor, 'verovio.bundle.js'),
 		os.path.join(vendor, 'musicWidgetsBrowser.umd.min.js'),
 		os.path.join(WEB_DIR, 'score-player.js'),
+		# our own CodeMirror 6 editor (CM + grammar-derived lilylet() highlighter) and
+		# the mount/bridge script that wires it to the hidden #ls-editor-state textbox.
+		os.path.join(vendor, 'lyl-editor.bundle.js'),
+		os.path.join(WEB_DIR, 'lyl-editor-mount.js'),
 	]
 	tags = ['<script>window.__LILYSCRIPT_SOUNDFONT_URL=%r;</script>'
 		% (_file_url(os.path.join(WEB_DIR, 'soundfont')) + '/')]
 	tags.append('<link rel="stylesheet" href="%s">' % _file_url(os.path.join(WEB_DIR, 'score-player.css')))
+	tags.append('<link rel="stylesheet" href="%s">' % _file_url(os.path.join(WEB_DIR, 'lyl-editor.css')))
 	for s in scripts:
 		tags.append('<script src="%s"></script>' % _file_url(s))
 	return '\n'.join(tags)
@@ -369,10 +374,9 @@ function () {
 '''
 
 # Render the editor text to SVG. The text is passed in by Gradio as the event's
-# input value — we must NOT scrape it from the DOM: gr.Code is a CodeMirror editor
-# that virtualises long documents (only the rows near the viewport exist in the
-# DOM), so `.cm-content`.innerText is truncated for long scores and the render
-# comes out incomplete. Taking the value as an argument gives the full text.
+# input value (the hidden #ls-editor-state textbox, kept in sync with the embedded
+# CodeMirror editor) — taking the value as an argument gives the full text directly,
+# no DOM scraping needed.
 _JS_RENDER = '''
 function (text) {
 	if (window.LilyScore) window.LilyScore.render(text || '');
@@ -507,8 +511,18 @@ def build_ui ():
 					with gr.Column(scale=5):
 						with gr.Group():
 							gr.Markdown('## Lilylet editor')
-							editor = gr.Code(show_label=False, language=None, lines=18,
-								max_lines=18, interactive=True, elem_id='ls-editor')
+							# Our own CodeMirror 6 editor (lyl-editor.bundle.js) mounts into
+							# this div and bridges to the hidden textbox below — Gradio's
+							# gr.Code can't be syntax-highlighted (its CM is sealed), so we
+							# embed our own with the grammar-derived lilylet() highlighter.
+							gr.HTML('<div id="ls-editor-mount" class="ls-editor-mount"></div>')
+							# Canonical editor text as Gradio state: generation/file-load write
+							# it, the SVG render reads it, and the embedded CM mirrors it both
+							# ways (see web/lyl-editor-mount.js). Hidden via CSS (NOT visible=False,
+							# which removes the element from the DOM so the bridge can't find its
+							# <textarea>); the .ls-editor-state-hidden rule sets display:none.
+							editor = gr.Textbox(elem_id='ls-editor-state',
+								elem_classes=['ls-editor-state-hidden'], show_label=False, container=False)
 
 			# ---------------- RIGHT ----------------
 			with gr.Column(scale=6):

web/lyl-editor-mount.js

@@ -0,0 +1,117 @@
+/* LilyScript editor mount + state bridge.
+ *
+ * Mounts our own CodeMirror 6 editor (window.LilyEditor, from lyl-editor.bundle.js)
+ * into #ls-editor-mount and bridges it to a hidden Gradio Textbox (#ls-editor-state),
+ * which is the canonical text Gradio reads/writes:
+ *
+ *   CM edit      -> write hidden <textarea>.value + dispatch native 'input'  -> Gradio
+ *                   updates the Python value and fires its .change -> SVG render.
+ *   Gradio write -> generation stream / file load set the <textarea>.value; we poll
+ *                   for external changes and push them into CM via setValue().
+ *
+ * An `applyingExternal` flag prevents the echo loop (CM.setValue must not re-emit a
+ * change back to the textarea), mirroring live-editor's `isEditorUpdate` guard.
+ */
+(function () {
+	'use strict';
+
+	var MOUNT_ID = 'ls-editor-mount';
+	var STATE_ID = 'ls-editor-state';
+	var DEBOUNCE_MS = 300;
+
+	var handle = null;        // { getValue, setValue, destroy }
+	var textarea = null;
+	var lastTextareaValue = null;   // last value we've seen on the textarea
+	var applyingExternal = false;   // true while pushing a Gradio value into CM
+	var debounceTimer = null;
+
+	function log (msg) { console.log('[lyl-editor]', msg); }
+
+	function ready () {
+		return window.LilyEditor && typeof window.LilyEditor.mount === 'function';
+	}
+
+	// Write text into the hidden textarea using the native setter (so Svelte/Gradio's
+	// controlled <textarea> actually registers it) and dispatch a bubbling 'input'.
+	function pushToGradio (text) {
+		if (!textarea) return;
+		var proto = window.HTMLTextAreaElement && window.HTMLTextAreaElement.prototype;
+		var setter = proto && Object.getOwnPropertyDescriptor(proto, 'value');
+		if (setter && setter.set) setter.set.call(textarea, text);
+		else textarea.value = text;
+		lastTextareaValue = text;
+		textarea.dispatchEvent(new Event('input', { bubbles: true }));
+		textarea.dispatchEvent(new Event('change', { bubbles: true }));
+	}
+
+	// CM editor -> Gradio (debounced). Skipped while we're applying an external value.
+	function onEditorChange (text) {
+		if (applyingExternal) return;
+		if (debounceTimer) clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(function () { pushToGradio(text); }, DEBOUNCE_MS);
+	}
+
+	// Gradio -> CM: when the textarea value changes from OUTSIDE (generation stream,
+	// file load), push it into the editor. We diff against lastTextareaValue so our
+	// own pushToGradio writes don't bounce back.
+	function pollExternal () {
+		if (!textarea || !handle) return;
+		var v = textarea.value;
+		if (v === lastTextareaValue) return;   // unchanged, or our own write
+		lastTextareaValue = v;
+		applyingExternal = true;
+		handle.setValue(v);                    // no-op guarded inside if equal
+		applyingExternal = false;
+	}
+
+	function attach () {
+		var mountEl = document.getElementById(MOUNT_ID);
+		var stateWrap = document.getElementById(STATE_ID);
+		if (!mountEl || !stateWrap || !ready()) return false;
+		// gr.Textbox renders a <textarea> inside its elem_id wrapper.
+		var ta = stateWrap.querySelector('textarea');
+		if (!ta) return false;
+		if (handle && textarea === ta && mountEl.firstChild) return true; // already mounted
+
+		textarea = ta;
+		lastTextareaValue = textarea.value;
+		// Gradio wraps gr.HTML content in a `.prose` block whose global rule
+		// `.gradio-container .prose * { color: var(--body-text-color) }` overrides
+		// CodeMirror's per-token syntax colours (it out-specifies CM's atomic class
+		// rules). Strip `prose` from the editor's wrapper so CM's oneDark highlight
+		// colours win. (Scoped to the editor; the score panel keeps its own.)
+		var proseWrap = mountEl.closest('.prose');
+		if (proseWrap) proseWrap.classList.remove('prose');
+		mountEl.innerHTML = '';
+		handle = window.LilyEditor.mount(mountEl, {
+			value: textarea.value || '',
+			onChange: onEditorChange,
+		});
+		log('mounted CM editor; initial ' + (textarea.value || '').length + ' chars');
+		return true;
+	}
+
+	function boot () {
+		var mounted = attach();
+		if (!mounted) {
+			var iv = setInterval(function () { if (attach()) clearInterval(iv); }, 300);
+			setTimeout(function () { clearInterval(iv); }, 30000);
+		}
+		// poll the hidden textarea for external (Gradio-driven) value changes, and
+		// re-attach if Gradio re-renders the editor DOM (mount/textarea swapped).
+		setInterval(function () {
+			var mountEl = document.getElementById(MOUNT_ID);
+			var stateWrap = document.getElementById(STATE_ID);
+			var ta = stateWrap && stateWrap.querySelector('textarea');
+			if (mountEl && ta && (ta !== textarea || !mountEl.firstChild)) { attach(); return; }
+			pollExternal();
+		}, 200);
+	}
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', boot);
+	} else {
+		boot();
+	}
+	log('lyl-editor-mount.js loaded');
+})();

web/lyl-editor.css

@@ -0,0 +1,32 @@
+/* LilyScript embedded CodeMirror 6 editor (mounted by web/lyl-editor-mount.js into
+ * #ls-editor-mount). The editor uses the oneDark theme (dark panel) like
+ * lilylet-live-editor; these rules only size the container and font so it matches the
+ * old gr.Code 18-line viewport and the surrounding Gradio Soft layout. */
+
+#ls-editor-mount {
+	height: 470px;            /* ~18 lines at 14px/1.6 — matches the old gr.Code lines=18 */
+	border-radius: 8px;
+	overflow: hidden;
+	background: #282c34;      /* oneDark bg, so there's no flash before CM mounts */
+}
+
+/* The state-carrier Textbox is kept in the DOM (so the bridge can read/write its
+ * <textarea> + receive Gradio's writes) but hidden from view. We can't use
+ * visible=False — that removes the element entirely. */
+.ls-editor-state-hidden { display: none !important; }
+
+/* CM fills the mount; scroll inside it. */
+#ls-editor-mount .cm-editor {
+	height: 100%;
+}
+
+#ls-editor-mount .cm-scroller {
+	font-family: 'Fira Code', 'Consolas', 'Menlo', monospace;
+	font-size: 14px;
+	line-height: 1.6;
+}
+
+/* The cm-editor focus ring is fine; keep CM's own selection/caret from oneDark. */
+#ls-editor-mount .cm-editor.cm-focused {
+	outline: none;
+}

web/vendor/lilylet.bundle.js

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:869c6da801fee553a8c8d6c1ca24b6fae3fbe65993167f9a3c0a01540cd413a8
-size 86557
+oid sha256:b45c667b547fdfc09c871c347fa5596781f13d03499a5b1f5d543d7c927089ca
+size 90045

web/vendor/lyl-editor.bundle.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:98b611d7dbc3cf0da8c1afd45c2f03db7894da3400ba8bd7c3ddb2b1d46a9884
+size 392848