Clipboard operations handle reading, writing, and syncing clipboard content across devices. These functions manage the core functionality of ClipSync.
updateClipboard
Updates the clipboard content and syncs it to all devices in the session.
Source: src/App.jsx:167
const updateClipboard = async () => {
if (!clipboard && !fileUrl) return toast.error("Please enter some text to update clipboard");
if (clipboard.length > 15000) return toast.error("Clipboard content is too long. Please keep it under 15000 characters.");
let firstTime = false;
if (!sessionCode) {
await createSession(setSessionCode);
firstTime = true;
}
const code = localStorage.getItem("sessionCode");
await supabase.from("clipboard").insert([{
session_code: code,
content: clipboard,
fileUrl: fileUrl ? fileUrl.url : null,
file: fileUrl ? fileUrl : null,
sensitive: isSensitive,
}]);
if (history.length == 0 && firstTime) {
const { data, error: fetchError } = await supabase
.from("clipboard")
.select("*")
.eq("session_code", code)
.order("created_at", { ascending: false });
if (!fetchError) {
setHistory(data);
}
}
setFileUrl(null);
setClipboard("");
sessionStorage.removeItem("clipboard");
setIsSensitive(false);
toast.success("Clipboard updated successfully!");
};
Parameters
This function uses component state rather than direct parameters:
The text content to be synced. Maximum length of 15,000 characters.
Optional file attachment object containing url, path, name, and type properties.
Flag indicating whether the content contains sensitive information that should be hidden.
Behavior
- Validates that either text or file content exists
- Checks content length (15,000 character limit)
- Creates a new session if one doesn’t exist
- Inserts clipboard data into the database
- Clears the input fields and resets state
fetchClipboardHistory
Retrieves all clipboard entries for the current session.
Source: src/App.jsx:31
const fetchClipboardHistory = async () => {
if (!sessionCode) return;
let { data, error } = await supabase
.from("clipboard")
.select("*")
.eq("session_code", sessionCode);
if (!error) setClipboard(data || []);
};
Parameters
The session code to fetch clipboard history for (from component state).
Return Value
Returns Promise<void>. Updates component state with the fetched clipboard history.
copyToClipboard
Copies text content to the system clipboard.
Source: src/App.jsx:207
const copyToClipboard = (content) => {
navigator.clipboard.writeText(content);
toast.success("Text copied to clipboard!");
};
Parameters
The text content to copy to the system clipboard.
Behavior
Uses the browser’s Clipboard API (navigator.clipboard.writeText) to write content to the system clipboard and displays a success notification.
addClipboardText
Reads text from the system clipboard and adds it to the input field.
Source: src/App.jsx:212
const addClipboardText = () => {
navigator.clipboard.readText().then((text) => {
if (text.trim()) {
setClipboard(text);
toast.success("Clipboard text pasted successfully!");
} else {
alert("Clipboard is empty or contains unsupported data.");
}
}).catch(() => {
alert("An error occurred while reading clipboard");
});
};
Behavior
- Requests clipboard read permission from the browser
- Reads text content from the system clipboard
- Updates the input field with the clipboard text
- Shows appropriate success or error messages
Browser Permissions
Requires the clipboard-read permission. Users may be prompted to grant permission on first use.
deleteAll
Deletes all clipboard entries for the current session, including associated files.
Source: src/App.jsx:225
const deleteAll = async () => {
const response = confirm("Are you sure you want to clear clipboards?");
if (!response) return;
if (history.length == 0) return toast.error("No items in your clipboard history");
history.forEach(async (item) => {
if (item.file) {
await supabase.storage.from("clipboard").remove([item.file.name]);
}
});
const { error } = await supabase.from("clipboard").delete().eq("session_code", sessionCode);
if (error) {
toast.error("An error occurred while deleting clipboard history");
return;
}
setHistory([]);
toast.success("Clipboard history deleted successfully!");
};
Behavior
- Shows a confirmation dialog to the user
- Iterates through all history items and deletes associated files from storage
- Deletes all database records for the current session
- Clears the local history state
handleEdit
Loads a clipboard entry into the editor for modification.
Source: src/App.jsx:249
const handleEdit = async (id) => {
setDeleteOne(true);
const content = history.find((item) => item.id === id).content;
setClipboard(content);
await supabase.from("clipboard").delete().eq("id", id);
setFileUrl(history.find((item) => item.id === id).file);
const newHistory = history.filter((item) => item.id !== id);
setHistory(newHistory);
setDeleteOne(false);
toast.success("Clipboard content added to editor!");
}
Parameters
The unique identifier of the clipboard entry to edit.
Behavior
- Finds the entry in the history by ID
- Loads the content and file (if any) into the editor
- Deletes the entry from the database
- Updates the local history state
- Allows the user to modify and re-save the content
Real-time Subscription
ClipSync uses Supabase’s real-time features to sync clipboard updates across devices.
Source: src/App.jsx:385
useEffect(() => {
if (!sessionCode) return;
const channel = supabase
.channel("clipboard")
.on("postgres_changes", {
event: "*",
schema: "public",
table: "clipboard"
}, (payload) => {
if (payload.new.session_code === sessionCode && payload.eventType === "INSERT") {
setHistory((prev) => [payload.new, ...prev]);
setClipboard("");
}
if (payload.eventType === "DELETE") {
if (deleteOne) {
setHistory([]);
} else {
setHistory((prev) => prev.filter((item) => item.id !== payload.old.id));
}
}
})
.subscribe();
return () => {
supabase.removeChannel(channel);
};
}, [sessionCode, isOffline]);
Behavior
- INSERT events: Adds new clipboard entries to the history in real-time
- DELETE events: Removes deleted entries from the history
- Session filtering: Only processes events matching the current session code
- Cleanup: Unsubscribes from the channel when the component unmounts
Event Types
INSERT: New clipboard content addedDELETE: Clipboard content removed- Automatically syncs across all connected devices in the session