diff --git a/CONTEXT_DATA_EXAMPLE.md b/CONTEXT_DATA_EXAMPLE.md new file mode 100644 index 0000000000..ecd383eac1 --- /dev/null +++ b/CONTEXT_DATA_EXAMPLE.md @@ -0,0 +1,194 @@ +# Context Data Pattern - Usage Examples + +This document shows how to use the new context data pattern to communicate between type widgets (inside splits) and shared components (sidebars, toolbars). + +## Architecture + +Data is stored directly on the `NoteContext` object: +- **Type widgets** (PDF, Text, Code) publish data using `useSetContextData()` +- **Sidebar/toolbar components** read data using `useGetContextData()` +- Data is automatically cleared when switching notes +- Components automatically re-render when data changes + +## Example 1: PDF Page Navigation + +### Publishing from PDF Viewer (inside split) + +```tsx +// In Pdf.tsx +import { useSetContextData } from "../../react/hooks"; + +interface PdfPageInfo { + pageNumber: number; + title: string; +} + +export default function PdfPreview({ note, blob }) { + const { noteContext } = useActiveNoteContext(); + const [pages, setPages] = useState([]); + + useEffect(() => { + // When PDF loads, extract page information + const pageInfo = extractPagesFromPdf(); + setPages(pageInfo); + }, [blob]); + + // Publish pages to context data + useSetContextData(noteContext, "pdfPages", pages); + + return