worked on suggested changes to the PR

installed the npm package for rainbow brackets and added a test file to view the rainbow brackets color theme. Added a custom rainbow brackets theme for the vizhub theme.
vizhub-core · Jun 7, 2024 · a2b1684 · a2b1684
1 parent b8c09ea
commit a2b1684
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 87 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -126,6 +126,7 @@
     "open": "^10.1.0",
     "openai": "^4.48.2",
     "prettier-plugin-svelte": "^3.2.3",
+    "rainbowbrackets": "^2.0.2",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.3.1",
@@ -147,7 +148,7 @@
     "vitest": "^1.6.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-win32-x64-msvc": "^4.18.0",
-    "@rollup/rollup-darwin-arm64": "^4.18.0"
+    "@rollup/rollup-darwin-arm64": "^4.18.0",
+    "@rollup/rollup-win32-x64-msvc": "^4.18.0"
   }
 }
diff --git a/src/client/CodeEditor/getOrCreateEditor.ts b/src/client/CodeEditor/getOrCreateEditor.ts
@@ -39,7 +39,7 @@ import { typeScriptLinter } from './typeScriptLinter';
 import { keymap } from '@codemirror/view';
 import { basicSetup } from './basicSetup';
 import { InteractRule } from '@replit/codemirror-interact';
-import rainbowBrackets from './rainbowBrackets';
+import rainbowBrackets from 'rainbowbrackets'
 
 // Feature flag to enable TypeScript completions & TypeScript Linter.
 const enableTypeScriptCompletions = true;

diff --git a/src/client/CodeEditor/rainbowBrackets.ts b/src/client/CodeEditor/rainbowBrackets.ts
diff --git a/src/client/themes/vizhubTheme/index.ts b/src/client/themes/vizhubTheme/index.ts
@@ -190,6 +190,27 @@ function vizhubThemeInit(
           backgroundColor: 'transparent',
           outline: '1px solid #ff2222',
         },
+        '.rainbow-bracket-red > span': {
+          color: 'white',
+        },
+        '.rainbow-bracket-orange > span': {
+          color: 'violet',
+        },
+        '.rainbow-bracket-yellow > span': {
+          color: 'deepskyblue',
+        },
+        '.rainbow-bracket-green > span': {
+          color: 'lime',
+        },
+        '.rainbow-bracket-blue > span': {
+          color: 'yellow',
+        },
+        '.rainbow-bracket-indigo > span': {
+          color: 'orange',
+        },
+        '.rainbow-bracket-violet > span': {
+          color: 'red',
+        },
       },
       { dark: true },
     ),

diff --git a/test/sampleDirectories/kitchenSink/rainbowBracketsColors.js b/test/sampleDirectories/kitchenSink/rainbowBracketsColors.js
@@ -0,0 +1,19 @@
+function showcaseBracketNesting() {
+    function level1() {
+        function level2() {
+            function level3() {
+                function level4() {
+                    function level5() {
+                        function level6() {
+                            function level7() {
+                                function level8() {
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+let