From 4e7f5e9cdaca9d3baa802a2e8f5d126364ef962b Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 29 Mar 2024 17:07:48 +0100
Subject: [PATCH] add closeBrackets setting

---
 packages/codemirror/codemirror.mjs     | 6 +++++-
 website/src/repl/panel/SettingsTab.jsx | 6 ++++++
 website/src/settings.mjs               | 2 ++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index 5602a052..d28bf95d 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -27,6 +27,7 @@ import { persistentAtom } from '@nanostores/persistent';
 const extensions = {
   isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []),
   isBracketMatchingEnabled: (on) => (on ? bracketMatching({ brackets: '()[]{}<>' }) : []),
+  isBracketClosingEnabled: (on) => (on ? closeBrackets() : []),
   isLineNumbersDisplayed: (on) => (on ? lineNumbers() : []),
   theme,
   isAutoCompletionEnabled,
@@ -41,6 +42,7 @@ const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [ke
 export const defaultSettings = {
   keybindings: 'codemirror',
   isBracketMatchingEnabled: false,
+  isBracketClosingEnabled: true,
   isLineNumbersDisplayed: true,
   isActiveLineHighlighted: false,
   isAutoCompletionEnabled: false,
@@ -76,7 +78,6 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
       widgetPlugin,
       // indentOnInput(), // works without. already brought with javascript extension?
       // bracketMatching(), // does not do anything
-      closeBrackets(),
       syntaxHighlighting(defaultHighlightStyle),
       history(),
       EditorView.updateListener.of((v) => onChange(v)),
@@ -309,6 +310,9 @@ export class StrudelMirror {
   setLineNumbersDisplayed(enabled) {
     this.reconfigureExtension('isLineNumbersDisplayed', enabled);
   }
+  setBracketClosingEnabled(enabled) {
+    this.reconfigureExtension('isBracketClosingEnabled', enabled);
+  }
   setTheme(theme) {
     this.reconfigureExtension('theme', theme);
   }
diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx
index c60b0ccd..ae290189 100644
--- a/website/src/repl/panel/SettingsTab.jsx
+++ b/website/src/repl/panel/SettingsTab.jsx
@@ -81,6 +81,7 @@ export function SettingsTab({ started }) {
   const {
     theme,
     keybindings,
+    isBracketClosingEnabled,
     isBracketMatchingEnabled,
     isLineNumbersDisplayed,
     isPatternHighlightingEnabled,
@@ -148,6 +149,11 @@ export function SettingsTab({ started }) {
           onChange={(cbEvent) => settingsMap.setKey('isBracketMatchingEnabled', cbEvent.target.checked)}
           value={isBracketMatchingEnabled}
         />
+        <Checkbox
+          label="Auto close brackets"
+          onChange={(cbEvent) => settingsMap.setKey('isBracketClosingEnabled', cbEvent.target.checked)}
+          value={isBracketClosingEnabled}
+        />
         <Checkbox
           label="Display line numbers"
           onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 2c5aa8f8..a70c4202 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -8,6 +8,7 @@ export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
   isBracketMatchingEnabled: true,
+  isBracketClosingEnabled: true,
   isLineNumbersDisplayed: true,
   isActiveLineHighlighted: true,
   isAutoCompletionEnabled: false,
@@ -45,6 +46,7 @@ export function useSettings() {
     ...state,
     isZen: parseBoolean(state.isZen),
     isBracketMatchingEnabled: parseBoolean(state.isBracketMatchingEnabled),
+    isBracketClosingEnabled: parseBoolean(state.isBracketClosingEnabled),
     isLineNumbersDisplayed: parseBoolean(state.isLineNumbersDisplayed),
     isActiveLineHighlighted: parseBoolean(state.isActiveLineHighlighted),
     isAutoCompletionEnabled: parseBoolean(state.isAutoCompletionEnabled),