Fix the completion cell option for pyodide cells

Fixes #2.

NEWS.md

@@ -16,6 +16,8 @@
 
 * Better handle `echo: false` and `include: false` cell options (#62).
 
+* Fixed applying the `completion` cell option to `pyodide` cells (#2).
+
 # Quarto Live 0.1.1
 
 Initial release.

live-runtime/src/editor.ts

@@ -95,6 +95,8 @@ abstract class ExerciseEditor {
   indicator: Indicator;
   completionMethods: Promise<ExerciseCompletionMethods>;
 
+  abstract languageExtensions(): Extension[];
+
   constructor(code: string, options: ExerciseOptions) {
     if (typeof code !== "string") {
       throw new Error("Can't create editor, `code` must be a string.");
@@ -116,16 +118,10 @@ abstract class ExerciseEditor {
 
     const extensions = [
       basicSetup,
-      this.extensions(),
+      this.languageExtensions(),
       EditorView.updateListener.of((update) => this.onViewUpdate(update)),
     ];
 
-    if (options.completion) {
-      extensions.push(
-        autocompletion({ override: [(...args) => this.doCompletion(...args)] })
-      );
-    }
-
     // Load previous edits to editor from browser storage
     if (this.options.persist) {
       const storedCode = window.localStorage.getItem(this.storageKey);
@@ -183,42 +179,6 @@ abstract class ExerciseEditor {
     });
   }
 
-  extensions(): Extension[] {
-    const language = new Compartment();
-    const tabSize = new Compartment();
-    return [
-      syntaxHighlighting(tagHighlighterTok),
-      language.of(r()),
-      tabSize.of(EditorState.tabSize.of(2)),
-      Prec.high(
-        keymap.of([
-          {
-            key: 'Mod-Enter',
-            run: () => {
-              this.container.dispatchEvent(new CustomEvent('input', {
-                detail: { commit: true }
-              }));
-              return true;
-            },
-          },
-          {
-            key: 'Mod-Shift-m',
-            run: () => {
-              this.view.dispatch({
-                changes: {
-                  from: 0,
-                  to: this.view.state.doc.length,
-                  insert: this.view.state.doc.toString().trimEnd() + " |> ",
-                }
-              });
-              return true;
-            },
-          },
-        ]
-        )),
-    ];
-  }
-
   onInput(ev: CustomEvent) {
     // When using run button, prevent firing of reactive ojs updates until `manual: true`.
     if (this.options.runbutton && !ev.detail.commit) {
@@ -246,9 +206,6 @@ abstract class ExerciseEditor {
     );
   }
 
-  abstract setupCompletion(): Promise<any>;
-  abstract doCompletion(context: CompletionContext): Promise<any>;
-
   renderButton(spec: ExerciseButtonSpec) {
     // TODO: Fix: we use <a> because Quarto adds its own styling to <button>
     const dom = document.createElement("a");
@@ -482,6 +439,44 @@ export class WebRExerciseEditor extends ExerciseEditor {
     this.completionMethods = this.setupCompletion();
   }
 
+  languageExtensions(): Extension[] {
+    const language = new Compartment();
+    const tabSize = new Compartment();
+
+    return [
+      syntaxHighlighting(tagHighlighterTok),
+      autocompletion({ override: [(...args) => this.doCompletion(...args)] }),
+      language.of(r()),
+      tabSize.of(EditorState.tabSize.of(2)),
+      Prec.high(
+        keymap.of([
+          {
+            key: 'Mod-Enter',
+            run: () => {
+              this.container.dispatchEvent(new CustomEvent('input', {
+                detail: { commit: true }
+              }));
+              return true;
+            },
+          },
+          {
+            key: 'Mod-Shift-m',
+            run: () => {
+              this.view.dispatch({
+                changes: {
+                  from: 0,
+                  to: this.view.state.doc.length,
+                  insert: this.view.state.doc.toString().trimEnd() + " |> ",
+                }
+              });
+              return true;
+            },
+          },
+        ]
+        )),
+    ];
+  }
+
   render() {
     this.defaultCaption = 'R Code';
     return super.render();
@@ -501,6 +496,8 @@ export class WebRExerciseEditor extends ExerciseEditor {
   }
 
   async doCompletion(context: CompletionContext) {
+    if (!this.options.completion) return null;
+
     const completionMethods = await this.completionMethods;
     const line = context.state.doc.lineAt(context.state.selection.main.head).text;
     const { from, to, text } = context.matchBefore(/[a-zA-Z0-9_.:]*/) ?? { from: 0, to: 0, text: '' };
@@ -530,18 +527,18 @@ export class PyodideExerciseEditor extends ExerciseEditor {
   constructor(pyodidePromise: Promise<PyodideInterface>, code: string, options: ExerciseOptions) {
     super(code, options);
     this.pyodidePromise = pyodidePromise;
-    this.setupCompletion();
   }
 
   render() {
     this.defaultCaption = 'Python Code';
     return super.render();
   }
 
-  extensions() {
+  languageExtensions() {
     const language = new Compartment();
     const tabSize = new Compartment();
-    return [
+
+    const extensions = [
       syntaxHighlighting(tagHighlighterTok),
       language.of(python()),
       tabSize.of(EditorState.tabSize.of(2)),
@@ -559,15 +556,14 @@ export class PyodideExerciseEditor extends ExerciseEditor {
         ]
       )),
     ];
-  }
 
-  async setupCompletion() {
-    // TODO: Configurable autocomplete for python
-    const pyodide = await this.pyodidePromise;
-  }
+    // Explicitly disable autocompletion if requested
+    if (!this.options.completion) {
+      extensions.push(
+        autocompletion({ override: [(...args) => null] })
+      );
+    }
 
-  async doCompletion(context: CompletionContext) {
-    return null;
+    return extensions;
   }
-
 }