Fix CodeBoxHTML's issues by using the CodeBox component with SyntaxHi… (#1653)

* Fix CodeBoxHTML's issues by using the CodeBox component with SyntaxHighlighter

* Strip and decode the HTML into a string, then pass it to the highlighter codebox.
* Good performance, copying and styling now work well

* Update apps/cyberstorm-remix/app/commonComponents/CodeBoxHTML/CodeBoxHTML.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: VilppeRiskidev

apps/cyberstorm-remix/app/commonComponents/CodeBoxHTML/CodeBoxHTML.css

@@ -2,26 +2,5 @@
   position: relative;
   align-self: stretch;
   width: 100%;
-  padding: var(--space-16);
-  border: 1px solid var(--color-surface-7);
-
-  border-radius: var(--radius-md);
   overflow: auto;
-  background-color: var(--color-surface-1);
-
-  --border-color: transparent;
-}
-
-.code-box-html__content {
-  position: relative;
-  width: 100%;
-}
-
-.code-box-html__line {
-  position: absolute;
-  width: 100%;
-  font-size: var(--font-size-body-md);
-  font-family: var(--font-family-monospace);
-  font-style: normal;
-  line-height: var(--line-height-md);
 }

apps/cyberstorm-remix/app/commonComponents/CodeBoxHTML/CodeBoxHTML.tsx

@@ -1,119 +1,50 @@
-import { useState, useMemo, useRef, useEffect } from "react";
+import { CodeBox, NewAlert } from "@thunderstore/cyberstorm";
+import { memo, useMemo } from "react";
+import { stripHtmlTags } from "cyberstorm/utils/HTMLParsing";
 import "./CodeBoxHTML.css";
-import "./Highlight.css";
 
 export interface CodeBoxHTMLProps {
   value?: string;
   maxHeight?: number;
+  language?: string;
 }
 
 /**
- * CodeBox component which renders HTML and
- * uses virtual scrolling to render the content
- * in parts to improve performance
+ * CodeBox component which renders HTML content by stripping HTML tags
+ * and passing the plain text to the CodeBox component for syntax highlighting
  */
-export function CodeBoxHTML({ value = "", maxHeight = 600 }: CodeBoxHTMLProps) {
-  const [scrollTop, setScrollTop] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(maxHeight);
-  const [containerWidth, setContainerWidth] = useState<number | undefined>(
-    undefined
-  );
-  const [lineHeight, setLineHeight] = useState(21); // We'll measure this based on the actual styles later
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Extra lines to render above/below viewport, so that there's content
-  // to render immediately when scrolling, making it smoother
-  const BUFFER_LINES = 25;
-  const lines = useMemo(() => value.split("\n"), [value]);
-
-  useEffect(() => {
-    const { width, lineHeight: measuredLineHeight } =
-      calculateDimensions(lines);
-    setContainerWidth(width);
-    setLineHeight(measuredLineHeight);
-  }, [lines]);
-
-  useEffect(() => {
-    const updateHeight = () => {
-      if (containerRef.current) {
-        setContainerHeight(containerRef.current.clientHeight);
-      }
-    };
-    updateHeight();
-    window.addEventListener("resize", updateHeight);
-    return () => window.removeEventListener("resize", updateHeight);
-  }, []);
-
-  const visibleStart = Math.max(
-    0,
-    Math.floor(scrollTop / lineHeight) - BUFFER_LINES
-  );
-
-  const visibleEnd = Math.min(
-    visibleStart + Math.ceil(containerHeight / lineHeight) + BUFFER_LINES * 2,
-    lines.length
-  );
-
-  const totalHeight = lines.length * lineHeight;
+export const CodeBoxHTML = memo(function CodeBoxHTML({
+  value = "",
+  maxHeight = 600,
+  language = "text",
+}: CodeBoxHTMLProps) {
+  const result = useMemo(() => {
+    try {
+      const text = stripHtmlTags(value);
+      return { text, error: null };
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to process HTML content";
+      return { text: "", error: errorMessage };
+    }
+  }, [value]);
+
+  if (result.error) {
+    return <NewAlert csVariant="danger">{result.error}</NewAlert>;
+  }
 
   return (
     <div
-      ref={containerRef}
       className="code-box-html"
       style={{
-        height: maxHeight,
+        maxHeight,
         width: "100%",
         overflow: "auto",
       }}
-      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
     >
-      <pre
-        className="code-box-html__content"
-        style={{
-          height: totalHeight,
-          width: containerWidth ? `${containerWidth}px` : "auto",
-          minWidth: "100%",
-        }}
-      >
-        {lines.slice(visibleStart, visibleEnd).map((line, index) => (
-          <code
-            key={visibleStart + index}
-            className="code-box-html__line highlight"
-            style={{
-              top: (visibleStart + index) * lineHeight,
-              height: lineHeight,
-            }}
-            dangerouslySetInnerHTML={{ __html: line }}
-          />
-        ))}
-      </pre>
+      <CodeBox value={result.text} language={language} />
     </div>
   );
-}
-
-/*
- * Measure the longest line width and line height using the same styles as the component
- */
-const calculateDimensions = (lines: string[]) => {
-  if (lines.length === 0 || (lines.length === 1 && lines[0] === ""))
-    return { width: 0, lineHeight: 21 };
-  const longestLine = lines.reduce((longest, current) =>
-    current.length > longest.length ? current : longest
-  );
-  const measureElement = document.createElement("div");
-  measureElement.className = "code-box-html__line";
-  measureElement.style.width = "auto";
-  measureElement.style.padding = "0";
-  measureElement.style.border = "none";
-  document.body.appendChild(measureElement);
-  try {
-    measureElement.innerHTML = longestLine;
-    const width = measureElement.offsetWidth;
-    const measuredLineHeight = measureElement.offsetHeight;
-    return { width, lineHeight: measuredLineHeight };
-  } finally {
-    document.body.removeChild(measureElement);
-  }
-};
+});
 
 CodeBoxHTML.displayName = "CodeBoxHTML";

