Skip to content

feat: add Clear Input button to reset text input form (#668) #684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
yashinrush wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat: add Clear Input button to reset text input form (#668) #684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 45 additions & 4 deletions eduaid_web/src/pages/Text_Input.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import "../index.css";
import logo_trans from "../assets/aossie_logo_transparent.png"
import stars from "../assets/stars.png";
import cloud from "../assets/cloud.png";
import { FaClipboard } from "react-icons/fa";
import { FaClipboard, FaTrashAlt } from "react-icons/fa";
import Switch from "react-switch";
import { Link,useNavigate } from "react-router-dom";
import apiClient from "../utils/apiClient";
Expand All @@ -15,6 +15,7 @@ const Text_Input = () => {
const [numQuestions, setNumQuestions] = useState(10);
const [loading, setLoading] = useState(false);
const fileInputRef = useRef(null);
const textareaRef = useRef(null);
const [fileContent, setFileContent] = useState("");
const [docUrl, setDocUrl] = useState("");
const [isToggleOn, setIsToggleOn] = useState(0);
Expand All @@ -23,6 +24,27 @@ const Text_Input = () => {
setIsToggleOn((isToggleOn + 1) % 2);
};

const handlePaste = async () => {
try {
const clipboardText = await navigator.clipboard.readText();
setText(clipboardText);
} catch (err) {
console.error("Failed to read clipboard:", err);
}
};

const handleClearText = () => {
setText("");
setFileContent("");
setDocUrl("");
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
if (textareaRef.current) {
textareaRef.current.focus();
}
};

const handleFileUpload = async (event) => {
const file = event.target.files[0];
if (file) {
Expand Down Expand Up @@ -167,11 +189,30 @@ const Text_Input = () => {

{/* Textarea */}
<div className="relative bg-[#83b6cc40] mx-4 sm:mx-8 rounded-2xl p-4 min-h-[160px] sm:min-h-[200px] mt-4">
<button className="absolute top-0 left-0 p-2 text-white focus:outline-none">
<FaClipboard className="h-[24px] w-[24px]" />
<button
type="button"
onClick={handlePaste}
aria-label="Paste from clipboard"
title="Paste from clipboard"
className="absolute top-2 left-2 z-10 p-2 text-white/70 hover:text-white transition-colors focus:outline-none"
>
<FaClipboard className="h-[22px] w-[22px] sm:h-[24px] sm:w-[24px]" />
</button>
{text && (
<button
type="button"
onClick={handleClearText}
aria-label="Clear input text"
title="Clear text"
className="absolute top-2 right-2 z-10 p-2 text-white/70 hover:text-red-400 transition-colors focus:outline-none"
>
<FaTrashAlt className="h-[18px] w-[18px] sm:h-[20px] sm:w-[20px]" />
</button>
)}
<textarea
className="absolute inset-0 p-8 pt-6 bg-[#83b6cc40] text-lg sm:text-xl rounded-2xl outline-none resize-none h-full overflow-y-auto text-white caret-white"
ref={textareaRef}
placeholder="Type or paste content here..."
className="absolute inset-0 p-8 pt-6 pr-12 bg-[#83b6cc40] text-lg sm:text-xl rounded-2xl outline-none resize-none h-full overflow-y-auto text-white caret-white placeholder-white/40"
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
value={text}
onChange={(e) => setText(e.target.value)}
Expand Down
51 changes: 47 additions & 4 deletions extension/src/pages/text_input/TextInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,15 @@ import logo from "../../assets/aossie_logo.webp";
import stars from "../../assets/stars.png";
import cloud from "../../assets/cloud.png";
import arrow from "../../assets/arrow.png";
import { FaClipboard , FaWikipediaW } from "react-icons/fa";
import { FaClipboard, FaWikipediaW, FaTrashAlt } from "react-icons/fa";

function Second() {
const [text, setText] = useState("");
const [difficulty, setDifficulty] = useState("Easy Difficulty");
const [numQuestions, setNumQuestions] = useState(10);
const [loading, setLoading] = useState(false);
const fileInputRef = useRef(null);
const textareaRef = useRef(null);
const [fileContent, setFileContent] = useState('');
const [docUrl, setDocUrl] = useState('');
const [isToggleOn, setIsToggleOn] = useState(0);
Expand All @@ -27,6 +28,29 @@ function Second() {
});
}, [])

const handlePaste = async () => {
try {
const clipboardText = await navigator.clipboard.readText();
setText(clipboardText);
localStorage.setItem("textContent", clipboardText);
} catch (err) {
console.error("Failed to read clipboard:", err);
}
};

const handleClearText = () => {
setText("");
setFileContent("");
setDocUrl("");
localStorage.removeItem("textContent");
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
if (textareaRef.current) {
textareaRef.current.focus();
}
};


const toggleSwitch = () => {
setIsToggleOn((isToggleOn + 1) % 2);
Expand Down Expand Up @@ -212,11 +236,30 @@ function Second() {
</div>

<div className="relative bg-[#83b6cc40] mx-3 rounded-xl p-2 h-28">
<button className="absolute top-0 left-0 p-2 text-white focus:outline-none">
<FaClipboard className="h-[20px] w-[20px]" />
<button
type="button"
onClick={handlePaste}
aria-label="Paste from clipboard"
title="Paste from clipboard"
className="absolute top-1 left-1 z-10 p-1.5 text-white/70 hover:text-white transition-colors focus:outline-none"
>
<FaClipboard className="h-[18px] w-[18px]" />
</button>
{text && (
<button
type="button"
onClick={handleClearText}
aria-label="Clear input text"
title="Clear text"
className="absolute top-1 right-1 z-10 p-1.5 text-white/70 hover:text-red-400 transition-colors focus:outline-none"
>
<FaTrashAlt className="h-[16px] w-[16px]" />
</button>
)}
<textarea
className="absolute inset-0 p-8 pt-2 bg-[#83b6cc40] text-lg rounded-xl outline-none resize-none h-full overflow-y-auto text-white caret-white"
ref={textareaRef}
placeholder="Enter content here..."
className="absolute inset-0 p-8 pt-2 pr-10 bg-[#83b6cc40] text-lg rounded-xl outline-none resize-none h-full overflow-y-auto text-white caret-white placeholder-white/40"
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
value={text}
onChange={(e) => setText(e.target.value)}
Expand Down