From 816538c6b1ed36a1a5d3e8be237e54692a9f4d8e Mon Sep 17 00:00:00 2001 From: Max Leopold Date: Sun, 15 May 2022 13:53:09 +0200 Subject: [PATCH] Use monaco editor instead of CodeMirror --- Gemfile.lock | 1 + package.json | 3 +-- src/CodeMirror.ts | 7 ------- src/index.css | 4 ---- src/index.ts | 24 ++++++++++++------------ src/monacoLoader.ts | 3 +++ yarn.lock | 32 ++++++++++---------------------- 7 files changed, 27 insertions(+), 47 deletions(-) delete mode 100644 src/CodeMirror.ts create mode 100644 src/monacoLoader.ts diff --git a/Gemfile.lock b/Gemfile.lock index 3c6923e..7135b04 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -5,6 +5,7 @@ GEM syntax_tree (2.3.1) PLATFORMS + ruby x86_64-darwin-21 x86_64-linux diff --git a/package.json b/package.json index 01ca096..ab399da 100644 --- a/package.json +++ b/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" diff --git a/src/CodeMirror.ts b/src/CodeMirror.ts deleted file mode 100644 index 4124c41..0000000 --- a/src/CodeMirror.ts +++ /dev/null @@ -1,7 +0,0 @@ -import CodeMirror from "codemirror"; - -import "codemirror/mode/ruby/ruby"; -import "codemirror/lib/codemirror.css"; -import "codemirror/theme/xq-light.css"; - -export default CodeMirror; diff --git a/src/index.css b/src/index.css index 02f9774..3e0e725 100644 --- a/src/index.css +++ b/src/index.css @@ -48,7 +48,3 @@ textarea { resize: none; white-space: pre; } - -.CodeMirror { - height: 100% !important; -} diff --git a/src/index.ts b/src/index.ts index 7b58b19..de7e233 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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("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())); }); }); diff --git a/src/monacoLoader.ts b/src/monacoLoader.ts new file mode 100644 index 0000000..b445ee2 --- /dev/null +++ b/src/monacoLoader.ts @@ -0,0 +1,3 @@ +import loader from '@monaco-editor/loader'; + +export default loader diff --git a/yarn.lock b/yarn.lock index ae57013..196b25b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"