Add option to turn it on/off

index.html

@@ -261,6 +261,10 @@
              	    <input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
              	  </div>
+             	  <div class="flex items-center mb-4 ml-5">
+             	    <input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+             	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Completions</label>
+             	  </div>
              	  <div class="flex items-center mb-4 ml-5">
              	    <input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
              	    <label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>

src/DomElements.ts

@@ -1,12 +1,12 @@
 export type ElementMap = {
   [key: string]:
-    | HTMLElement
+  | HTMLElement
-    | HTMLButtonElement
+  | HTMLButtonElement
-    | HTMLDivElement
+  | HTMLDivElement
-    | HTMLInputElement
+  | HTMLInputElement
-    | HTMLSelectElement
+  | HTMLSelectElement
-    | HTMLCanvasElement
+  | HTMLCanvasElement
-    | HTMLFormElement;
+  | HTMLFormElement;
 };
 
 export const singleElements = {
@@ -36,6 +36,7 @@ export const singleElements = {
   line_numbers_checkbox: "show-line-numbers",
   time_position_checkbox: "show-time-position",
   tips_checkbox: "show-tips",
+  completion_checkbox: "show-completions",
   midi_clock_checkbox: "send-midi-clock",
   midi_channels_scripts: "midi-channels-scripts",
   midi_clock_ppqn: "midi-clock-ppqn-input",

src/EditorSetup.ts

@@ -37,7 +37,7 @@ import { inlineHoveringTips } from "./documentation/inlineHelp";
 import { toposCompletions } from "./documentation/inlineHelp";
 import { javascriptLanguage } from "@codemirror/lang-javascript"
 
-const jsCompletions = javascriptLanguage.data.of({
+export const jsCompletions = javascriptLanguage.data.of({
   autocomplete: toposCompletions
 })
 
@@ -53,7 +53,6 @@ export const editorSetup: Extension = (() => [
   bracketMatching(),
   closeBrackets(),
   autocompletion(),
-  jsCompletions,
   highlightActiveLine(),
   highlightSelectionMatches(),
   keymap.of([
@@ -67,6 +66,7 @@ export const editorSetup: Extension = (() => [
 export const installEditor = (app: Editor) => {
   app.vimModeCompartment = new Compartment();
   app.hoveringCompartment = new Compartment();
+  app.completionsCompartment = new Compartment();
   app.withLineNumbers = new Compartment();
   app.chosenLanguage = new Compartment();
   app.fontSize = new Compartment();
@@ -91,6 +91,7 @@ export const installEditor = (app: Editor) => {
     app.withLineNumbers.of(lines),
     app.fontSize.of(fontModif),
     app.hoveringCompartment.of(app.settings.tips ? inlineHoveringTips : []),
+    app.completionsCompartment.of(app.settings.completions ? jsCompletions : []),
     editorSetup,
     toposTheme,
     app.chosenLanguage.of(javascript()),

src/FileManagement.ts

@@ -48,6 +48,7 @@ export interface Settings {
    * @param line_numbers - Whether or not to show line numbers
    * @param time_position - Whether or not to show time position
    * @param tips - Whether or not to show tips
+   * @param completions- Whether or not to show completions
    * @param send_clock - Whether or not to send midi clock
    * @param midi_channels_scripts - Whether midi input channels fires scripts
    * @param midi_clock_input - The name of the midi clock input
@@ -64,6 +65,7 @@ export interface Settings {
   time_position: boolean;
   load_demo_songs: boolean;
   tips: boolean;
+  completions: boolean;
   send_clock: boolean;
   midi_channels_scripts: boolean;
   midi_clock_input: string | undefined;
@@ -125,6 +127,7 @@ export class AppSettings {
    * @param line_numbers - Whether or not to show line numbers
    * @param time_position - Whether or not to show time position
    * @param tips - Whether or not to show tips
+   * @param completions - Whether or not to show completions
    * @param send_clock - Whether or not to send midi clock
    * @param midi_channels_scripts - Whether midi input channels fires scripts
    * @param midi_clock_input - The name of the midi clock input
@@ -140,7 +143,8 @@ export class AppSettings {
   public selected_universe: string = "Default";
   public line_numbers: boolean = true;
   public time_position: boolean = true;
-  public tips: boolean = true;
+  public tips: boolean = false;
+  public completions: boolean = false;
   public send_clock: boolean = false;
   public midi_channels_scripts: boolean = true;
   public midi_clock_input: string | undefined = undefined;
@@ -164,6 +168,7 @@ export class AppSettings {
       this.line_numbers = settingsFromStorage.line_numbers;
       this.time_position = settingsFromStorage.time_position;
       this.tips = settingsFromStorage.tips;
+      this.completions = settingsFromStorage.completions;
       this.send_clock = settingsFromStorage.send_clock;
       this.midi_channels_scripts = settingsFromStorage.midi_channels_scripts;
       this.midi_clock_input = settingsFromStorage.midi_clock_input;
@@ -193,6 +198,7 @@ export class AppSettings {
       line_numbers: this.line_numbers,
       time_position: this.time_position,
       tips: this.tips,
+      completions: this.completions,
       send_clock: this.send_clock,
       midi_channels_scripts: this.midi_channels_scripts,
       midi_clock_input: this.midi_clock_input,
@@ -220,6 +226,7 @@ export class AppSettings {
     this.line_numbers = settings.line_numbers;
     this.time_position = settings.time_position;
     this.tips = settings.tips;
+    this.completions = settings.completions;
     this.send_clock = settings.send_clock;
     this.midi_channels_scripts = settings.midi_channels_scripts;
     this.midi_clock_input = settings.midi_clock_input;

src/InterfaceLogic.ts

@@ -21,6 +21,7 @@ import { loadSamples } from "./API";
 import { tryEvaluate } from "./Evaluator";
 import { inlineHoveringTips } from "./documentation/inlineHelp";
 import { lineNumbers } from "@codemirror/view";
+import { jsCompletions } from "./EditorSetup";
 
 export const installInterfaceLogic = (app: Editor) => {
   (app.interface.line_numbers_checkbox as HTMLInputElement).checked =
@@ -28,6 +29,8 @@ export const installInterfaceLogic = (app: Editor) => {
   (app.interface.time_position_checkbox as HTMLInputElement).checked =
     app.settings.time_position;
   (app.interface.tips_checkbox as HTMLInputElement).checked = app.settings.tips;
+  (app.interface.completion_checkbox as HTMLInputElement).checked = app.settings.completions;
+
   (app.interface.midi_clock_checkbox as HTMLInputElement).checked =
     app.settings.send_clock;
   (app.interface.midi_channels_scripts as HTMLInputElement).checked =
@@ -378,6 +381,18 @@ export const installInterfaceLogic = (app: Editor) => {
     });
   });
 
+  app.interface.completion_checkbox.addEventListener("change", () => {
+    let checked = (app.interface.completion_checkbox as HTMLInputElement).checked
+      ? true
+      : false;
+    app.settings.completions = checked;
+    app.view.dispatch({
+      effects: app.completionsCompartment.reconfigure(
+        checked ? jsCompletions : []
+      ),
+    });
+  });
+
   app.interface.midi_clock_checkbox.addEventListener("change", () => {
     let checked = (app.interface.midi_clock_checkbox as HTMLInputElement)
       .checked

src/documentation/inlineHelp.ts

@@ -971,7 +971,6 @@ export const inlineHoveringTips = hoverTooltip(
   }
 );
 
-
 export const toposCompletions = (context: CompletionContext) => {
   let word = context.matchBefore(/\w*/)
   if (word) {

src/main.ts

@@ -42,6 +42,7 @@ export class Editor {
   withLineNumbers!: Compartment;
   vimModeCompartment!: Compartment;
   hoveringCompartment!: Compartment;
+  completionsCompartment!: Compartment;
   chosenLanguage!: Compartment;
   dynamicPlugins!: Compartment;
   currentDocumentationPane: string = "introduction";