Vi-Notes project code for DETECT PASTED TEXT

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import Editor from "./Editor";
+
+function App() {
+  return <Editor />;
+}
+
+export default App;

src/Editor.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+
+const Editor = () => {
+  const [text, setText] = useState("");
+  const [pasteEvents, setPasteEvents] = useState<
+    { length: number; time: string }[]
+  >([]);
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const pastedText = e.clipboardData.getData("text");
+
+    const newEvent = {
+      length: pastedText.length,
+      time: new Date().toLocaleTimeString(),
+    };
+
+    setPasteEvents((prev) => [...prev, newEvent]);
+
+    alert("📋 Paste detected!");
+  };
+
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>Vi-Notes Editor</h1>
+      <p style={{ color: "gray", marginBottom: "10px" }}>
+  Detecting pasted content for authenticity verification
+</p>
+
+      <textarea
+        style={styles.textarea}
+        placeholder="Start typing here..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onPaste={handlePaste}
+      />
+
+      <div style={styles.logBox}>
+        <h3>Paste Activity</h3>
+
+        <p>Total Pastes: {pasteEvents.length}</p>
+
+        {pasteEvents.length === 0 ? (
+          <p>No paste detected</p>
+        ) : (
+          pasteEvents.map((event, index) => (
+            <p key={index}>
+              📋 {event.length} characters at {event.time}
+            </p>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+const styles = {
+  container: {
+    textAlign: "center" as const,
+    padding: "20px",
+    fontFamily: "Arial",
+  },
+  title: {
+    color: "#333",
+  },
+  textarea: {
+    width: "80%",
+    height: "200px",
+    padding: "10px",
+    fontSize: "16px",
+    borderRadius: "10px",
+    border: "1px solid #ccc",
+    outline: "none",
+  },
+  logBox: {
+    marginTop: "20px",
+    background: "#f5f5f5",
+    padding: "10px",
+    borderRadius: "10px",
+  },
+};
+
+export default Editor;