Merge pull request #4 from Max-Leopold/Max-Leopold/Add-monaco-editor-support

Use Monaco editor instead of CodeMirror

Author: kddnewton

Gemfile.lock

@@ -5,6 +5,7 @@ GEM
     syntax_tree (2.3.1)
 
 PLATFORMS
+  ruby
   x86_64-darwin-21
   x86_64-linux
 

package.json

@@ -7,12 +7,11 @@
   "dependencies": {
     "@wasmer/wasi": "^0.12.0",
     "@wasmer/wasmfs": "^0.12.0",
-    "codemirror": "^5.65.3",
+    "@monaco-editor/loader": "^1.3.2",
     "path-browserify": "^1.0.1",
     "ruby-head-wasm-wasi": "^0.3.0"
   },
   "devDependencies": {
-    "@types/codemirror": "^5.60.5",
     "@types/node": "^17.0.27",
     "@types/path-browserify": "^1.0.0",
     "esbuild": "^0.14.38"

src/CodeMirror.ts

@@ -48,7 +48,3 @@ textarea {
   resize: none;
   white-space: pre;
 }
-
-.CodeMirror {
-  height: 100% !important;
-}

src/index.css

@@ -7,16 +7,16 @@ Promise.all([
   // We're going to load the editor asynchronously so that we can get to
   // first-paint faster. This works out nicely since we can use a textarea until
   // this chunk is loaded.
-  import("./CodeMirror").then(({ default: CodeMirror }) => {
+  import("./monacoLoader").then(async ({ default: loader }) => {
+    const monaco = await loader.init();
     const editor = document.getElementById("editor") as HTMLTextAreaElement;
     const newEditor = document.createElement("div");
     editor.replaceWith(newEditor);
-  
-    return CodeMirror(newEditor, {
-      lineNumbers: true,
-      mode: "ruby",
-      theme: "xq-light",
-      value: editor.value
+
+    return monaco.editor.create(
+      newEditor, {
+      value: editor.value,
+      language: 'ruby',
     });
   }),
   // We're going to load the Ruby VM chunk asynchronously because it is pretty
@@ -27,7 +27,7 @@ Promise.all([
   // First, grab a reference to the output element so that we can update it.
   // Then, set it initially to the output represented by the source.
   const output = document.getElementById("output") as HTMLTextAreaElement;
-  output.value = ruby.prettyPrint(editor.getDoc().getValue());
+  output.value = ruby.prettyPrint(editor.getValue());
   output.disabled = false;
 
   // This is the function that will be used to display the output from the
@@ -39,7 +39,7 @@ Promise.all([
     displayFunction = ruby[event.detail.kind];
 
     try {
-      output.value = displayFunction(editor.getDoc().getValue());
+      output.value = displayFunction(editor.getValue());
     } catch (error) {
       // For now, just ignoring the error. Eventually I'd like to make this mark
       // an error state on the editor to give feedback to the user.
@@ -78,9 +78,9 @@ Promise.all([
 
   // Attach to the editor and dispatch custom source-changed events whenever the
   // value is updated in the editor.
-  editor.on("change", () => {
+  editor.onDidChangeModelContent(() => {
     output.dispatchEvent(new CustomEvent<SourceChangedEvent>("source-changed", {
-      detail: { source: editor.getDoc().getValue() }
+      detail: { source: editor.getValue() }
     }));
   });
 
@@ -90,6 +90,6 @@ Promise.all([
   format.disabled = false;
 
   format.addEventListener("click", () => {
-    editor.getDoc().setValue(ruby.format(editor.getValue()));
+    editor.setValue(ruby.format(editor.getValue()));
   });
 });

src/index.ts

@@ -0,0 +1,3 @@
+import loader from '@monaco-editor/loader';
+
+export default loader

src/monacoLoader.ts

@@ -2,17 +2,12 @@
 # yarn lockfile v1
 
 
-"@types/codemirror@^5.60.5":
-  version "5.60.5"
-  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.5.tgz#5b989a3b4bbe657458cf372c92b6bfda6061a2b7"
-  integrity sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==
+"@monaco-editor/loader@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
+  integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
   dependencies:
-    "@types/tern" "*"
-
-"@types/estree@*":
-  version "0.0.51"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
-  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+    state-local "^1.0.6"
 
 "@types/node@^17.0.27":
   version "17.0.27"
@@ -24,13 +19,6 @@
   resolved "https://registry.yarnpkg.com/@types/path-browserify/-/path-browserify-1.0.0.tgz#294ec6e88b6b0d340a3897b7120e5b393f16690e"
   integrity sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==
 
-"@types/tern@*":
-  version "0.23.4"
-  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.4.tgz#03926eb13dbeaf3ae0d390caf706b2643a0127fb"
-  integrity sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==
-  dependencies:
-    "@types/estree" "*"
-
 "@wasmer/wasi@^0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@wasmer/wasi/-/wasi-0.12.0.tgz#89c7c5e5ba58f7dfae4e323359346639c4ec382a"
@@ -82,11 +70,6 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-codemirror@^5.65.3:
-  version "5.65.3"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.65.3.tgz#2d029930d5a293bc5fb96ceea64654803c0d4ac7"
-  integrity sha512-kCC0iwGZOVZXHEKW3NDTObvM7pTIyowjty4BUqeREROc/3I6bWbgZDA3fGDwlA+rbgRjvnRnfqs9SfXynel1AQ==
-
 end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -304,6 +287,11 @@ safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+state-local@^1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
+  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
+
 string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"