Refactor bracket matching

rsconcept/frontend/src/components/RSInput/bracketMatching.ts

@@ -0,0 +1,30 @@
+import { bracketMatching, MatchResult } from '@codemirror/language';
+import { Decoration, EditorView } from '@codemirror/view';
+
+const matchingMark = Decoration.mark({class: "cc-matchingBracket"}),
+      nonmatchingMark = Decoration.mark({class: "cc-nonmatchingBracket"})
+
+function bracketRender(match: MatchResult) {
+  const decorations = []
+  const mark = match.matched ? matchingMark : nonmatchingMark
+  decorations.push(mark.range(match.start.from, match.start.to))
+  if (match.end) decorations.push(mark.range(match.end.from, match.end.to))
+  return decorations
+}
+
+export function ccBracketMatching(darkMode: boolean) {
+  const bracketTheme = EditorView.baseTheme({
+    '.cc-matchingBracket': {
+      fontWeight: 600,
+    },
+    '.cc-nonmatchingBracket': {
+      color: '#ef4444',
+      fontWeight: 700,
+    },
+    '&.cm-focused .cc-matchingBracket': {
+      backgroundColor: darkMode ? '#734f00' : '#dae6f2',
+    },
+  });
+
+  return [bracketMatching({ renderMatch: bracketRender }), bracketTheme];
+}

rsconcept/frontend/src/components/RSInput/index.tsx

@@ -1,4 +1,4 @@
-import { bracketMatching } from '@codemirror/language';
+
 import { Extension } from '@codemirror/state';
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from '@uiw/codemirror-themes';
@@ -7,14 +7,15 @@ import { EditorView } from 'codemirror';
 import { Ref, useMemo } from 'react';
 
 import { useConceptTheme } from '../../context/ThemeContext';
+import { ccBracketMatching } from './bracketMatching';
 import { RSLanguage } from './rslang';
 //import { cursorTooltip } from './tooltip';
 
 const editorSetup: BasicSetupOptions = {
-  highlightSpecialChars: true,
+  highlightSpecialChars: false,
   history: true,
-  drawSelection: true,
-  syntaxHighlighting: true,
+  drawSelection: false,
+  syntaxHighlighting: false,
   defaultKeymap: true,
   historyKeymap: true,
 
@@ -38,13 +39,6 @@ const editorSetup: BasicSetupOptions = {
   lintKeymap: false
 };
 
-const editorExtensions = [
-  EditorView.lineWrapping,
-  RSLanguage,
-  bracketMatching(),
-  //cursorTooltip(),
-];
-
 interface RSInputProps 
 extends Omit<ReactCodeMirrorProps, 'onChange'> {
   innerref?: Ref<ReactCodeMirrorRef> | undefined
@@ -101,14 +95,22 @@ function RSInput({
     ]
   }), [editable]);
 
+  const editorExtensions = useMemo(
+  () => [
+    EditorView.lineWrapping,
+    RSLanguage,
+    ccBracketMatching(darkMode),
+    //cursorTooltip(),
+  ], [darkMode]);
+
   return (
     <div className={`w-full ${cursor} text-lg`}>
     <CodeMirror
       ref={innerref}
       basicSetup={editorSetup}
+      theme={darkMode ? darkTheme : lightTheme}
       extensions={editorExtensions}
       indentWithTab={false}
-      theme={darkMode ? darkTheme : lightTheme}
       onChange={value => onChange(value)}
       editable={editable}
       {...props}

rsconcept/frontend/src/index.css

@@ -24,12 +24,6 @@
 .cm-editor.cm-focused {
   @apply border shadow rounded outline-2 outline
 }
-.cm-matchingBracket {
-  @apply font-semibold
-}
-.cm-nonmatchingBracket {
-  @apply font-bold text-red-500
-}
 
 @layer components {
   h1 {