codemirror 6

package.json

@@ -16,18 +16,31 @@
         "prettier-project": "npm run prettier-write -- resources/**/*.{js,scss,ts}"
     },
     "dependencies": {
-        "@types/codemirror": "5.60.7",
+        "@codemirror/lang-css": "^6.2.1",
+        "@codemirror/lang-html": "^6.4.8",
+        "@codemirror/lang-javascript": "^6.2.2",
+        "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/lang-markdown": "^6.2.4",
+        "@codemirror/lang-php": "^6.0.1",
+        "@codemirror/lang-vue": "^0.1.3",
+        "@codemirror/lang-xml": "^6.1.0",
+        "@codemirror/language": "^6.10.1",
+        "@codemirror/theme-one-dark": "^6.1.2",
+        "@replit/codemirror-vim": "^6.2.0",
         "axios": "^1.6.7",
         "cli-spinners": "^2.9.2",
-        "codemirror": "^5.65.1",
+        "cm6-theme-material-dark": "^0.2.0",
+        "codemirror": "^6.0.1",
         "jquery-mousewheel": "^3.1.13",
         "jquery.terminal": "^2.39.0"
     },
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.24.0",
         "@babel/preset-env": "^7.24.0",
+        "@types/core-js": "^2.5.8",
         "@types/jest": "^29.5.12",
         "@types/jquery": "^3.5.29",
+        "@types/jquery-mousewheel": "^3.1.12",
         "@types/node": "^20.11.26",
         "browser-sync": "^2.27.11",
         "browser-sync-webpack-plugin": "^2.3.0",
@@ -62,4 +75,4 @@
             "node"
         ]
     }
-}
+}

resources/sass/app.scss

@@ -1,8 +1,8 @@
 @import 'node_modules/jquery.terminal/css/jquery.terminal';
-@import 'node_modules/codemirror/lib/codemirror';
-@import 'node_modules/codemirror/addon/dialog/dialog';
-@import 'node_modules/codemirror/addon/display/fullscreen';
-@import 'node_modules/codemirror/theme/monokai';
+// @import 'node_modules/codemirror/lib/codemirror';
+// @import 'node_modules/codemirror/addon/dialog/dialog';
+// @import 'node_modules/codemirror/addon/display/fullscreen';
+// @import 'node_modules/codemirror/theme/monokai';
 
 #terminal-shell {
     padding: 10px 10px !important;
@@ -18,8 +18,10 @@
     font-weight: normal !important;
     font-size: 12px;
     overflow: hidden;
