react based conversion

src/App.tsx

@@ -1,35 +1,8 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import React from "react";
+import SelectionApp from "./SelectionApp";
 
-function App() {
-  const [count, setCount] = useState(0)
+const App: React.FC = () => {
+  return <SelectionApp />;
+};
 
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Add <code>app_build_command: npm run build</code> and <code>app_file: dist/index.html</code> in your README's metadata to easily build and deploy your app :)
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
-
-export default App
+export default App;

src/SelectionApp.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useRef } from "react";
+
+interface Span {
+  span_text: string;
+  start: number;
+  end: number;
+}
+
+const SelectionApp: React.FC = () => {
+  const [spans, setSpans] = useState<Span[]>([]);
+  const [keySpan, setKeySpan] = useState<string>("span_text");
+  const [keyStart, setKeyStart] = useState<string>("start");
+  const [keyEnd, setKeyEnd] = useState<string>("end");
+  const [lastText, setLastText] = useState<string>("");
+
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  // Capture the selected text and its indices
+  const getSelectionIndices = () => {
+    if (!inputRef.current) return;
+    const container = inputRef.current;
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+    if (!container.contains(range.startContainer) || !container.contains(range.endContainer))
+      return;
+
+    const selectedText = selection.toString();
+    if (!selectedText) return;
+
+    // Compute start/end indices
+    const preRange = document.createRange();
+    preRange.setStart(container, 0);
+    preRange.setEnd(range.startContainer, range.startOffset);
+    const startIndex = preRange.toString().length;
+    const endIndex = startIndex + selectedText.length;
+
+    const newSpan: Span = { span_text: selectedText, start: startIndex, end: endIndex };
+    setSpans((prev) => [newSpan, ...prev].slice(0, 5)); // Keep only latest 5
+  };
+
+  // Map internal spans to current key names
+  const renderSpans = () => {
+    return spans.map((s) => ({
+      [keySpan]: s.span_text,
+      [keyStart]: s.start,
+      [keyEnd]: s.end,
+    }));
+  };
+
+  // Clear spans if input text changes
+  const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
+    const currentText = e.currentTarget.innerText;
+    if (currentText !== lastText) {
+      setSpans([]);
+      setLastText(currentText);
+    }
+  };
+
+  return (
+    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+      <h3>Highlight text to get indices</h3>
+
+      {/* Settings Panel */}
+      <div
+        style={{
+          marginBottom: "15px",
+          padding: "10px",
+          border: "1px solid #ccc",
+          borderRadius: "6px",
+          background: "#fafafa",
+          width: "90%",
+        }}
+      >
+        <strong>Settings (rename keys):</strong>
+        <br />
+        <br />
+        <label>
+          Span Text Key:{" "}
+          <input value={keySpan} onChange={(e) => setKeySpan(e.target.value)} />
+        </label>
+        <label style={{ marginLeft: "10px" }}>
+          Start Key:{" "}
+          <input value={keyStart} onChange={(e) => setKeyStart(e.target.value)} />
+        </label>
+        <label style={{ marginLeft: "10px" }}>
+          End Key:{" "}
+          <input value={keyEnd} onChange={(e) => setKeyEnd(e.target.value)} />
+        </label>
+      </div>
+
+      {/* Editable Div */}
+      <div
+        ref={inputRef}
+        contentEditable
+        onInput={handleInput}
+        style={{
+          width: "90%",
+          minHeight: "150px",
+          border: "1px solid #ccc",
+          padding: "10px",
+          whiteSpace: "pre-wrap",
+          overflowWrap: "break-word",
+        }}
+      ></div>
+
+      <button
+        onClick={getSelectionIndices}
+        style={{ marginTop: "10px", padding: "5px 10px" }}
+      >
+        Get Span JSON
+      </button>
+
+      {/* Display JSON */}
+      <pre
+        style={{
+          marginTop: "15px",
+          fontFamily: "monospace",
+          background: "#f4f4f4",
+          padding: "10px",
+          borderRadius: "6px",
+          border: "1px solid #ddd",
+          whiteSpace: "pre-wrap",
+          userSelect: "text",
+        }}
+      >
+        {spans.length ? JSON.stringify(renderSpans(), null, 2) : ""}
+      </pre>
+    </div>
+  );
+};
+
+export default SelectionApp;