wip: matches

web/src/App.tsx

@@ -3,16 +3,18 @@ import { Viz, instance } from "@viz-js/viz";
 import Navbar from "./components/Navbar";
 import ExpressionsPopup from "./components/ExpressionsPopup";
 import { RiCloseCircleFill, RiQuestionFill } from "react-icons/ri";
-import { RegexEngine } from "regex-potata";
+import { OwnedMatch, RegexEngine } from "regex-potata";
 import { dotFromRegex } from "./utils/viz";
 import TestInput from "./components/TestInput";
 import Footer from "./components/Footer";
 
 const App = () => {
   const [regexInput, setRegexInput] = useState("");
+  const [testInput, setTestInput] = useState("");
   const [regexInstance, setRegexInstance] = useState<RegexEngine>();
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [svg, setSvg] = useState<SVGSVGElement>();
+  const [matches, setMatches] = useState<OwnedMatch[]>([]);
   const vizInstance = useRef<Viz>();
 
   useEffect(() => {
@@ -42,6 +44,12 @@ const App = () => {
     }
   }, [regexInstance]);
 
+  useEffect(() => {
+    if (regexInstance) {
+      setMatches(regexInstance.findAll(testInput));
+    }
+  }, [testInput, regexInstance]);
+
   return (
     <div
       className="min-h-screen min-w-screen 
@@ -80,7 +88,11 @@ const App = () => {
           </div>
           <div className="space-y-4">
             <div className="font-semibold">Test input</div>
-            <TestInput pattern={regexInput} />
+            <TestInput
+              input={testInput}
+              matches={matches}
+              onInput={(v) => setTestInput(v)}
+            />
           </div>
           <div className="space-y-10">
             <div className="font-semibold">NFA Visualizer</div>

web/src/components/TestInput.tsx

@@ -1,51 +1,49 @@
 import ReactCodeMirror, {
   Decoration,
   Extension,
-  MatchDecorator,
+  RangeSetBuilder,
   ViewPlugin,
 } from "@uiw/react-codemirror";
 import { useEffect, useState } from "react";
+import { OwnedMatch } from "regex-potata";
 
-const TestInput = ({ pattern }: { pattern: string }) => {
-  const [testInput, setTestInput] = useState("");
+type InputProps = {
+  input: string;
+  matches: OwnedMatch[];
+  onInput: (value: string) => void;
+};
+
+const TestInput = ({ input, matches, onInput }: InputProps) => {
   const [highlightExtension, setHighlightExtension] = useState<Extension>();
 
   useEffect(() => {
-    if (!pattern) {
-      return;
-    }
-
     try {
       const decoration = Decoration.mark({
         class: "highlight-chunk",
         inclusiveStart: true,
         inclusiveEnd: false,
       });
-      const matchDecorator = new MatchDecorator({
-        regexp: new RegExp(pattern, "g"), // TODO: use potata
-        decoration,
-      });
+
+      const decorationBuilder = new RangeSetBuilder<Decoration>();
+
+      for (const match of matches) {
+        decorationBuilder.add(match.start, match.end, decoration);
+      }
 
       const plugin = ViewPlugin.define(
-        (view) => ({
-          decorations: matchDecorator.createDeco(view),
-          update(update) {
-            this.decorations = matchDecorator.updateDeco(
-              update,
-              this.decorations
-            );
-          },
+        () => ({
+          decorations: decorationBuilder.finish(),
         }),
-        { decorations: (v) => v.decorations }
+        { decorations: (plugin) => plugin.decorations }
       );
 
       setHighlightExtension(plugin.extension);
     } catch {}
-  }, [pattern]);
+  }, [matches]);
 
   return (
     <ReactCodeMirror
-      value={testInput}
+      value={input}
       height="200px"
       className="leading-10"
       basicSetup={{
@@ -54,7 +52,7 @@ const TestInput = ({ pattern }: { pattern: string }) => {
         highlightActiveLine: false,
       }}
       extensions={highlightExtension && [highlightExtension]}
-      onChange={(e) => setTestInput(e)}
+      onChange={(value) => onInput(value)}
     />
   );
 };