Experimental: Monaco in VE

apps/overview.md

@@ -44,11 +44,11 @@
   - see [package.json](./vscode/package.json) for declaration of commands
   - see [main.ts](./vscode/src/main.ts) for registration of command
 
-- Look for "behaviors" in ProseMirror, CodeMirror
+- Look for "behaviors" in ProseMirror, Monaco (`packages/editor-monaco`; the previous CodeMirror implementation is kept in `packages/editor-codemirror`)
   - arrow keys, ctrl+z, mouse click, etc.
 
 - [commands in Ace](packages/editor/src/optional/ace/ace.ts)
-  - used instead of CodeMirror for code cells in the Visual Editor in RStudio
+  - used instead of Monaco for code cells in the Visual Editor in RStudio
 
 ## Communication boundaries
 
@@ -129,20 +129,15 @@ which passes through `VisualEditorPovider`, `visualEditorClient`,
 ### Example: Getting diagnostics for YAML front matter
 
 For example in
-[diagnostics.ts](../packages/editor-codemirror/src/behaviors/diagnostics.ts)
+[diagnostics.ts](../packages/editor-monaco/src/behaviors/diagnostics.ts)
 
 ```ts
 const diagnostics = await getDiagnostics(cellContext, behaviorContext);
-if (!diagnostics) return;
-
-for (const error of diagnostics) {
-  underline(
-    cmView,
-    rowColumnToIndex(code, [error[kStartColumn], error[kStartRow]]),
-    rowColumnToIndex(code, [error[kEndColumn], error[kEndRow]]),
-    error.text,
-  );
+const model = editor.getModel();
+if (id !== requestId || !model || model.isDisposed()) {
+  return;
 }
+setMarkers(model, diagnostics || []);
 ```
 
 which passes through

apps/vscode-editor/package.json

@@ -24,6 +24,7 @@
     "core-browser": "*",
     "editor": "*",
     "editor-codemirror": "*",
+    "editor-monaco": "*",
     "editor-core": "*",
     "editor-types": "*",
     "editor-ui": "*",

apps/vscode/package.json

@@ -1528,6 +1528,7 @@
     "test-positron": "npm run build-test && node ./scripts/run-positron-tests.mjs"
   },
   "dependencies": {
+    "jsonc-parser": "^3.3.1",
     "axios": "^1.20.0",
     "core": "*",
     "core-node": "*",

apps/vscode/src/providers/editor/codeview.ts

@@ -42,6 +42,7 @@ import { embeddedLanguage } from "../../vdoc/languages";
 import { virtualDocForCode } from "../../vdoc/vdoc";
 import { vdocCompletions } from "../../vdoc/vdoc-completion";
 import { MarkdownEngine } from "../../markdown/engine";
+import { activeColorTheme, contributedGrammar, contributedLanguages, editorFont } from "./theme";
 
 /**
  * In the host, this initializes functions that can be called by the client (the visual editor) for doing code cell things.
@@ -117,6 +118,18 @@ export function vscodeCodeViewServer(_engine: MarkdownEngine, document: TextDocu
         isIncomplete: false
       };
     },
+    async codeViewColorTheme(themeId?: string) {
+      return activeColorTheme(themeId);
+    },
+    async codeViewLanguages() {
+      return contributedLanguages();
+    },
+    async codeViewGrammar(scopeName: string) {
+      return contributedGrammar(scopeName);
+    },
+    async codeViewEditorFont() {
+      return editorFont(document);
+    },
     async codeViewPreviewDiagram(state: DiagramState, activate: boolean) {
       commands.executeCommand("quarto.previewDiagram", { state, activate });
     }

apps/vscode/src/providers/editor/editor.ts

@@ -625,7 +625,7 @@ export class VisualEditorProvider implements CustomTextEditorProvider {
             <meta charset="UTF-8">
 
             <!-- Use a content security policy to only allow scripts that have a specific nonce. -->
-            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${webview.cspSource} 'unsafe-inline'; img-src https: data: ${webview.cspSource}; font-src data: ${webview.cspSource};">
+            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}' 'wasm-unsafe-eval'; worker-src blob:; style-src ${webview.cspSource} 'unsafe-inline'; img-src https: data: ${webview.cspSource}; font-src data: ${webview.cspSource};">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
             <link href="${stylesUri}" rel="stylesheet" />

apps/vscode/src/providers/editor/prefs.ts

@@ -43,6 +43,11 @@ const kQuartoEditorMarkdownReferences = "quarto.visualEditor.markdownReferences"
 const kQuartoEditorMarkdownReferenceLinks = "quarto.visualEditor.markdownReferenceLinks";
 
 const kMonitoredConfigurations = [
+  "editor.fontFamily",
+  "editor.fontWeight",
+  "editor.fontLigatures",
+  "editor.lineHeight",
+  "editor.letterSpacing",
   kEditorAutoClosingBrackets,
   kEditorRenderWhitespace,
   kEditorInsertSpaces,