mkslanc · mkslanc · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/packages/ace-linters/src/language-provider.ts b/packages/ace-linters/src/language-provider.ts
@@ -425,6 +425,12 @@ class SessionLanguageProvider {
             return;
         }
         this.$deltaQueue = [];
+
+        this.session.clearAnnotations();
+        if (this.state.diagnosticMarkers) {
+            this.state.diagnosticMarkers.setMarkers([]);
+        }
+
         this.$messageController.changeMode(this.fileName, this.session.getValue(), this.$mode, this.setServerCapabilities);
     };
 
@@ -536,6 +542,7 @@ class SessionLanguageProvider {
     }
 
     private $applyFormat = (edits: lsp.TextEdit[]) => {
+        edits ??= [];
         for (let edit of edits.reverse()) {
             this.session.replace(<Ace.Range>toRange(edit.range), edit.newText);
         }

diff --git a/packages/demo/change_mode.html b/packages/demo/change_mode.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Ace linters Web Worker change mode demo</title>
+
+</head>
+<body>
+<div id="wrapper">
+    <div>
+        <select id="ace_modes">
+
+        </select>
+    </div>
+
+</div>
+
+<script src="bundle.change_mode_demo.js"></script>
+
+</body>
+</html>
diff --git a/packages/demo/index.html b/packages/demo/index.html
@@ -32,6 +32,7 @@
 <ul>
     <li><a href="webworker.html">Ace linters LSP with WebWorker demo</a> (with JSON-RPC)</li>
     <li><a href="default_services.html">Ace linters with WebWorker demo</a> (with default services)</li>
+    <li><a href="change_mode.html">Ace linters with WebWorker change modes demo</a></li>
     <li><a href="rust_analyzer.html">Ace linters LSP for Rust-Analyzer on WebWorker demo</a></li>
     <li><a href="websocket.html">Ace linters LSP with Web Socket demo</a> (you need LSP server run on 3000 port)</a>
     </li>

diff --git a/packages/demo/multiprovider/demo.ts b/packages/demo/multiprovider/demo.ts
@@ -1,15 +1,9 @@
 import "ace-code/esm-resolver";
 import "ace-code/src/ext/language_tools";
 import {LanguageProvider} from "ace-linters";
-import {createEditorWithLSP} from "../utils";
+import {addFormatCommand, createEditorWithLSP} from "../utils";
 import {jsContent} from "../docs-example/javascript-example";
 
-import event from "ace-code/src/lib/event";
-
-import {HashHandler} from "ace-code/src/keyboard/hash_handler";
-
-import keyUtil from "ace-code/src/lib/keys";
-
 let modes = [
     {name: "javascript validated by EsLint, with hover, autocompletion and format of Typescript", mode: "ace/mode/javascript", content: jsContent},
 ];
@@ -30,21 +24,5 @@ languageProvider.setGlobalOptions("typescript", {
         jsx: 1
     }
 });
-let menuKb = new HashHandler([
-    {
-        bindKey: "Ctrl-Shift-B",
-        name: "format",
-        exec: function () {
-            languageProvider.format();
-        }
-    }
-]);
 
-event.addCommandKeyListener(window, function (e, hashId, keyCode) {
-    let keyString = keyUtil.keyCodeToString(keyCode);
-    let command = menuKb.findKeyCommand(hashId, keyString);
-    if (command) {
-        command.exec();
-        e.preventDefault();
-    }
-});
+addFormatCommand(languageProvider);
diff --git a/packages/demo/rust-analyzer/demo.ts b/packages/demo/rust-analyzer/demo.ts
@@ -1,10 +1,7 @@
 import "ace-code/esm-resolver";
-import * as event from "ace-code/src/lib/event";
-import {HashHandler} from "ace-code/src/keyboard/hash_handler";
-import * as keyUtil from "ace-code/src/lib/keys";
 
 import {AceLanguageClient} from "ace-linters/build/ace-language-client";
-import {createEditorWithLSP} from "../utils";
+import {addFormatCommand, createEditorWithLSP} from "../utils";
 import {rustContent} from "../docs-example/rust-example";
 import {LanguageClientConfig} from "ace-linters/types/types/language-service";
 
