Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/SudhansuuRanjan/clipsync/llms.txt

Use this file to discover all available pages before exploring further.

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:
​
clipboard
string
The text content to be synced. Maximum length of 15,000 characters.
​
fileUrl
object | null
Optional file attachment object containing url, path, name, and type properties.
​
isSensitive
boolean
Flag indicating whether the content contains sensitive information that should be hidden.

​
Behavior

  1. Validates that either text or file content exists
  2. Checks content length (15,000 character limit)
  3. Creates a new session if one doesn’t exist
  4. Inserts clipboard data into the database
  5. 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

​
sessionCode
string
required
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

​
content
string
required
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

  1. Requests clipboard read permission from the browser
  2. Reads text content from the system clipboard
  3. Updates the input field with the clipboard text
  4. 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

  1. Shows a confirmation dialog to the user
  2. Iterates through all history items and deletes associated files from storage
  3. Deletes all database records for the current session
  4. 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

​
id
number
required
The unique identifier of the clipboard entry to edit.

​
Behavior

  1. Finds the entry in the history by ID
  2. Loads the content and file (if any) into the editor
  3. Deletes the entry from the database
  4. Updates the local history state
  5. 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 added
  • DELETE: Clipboard content removed
  • Automatically syncs across all connected devices in the session

Build docs developers (and LLMs) love

Get started for freeTalk to us