chore(deps): remove remove-react-syntax-highlighting (#127)

Author: hrodmn

CHANGELOG.md

@@ -5,7 +5,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Dependencies
+
 - upgrade to tailwind v4
+- remove react-syntax-highlighting
 
 ## 2.0.1
 

package.json

@@ -26,7 +26,6 @@
     "react-day-picker": "^9.11.0",
     "react-dom": "^18.0.0",
     "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^15.6.6",
     "source-map-explorer": "^2.5.3",
     "styled-components": "^6.1.19",
     "tailwind-merge": "^3.3.1",
@@ -44,7 +43,6 @@
     "@types/node": "^24.6.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^5.0.4",
     "depcheck": "^1.4.7",
     "husky": ">=6",

src/components/ApiConfigPanel.tsx

@@ -14,11 +14,6 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  coldarkCold,
-  coldarkDark,
-} from "react-syntax-highlighter/dist/cjs/styles/prism";
 import {
   getApiHealth,
   getApisLackingCapability,
@@ -63,42 +58,13 @@ interface ApiConfigPanelProps {
   onUpdate: (apis: string[]) => void;
 }
 
-// Custom hook for dark mode detection
-const useDarkMode = () => {
-  const [isDark, setIsDark] = useState(() => {
-    if (typeof window === "undefined") return false;
-    return (
-      localStorage.getItem("theme") === "dark" ||
-      (!localStorage.getItem("theme") &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
-    );
-  });
-
-  React.useEffect(() => {
-    const observer = new MutationObserver(() => {
-      setIsDark(document.documentElement.classList.contains("dark"));
-    });
-
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return isDark;
-};
-
 const ApiConfigPanel: React.FC<ApiConfigPanelProps> = ({
   stacApis,
   onUpdate,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isFilterInfoOpen, setIsFilterInfoOpen] = useState(false);
-  const isDark = useDarkMode();
   const [activeTab, setActiveTab] = useState("configuration");
-  const syntaxStyle = isDark ? coldarkDark : coldarkCold;
   const [selectedFilterInfo, setSelectedFilterInfo] = useState<{
     url: string;
     description: string;
@@ -829,13 +795,9 @@ const ApiConfigPanel: React.FC<ApiConfigPanelProps> = ({
                 <p className="font-bold mb-1 sm:mb-2 text-xs sm:text-sm">
                   Filter Code:
                 </p>
-                <SyntaxHighlighter
-                  language="javascript"
-                  style={syntaxStyle}
-                  customStyle={{ fontSize: "11px", borderRadius: "6px" }}
-                >
-                  {selectedFilterInfo.code}
-                </SyntaxHighlighter>
+                <pre className="rounded-md bg-muted p-3 text-[11px] overflow-x-auto">
+                  <code className="font-mono">{selectedFilterInfo.code}</code>
+                </pre>
               </div>
             </div>
           )}

src/components/ResultsTable.tsx

@@ -22,11 +22,6 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  coldarkCold,
-  coldarkDark,
-} from "react-syntax-highlighter/dist/cjs/styles/prism";
 import Map from "ol/Map";
 import FullScreen from "ol/control/FullScreen.js";
 import View from "ol/View";
@@ -256,13 +251,11 @@ const ResultsTable: React.FC<Props> = ({
   hasSearched = false,
   stacApis = [],
 }) => {
-  const isDark = useDarkMode();
   const [isOpen, setIsOpen] = useState(false);
   const [selectedRecord, setSelectedRecord] = useState<Record<
     string,
     any | HintFormat
   > | null>(null);
-  const hintStyle = isDark ? coldarkDark : coldarkCold;
   const { columns, isMobile } = useBreakpoint();
 
   // State for collapsible sections
@@ -718,36 +711,24 @@ const ResultsTable: React.FC<Props> = ({
                     <TabsTrigger value="r">R</TabsTrigger>
                   </TabsList>
                   <TabsContent value="python" className="mt-4 overflow-x-auto">
-                    <SyntaxHighlighter
-                      language="python"
-                      style={hintStyle}
-                      customStyle={{
-                        fontSize: "12px",
-                        maxWidth: "100%",
-                        overflowX: "auto",
-                      }}
-                    >
-                      {getPythonCodeHint(
-                        extractCatalogUrl(selectedRecord),
-                        selectedRecord.id || "collection-id"
-                      )}
-                    </SyntaxHighlighter>
+                    <pre className="rounded-md bg-muted p-4 text-xs overflow-x-auto">
+                      <code className="font-mono">
+                        {getPythonCodeHint(
+                          extractCatalogUrl(selectedRecord),
+                          selectedRecord.id || "collection-id"
+                        )}
+                      </code>
+                    </pre>
                   </TabsContent>
                   <TabsContent value="r" className="mt-4 overflow-x-auto">
-                    <SyntaxHighlighter
-                      language="r"
-                      style={hintStyle}
-                      customStyle={{
-                        fontSize: "12px",
-                        maxWidth: "100%",
-                        overflowX: "auto",
-                      }}
-                    >
-                      {getRCodeHint(
-                        extractCatalogUrl(selectedRecord),
-                        selectedRecord.id || "collection-id"
-                      )}
-                    </SyntaxHighlighter>
+                    <pre className="rounded-md bg-muted p-4 text-xs overflow-x-auto">
+                      <code className="font-mono">
+                        {getRCodeHint(
+                          extractCatalogUrl(selectedRecord),
+                          selectedRecord.id || "collection-id"
+                        )}
+                      </code>
+                    </pre>
                   </TabsContent>
                 </Tabs>
               </div>
@@ -840,17 +821,11 @@ const ResultsTable: React.FC<Props> = ({
                   id="json-content"
                   className="mt-2 transition-all duration-200 overflow-x-auto"
                 >
-                  <SyntaxHighlighter
-                    language="json"
-                    style={hintStyle}
-                    customStyle={{
-                      fontSize: "12px",
-                      maxWidth: "100%",
-                      overflowX: "auto",
-                    }}
-                  >
-                    {JSON.stringify(selectedRecord, null, 2)}
-                  </SyntaxHighlighter>
+                  <pre className="rounded-md bg-muted p-4 text-xs overflow-x-auto">
+                    <code className="font-mono">
+                      {JSON.stringify(selectedRecord, null, 2)}
+                    </code>
+                  </pre>
                 </CollapsibleContent>
               </Collapsible>
             </div>