Monaco Editor Update (#29)

* Ignore a few files that are generated from tests. * Update the MonacoEditor to v0.43.0 from v0.31.0 * Fix WebR chunks not working with Safari browser #21 by re-arranging the load steps for MonacoEditor The `loader.js` and `require.config()` initialization is set to happen at the top of the document's <body> instead of the <head>. * Fix #28 by re-registering keyboard shortcuts. * Bump extension version to 0.3.2
coatless · Sep 14, 2023 · deb3cf6 · deb3cf6
1 parent 3ac3256
commit deb3cf6
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,5 @@
 /.luarc.json
+*_files
+webr-worker.js
+webr-serviceworker.js
+webr-*.html
diff --git a/_extensions/webr/_extension.yml b/_extensions/webr/_extension.yml
@@ -1,7 +1,7 @@
 name: webr
 title: Embedded webr code cells
 author: James Joseph Balamuta
-version: 0.3.1
+version: 0.3.2
 quarto-required: ">=1.2.198"
 contributes:
   filters:

diff --git a/_extensions/webr/monaco-editor-init.html b/_extensions/webr/monaco-editor-init.html
@@ -0,0 +1,10 @@
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
+<script type="module">
+
+  // Configure the Monaco Editor's loader
+  require.config({
+    paths: {
+      'vs': 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
+    }
+  });
+</script>
diff --git a/_extensions/webr/webr-editor.html b/_extensions/webr/webr-editor.html
@@ -30,20 +30,6 @@
       hideCursorInOverviewRuler: true  // Remove cursor indictor in right hand side scroll bar
     });
 
-    // Add a keydown event listener for Shift+Enter using the addCommand method
-    editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, function () {
-      // Code to run when Shift+Enter is pressed
-      executeCode(editor.getValue());
-    });
-
-    // Add a keydown event listener for Ctrl+Enter to run selected code
-    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
-      // Get the selected text from the editor
-      const selectedText = editor.getModel().getValueInRange(editor.getSelection());
-      // Code to run when Ctrl+Enter is pressed (run selected code)
-      executeCode(selectedText);
-    });
-
     // Dynamically modify the height of the editor window if new lines are added.
     let ignoreEvent = false;
     const updateHeight = () => {
@@ -61,6 +47,32 @@
       }
     };
 
+    // Registry of keyboard shortcuts that should be re-added to each editor window
+    // when focus changes.
+    const addWebRKeyboardShortCutCommands = () => {
+      // Add a keydown event listener for Shift+Enter to run all code in cell
+      editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, () => {
+
+        // Retrieve all text inside the editor
+        executeCode(editor.getValue());
+      });
+
+      // Add a keydown event listener for CMD/Ctrl+Enter to run selected code
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+        // Get the selected text from the editor
+        const selectedText = editor.getModel().getValueInRange(editor.getSelection());
+        // Code to run when Ctrl+Enter is pressed (run selected code)
+        executeCode(selectedText);
+      });
+    }
+
+    // Register an on focus event handler for when a code cell is selected to update
+    // what keyboard shortcut commands should work.
+    // This is a workaround to fix a regression that happened with multiple
+    // editor windows since Monaco 0.32.0 
+    // https://github.com/microsoft/monaco-editor/issues/2947
+    editor.onDidFocusEditorText(addWebRKeyboardShortCutCommands);
+
     // Register an on change event for when new code is added to the editor window
     editor.onDidContentSizeChange(updateHeight);
 

diff --git a/_extensions/webr/webr-init.html b/_extensions/webr/webr-init.html
@@ -1,4 +1,5 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/editor/editor.main.css" />
+
 <style>
   .monaco-editor pre {
     background-color: unset !important;
@@ -10,16 +11,8 @@
     border-bottom-right-radius: 0;
   }
 </style>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js"></script>
-<script type="module">
-
-  // Configure the Monaco Editor's loader
-  require.config({
-    paths: {
-      'vs': 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
-    }
-  });
 
+<script type="module">
 
   // Start a timer
   const initializeWebRTimerStart = performance.now();

diff --git a/_extensions/webr/webr.lua b/_extensions/webr/webr.lua
@@ -270,6 +270,9 @@ function ensureWebRSetup()
   -- https://quarto.org/docs/extensions/lua-api.html#includes
   quarto.doc.include_text("in-header", initializedConfigurationWebR)
 
+  -- Insert the monaco editor initialization
+  quarto.doc.include_file("before-body", "monaco-editor-init.html")
+
   -- Copy the two web workers into the directory
   -- https://quarto.org/docs/extensions/lua-api.html#dependencies