Cleanup when the CodeMirror component is unloaded

packages/codemirror/src/extensions/lsp/plugin.tsx

@@ -2,21 +2,21 @@
 // BSD 3-Clause License
 // Copyright (c) 2021, Mahmud Ridwan
 // All rights reserved.
-// 
+//
 // Redistribution and use in source and binary forms, with or without
 // modification, are permitted provided that the following conditions are met:
-// 
+//
 // * Redistributions of source code must retain the above copyright notice, this
 //   list of conditions and the following disclaimer.
-// 
+//
 // * Redistributions in binary form must reproduce the above copyright notice,
 //   this list of conditions and the following disclaimer in the documentation
 //   and/or other materials provided with the distribution.
-// 
+//
 // * Neither the name of the library nor the names of its
 //   contributors may be used to endorse or promote products derived from
 //   this software without specific prior written permission.
-// 
+//
 // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
@@ -28,7 +28,6 @@
 // OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-
 import { renderToString } from "react-dom/server";
 import React from "react";
 import {
@@ -80,7 +79,7 @@ const lspSeverityToCmSeverity = {
 } as const;
 
 // One language server is shared across all plugin instances
-const languageServer = new LSP();
+export const uniqueLanguageServerInstance = new LSP();
 
 export class LSPPlugin implements PluginValue {
     documentId: string;
@@ -106,13 +105,15 @@ export class LSPPlugin implements PluginValue {
         if (value === this.value) {
             return;
         }
-        await languageServer.updateDocument(this.uri, value);
+        await uniqueLanguageServerInstance.updateDocument(this.uri, value);
         this.pollForDiagnostics();
         this.value = value;
     }
 
     async pollForDiagnostics() {
-        this.diagnosticsPromise = languageServer.getDiagnostics(this.uri);
+        this.diagnosticsPromise = uniqueLanguageServerInstance.getDiagnostics(
+            this.uri,
+        );
         this.diagnostics = await this.diagnosticsPromise;
         this.processDiagnostics();
     }
@@ -171,7 +172,7 @@ export class LSPPlugin implements PluginValue {
             LSPCompletionTriggerKind.Invoked;
         let triggerCharacter: string | undefined;
         const precedingTriggerCharacter =
-            languageServer.completionTriggers.includes(
+            uniqueLanguageServerInstance.completionTriggers.includes(
                 line.text[pos - line.from - 1],
             );
         if (!explicit && precedingTriggerCharacter) {
@@ -187,7 +188,7 @@ export class LSPPlugin implements PluginValue {
             return null;
         }
         const position = offsetToPos(state.doc, pos);
-        const result = await languageServer.getCompletionItems(
+        const result = await uniqueLanguageServerInstance.getCompletionItems(
             this.uri,
             { line: position.line, character: position.character },
             {

packages/codemirror/src/extensions/lsp/worker.ts

@@ -61,8 +61,21 @@ export class LSP {
         });
     }
 
-    async updateDocument(uri: string, text: string) {
+    async closeDocument(uri: string) {
         if (!this.lspConn) {
+            await this.init();
+            await this.closeDocument(uri);
+            return;
+        }
+        await this.lspConn.textDocumentClosed({
+            textDocument: {
+                uri,
+            },
+        });
+    }
+
+    async updateDocument(uri: string, text: string) {
+        if (!this.lspConn || !this.versionCounter[uri]) {
             await this.initDocument(uri, text);
             return;
         }

packages/codemirror/src/extensions/theme.ts

@@ -0,0 +1,39 @@
+import { EditorView } from "@codemirror/view";
+
+export const colorTheme = EditorView.theme({
+    "&": {
+        color: "var(--canvastext)",
+        height: "100%",
+        //backgroundColor: "var(--canvas)",
+    },
+    ".cm-content": {
+        caretColor: "#0e9",
+        borderDownColor: "var(--canvastext)",
+    },
+    ".cm-editor": {
+        caretColor: "#0e9",
+        backgroundColor: "var(--canvas)",
+    },
+    "&.cm-focused .cm-cursor": {
+        backgroundColor: "var(--lightBlue)",
+        borderLeftColor: "var(--canvastext)",
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+        backgroundColor: "var(--mainGray)",
+    },
+    "&.cm-focused": {
+        color: "var(--canvastext)",
+    },
+    "cm-selectionLayer": {
+        backgroundColor: "var(--mainGreen)",
+    },
+    ".cm-gutters": {
+        backgroundColor: "var(--mainGray)",
+        color: "black",
+        border: "none",
+    },
+    ".cm-activeLine": {
+        backgroundColor: "var(--mainGray)",
+        color: "black",
+    },
+});

packages/codemirror/src/index.ts

@@ -0,0 +1 @@
+export * from "./CodeMirror";

packages/codemirror/src/test-main.tsx

@@ -5,13 +5,22 @@
 
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { CodeMirror2 } from "./CodeMirror2";
+import { CodeMirror } from "./CodeMirror";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-    <React.Fragment>
-        <CodeMirror2
-            onBeforeChange={() => {}}
-            value={`
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
+
+function App() {
+    const [viewVisible, setViewVisible] = React.useState(true);
+
+    return (
+        <React.Fragment>
+            <button onClick={() => setViewVisible(!viewVisible)}>
+                {viewVisible ? "Hide Editor" : "Show Editor"}
+            </button>
+            {viewVisible && (
+                <CodeMirror
+                    onChange={() => {}}
+                    value={`
 <p xxx />
 <p>Use this to test DoenetML.
  Some text &amp;
@@ -25,27 +34,17 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   
 </graph>
 `}
-            onBlur={
-                () => {} //console.log("blur")
-            }
-            onFocus={
-                () => {} //console.log("focus")
-            }
-            onCursorChange={(e) => console.log("cursor change", e)}
-        />
-        {
-            <CodeMirror2
-                onBeforeChange={() => {}}
+                    onBlur={() => console.log("blur")}
+                    onFocus={() => console.log("focus")}
+                    onCursorChange={(e) => console.log("cursor change", e)}
+                />
+            )}
+            <h5>Read only view below</h5>
+            <CodeMirror
+                onChange={() => {}}
                 value={`<p>foo</p>`}
-                onBlur={
-                    () => {} //console.log("blur")
-                }
-                onFocus={
-                    () => {}
-                    //console.log("focus")
-                }
                 readOnly={true}
             />
-        }
-    </React.Fragment>,
-);
+        </React.Fragment>
+    );
+}

packages/doenetml/src/Viewer/renderers/codeEditor-ts.tsx

@@ -281,7 +281,7 @@ export default React.memo(function CodeEditor(props) {
         <div key={editorKey} id={editorKey} style={editorStyle}>
             <Box flexGrow={1} w="100%" overflowY="scroll" overflowX="hidden">
                 <CodeMirror
-                    setInternalValueTo={updateInternalValueTo.current}
+                    value={updateInternalValueTo.current}
                     //TODO: read only isn't working <codeeditor disabled />
                     readOnly={SVs.disabled}
                     onBlur={() => {
@@ -297,8 +297,7 @@ export default React.memo(function CodeEditor(props) {
                     onFocus={() => {
                         // console.log(">>codeEditor FOCUS!!!!!")
                     }}
-                    onBeforeChange={onEditorChange}
-                    paddingBottom={paddingBottom}
+                    onChange={onEditorChange}
                 />
             </Box>
             {errorsAndWarnings}

packages/lsp-tools/src/dev-site.tsx

@@ -141,10 +141,10 @@ function App() {
             >
                 <div style={{ flexBasis: 0, flexGrow: 1, maxWidth: "50%" }}>
                     <CodeMirror
-                        onBeforeChange={(val) => {
+                        onChange={(val) => {
                             setDoenetSource(val);
                         }}
-                        setInternalValueTo={INITIAL_DOENET_SOURCE}
+                        value={INITIAL_DOENET_SOURCE}
                         onCursorChange={(selection) => {
                             const range = selection.ranges[0];
                             if (!range) {

packages/parser/src/dev-site.tsx

@@ -89,10 +89,10 @@ function App() {
             >
                 <div style={{ flexBasis: 0, flexGrow: 1, maxWidth: "50%" }}>
                     <CodeMirror
-                        onBeforeChange={(val) => {
+                        onChange={(val) => {
                             setDoenetSource(val);
                         }}
-                        setInternalValueTo={INITIAL_DOENET_SOURCE}
+                        value={INITIAL_DOENET_SOURCE}
                     />
                 </div>
                 <div

packages/vscode-extension/src/language-server/index.ts

@@ -20,6 +20,17 @@ import { addValidationSupport } from "./features/validate";
 import { addDocumentCompletionSupport } from "./features/completions";
 import { addDocumentHoverSupport } from "./features/hover";
 
+try {
+    globalThis.LSP_GLOBALS = {
+        config,
+        documentInfo,
+        documentSettings,
+        documents,
+    };
+} catch (e) {
+    console.log(e);
+}
+
 /* browser specific setup code */
 const messageReader = new BrowserMessageReader(self);
 const messageWriter = new BrowserMessageWriter(self);