feat(gnoweb): change build-in playground run view to use CodeMirror

gno.land/pkg/gnoweb/components/views/playground.html

@@ -73,10 +73,8 @@ <h1 class="title b-content-h1">
     </div>
 
     <!-- Code editor -->
-    <div class="b-playground-editor" data-playground-target="editor">
-      <div data-playground-target="code" class="b-playground-code"></div>
-      <textarea data-playground-target="initial-code" hidden>{{ .InitialCode }}</textarea>
-    </div>
+    <div class="b-playground-editor" data-playground-target="editor"></div>
+    <textarea data-playground-target="initial-code" hidden>{{ .InitialCode }}</textarea>
   </div>
 
   <!-- Output Area -->

gno.land/pkg/gnoweb/components/views/run.html

@@ -27,16 +27,7 @@ <h1 class="title b-content-h1">Run Script</h1>
 
   <!-- Code editor -->
   <div class="b-playground-editor-area">
-    <div class="b-playground-editor">
-      <textarea
-        data-run-target="code"
-        class="b-playground-code"
-        spellcheck="false"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-      ></textarea>
-    </div>
+    <div class="b-playground-editor" data-run-target="editor"></div>
   </div>
 
   <!-- Command settings -->
@@ -83,27 +74,31 @@ <h3 class="b-content-h3">Generated Commands</h3>
       <div class="b-run-command-header">
         <h4 class="b-run-command-label">Dry Run</h4>
         <span class="u-color-muted u-text-sm">simulates without broadcasting</span>
-        <button class="b-btn b-btn--ghost b-run-copy-btn"
-          data-action="click->run#copyDryRun" title="Copy to clipboard">
-          <svg class="c-icon"><use href="#ico-copy"></use></svg>
-          <span>Copy</span>
+      </div>
+      <div class="b-code u-mb-2">
+        <button data-controller="copy" data-action="click->copy#copy"
+          data-copy-remote-value="run-dry-run-cmd" class="btn-copy"
+          aria-label="Copy Command">
+          {{ template "ui/copy" }}
         </button>
+        <pre><code><span class="u-font-mono" data-copy-target="run-dry-run-cmd" data-run-target="dryRunCmd"></span></code></pre>
       </div>
-      <pre class="b-run-command-pre u-font-mono" data-run-target="dryRunCmd"></pre>
     </div>
 
     <!-- Execute -->
     <div class="b-run-command-block">
       <div class="b-run-command-header">
         <h4 class="b-run-command-label">Execute</h4>
         <span class="u-color-muted u-text-sm">broadcasts and runs on-chain</span>
-        <button class="b-btn b-btn--ghost b-run-copy-btn"
-          data-action="click->run#copyExecute" title="Copy to clipboard">
-          <svg class="c-icon"><use href="#ico-copy"></use></svg>
-          <span>Copy</span>
+      </div>
+      <div class="b-code u-mb-2">
+        <button data-controller="copy" data-action="click->copy#copy"
+          data-copy-remote-value="run-execute-cmd" class="btn-copy"
+          aria-label="Copy Command">
+          {{ template "ui/copy" }}
         </button>
+        <pre><code><span class="u-font-mono" data-copy-target="run-execute-cmd" data-run-target="executeCmd"></span></code></pre>
       </div>
-      <pre class="b-run-command-pre u-font-mono" data-run-target="executeCmd"></pre>
     </div>
   </div>
 

gno.land/pkg/gnoweb/frontend/css/06-blocks.css

