Merge pull request #13 from 2coolchampion/dev

Dev upgrade

src/pages/textAnalyzer/Components/SelectedTokenList.tsx

@@ -0,0 +1,18 @@
+const SelectedTokenList = (selectedTokenList) => {
+  return (
+    <div className="bg-violet-700 p-4 text-base border-1">
+        <h1>Tokens in token list:</h1>
+        {selectedTokenList && selectedTokenList.length > 0 ? (
+          <ul>
+            {selectedTokenList.map((token, i) => (
+              <li key={i}>{token.innerHTML}</li>
+            ))}
+          </ul>
+        ) : (
+          <p>No tokens found.</p>
+        )}
+      </div>
+  )
+}
+
+export default SelectedTokenList

src/pages/textAnalyzer/Components/SelectionDebugger.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+
+const SelectionDebugger = () => {
+
+  const [selection, setSelection] = useState<Selection | null>(null);
+  const [rangeCount, setRangeCount] = useState<number>(0);
+  const [rangePosition, setRangePosition] = useState<number>(0);
+  const [selectedText, setSelectedText] = useState<string>('');
+
+  useEffect(() => {
+
+    //display some live-data for debugging purposes
+    const handleSelectionChange = () => {
+      const newSelection = window.getSelection();
+      setSelection(newSelection);
+      setRangeCount(newSelection?.rangeCount || 0);
+      if (newSelection && newSelection.rangeCount > 0) {
+        const range = newSelection.getRangeAt(0);
+        setRangePosition(range.startOffset);
+        setSelectedText(range.toString());
+      } else {
+        setRangePosition(0);
+        setSelectedText('');
+      }
+    };
+
+    document.addEventListener('selectionchange', handleSelectionChange);
+
+    return () => {
+      document.removeEventListener('selectionchange', handleSelectionChange);
+    };
+  }, []);
+
+  return (
+    <div className="bg-violet-700 p-4 text-base border-1">
+      <div>Selection: {selection ? selection.toString() : 'None'}</div>
+      <div>Range Count: {rangeCount}</div>
+      <div>Range Position: {rangePosition}</div>
+      <div>Selected Text: {selectedText}</div>
+    </div>
+  )
+}
+
+export default SelectionDebugger