'Enable Bracket Matching' option in Codemirror

website/src/repl/Repl.css

@@ -64,3 +64,8 @@
 #code .cm-focused {
   outline: none;
 }
+
+#code .cm-matchingBracket {
+  text-decoration: underline 0.18rem;
+  text-underline-offset: 0.25rem;
+}

website/src/repl/panel/SettingsTab.jsx

@@ -77,6 +77,7 @@ export function SettingsTab({ started }) {
   const {
     theme,
     keybindings,
+    isBracketMatchingEnabled,
     isLineNumbersDisplayed,
     isPatternHighlightingEnabled,
     isActiveLineHighlighted,
@@ -137,6 +138,11 @@ export function SettingsTab({ started }) {
         ></ButtonGroup>
       </FormItem>
       <FormItem label="Code Settings">
+        <Checkbox
+          label="Enable bracket matching"
+          onChange={(cbEvent) => settingsMap.setKey('isBracketMatchingEnabled', cbEvent.target.checked)}
+          value={isBracketMatchingEnabled}
+        />
         <Checkbox
           label="Display line numbers"
           onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}

website/src/settings.mjs

@@ -7,6 +7,7 @@ export const defaultAudioDeviceName = 'System Standard';
 export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
+  isBracketMatchingEnabled: false,
   isLineNumbersDisplayed: true,
   isActiveLineHighlighted: true,
   isAutoCompletionEnabled: false,
@@ -40,6 +41,7 @@ export function useSettings() {
   return {
     ...state,
     isZen: [true, 'true'].includes(state.isZen) ? true : false,
+    isBracketMatchingEnabled: [true, 'true'].includes(state.isBracketMatchingEnabled) ? true : false,
     isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
     isActiveLineHighlighted: [true, 'true'].includes(state.isActiveLineHighlighted) ? true : false,
     isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,