+
     a {
         color: #0f60ff !important;
+
         &:hover {
             color: red !important;
             text-decoration: underline !important;
@@ -60,5 +62,18 @@
 // }
 
 .CodeMirror-fullscreen {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     z-index: 50000 !important;
-}
+
+    .cm-editor {
+        height: 100%;
+    }
+
+    .cm-panels-bottom {
+        overflow: hidden;
+    }
+}

resources/ts/app.ts

@@ -5,11 +5,11 @@ import 'jquery.terminal/js/unix_formatting';
 import 'core-js/es/promise';
 import 'core-js/es/object/assign';
 import 'core-js/es/regexp/flags';
-import {HttpClient} from './httpclient';
-import {Artisan, Common, Composer, MySQL, Tinker, Vim, Help} from './commands';
-import {OutputFormatter} from './output-formatter';
-import {Command} from './command';
-import {Spinner} from './spinners';
+import { HttpClient } from './httpclient';
+import { Artisan, Common, Composer, MySQL, Tinker, Vim, Help } from './commands';
+import { OutputFormatter } from './output-formatter';
+import { Command } from './command';
+import { Spinner } from './spinners';
 
 const win: any = <any>window;
 $.terminal.defaults.unixFormattingEscapeBrackets = true;
@@ -73,7 +73,7 @@ export class Terminal {
                     }
 
                     if (command.comfirmable(cmd) === true) {
-                        const {message, title, cancel} = command.getComfirm(cmd);
+                        const { message, title, cancel } = command.getComfirm(cmd);
 
                         this.confirm(message, title, cancel).then(async result => {
                             if (result === true) {

resources/ts/command.ts

@@ -1,6 +1,6 @@
 import * as $ from 'jquery';
-import {HttpClient} from './httpclient';
-import {OutputFormatter} from './output-formatter';
+import { HttpClient } from './httpclient';
+import { OutputFormatter } from './output-formatter';
 
 class Parser {
     private command_re = /((?:"[^"\\]*(?:\\[\S\s][^"\\]*)*"|'[^'\\]*(?:\\[\S\s][^'\\]*)*'|\/[^\/\\]*(?:\\[\S\s][^\/\\]*)*\/[gimsuy]*(?=\s|$)|(?:\\\s|\S))+)(?=\s|$)/gi;

resources/ts/commands/artisan.ts

@@ -1,4 +1,4 @@
-import {Command} from '../command';
+import { Command } from '../command';
 
 export class Artisan extends Command {
     protected commandLine: boolean = true;
@@ -49,7 +49,7 @@ export class Artisan extends Command {
 
         const cancel = ['', this.outputFormatter.comment('Command Cancelled!'), ''].join('\n');
 
-        return {title, message, cancel};
+        return { title, message, cancel };
     }
 
     getComfirmCommand(command: string): string {

resources/ts/commands/common.ts

@@ -1,4 +1,4 @@
-import {Command} from '../command';
+import { Command } from '../command';
 
 export class Common extends Command {
     is(command: string): boolean {

resources/ts/commands/composer.ts

@@ -1,4 +1,4 @@
-import {Command} from '../command';
+import { Command } from '../command';
 
 export class Composer extends Command {
     protected commandLine: boolean = true;

resources/ts/commands/help.ts

@@ -1,4 +1,4 @@
-import {Command} from '../command';
+import { Command } from '../command';
 
 export class Help extends Command {
     is(command: string): boolean {

resources/ts/commands/mysql.ts

@@ -1,4 +1,4 @@
-import {Command} from '../command';
+import { Command } from '../command';
 
 export class MySQL extends Command {
     private connection = null;

resources/ts/commands/tinker.ts

@@ -1,4 +1,4 @@
-import {Command, Interpreterable} from '../command';
+import { Command, Interpreterable } from '../command';
 
 export class Tinker extends Command implements Interpreterable {
     protected commandLine: boolean = true;

resources/ts/commands/vim.ts

@@ -1,96 +1,98 @@
-import {Command} from '../command';
-import 'codemirror/keymap/vim';
-import 'codemirror/addon/dialog/dialog';
-import 'codemirror/addon/search/searchcursor';
-import 'codemirror/addon/edit/matchbrackets';
-import 'codemirror/addon/display/fullscreen';
-import 'codemirror/mode/clike/clike';
-import 'codemirror/mode/meta';
-import 'codemirror/mode/php/php';
-import 'codemirror/mode/css/css';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/htmlmixed/htmlmixed';
-import 'codemirror/mode/xml/xml';
-import * as CodeMirror from 'codemirror';
-import {HttpClient} from '../httpclient';
-import {OutputFormatter} from '../output-formatter';
+import { Command } from '../command';
+import { HttpClient } from '../httpclient';
+import { OutputFormatter } from '../output-formatter';
+import { basicSetup, EditorView } from 'codemirror';
+import { vim, Vim as _Vim } from '@replit/codemirror-vim'
+import { javascript } from '@codemirror/lang-javascript';
+import { css } from '@codemirror/lang-css';
+import { php } from '@codemirror/lang-php';
+import { json } from '@codemirror/lang-json';
+import { vue } from '@codemirror/lang-vue';
+import { html } from '@codemirror/lang-html';
+import { markdown } from '@codemirror/lang-markdown';
+import { xml } from '@codemirror/lang-xml';
+import { materialDark } from 'cm6-theme-material-dark'
+import { EditorState, Compartment } from '@codemirror/state';
+
+const languageConf = new Compartment
 
 export class Editor {
-    private textarea: HTMLTextAreaElement;
-    private editor: CodeMirror.EditorFromTextArea;
-    private wapperElement: HTMLElement;
-    private doc: CodeMirror.Doc;
+    private section: HTMLElement;
+    private cm: EditorView;
 
     constructor() {
-        this.textarea = document.createElement('textarea');
-        document.body.appendChild(this.textarea);
-
-        this.editor = CodeMirror.fromTextArea(this.textarea, {
-            lineNumbers: true,
-            keyMap: 'vim',
-            showCursorWhenSelecting: true,
-            theme: 'monokai',
-        });
+        this.section = document.createElement('div');
+        this.section.classList.add('CodeMirror-fullscreen');
+        this.section.style.display = 'none';
 
-        this.wapperElement = this.editor.getWrapperElement();
-        this.wapperElement.className += ' CodeMirror-fullscreen';
+        document.body.appendChild(this.section);
 
-        this.doc = this.editor.getDoc();
+        this.cm = new EditorView({
+            state: this.createState(),
+            parent: this.section,
+        });
 
-        (<any>CodeMirror)['Vim']['defineEx']('q', 'q', () => {
-            this.textarea.dispatchEvent(new Event('q'));
+        _Vim.defineEx('q', 'q', () => {
+            this.cm.dom.dispatchEvent(new Event('q'));
             this.quit();
         });
 
-        (<any>CodeMirror)['Vim']['defineEx']('w', 'w', () => {
-            this.textarea.dispatchEvent(new Event('w'));
+        _Vim.defineEx('w', 'w', () => {
+            this.cm.dom.dispatchEvent(new Event('w'));
         });
 
-        (<any>CodeMirror)['Vim']['defineEx']('wq', 'wq', () => {
-            this.textarea.dispatchEvent(new Event('wq'));
+        _Vim.defineEx('wq', 'wq', () => {
+            this.cm.dom.dispatchEvent(new Event('wq'));
             this.quit();
         });
     }
 
     on(type: string, cb: any): Editor {
-        this.textarea.addEventListener(type, cb);
+        this.cm.dom.addEventListener(type, cb);
 
         return this;
     }
 
     show(): Editor {
-        this.editor.getWrapperElement().style.display = 'block';
-        setTimeout(() => {
-            this.editor.focus();
-        }, 200);
+        this.section.style.display = 'block';
+
+        // setTimeout(() => {
+        //     this.cm.focus();
+        // }, 200);
 
         return this;
     }
 
     hide(): Editor {
-        this.wapperElement.style.display = 'none';
+        this.section.style.display = 'none';
 
         return this;
     }
 
     setText(text: string): Editor {
-        this.doc.setValue(text);
+        // this.cm.dispatch({
+        //     changes: { from: 0, to: this.cm.state.doc.length, insert: text },
+        //     sequential: true
+        // });
+        this.cm.setState(this.createState({ doc: text }));
 
         return this;
     }
 
     getText(): string {
-        return this.doc.getValue();
+        return this.cm.state.doc.toString();
     }
 
     setCursor(pos: any): Editor {
-        this.doc.setCursor(pos);
+        this.cm.dispatch({ selection: { anchor: pos } })
 
         return this;
     }
 
     setModeByFile(file: string): Editor {
-        this.editor.setOption('mode', this.getModeByFile(file).mode);
+        this.cm.dispatch({
+            effects: languageConf.reconfigure(this.getLanguageByFile(file)),
+        })
 
         return this;
     }
@@ -102,21 +104,28 @@ export class Editor {
         return this;
     }
 
-    private getModeByFile(file: string): any {
-        const matches = file.match(/.+\.([^.]+)$/);
-
-        if (matches && matches.length > 0) {
-            return (<any>CodeMirror)['findModeByExtension'](matches[1]);
-        }
+    private getLanguageByFile(file: string): any {
+        const lookup: any = {
+            'html': html(),
+            'htm': html(),
+            'js': javascript(),
+            'css': css(),
+            'json': json(),
+            'vue': vue(),
+            'md': markdown(),
+            'xml': xml(),
+            'php': php(),
+        };
+        const matches: any = file.match(/.+\.([^.]+)$/);
 
-        if (/\//.test(file)) {
-            return (<any>CodeMirror)['findModeByMIME'](file);
-        }
+        return lookup[(matches[1] ?? 'php').toLowerCase()];
+    }
 
-        return {
-            mode: 'php',
-            mime: 'application/x-httpd-php',
-        };
+    private createState(params = {}) {
+        return EditorState.create({
+            extensions: [vim(), languageConf.of(php()), basicSetup, materialDark],
+            ...params
+        });
     }
 }
 
@@ -174,10 +183,10 @@ export class Vim extends Command {
                 const text: string = await this.client.jsonrpc(cmd.method, [this.file]);
 
                 this.editor
-                    .setModeByFile(this.file)
-                    .show()
+                    .setCursor(0)
                     .setText(text)
-                    .setCursor(0);
+                    .setModeByFile(this.file)
+                    .show();
             } catch (e) {
                 reject(e);
             }

resources/ts/output-formatter.ts

@@ -37,7 +37,7 @@ export class OutputFormatterStyle {
     private foreground: string = '';
     private background: string = '';
 
-    constructor(foreground: string = 'white', background: string = 'black') {
+    constructor(foreground: string = 'white', background: string = 'transparent') {
         this.foreground = this.getColor(foreground);
         this.background = this.getColor(background);
     }

resources/ts/spinners.ts

@@ -1,15 +1,15 @@
-const cliSpinners = require('cli-spinners');
+import * as cliSpinners from 'cli-spinners';
 
 export class Spinner {
-    private spinner: any = cliSpinners.dots;
+    private spinner: cliSpinners.Spinner = cliSpinners.dots;
     private frameIndex = 0;
     private interval: any = null;
 
-    constructor(style: string = 'dots') {
+    constructor(style: cliSpinners.SpinnerName = 'dots') {
         this.setStyle(style);
     }
 
-    setStyle(style: string): Spinner {
+    setStyle(style: cliSpinners.SpinnerName): Spinner {
         this.spinner = cliSpinners[style];
 
         return this;