@@ -21,21 +18,4 @@ const serverData: LanguageClientConfig = {
 let languageProvider = AceLanguageClient.for(serverData);
 createEditorWithLSP(mode, 0, languageProvider);
 
-let menuKb = new HashHandler([
-    {
-        bindKey: "Ctrl-Shift-B",
-        name: "format",
-        exec: function () {
-            languageProvider.format();
-        }
-    }
-]);
-
-event.addCommandKeyListener(window, function (e, hashId, keyCode) {
-    let keyString = keyUtil.keyCodeToString(keyCode);
-    let command = menuKb.findKeyCommand(hashId, keyString);
-    if (command) {
-        command.exec();
-        e.preventDefault();
-    }
-});
+addFormatCommand(languageProvider);
diff --git a/packages/demo/utils.ts b/packages/demo/utils.ts
@@ -1,9 +1,10 @@
 import * as ace from "ace-code";
 import "ace-code/src/ext/language_tools";
-
-
+import event from "ace-code/src/lib/event";
+import {HashHandler} from "ace-code/src/keyboard/hash_handler";
+import keyUtil from "ace-code/src/lib/keys";
 import * as theme from "ace-code/src/theme/textmate";
-import {LanguageProvider} from "ace-linters";
+import type {LanguageProvider} from "ace-linters";
 
 export function createCloseButton(el) {
     let closeButton = document.createElement("span");
@@ -59,3 +60,23 @@ export function createEditorWithLSP(mode, i: number, languageProvider: LanguageP
     }
     return editor;
 }
+
+export function addFormatCommand(languageProvider: LanguageProvider) {
+    let menuKb = new HashHandler([
+        {
+            bindKey: "Ctrl-Shift-B",
+            name: "format",
+            exec: function () {
+                languageProvider.format();
+            }
+        }
+    ]);
+    event.addCommandKeyListener(window, function (e, hashId, keyCode) {
+        let keyString = keyUtil.keyCodeToString(keyCode);
+        let command = menuKb.findKeyCommand(hashId, keyString);
+        if (command) {
+            command.exec();
+            e.preventDefault();
+        }
+    });
+}
diff --git a/packages/demo/websockets-lsp/client.ts b/packages/demo/websockets-lsp/client.ts
@@ -1,12 +1,9 @@
 import "ace-code/esm-resolver";
-import * as event from "ace-code/src/lib/event";
-import {HashHandler} from "ace-code/src/keyboard/hash_handler";
-import * as keyUtil from "ace-code/src/lib/keys";
 import {jsonContent} from "../docs-example/json-example";
 
 import {json5Content, json5Schema} from "../docs-example/json5-example";
 
-import {createEditorWithLSP} from "../utils";
+import {addFormatCommand, createEditorWithLSP} from "../utils";
 import {AceLanguageClient} from "ace-linters/build/ace-language-client";
 import {LanguageClientConfig} from "ace-linters/types/types/language-service";
 
@@ -30,21 +27,4 @@ for (let mode of modes) {
     i++;
 }
 
-let menuKb = new HashHandler([
-    {
-        bindKey: "Ctrl-Shift-B",
-        name: "format",
-        exec: function () {
-            languageProvider.format();
-        }
-    }
-]);
-
-event.addCommandKeyListener(window, function (e, hashId, keyCode) {
-    let keyString = keyUtil.keyCodeToString(keyCode);
-    let command = menuKb.findKeyCommand(hashId, keyString);
-    if (command) {
-        command.exec();
-        e.preventDefault();
-    }
-});
+addFormatCommand(languageProvider);
diff --git a/packages/demo/websockets-pylsp/client.ts b/packages/demo/websockets-pylsp/client.ts
@@ -1,9 +1,6 @@
 import "ace-code/esm-resolver";
-import * as event from "ace-code/src/lib/event";
-import {HashHandler} from "ace-code/src/keyboard/hash_handler";
-import * as keyUtil from "ace-code/src/lib/keys";
 import {AceLanguageClient} from "ace-linters/build/ace-language-client";
-import {createEditorWithLSP} from "../utils";
+import {addFormatCommand, createEditorWithLSP} from "../utils";
 import {pythonContent} from "../docs-example/python-example";
 import {LanguageClientConfig} from "ace-linters/types/types/language-service";
 
@@ -52,21 +49,4 @@ for (let mode of modes) {
     i++;
 }
 
-let menuKb = new HashHandler([
-    {
-        bindKey: "Ctrl-Shift-B",
-        name: "format",
-        exec: function () {
-            languageProvider.format();
-        }
-    }
-]);
-
-event.addCommandKeyListener(window, function (e, hashId, keyCode) {
-    let keyString = keyUtil.keyCodeToString(keyCode);
-    let command = menuKb.findKeyCommand(hashId, keyString);
-    if (command) {
-        command.exec();
-        e.preventDefault();
-    }
-});
+addFormatCommand(languageProvider);
diff --git a/packages/demo/websockets-sls/client.ts b/packages/demo/websockets-sls/client.ts
@@ -1,9 +1,6 @@
 import "ace-code/esm-resolver";
-import * as event from "ace-code/src/lib/event";
-import {HashHandler} from "ace-code/src/keyboard/hash_handler";
-import * as keyUtil from "ace-code/src/lib/keys";
 import {AceLanguageClient} from "ace-linters/build/ace-language-client";
-import {createEditorWithLSP} from "../utils";
+import {addFormatCommand, createEditorWithLSP} from "../utils";
 import {svelteContent} from "../docs-example/svelte-example";
 import {LanguageClientConfig} from "ace-linters/types/types/language-service";
 
@@ -26,21 +23,4 @@ for (let mode of modes) {
   i++;
 }
 
-let menuKb = new HashHandler([
-  {
-    bindKey: "Ctrl-Shift-B",
-    name: "format",
-    exec: function () {
-      languageProvider.format();
-    }
-  }
-]);
-
-event.addCommandKeyListener(window, function (e, hashId, keyCode) {
-  let keyString = keyUtil.keyCodeToString(keyCode);
-  let command = menuKb.findKeyCommand(hashId, keyString);
-  if (command) {
-    command.exec();
-    e.preventDefault();
-  }
-});
+addFormatCommand(languageProvider);
diff --git a/packages/demo/webworker-change-mode/demo.ts b/packages/demo/webworker-change-mode/demo.ts
@@ -0,0 +1,65 @@
+import "ace-code/esm-resolver";
+import "ace-code/src/ext/language_tools";
+import {typescriptContent} from "../docs-example/typescript-example";
+import * as theme from "ace-code/src/theme/textmate";
+import {LanguageProvider} from "ace-linters";
+import * as ace from "ace-code";
+import {addFormatCommand} from "../utils";
+
+let modes = [
+    {name: "typescript", mode: "ace/mode/typescript", content: typescriptContent},
+    {name: "json", mode: "ace/mode/json"},
+    {name: "json5", mode: "ace/mode/json5"},
+    {name: "html", mode: "ace/mode/html"},
+    {name: "css", mode: "ace/mode/css"},
+    {name: "less", mode: "ace/mode/less"},
+    {name: "scss", mode: "ace/mode/scss"},
+    {name: "python", mode: "ace/mode/python"},
+    {name: "javascript", mode: "ace/mode/javascript"},
+    {name: "tsx", mode: "ace/mode/tsx"},
+    {name: "lua", mode: "ace/mode/lua"},
+    {name: "yaml", mode: "ace/mode/yaml"},
+    {name: "xml", mode: "ace/mode/xml"},
+    {name: "php", mode: "ace/mode/php"},
+    {name: "mysql", mode: "ace/mode/mysql"},
+    {name: "swift", mode: "ace/mode/swift"},
+];
+let worker = new Worker(new URL('./webworker.ts', import.meta.url));
+let languageProvider = LanguageProvider.create(worker);
+
+let el = document.getElementById("ace_modes");
+el.onchange = function () {
+    let mode = modes.find(x => x.name == el["value"]);
+    editor.session.setMode(mode.mode);
+}
+for (var i = 0; i < modes.length; i++) {
+    let option = document.createElement("option");
+    option.value = modes[i].name;
+    option.innerText = modes[i].name;
+    el.appendChild(option);
+}
+
+let editorEl = document.createElement("div");
+let editorContainer = document.createElement("div");
+editorContainer.setAttribute("id", "container");
+editorContainer.style.height = "300px";
+editorEl.appendChild(editorContainer);
+editorEl.style.width = "49%";
+editorEl.style.float = "left";
+document.getElementById("wrapper").appendChild(editorEl);
+
+let currentMode = modes[0];
+
+let editor = ace.edit("container", {
+    mode: currentMode.mode,
+    value: currentMode.content,
+    enableBasicAutocompletion: true,
+    enableLiveAutocompletion: true,
+    enableSnippets: true,
+    theme: theme,
+    customScrollbar: true
+});
+
+languageProvider.registerEditor(editor);
+
+addFormatCommand(languageProvider);