UI: removed textareas; included CodeMirror search with keyboard

benchmarko · Feb 28, 2025 · 17fa28f · 17fa28f
1 parent 4fdeac5
commit 17fa28f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -242,9 +242,9 @@ after auto border break call cat chain clear clg closein closeout cont copychr$
 
 - [Ohm](https://ohmjs.org/) JavaScript parsing toolkit - [Source code](https://github.com/ohmjs/ohm) - Paper: [Modular Semantic Actions](https://ohmjs.org/pubs/dls2016/modular-semantic-actions.pdf)
 
-- [CodeMirror](https://codemirror.net/) code editor used for the Locobasic UI -
-[Source code](https://github.com/codemirror/dev/) -
-[Libraries](https://cdnjs.com/libraries/codemirror)
+- [CodeMirror](https://codemirror.net/5/) code editor used for the LocoBasic UI -
+[Source code](https://github.com/codemirror/codemirror5) -
+[cdnjs Libraries](https://cdnjs.com/libraries/codemirror)
 
 - [CPCBasicTS](https://benchmarko.github.io/CPCBasicTS/) CPCBasicTS Unchained - Run CPC BASIC in a Browser - [Source code](https://github.com/benchmarko/CPCBasicTS/)
 
@@ -259,4 +259,4 @@ after auto border break call cat chain clear clg closein closeout cont copychr$
 
 - Another BASIC compiler: [ugBASIC](https://ugbasic.iwashere.eu/target/cpc#examples)
 
-### **mv, 12/2024**
+### **mv, 02/2025 **
diff --git a/dist/index.html b/dist/index.html
@@ -4,26 +4,26 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="locobasic.css">
-  <title>LocoBasic v0.1.45</title>
+  <title>LocoBasic v0.1.46</title>
 </head>
 
 <body>
   <div id="basicArea" class="flexBox">
-    <label for="basicText" title="BASIC input">BASIC</label>
+    <label for="basicEditor" title="LocoBasic input">LocoBasic</label>
     <select id="exampleSelect" title="Load Example"></select>
     <button id="helpButton" title="Help">Help</button>
     <br /> 
-    <textarea id="basicText" rows="20" cols="80" spellcheck="false" autocomplete="off" autocapitalize="off" tabindex="0"></textarea>
+    <div id="basicEditor" class="CodeMirror"></div>
     <br /> 
     <input id="autoCompileInput" type="checkbox" title="automatic compile" checked>
     <label for="autoCompileInput" title="auto compile on change">Auto</label>
     <button id="compileButton" title="Compile to JavaScript">Compile</button>
   </div>
 
   <div id="compiledArea" class="flexBox">
-    <label for="compiledText" title="Compiled Script">Compiled</label>
+    <label for="compiledEditor" title="Compiled Script">JavaScript</label>
     <br />
-    <textarea id="compiledText" rows="20" cols="80" spellcheck="false" autocomplete="off" autocapitalize="off" tabindex="0"></textarea>
+    <div id="compiledEditor" class="CodeMirror"></div>
     <br />
     <input id="autoExecuteInput" type="checkbox" title="automatic execute" checked>
     <label for="autoExecuteInput" title="auto execute on change">Auto</label>
@@ -35,13 +35,16 @@
     <label for="outputText" title="output">Output</label>
     <br />
     <pre id="outputText" contenteditable="true" spellcheck="false" autocomplete="off" autocapitalize="off" style="overflow:auto; width: 604px; height: 30em; margin: 0px; background-color: #ffffff"></pre>
-    <!-- <textarea id="outputText" rows="25" cols="80" spellcheck="false" autocomplete="off" autocapitalize="off" tabindex="0"></textarea> -->
   </div>
 
   <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
-  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
+  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js" defer></script>
+  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/search.min.js" defer></script>
+  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/search/searchcursor.min.js" defer></script>
+  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/dialog/dialog.min.js" defer></script>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"></link>
-
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/dialog/dialog.css"></link>
+
   <script src="https://unpkg.com/ohm-js@17/dist/ohm.min.js"></script>
 
   <script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "locobasic",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "# LocoBasic - Loco BASIC",
   "type": "commonjs",
   "scripts": {

diff --git a/src/UI/UI.ts b/src/UI/UI.ts
@@ -108,12 +108,6 @@ export class UI implements IUI {
         return input;
     }
 
-    /*
-    private getButtonDisabled(id: string) {
-        return (window.document.getElementById(id) as HTMLButtonElement).disabled;
-    }
-    */
-
     private setButtonDisabled(id: string, disabled: boolean) {
         const button = window.document.getElementById(id) as HTMLButtonElement;
         button.disabled = disabled;
@@ -124,8 +118,7 @@ export class UI implements IUI {
         if (!this.vm) {
             return;
         }
-        const compiledText = document.getElementById("compiledText") as HTMLTextAreaElement;
-        const compiledScript = this.compiledCm ? this.compiledCm.getValue() as string : compiledText.value;
+        const compiledScript = this.compiledCm ? this.compiledCm.getValue() : "";
         this.setButtonDisabled("executeButton", true);
         this.setButtonDisabled("stopButton", false);
         this.escape = false;
@@ -149,21 +142,12 @@ export class UI implements IUI {
     private onCompileButtonClick(_event: Event): void { // eslint-disable-line @typescript-eslint/no-unused-vars
         const core = this.getCore();
         this.setButtonDisabled("compileButton", true);
-        const basicText = document.getElementById("basicText") as HTMLTextAreaElement;
-        const compiledText = document.getElementById("compiledText") as HTMLTextAreaElement;
-        const input = this.basicCm ? this.basicCm.getValue() : basicText.value;
+        const input = this.basicCm ? this.basicCm.getValue() : "";
         UI.asyncDelay(() => {
             const compiledScript = core.compileScript(input) || "";
 
             if (this.compiledCm) {
                 this.compiledCm.setValue(compiledScript);
-            } else {
-                compiledText.value = compiledScript;
-                const autoExecuteInput = document.getElementById("autoExecuteInput") as HTMLInputElement;
-                if (autoExecuteInput.checked) {
-                    const newEvent = new Event('change');
-                    compiledText.dispatchEvent(newEvent);
-                }
             }
             this.setButtonDisabled("compileButton", false);
         }, 1);
@@ -174,7 +158,7 @@ export class UI implements IUI {
         this.setButtonDisabled("stopButton", true);
     }
 
-    private async onbasicTextChange(): Promise<void> {
+    private async onBasicTextChange(): Promise<void> {
         const autoCompileInput = document.getElementById("autoCompileInput") as HTMLInputElement;
         if (autoCompileInput.checked) {
             const compileButton = window.document.getElementById("compileButton") as HTMLButtonElement;
@@ -192,15 +176,11 @@ export class UI implements IUI {
     private onExampleSelectChange(event: Event): void {
         const core = this.getCore();
         const exampleSelect = event.target as HTMLSelectElement;
-        const basicText = document.getElementById("basicText") as HTMLTextAreaElement;
         const value = core.getExample(exampleSelect.value) || "";
         this.setOutputText("");
 
         if (this.basicCm) {
             this.basicCm.setValue(value);
-        } else {
-            basicText.value = value;
-            basicText.dispatchEvent(new Event('change'));
         }
     }
 
@@ -350,12 +330,6 @@ export class UI implements IUI {
         core.parseArgs(args, config);
         core.setOnCheckSyntax((s: string) => Promise.resolve(this.checkSyntax(s)));
 
-        const basicText = window.document.getElementById("basicText") as HTMLTextAreaElement;
-        basicText.addEventListener('change', () => this.onbasicTextChange());
-
-        const compiledText = window.document.getElementById("compiledText") as HTMLTextAreaElement;
-        compiledText.addEventListener('change', () => this.onCompiledTextChange());
-
         const compileButton = window.document.getElementById("compileButton") as HTMLButtonElement;
         compileButton.addEventListener('click', (event) => this.onCompileButtonClick(event), false);
 
@@ -376,13 +350,15 @@ export class UI implements IUI {
 
         const WinCodeMirror = window.CodeMirror;
         if (WinCodeMirror) {
-            this.basicCm = WinCodeMirror.fromTextArea(basicText, {
+            const basicEditor = window.document.getElementById("basicEditor") as HTMLElement;
+            this.basicCm = WinCodeMirror(basicEditor, {
                 lineNumbers: true,
-                mode: 'javascript'
+                mode: 'javascript' // should be 'basic' but not available
             });
-            this.basicCm.on('changes', this.debounce(() => this.onbasicTextChange(), () => config.debounceCompile));
+            this.basicCm.on('changes', this.debounce(() => this.onBasicTextChange(), () => config.debounceCompile));
 
-            this.compiledCm = WinCodeMirror.fromTextArea(compiledText, {
+            const compiledEditor = window.document.getElementById("compiledEditor") as HTMLElement;
+            this.compiledCm = WinCodeMirror(compiledEditor, {
                 lineNumbers: true,
                 mode: 'javascript'
             });