apps/cyberstorm-remix/app/p/tabs/Source/Source.tsx

@@ -181,7 +181,10 @@ export default function Source() {
                   className="package-source__decompilations-file"
                   key={decompilation.source_file_name}
                 >
-                  <CodeBoxHTML value={decompilation.result} />
+                  <CodeBoxHTML
+                    value={decompilation.result}
+                    language={"csharp"}
+                  />
                 </div>
               </div>
             );

apps/cyberstorm-remix/cyberstorm/utils/HTMLParsing.ts

@@ -0,0 +1,58 @@
+// Named HTML entities map for fast lookup
+const NAMED_ENTITIES: Record<string, string> = {
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+  amp: "&",
+};
+
+/**
+ * Strips HTML tags from a string and decodes HTML entities to extract plain text content.
+ * Uses a loop to handle potentially nested or malformed tags.
+ * This is safe for our use case because:
+ * 1. Input is already server-sanitized syntax highlighting HTML
+ * 2. The result is only used as text content, not rendered as HTML
+ */
+export function stripHtmlTags(html: string = ""): string {
+  if (!html) return "";
+
+  // Strip HTML tags - loop handles nested/malformed tags like <scr<script>ipt>
+  const tagPattern = /<[^>]*>/g;
+  let result = html;
+  let previous;
+  do {
+    previous = result;
+    result = result.replace(tagPattern, "");
+  } while (result !== previous);
+
+  return decodeHtmlEntities(result);
+}
+
+/**
+ * Decodes HTML entities with a single regex pass for performance.
+ * Handles named entities, numeric (&#123;), and hex (&#x1F;) entities.
+ * All entities including &amp; are handled in one pass to correctly decode
+ * double-encoded entities like &amp;lt;.
+ */
+function decodeHtmlEntities(text: string): string {
+  return text.replace(
+    /&(?:#(\d+)|#x([0-9a-fA-F]+)|([a-z0-9]+));/gi,
+    (match, dec, hex, named) => {
+      if (named) {
+        const lower = named.toLowerCase();
+        return NAMED_ENTITIES[lower] || match;
+      }
+      if (dec || hex) {
+        try {
+          const codePoint = dec ? Number(dec) : parseInt(hex, 16);
+          return String.fromCodePoint(codePoint);
+        } catch {
+          return match; // Invalid code point, return unchanged
+        }
+      }
+      return match;
+    }
+  );
+}