codeditor: update keyword colors on change languages wip

jxarco · Sep 14, 2023 · 6f45b9e · 6f45b9e
1 parent 12a0b18
commit 6f45b9e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/build/components/codeeditor.js b/build/components/codeeditor.js
@@ -133,7 +133,7 @@
             this._lastTime = null;
 
             this.languages = [
-                'JavaScript', 'GLSL'
+                'JavaScript', 'GLSL', 'JSON', 'XML', 'Plain Text'
             ];
             this.specialKeys = [
                 'Backspace', 'Enter', 'ArrowUp', 'ArrowDown', 
@@ -154,7 +154,7 @@
                 'while', 'continue', 'break', 'do'
             ];
             this.symbols = [
-                '<', '>', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'
+                '<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'
             ];
 
             // Action keys
@@ -445,6 +445,7 @@
             const on_change_language = ( lang ) => {
                 this.highlight = lang;
                 this._refresh_code_info();
+                this.processLines();
             }
 
             this._refresh_code_info = (ln = panel.ln, col = panel.col) => {
@@ -980,39 +981,42 @@
                 span.innerHTML = token;
 
                 if( this._building_block_comment )
-                    span.className += " cm-com";
+                    span.classList.add("cm-com");
 
                 else if( this._building_string  )
-                    span.className += " cm-str";
+                    span.classList.add("cm-str");
 
                 else if( this.keywords.indexOf(token) > -1 )
-                    span.className += " cm-kwd";
+                    span.classList.add("cm-kwd");
 
                 else if( this.builtin.indexOf(token) > -1 )
-                    span.className += " cm-bln";
+                    span.classList.add("cm-bln");
 
                 else if( this.literals.indexOf(token) > -1 )
-                    span.className += " cm-lit";
+                    span.classList.add("cm-lit");
 
                 else if( this.symbols.indexOf(token) > -1 )
-                    span.className += " cm-sym";
+                    span.classList.add("cm-sym");
 
                 else if( token.substr(0, 2) == '//' )
-                    span.className += " cm-com";
+                    span.classList.add("cm-com");
 
                 else if( token.substr(0, 2) == '/*' )
-                    span.className += " cm-com";
+                    span.classList.add("cm-com");
 
                 else if( token.substr(token.length - 2) == '*/' )
-                    span.className += " cm-com";
+                    span.classList.add("cm-com");
 
                 else if( !Number.isNaN(+token) )
-                    span.className += " cm-dec";
+                    span.classList.add("cm-dec");
 
                 else if (   (prev == 'class' && next == '{') || 
                             (prev == 'new' && next == '(') )
-                    span.className += " cm-typ";
+                    span.classList.add("cm-typ");
 
+
+                let highlight = this.highlight.replace(/\s/g, '');
+                span.classList.add(highlight.toLowerCase());
                 linespan.appendChild(span);
             }
 

diff --git a/build/lexgui.css b/build/lexgui.css
@@ -2564,4 +2564,22 @@ ul.lexassetscontent {
 .cm-lit { color: #ee2c8d; } /* literal */
 .cm-bln { color: #cfc159; } /* builtin */
 .cm-dec { color: #22c44a; } /* decimal */
-.cm-sym { color: #f4dab2; } /* symbol */
+.cm-sym { color: #f4dab2; } /* symbol */
+
+.cm-str.json { color: #71a7c2; } /* string */
+.cm-kwd.json { color: inherit; } /* keyword */
+.cm-com.json { color: inherit; } /* comment */
+.cm-typ.json { color: inherit; } /* type */
+.cm-lit.json { color: inherit; } /* literal */
+.cm-bln.json { color: inherit; } /* builtin */
+.cm-dec.json { color: #9ed09a; } /* decimal */
+.cm-sym.json { color: #c53693; } /* symbol */
+
+.cm-str.plaintext { color: inherit; } /* string */
+.cm-kwd.plaintext { color: inherit; } /* keyword */
+.cm-com.plaintext { color: inherit; } /* comment */
+.cm-typ.plaintext { color: inherit; } /* type */
+.cm-lit.plaintext { color: inherit; } /* literal */
+.cm-bln.plaintext { color: inherit; } /* builtin */
+.cm-dec.plaintext { color: inherit; } /* decimal */
+.cm-sym.plaintext { color: inherit; } /* symbol */