@@ -2838,12 +2838,6 @@ main.dev-mode .b-toc a {
 	min-height: 300px;
 	resize: vertical;
 	overflow: hidden;
-}
-
-.b-playground-code {
-	flex: 1;
-	display: flex;
-	min-height: 300px;
 
 	& .cm-editor {
 		flex: 1;
@@ -3152,21 +3146,6 @@ main.dev-mode .b-toc a {
 	color: var(--s-color-text-primary);
 }
 
-.b-run-copy-btn {
-	margin-inline-start: auto;
-}
-
-.b-run-command-pre {
-	background-color: var(--s-color-bg-base);
-	border-radius: var(--s-rounded);
-	padding: var(--g-space-4);
-	font-size: var(--g-font-size-100);
-	color: var(--s-color-text-secondary);
-	white-space: pre-wrap;
-	word-break: break-word;
-	min-height: var(--g-space-12);
-}
-
 /* ==========================================================================
    DOC EXAMPLE — collapsible code block in doc-context markdown rendering
    ========================================================================== */

gno.land/pkg/gnoweb/frontend/js/code-editor.ts

@@ -0,0 +1,126 @@
+import {
+	defaultKeymap,
+	history,
+	historyKeymap,
+	indentWithTab,
+} from "@codemirror/commands";
+import {
+	bracketMatching,
+	defaultHighlightStyle,
+	indentOnInput,
+	indentUnit,
+	StreamLanguage,
+	syntaxHighlighting,
+} from "@codemirror/language";
+import { go } from "@codemirror/legacy-modes/mode/go";
+import { toml } from "@codemirror/legacy-modes/mode/toml";
+import { Compartment, EditorState, type Extension } from "@codemirror/state";
+import { oneDark } from "@codemirror/theme-one-dark";
+import {
+	drawSelection,
+	EditorView,
+	highlightActiveLine,
+	highlightActiveLineGutter,
+	keymap,
+	lineNumbers,
+} from "@codemirror/view";
+
+const goLang = StreamLanguage.define(go);
+const tomlLang = StreamLanguage.define(toml);
+
+function languageFromFilename(name: string): StreamLanguage<unknown> {
+	return name.endsWith(".toml") ? tomlLang : goLang;
+}
+
+function themeFor(isDarkMode: boolean): Extension {
+	return isDarkMode
+		? oneDark
+		: syntaxHighlighting(defaultHighlightStyle, { fallback: true });
+}
+
+export function isDarkMode(): boolean {
+	return document.documentElement.getAttribute("data-theme") === "dark";
+}
+
+export interface CodeEditorOptions {
+	parent: HTMLElement;
+	content: string;
+	fileName: string;
+	isDarkMode: boolean;
+	onRun?: () => void;
+}
+
+export class CodeEditor {
+	readonly view: EditorView;
+	private readonly langCompartment = new Compartment();
+	private readonly themeCompartment = new Compartment();
+
+	constructor(opts: CodeEditorOptions) {
+		const extensions: Extension[] = [
+			lineNumbers(),
+			highlightActiveLine(),
+			highlightActiveLineGutter(),
+			drawSelection(),
+			history(),
+			indentOnInput(),
+			indentUnit.of("\t"),
+			bracketMatching(),
+			this.langCompartment.of(languageFromFilename(opts.fileName)),
+			this.themeCompartment.of(themeFor(opts.isDarkMode)),
+		];
+
+		if (opts.onRun) {
+			const runHandler = opts.onRun;
+			extensions.push(
+				keymap.of([
+					{
+						key: "Mod-Enter",
+						preventDefault: true,
+						run: () => {
+							runHandler();
+							return true;
+						},
+					},
+				]),
+			);
+		}
+
+		extensions.push(
+			keymap.of([indentWithTab, ...historyKeymap, ...defaultKeymap]),
+		);
+
+		this.view = new EditorView({
+			parent: opts.parent,
+			state: EditorState.create({
+				doc: opts.content,
+				extensions,
+			}),
+		});
+	}
+
+	getCode(): string {
+		return this.view.state.doc.toString();
+	}
+
+	setCode(text: string): void {
+		this.view.dispatch({
+			changes: { from: 0, to: this.view.state.doc.length, insert: text },
+		});
+	}
+
+	setLanguage(fileName: string): void {
+		this.view.dispatch({
+			effects: this.langCompartment.reconfigure(languageFromFilename(fileName)),
+		});
+	}
+
+	changeTheme(isDarkMode: boolean): void {
+		this.view.dispatch({
+			effects: this.themeCompartment.reconfigure(themeFor(isDarkMode)),
+		});
+	}
+
+	focus(): void {
+		this.view.focus();
+	}
+}