From 3069b14e9c73dbd77bc7ef3f706c09c10063402a Mon Sep 17 00:00:00 2001
From: Roipoussiere <roipoussiere@protonmail.com>
Date: Fri, 9 Jun 2023 13:41:40 +0200
Subject: [PATCH 1/6] enable autocompletion

---
 packages/react/src/components/CodeMirror6.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index ebe3dd11..95f30cd4 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -7,7 +7,7 @@ import strudelTheme from '../themes/strudel-theme';
 import './style.css';
 import { useCallback } from 'react';
 import { autocompletion } from '@codemirror/autocomplete';
-//import { strudelAutocomplete } from './Autocomplete';
+import { strudelAutocomplete } from './Autocomplete';
 import { vim } from '@replit/codemirror-vim';
 import { emacs } from '@replit/codemirror-emacs';
 
@@ -93,8 +93,7 @@ const staticExtensions = [
   highlightField,
   flashField,
   // javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
-  // autocompletion({ override: [strudelAutocomplete] }),
-  autocompletion({ override: [] }), // wait for https://github.com/uiwjs/react-codemirror/pull/458
+  autocompletion({ override: [strudelAutocomplete] }),
 ];
 
 export default function CodeMirror({

From a9ad3a56ad52d84efa1f8eec12ea50d627e06503 Mon Sep 17 00:00:00 2001
From: Roipoussiere <roipoussiere@protonmail.com>
Date: Fri, 9 Jun 2023 14:30:20 +0200
Subject: [PATCH 2/6] autocomplete: avoid tabs overlapping

---
 packages/react/src/components/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css
index 6d5d0805..d61c6619 100644
--- a/packages/react/src/components/style.css
+++ b/packages/react/src/components/style.css
@@ -24,3 +24,7 @@
 .cm-theme-light {
   width: 100%;
 }
+
+footer {
+  z-index: 0 !important;
+}

From 6f04a1b8fabde2c6e0a140136f0da8b224458d68 Mon Sep 17 00:00:00 2001
From: Roipoussiere <roipoussiere@protonmail.com>
Date: Fri, 9 Jun 2023 14:52:07 +0200
Subject: [PATCH 3/6] autocomplete: add vanilla js completion

---
 packages/react/src/components/CodeMirror6.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 95f30cd4..920ed367 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import _CodeMirror from '@uiw/react-codemirror';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
-import { javascript } from '@codemirror/lang-javascript';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import strudelTheme from '../themes/strudel-theme';
 import './style.css';
 import { useCallback } from 'react';
@@ -92,8 +92,7 @@ const staticExtensions = [
   javascript(),
   highlightField,
   flashField,
-  // javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
-  autocompletion({ override: [strudelAutocomplete] }),
+  javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
 ];
 
 export default function CodeMirror({

From 2d2d0cabb3ab66c3ba119e09e4af06ee9fa74b47 Mon Sep 17 00:00:00 2001
From: Roipoussiere <roipoussiere@protonmail.com>
Date: Fri, 9 Jun 2023 16:38:48 +0200
Subject: [PATCH 4/6] Add option in settings to enable autocompletion

---
 packages/react/src/components/CodeMirror6.jsx | 11 ++++++++++-
 website/src/repl/Footer.jsx                   | 17 +++++++++++++++--
 website/src/repl/Repl.jsx                     | 10 +++++++++-
 website/src/settings.mjs                      |  2 ++
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 920ed367..99e224b9 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -103,6 +103,7 @@ export default function CodeMirror({
   theme,
   keybindings,
   isLineNumbersDisplayed,
+  isAutoCompletionEnabled,
   fontSize = 18,
   fontFamily = 'monospace',
   options,
@@ -114,12 +115,14 @@ export default function CodeMirror({
     },
     [onChange],
   );
+
   const handleOnCreateEditor = useCallback(
     (view) => {
       onViewChanged?.(view);
     },
     [onViewChanged],
   );
+
   const handleOnUpdate = useCallback(
     (viewUpdate) => {
       if (viewUpdate.selectionSet && onSelectionChange) {
@@ -128,6 +131,7 @@ export default function CodeMirror({
     },
     [onSelectionChange],
   );
+
   const extensions = useMemo(() => {
     let bindings = {
       vim,
@@ -138,6 +142,11 @@ export default function CodeMirror({
     }
     return staticExtensions;
   }, [keybindings]);
+
+  const setAutoCompletion = isAutoCompletionEnabled => isAutoCompletionEnabled ?
+    javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }) :
+    autocompletion({ override: [] })
+
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
@@ -146,7 +155,7 @@ export default function CodeMirror({
         onChange={handleOnChange}
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
-        extensions={extensions}
+        extensions={[ ...extensions, setAutoCompletion(isAutoCompletionEnabled) ]}
         basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
       />
     </div>
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index c31e167a..191159c9 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -364,7 +364,15 @@ const fontFamilyOptions = {
 };
 
 function SettingsTab({ scheduler }) {
-  const { theme, keybindings, isLineNumbersDisplayed, fontSize, fontFamily } = useSettings();
+  const {
+    theme,
+    keybindings,
+    isLineNumbersDisplayed,
+    isAutoCompletionEnabled,
+    fontSize,
+    fontFamily
+  } = useSettings();
+
   return (
     <div className="text-foreground p-4 space-y-4">
       {/* <FormItem label="Tempo">
@@ -406,7 +414,7 @@ function SettingsTab({ scheduler }) {
           />
         </FormItem>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         <FormItem label="Keybindings">
           <ButtonGroup
             value={keybindings}
@@ -419,6 +427,11 @@ function SettingsTab({ scheduler }) {
           onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
           value={isLineNumbersDisplayed}
         />
+        <Checkbox
+          label="Enable auto-completion"
+          onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
+          value={isAutoCompletionEnabled}
+        />
       </div>
       <FormItem label="Reset Settings">
         <button
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 4027b075..58bf6e0f 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -105,7 +105,14 @@ export function Repl({ embedded = false }) {
   const [lastShared, setLastShared] = useState();
   const [pending, setPending] = useState(true);
 
-  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings();
+  const {
+    theme,
+    keybindings,
+    fontSize,
+    fontFamily,
+    isLineNumbersDisplayed,
+    isAutoCompletionEnabled
+  } = useSettings();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({
@@ -272,6 +279,7 @@ export function Repl({ embedded = false }) {
             value={code}
             keybindings={keybindings}
             isLineNumbersDisplayed={isLineNumbersDisplayed}
+            isAutoCompletionEnabled={isAutoCompletionEnabled}
             fontSize={fontSize}
             fontFamily={fontFamily}
             onChange={handleChangeCode}
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index a6a5cc2d..2e42f746 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -5,6 +5,7 @@ export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
   isLineNumbersDisplayed: true,
+  isAutoCompletionEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -21,6 +22,7 @@ export function useSettings() {
     ...state,
     isZen: [true, 'true'].includes(state.isZen) ? true : false,
     isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
+    isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,
     fontSize: Number(state.fontSize),
   };
 }

From 8e6909478c904716d9b2a916ec0a87ad5837e6f9 Mon Sep 17 00:00:00 2001
From: Roipoussiere <roipoussiere@protonmail.com>
Date: Fri, 9 Jun 2023 16:42:31 +0200
Subject: [PATCH 5/6] autocompletion: lint

---
 packages/react/src/components/CodeMirror6.jsx | 9 +++++----
 website/src/repl/Footer.jsx                   | 9 +--------
 website/src/repl/Repl.jsx                     | 9 +--------
 3 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 99e224b9..35a86ae8 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -143,9 +143,10 @@ export default function CodeMirror({
     return staticExtensions;
   }, [keybindings]);
 
-  const setAutoCompletion = isAutoCompletionEnabled => isAutoCompletionEnabled ?
-    javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }) :
-    autocompletion({ override: [] })
+  const setAutoCompletion = (isAutoCompletionEnabled) =>
+    isAutoCompletionEnabled
+      ? javascriptLanguage.data.of({ autocomplete: strudelAutocomplete })
+      : autocompletion({ override: [] });
 
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
@@ -155,7 +156,7 @@ export default function CodeMirror({
         onChange={handleOnChange}
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
-        extensions={[ ...extensions, setAutoCompletion(isAutoCompletionEnabled) ]}
+        extensions={[...extensions, setAutoCompletion(isAutoCompletionEnabled)]}
         basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
       />
     </div>
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 191159c9..30e2f3a1 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -364,14 +364,7 @@ const fontFamilyOptions = {
 };
 
 function SettingsTab({ scheduler }) {
-  const {
-    theme,
-    keybindings,
-    isLineNumbersDisplayed,
-    isAutoCompletionEnabled,
-    fontSize,
-    fontFamily
-  } = useSettings();
+  const { theme, keybindings, isLineNumbersDisplayed, isAutoCompletionEnabled, fontSize, fontFamily } = useSettings();
 
   return (
     <div className="text-foreground p-4 space-y-4">
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 58bf6e0f..f435e86c 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -105,14 +105,7 @@ export function Repl({ embedded = false }) {
   const [lastShared, setLastShared] = useState();
   const [pending, setPending] = useState(true);
 
-  const {
-    theme,
-    keybindings,
-    fontSize,
-    fontFamily,
-    isLineNumbersDisplayed,
-    isAutoCompletionEnabled
-  } = useSettings();
+  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed, isAutoCompletionEnabled } = useSettings();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
     useStrudel({

From 5e09c3c318a98d43929b14b65505a355071c06c6 Mon Sep 17 00:00:00 2001
From: Roipoussiere <roipoussiere@protonmail.com>
Date: Fri, 9 Jun 2023 18:25:36 +0200
Subject: [PATCH 6/6] add autocompletion extension from useMemo

---
 packages/react/src/components/CodeMirror6.jsx | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 35a86ae8..651c7c88 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -133,20 +133,24 @@ export default function CodeMirror({
   );
 
   const extensions = useMemo(() => {
+    let _extensions = [...staticExtensions];
     let bindings = {
       vim,
       emacs,
     };
-    if (bindings[keybindings]) {
-      return [...staticExtensions, bindings[keybindings]()];
-    }
-    return staticExtensions;
-  }, [keybindings]);
 
-  const setAutoCompletion = (isAutoCompletionEnabled) =>
-    isAutoCompletionEnabled
-      ? javascriptLanguage.data.of({ autocomplete: strudelAutocomplete })
-      : autocompletion({ override: [] });
+    if (bindings[keybindings]) {
+      _extensions.push(bindings[keybindings]());
+    }
+
+    if (isAutoCompletionEnabled) {
+      _extensions.push(javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }));
+    } else {
+      _extensions.push(autocompletion({ override: [] }));
+    }
+
+    return _extensions;
+  }, [keybindings, isAutoCompletionEnabled]);
 
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
@@ -156,7 +160,7 @@ export default function CodeMirror({
         onChange={handleOnChange}
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
-        extensions={[...extensions, setAutoCompletion(isAutoCompletionEnabled)]}
+        extensions={extensions}
         basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
       />
     </div>