({
showAttachmentsOnly: false,
- showStarredOnly: false,
- showHiddenOnly: false,
- showDiagramsOnly: false,
showCodeOnly: false,
+ showDiagramsOnly: false,
+ showHiddenOnly: false,
+ showPublicOnly: false,
+ showStarredOnly: false,
});
const [isRefreshing, setIsRefreshing] = useState(false);
@@ -139,12 +141,13 @@ export default function FilesPanel({
// A note is included if it passes ALL active filters (AND logic)
// Exclude if any active filter condition fails
const excludeByAttachments = config.showAttachmentsOnly && !hasAttachments;
- const excludeByStarred = config.showStarredOnly && !note.starred;
- const excludeByHidden = config.showHiddenOnly && !note.hidden;
- const excludeByDiagrams = config.showDiagramsOnly && note.type !== 'diagram';
const excludeByCode = config.showCodeOnly && note.type !== 'code';
+ const excludeByDiagrams = config.showDiagramsOnly && note.type !== 'diagram';
+ const excludeByHidden = config.showHiddenOnly && !note.hidden;
+ const excludeByPublic = config.showPublicOnly && !note.isPublished;
+ const excludeByStarred = config.showStarredOnly && !note.starred;
- return !(excludeByAttachments || excludeByStarred || excludeByHidden || excludeByDiagrams || excludeByCode);
+ return !(excludeByAttachments || excludeByCode || excludeByDiagrams || excludeByHidden || excludeByPublic || excludeByStarred);
});
};
@@ -166,12 +169,12 @@ export default function FilesPanel({
const getFilterLabel = () => {
const activeFilters = [];
- if (filterConfig.showAttachmentsOnly)
- activeFilters.push('With Attachments');
- if (filterConfig.showStarredOnly) activeFilters.push('Starred');
- if (filterConfig.showHiddenOnly) activeFilters.push('Hidden');
- if (filterConfig.showDiagramsOnly) activeFilters.push('Diagrams');
+ if (filterConfig.showAttachmentsOnly) activeFilters.push('Attachments');
if (filterConfig.showCodeOnly) activeFilters.push('Code');
+ if (filterConfig.showDiagramsOnly) activeFilters.push('Diagrams');
+ if (filterConfig.showHiddenOnly) activeFilters.push('Hidden');
+ if (filterConfig.showPublicOnly) activeFilters.push('Public');
+ if (filterConfig.showStarredOnly) activeFilters.push('Starred');
if (activeFilters.length === 0) return `Sort: ${getSortLabel()}`;
return `Filter: ${activeFilters.join(', ')} | Sort: ${getSortLabel()}`;
@@ -179,10 +182,11 @@ export default function FilesPanel({
const hasActiveFilters =
filterConfig.showAttachmentsOnly ||
- filterConfig.showStarredOnly ||
- filterConfig.showHiddenOnly ||
+ filterConfig.showCodeOnly ||
filterConfig.showDiagramsOnly ||
- filterConfig.showCodeOnly;
+ filterConfig.showHiddenOnly ||
+ filterConfig.showPublicOnly ||
+ filterConfig.showStarredOnly;
const getPanelTitle = () => {
if (selectedFolder) {
@@ -196,6 +200,8 @@ export default function FilesPanel({
return 'Archived Notes';
case 'trash':
return 'Trash';
+ case 'public':
+ return 'Public Notes';
default:
return 'All Notes';
}
@@ -234,6 +240,8 @@ export default function FilesPanel({
return 'No starred notes';
case 'archived':
return 'No archived notes';
+ case 'public':
+ return 'No public notes';
default:
return 'No notes yet';
}
@@ -333,12 +341,23 @@ export default function FilesPanel({
onClick={() =>
setFilterConfig((prev) => ({
...prev,
- showStarredOnly: !prev.showStarredOnly,
+ showCodeOnly: !prev.showCodeOnly,
}))
}
- className={`${filterConfig.showStarredOnly ? 'bg-accent' : ''} mb-1`}
+ className={`${filterConfig.showCodeOnly ? 'bg-accent' : ''} mb-1`}
>
- {filterConfig.showStarredOnly ? '✓' : '○'} Starred
+ {filterConfig.showCodeOnly ? '✓' : '○'} Code
+
+
+ setFilterConfig((prev) => ({
+ ...prev,
+ showDiagramsOnly: !prev.showDiagramsOnly,
+ }))
+ }
+ className={`${filterConfig.showDiagramsOnly ? 'bg-accent' : ''} mb-1`}
+ >
+ {filterConfig.showDiagramsOnly ? '✓' : '○'} Diagrams
@@ -355,38 +374,35 @@ export default function FilesPanel({
onClick={() =>
setFilterConfig((prev) => ({
...prev,
- showDiagramsOnly: !prev.showDiagramsOnly,
+ showPublicOnly: !prev.showPublicOnly,
}))
}
- className={`${filterConfig.showDiagramsOnly ? 'bg-accent' : ''} mb-1`}
+ className={`${filterConfig.showPublicOnly ? 'bg-accent' : ''} mb-1`}
>
- {filterConfig.showDiagramsOnly ? '✓' : '○'} Diagrams
+ {filterConfig.showPublicOnly ? '✓' : '○'} Public
setFilterConfig((prev) => ({
...prev,
- showCodeOnly: !prev.showCodeOnly,
+ showStarredOnly: !prev.showStarredOnly,
}))
}
- className={`${filterConfig.showCodeOnly ? 'bg-accent' : ''} mb-1`}
+ className={`${filterConfig.showStarredOnly ? 'bg-accent' : ''} mb-1`}
>
- {filterConfig.showCodeOnly ? '✓' : '○'} Code
+ {filterConfig.showStarredOnly ? '✓' : '○'} Starred
- {(filterConfig.showAttachmentsOnly ||
- filterConfig.showStarredOnly ||
- filterConfig.showHiddenOnly ||
- filterConfig.showDiagramsOnly ||
- filterConfig.showCodeOnly) && (
+ {hasActiveFilters && (
setFilterConfig({
showAttachmentsOnly: false,
- showStarredOnly: false,
- showHiddenOnly: false,
- showDiagramsOnly: false,
showCodeOnly: false,
+ showDiagramsOnly: false,
+ showHiddenOnly: false,
+ showPublicOnly: false,
+ showStarredOnly: false,
})
}
className="text-muted-foreground mb-1"
diff --git a/src/hooks/useNotes.ts b/src/hooks/useNotes.ts
index 1a5ce15..c196d03 100644
--- a/src/hooks/useNotes.ts
+++ b/src/hooks/useNotes.ts
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback, useRef } from 'react';
import { useAuth, useUser } from '@clerk/clerk-react';
-import { api, type ApiNote, type ApiFolder } from '@/lib/api/api.ts';
+import { api, type ApiNote, type ApiFolder, type ApiPublicNote } from '@/lib/api/api.ts';
import { fileService } from '@/services/fileService';
import {
clearEncryptionKeys,
@@ -21,6 +21,11 @@ const convertApiNote = (apiNote: ApiNote): Note => ({
createdAt: new Date(apiNote.createdAt),
updatedAt: new Date(apiNote.updatedAt),
hiddenAt: apiNote.hiddenAt ? new Date(apiNote.hiddenAt) : null,
+ // Public note fields
+ isPublished: apiNote.isPublished ?? false,
+ publicSlug: apiNote.publicSlug ?? null,
+ publishedAt: apiNote.publishedAt ? new Date(apiNote.publishedAt) : null,
+ publicUpdatedAt: apiNote.publicUpdatedAt ? new Date(apiNote.publicUpdatedAt) : null,
});
const convertApiFolder = (apiFolder: ApiFolder): Folder => ({
@@ -369,6 +374,7 @@ export function useNotes() {
archivedCount,
trashedCount,
hiddenCount,
+ publicCount,
} = useNotesFiltering({
notes,
folders,
@@ -493,8 +499,22 @@ export function useNotes() {
const updateNote = useCallback(
async (noteId: string, updates: Partial) => {
await restNotesOperations.updateNote(noteId, updates);
+
+ // Auto-sync public note if published and content/title changed
+ if (updates.title !== undefined || updates.content !== undefined) {
+ const note = notes.find(n => n.id === noteId);
+ if (note?.isPublished && note?.publicSlug) {
+ // Sync in background without blocking the save
+ void api.updatePublicNote(note.publicSlug, {
+ title: updates.title ?? note.title,
+ content: updates.content ?? note.content,
+ }).catch(error => {
+ secureLogger.warn('Failed to sync public note', { noteId, error });
+ });
+ }
+ }
},
- [restNotesOperations]
+ [restNotesOperations, notes]
);
const deleteNote = async (noteId: string) => {
@@ -595,6 +615,144 @@ export function useNotes() {
await restNotesOperations.moveNoteToFolder(noteId, folderId);
};
+ // ===== Public Notes Functions =====
+
+ const publishNote = useCallback(async (
+ noteId: string,
+ authorName?: string
+ ): Promise => {
+ // Find the note to publish
+ const note = notes.find(n => n.id === noteId);
+ if (!note) {
+ setError('Note not found');
+ return null;
+ }
+
+ try {
+ // Publish the note (content is already decrypted in memory)
+ const publicNote = await api.publishNote({
+ noteId: note.id,
+ title: note.title,
+ content: note.content,
+ type: note.type,
+ authorName,
+ });
+
+ // Update local state with publish info using functional updates
+ setNotes(prev => prev.map(n => {
+ if (n.id === noteId) {
+ return {
+ ...n,
+ isPublished: true,
+ publicSlug: publicNote.slug,
+ publishedAt: new Date(publicNote.publishedAt),
+ publicUpdatedAt: new Date(publicNote.updatedAt),
+ };
+ }
+ return n;
+ }));
+
+ setSelectedNote(prev => {
+ if (prev?.id === noteId) {
+ return {
+ ...prev,
+ isPublished: true,
+ publicSlug: publicNote.slug,
+ publishedAt: new Date(publicNote.publishedAt),
+ publicUpdatedAt: new Date(publicNote.updatedAt),
+ };
+ }
+ return prev;
+ });
+
+ return publicNote;
+ } catch (error) {
+ secureLogger.error('Failed to publish note', error);
+ setError('Failed to publish note');
+ return null;
+ }
+ }, [notes, setNotes, setSelectedNote, setError]);
+
+ const unpublishNote = useCallback(async (noteId: string): Promise => {
+ // Find the note to unpublish (for getting the publicSlug)
+ const note = notes.find(n => n.id === noteId);
+ if (!note || !note.publicSlug) {
+ setError('Note not found or not published');
+ return false;
+ }
+
+ try {
+ await api.unpublishNote(note.publicSlug);
+
+ // Update local state using functional updates to ensure fresh state
+ setNotes(prev => prev.map(n => {
+ if (n.id === noteId) {
+ return {
+ ...n,
+ isPublished: false,
+ publicSlug: null,
+ publishedAt: null,
+ publicUpdatedAt: null,
+ };
+ }
+ return n;
+ }));
+
+ // Update selectedNote if it's the one being unpublished
+ setSelectedNote(prev => {
+ if (prev?.id === noteId) {
+ return {
+ ...prev,
+ isPublished: false,
+ publicSlug: null,
+ publishedAt: null,
+ publicUpdatedAt: null,
+ };
+ }
+ return prev;
+ });
+
+ return true;
+ } catch (error) {
+ secureLogger.error('Failed to unpublish note', error);
+ setError('Failed to unpublish note');
+ return false;
+ }
+ }, [notes, setNotes, setSelectedNote, setError]);
+
+ const syncPublicNote = useCallback(async (noteId: string): Promise => {
+ // Find the note to sync
+ const note = notes.find(n => n.id === noteId);
+ if (!note || !note.publicSlug || !note.isPublished) {
+ return false; // Not published, nothing to sync
+ }
+
+ try {
+ const publicNote = await api.updatePublicNote(note.publicSlug, {
+ title: note.title,
+ content: note.content,
+ });
+
+ // Update local state with new sync time
+ const updatedNote: Note = {
+ ...note,
+ publicUpdatedAt: new Date(publicNote.updatedAt),
+ };
+
+ setNotes(prev => prev.map(n => n.id === noteId ? updatedNote : n));
+
+ if (selectedNote?.id === noteId) {
+ setSelectedNote(updatedNote);
+ }
+
+ return true;
+ } catch (error) {
+ secureLogger.error('Failed to sync public note', error);
+ // Don't set error state for background sync failures
+ return false;
+ }
+ }, [notes, selectedNote, setNotes, setSelectedNote]);
+
return {
notes: filteredNotes,
allNotes: notes, // Unfiltered notes for note linking feature
@@ -612,6 +770,7 @@ export function useNotes() {
archivedCount,
trashedCount,
hiddenCount,
+ publicCount,
createNote: notesOpsCreateNote,
creatingNote,
createFolder,
@@ -630,6 +789,9 @@ export function useNotes() {
permanentlyDeleteNote,
moveNoteToFolder,
toggleFolderExpansion,
+ publishNote,
+ unpublishNote,
+ syncPublicNote,
setSelectedNote,
setSelectedFolder,
setCurrentView,
diff --git a/src/hooks/useNotesFiltering.ts b/src/hooks/useNotesFiltering.ts
index 00146ec..081d01b 100644
--- a/src/hooks/useNotesFiltering.ts
+++ b/src/hooks/useNotesFiltering.ts
@@ -51,6 +51,8 @@ export function useNotesFiltering({
return note.deleted;
case 'hidden':
return note.hidden && !note.deleted;
+ case 'public':
+ return note.isPublished && !note.deleted && !note.archived;
default:
return !note.deleted && !note.archived;
}
@@ -64,6 +66,7 @@ export function useNotesFiltering({
if (!note.deleted && !note.archived) {
acc.notesCount++;
if (note.starred) acc.starredCount++;
+ if (note.isPublished) acc.publicCount++;
}
if (note.archived && !note.deleted) acc.archivedCount++;
if (note.deleted) acc.trashedCount++;
@@ -76,6 +79,7 @@ export function useNotesFiltering({
archivedCount: 0,
trashedCount: 0,
hiddenCount: 0,
+ publicCount: 0,
}
);
}, [notes]);
diff --git a/src/lib/api/api.ts b/src/lib/api/api.ts
index 78a7ad3..0e56281 100644
--- a/src/lib/api/api.ts
+++ b/src/lib/api/api.ts
@@ -39,6 +39,11 @@ export interface ApiNote {
updatedAt: string;
attachmentCount?: number;
type?: 'note' | 'diagram';
+ // Public note fields (from JOIN with public_notes table)
+ isPublished?: boolean;
+ publicSlug?: string | null;
+ publishedAt?: string | null;
+ publicUpdatedAt?: string | null;
}
export interface ApiFolder {
@@ -69,6 +74,19 @@ export interface ApiUserUsage {
};
}
+export interface ApiPublicNote {
+ id: string;
+ slug: string;
+ noteId: string;
+ userId: string;
+ title: string;
+ content: string; // Plaintext HTML (not encrypted)
+ type?: 'note' | 'diagram' | 'code';
+ authorName?: string;
+ publishedAt: string;
+ updatedAt: string;
+}
+
export interface ApiUser {
id: string;
email: string;
@@ -640,6 +658,73 @@ class ClerkEncryptedApiService {
}
);
}
+
+ // ===== Public Notes API =====
+ // These methods handle unencrypted public versions of notes
+
+ /**
+ * Publish a note - creates a public, unencrypted copy
+ * The client must decrypt the note first and send plaintext content
+ */
+ async publishNote(data: {
+ noteId: string;
+ title: string;
+ content: string;
+ type?: 'note' | 'diagram' | 'code';
+ authorName?: string;
+ }): Promise {
+ return this.request('/public-notes', {
+ method: 'POST',
+ body: JSON.stringify(data),
+ });
+ }
+
+ /**
+ * Update a published note's content
+ * Called automatically when the original note is saved
+ */
+ async updatePublicNote(
+ slug: string,
+ updates: {
+ title?: string;
+ content?: string;
+ authorName?: string;
+ }
+ ): Promise {
+ return this.request(`/public-notes/${slug}`, {
+ method: 'PUT',
+ body: JSON.stringify(updates),
+ });
+ }
+
+ /**
+ * Unpublish a note - removes the public copy
+ */
+ async unpublishNote(slug: string): Promise<{ message: string }> {
+ return this.request<{ message: string }>(`/public-notes/${slug}`, {
+ method: 'DELETE',
+ });
+ }
+
+ /**
+ * Get a public note by slug (no auth required on backend)
+ * This is used for the public viewer page
+ */
+ async getPublicNote(slug: string): Promise {
+ return this.request(`/public-notes/${slug}`);
+ }
+
+ /**
+ * Check if a note is published and get its public info
+ */
+ async getPublicNoteByNoteId(noteId: string): Promise {
+ try {
+ return await this.request(`/public-notes/note/${noteId}`);
+ } catch {
+ // Note is not published
+ return null;
+ }
+ }
}
export const api = new ClerkEncryptedApiService();
diff --git a/src/pages/PublicNotePage.tsx b/src/pages/PublicNotePage.tsx
new file mode 100644
index 0000000..f143010
--- /dev/null
+++ b/src/pages/PublicNotePage.tsx
@@ -0,0 +1,1017 @@
+import { useEffect, useState, useRef } from 'react';
+import { Calendar, User, AlertCircle, Sun, Moon, ArrowUp } from 'lucide-react';
+import type { ApiPublicNote } from '@/lib/api/api';
+import DOMPurify from 'dompurify';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import python from 'highlight.js/lib/languages/python';
+import css from 'highlight.js/lib/languages/css';
+import html from 'highlight.js/lib/languages/xml';
+import json from 'highlight.js/lib/languages/json';
+import bash from 'highlight.js/lib/languages/bash';
+import sql from 'highlight.js/lib/languages/sql';
+import java from 'highlight.js/lib/languages/java';
+import cpp from 'highlight.js/lib/languages/cpp';
+import csharp from 'highlight.js/lib/languages/csharp';
+import php from 'highlight.js/lib/languages/php';
+import markdown from 'highlight.js/lib/languages/markdown';
+
+// Register languages
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('html', html);
+hljs.registerLanguage('xml', html);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('shell', bash);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('cpp', cpp);
+hljs.registerLanguage('csharp', csharp);
+hljs.registerLanguage('php', php);
+hljs.registerLanguage('markdown', markdown);
+
+type Theme = 'light' | 'dark';
+
+// Note: Public notes API endpoint doesn't require authentication
+const VITE_API_URL = import.meta.env.VITE_API_URL as string;
+
+// TipTap content styles for proper rendering
+const tiptapContentStyles = `
+.tiptap-content {
+ line-height: 1.6;
+ font-size: 15px;
+ color: inherit;
+}
+
+@media (min-width: 640px) {
+ .tiptap-content {
+ font-size: 16px;
+ }
+}
+
+.tiptap-content h1 {
+ font-size: 2em;
+ font-weight: bold;
+ margin: 24px 0 12px 0;
+ line-height: 1.2;
+}
+
+.tiptap-content h2 {
+ font-size: 1.5em;
+ font-weight: bold;
+ margin: 20px 0 10px 0;
+ line-height: 1.3;
+}
+
+.tiptap-content h3 {
+ font-size: 1.25em;
+ font-weight: bold;
+ margin: 16px 0 8px 0;
+ line-height: 1.4;
+}
+
+.tiptap-content p {
+ margin: 12px 0;
+}
+
+/* Line breaks */
+.tiptap-content br {
+ display: block;
+ content: "";
+ margin-top: 0.5em;
+}
+
+.tiptap-content p:empty::before {
+ content: "\\00a0";
+}
+
+.tiptap-content ul,
+.tiptap-content ol {
+ margin: 12px 0;
+ padding-left: 24px;
+}
+
+.tiptap-content li {
+ margin: 6px 0;
+}
+
+.tiptap-content ul {
+ list-style-type: disc;
+}
+
+.tiptap-content ol {
+ list-style-type: decimal;
+}
+
+/* Highlight styles */
+.tiptap-content mark {
+ background-color: #fef08a;
+ padding: 1px 4px;
+ border-radius: 2px;
+}
+
+.dark .tiptap-content mark {
+ background-color: #854d0e;
+ color: #fef9c3;
+}
+
+/* Task List Styles */
+.tiptap-content .task-list,
+.tiptap-content ul[data-type="taskList"] {
+ list-style: none;
+ padding-left: 0;
+ margin: 12px 0;
+}
+
+.tiptap-content .task-item,
+.tiptap-content li[data-type="taskItem"] {
+ display: flex;
+ align-items: flex-start;
+ margin: 6px 0;
+ padding-left: 0;
+ line-height: 1.6;
+}
+
+.tiptap-content .task-item > label,
+.tiptap-content li[data-type="taskItem"] > label {
+ margin-right: 8px;
+ margin-top: 2px;
+ cursor: default;
+ user-select: none;
+ display: flex;
+ align-items: center;
+}
+
+.tiptap-content .task-item > label input[type="checkbox"],
+.tiptap-content li[data-type="taskItem"] > label input[type="checkbox"] {
+ margin: 0;
+ width: 16px;
+ height: 16px;
+ accent-color: #3b82f6;
+}
+
+.tiptap-content .task-item > div,
+.tiptap-content li[data-type="taskItem"] > div {
+ flex: 1;
+ min-width: 0;
+}
+
+.tiptap-content .task-item[data-checked="true"] > div,
+.tiptap-content li[data-type="taskItem"][data-checked="true"] > div {
+ text-decoration: line-through;
+ opacity: 0.6;
+}
+
+/* Blockquote */
+.tiptap-content blockquote {
+ margin: 16px 0;
+ padding-left: 16px;
+ border-left: 4px solid #d1d5db;
+ font-style: italic;
+ color: #6b7280;
+}
+
+.dark .tiptap-content blockquote {
+ border-left-color: #4b5563;
+ color: #9ca3af;
+}
+
+/* Inline code */
+.tiptap-content code:not(pre code) {
+ background-color: #f3f4f6;
+ color: #1f2937;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+ font-size: 0.9em;
+}
+
+.dark .tiptap-content code:not(pre code) {
+ background-color: #374151;
+ color: #e5e7eb;
+}
+
+/* Code Block Styles */
+.tiptap-content pre {
+ background-color: #ffffff;
+ border: 1px solid #e5e5e5;
+ border-radius: 8px;
+ margin: 16px 0;
+ overflow: hidden;
+ position: relative;
+ padding: 0;
+}
+
+.dark .tiptap-content pre {
+ background-color: #1f2937;
+ border-color: #374151;
+}
+
+/* Code block header with macOS-style dots */
+.tiptap-content pre::before {
+ content: attr(data-language);
+ display: block;
+ background: #f5f5f5;
+ border-bottom: 1px solid #e5e5e5;
+ padding: 8px 12px 8px 50px;
+ font-size: 0.7rem;
+ font-weight: 500;
+ color: #666666;
+ text-transform: capitalize;
+ font-family: system-ui, -apple-system, sans-serif;
+ position: relative;
+ min-height: 32px;
+ line-height: 16px;
+}
+
+@media (min-width: 640px) {
+ .tiptap-content pre::before {
+ padding: 8px 16px 8px 60px;
+ font-size: 0.75rem;
+ min-height: 36px;
+ line-height: 20px;
+ }
+}
+
+.dark .tiptap-content pre::before {
+ background: #374151;
+ border-bottom-color: #4b5563;
+ color: #9ca3af;
+}
+
+/* macOS-style colored dots */
+.tiptap-content pre::after {
+ content: "";
+ position: absolute;
+ top: 11px;
+ left: 12px;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #ef4444;
+ box-shadow: 15px 0 0 #f59e0b, 30px 0 0 #22c55e;
+}
+
+@media (min-width: 640px) {
+ .tiptap-content pre::after {
+ top: 12px;
+ left: 16px;
+ width: 12px;
+ height: 12px;
+ box-shadow: 18px 0 0 #f59e0b, 36px 0 0 #22c55e;
+ }
+}
+
+.tiptap-content pre code {
+ display: block;
+ background: transparent;
+ padding: 12px;
+ border-radius: 0;
+ color: #374151;
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ overflow-x: auto;
+ margin: 0;
+ white-space: pre;
+}
+
+@media (min-width: 640px) {
+ .tiptap-content pre code {
+ padding: 16px;
+ font-size: 0.875rem;
+ line-height: 1.6;
+ }
+}
+
+.dark .tiptap-content pre code {
+ color: #e5e7eb;
+}
+
+/* Syntax highlighting */
+.tiptap-content pre .hljs-comment,
+.tiptap-content pre .hljs-quote {
+ color: #6b7280;
+ font-style: italic;
+}
+
+.tiptap-content pre .hljs-keyword,
+.tiptap-content pre .hljs-selector-tag,
+.tiptap-content pre .hljs-title {
+ color: #7c3aed;
+ font-weight: 600;
+}
+
+.tiptap-content pre .hljs-string,
+.tiptap-content pre .hljs-attr {
+ color: #059669;
+}
+
+.tiptap-content pre .hljs-number,
+.tiptap-content pre .hljs-literal {
+ color: #d97706;
+}
+
+.tiptap-content pre .hljs-function,
+.tiptap-content pre .hljs-title.function_ {
+ color: #2563eb;
+}
+
+.tiptap-content pre .hljs-variable,
+.tiptap-content pre .hljs-template-variable {
+ color: #dc2626;
+}
+
+.tiptap-content pre .hljs-built_in,
+.tiptap-content pre .hljs-type {
+ color: #7c2d12;
+}
+
+.tiptap-content pre .hljs-operator,
+.tiptap-content pre .hljs-punctuation {
+ color: #6b7280;
+}
+
+/* Links */
+.tiptap-content a {
+ color: #2563eb;
+ text-decoration: underline;
+}
+
+.tiptap-content a:hover {
+ color: #1d4ed8;
+}
+
+.dark .tiptap-content a {
+ color: #60a5fa;
+}
+
+.dark .tiptap-content a:hover {
+ color: #93c5fd;
+}
+
+/* Note links */
+.tiptap-content a[data-note-link] {
+ color: #8b5cf6;
+ text-decoration: none;
+ background-color: #f5f3ff;
+ padding: 1px 4px;
+ border-radius: 4px;
+}
+
+.dark .tiptap-content a[data-note-link] {
+ color: #a78bfa;
+ background-color: #1e1b4b;
+}
+
+/* Horizontal rule */
+.tiptap-content hr {
+ border: none;
+ border-top: 1px solid #d1d5db;
+ margin: 24px 0;
+}
+
+.dark .tiptap-content hr {
+ border-top-color: #4b5563;
+}
+
+/* Images */
+.tiptap-content img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
+ margin: 16px 0;
+ display: block;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Strong and emphasis */
+.tiptap-content strong {
+ font-weight: bold;
+}
+
+.tiptap-content em {
+ font-style: italic;
+}
+
+/* Strikethrough */
+.tiptap-content s {
+ text-decoration: line-through;
+}
+
+/* Underline */
+.tiptap-content u {
+ text-decoration: underline;
+}
+
+/* Table of Contents Styles */
+.tiptap-content .toc-container {
+ background-color: #f9fafb;
+ border: 1px solid #e5e7eb;
+ border-radius: 8px;
+ padding: 16px;
+ margin: 16px 0;
+}
+
+.dark .tiptap-content .toc-container {
+ background-color: #1f2937;
+ border-color: #374151;
+}
+
+.tiptap-content .toc-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ margin: 0;
+ text-align: left;
+ font-family: inherit;
+}
+
+.tiptap-content .toc-header.toc-toggle {
+ padding-bottom: 0;
+ border-bottom: none;
+ margin-bottom: 0;
+}
+
+.tiptap-content .toc-container:not(.toc-collapsed) .toc-header.toc-toggle {
+ margin-bottom: 12px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.dark .tiptap-content .toc-container:not(.toc-collapsed) .toc-header.toc-toggle {
+ border-bottom-color: #374151;
+}
+
+.tiptap-content .toc-header-left {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.tiptap-content .toc-chevron {
+ transition: transform 0.2s ease;
+ color: #6b7280;
+}
+
+.dark .tiptap-content .toc-chevron {
+ color: #9ca3af;
+}
+
+.tiptap-content .toc-container:not(.toc-collapsed) .toc-chevron {
+ transform: rotate(90deg);
+}
+
+/* Collapsed state - hide items */
+.tiptap-content .toc-container.toc-collapsed .toc-items {
+ display: none !important;
+}
+
+/* Expanded state - show items */
+.tiptap-content .toc-container:not(.toc-collapsed) .toc-items {
+ display: flex !important;
+}
+
+.tiptap-content .toc-title {
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: #111827;
+}
+
+.dark .tiptap-content .toc-title {
+ color: #f3f4f6;
+}
+
+.tiptap-content .toc-count {
+ font-size: 0.75rem;
+ color: #6b7280;
+}
+
+.dark .tiptap-content .toc-count {
+ color: #9ca3af;
+}
+
+.tiptap-content .toc-items {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.tiptap-content .toc-item {
+ display: flex;
+ align-items: center;
+ padding: 6px 8px;
+ border-radius: 4px;
+ text-decoration: none;
+ color: #374151;
+ font-size: 0.875rem;
+ transition: background-color 0.15s;
+}
+
+.tiptap-content .toc-item:hover {
+ background-color: #f3f4f6;
+}
+
+.dark .tiptap-content .toc-item {
+ color: #e5e7eb;
+}
+
+.dark .tiptap-content .toc-item:hover {
+ background-color: #374151;
+}
+
+.tiptap-content .toc-item.toc-level-2 {
+ padding-left: 24px;
+}
+
+.tiptap-content .toc-item.toc-level-3 {
+ padding-left: 40px;
+ color: #6b7280;
+}
+
+.dark .tiptap-content .toc-item.toc-level-3 {
+ color: #9ca3af;
+}
+
+.tiptap-content .toc-bullet {
+ color: #9ca3af;
+ margin-right: 4px;
+}
+
+.tiptap-content .toc-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.tiptap-content .toc-empty {
+ background-color: #f9fafb;
+}
+
+.dark .tiptap-content .toc-empty {
+ background-color: #1f2937;
+}
+
+.tiptap-content .toc-empty-message {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: #6b7280;
+ font-size: 0.875rem;
+}
+
+.dark .tiptap-content .toc-empty-message {
+ color: #9ca3af;
+}
+`;
+
+async function fetchPublicNote(slug: string): Promise {
+ const url = `${VITE_API_URL.replace(/\/$/, '')}/public-notes/${slug}`;
+ const response = await fetch(url);
+
+ if (!response.ok) {
+ if (response.status === 404) {
+ throw new Error('Note not found');
+ }
+ throw new Error('Failed to load note');
+ }
+
+ return response.json();
+}
+
+// Get initial theme from system preference
+const getSystemTheme = (): Theme => {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+// Safely extract text from HTML using DOM (immune to nested tag attacks)
+const stripHtmlTags = (html: string): string => {
+ const doc = new DOMParser().parseFromString(html, 'text/html');
+ return doc.body.textContent || '';
+};
+
+export default function PublicNotePage() {
+ const [note, setNote] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [theme, setTheme] = useState(getSystemTheme);
+ const [showScrollTop, setShowScrollTop] = useState(false);
+ const [processedContent, setProcessedContent] = useState('');
+ const contentRef = useRef(null);
+
+ // Get slug from URL
+ const slug = window.location.pathname.split('/p/')[1];
+
+ // Apply theme to document
+ useEffect(() => {
+ document.documentElement.classList.toggle('dark', theme === 'dark');
+ }, [theme]);
+
+ // Show/hide scroll to top button based on scroll position
+ useEffect(() => {
+ const handleScroll = () => {
+ setShowScrollTop(window.scrollY > 400);
+ };
+
+ window.addEventListener('scroll', handleScroll, { passive: true });
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
+ const scrollToTop = () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ };
+
+ // Fetch note
+ useEffect(() => {
+ if (!slug) {
+ setError('Invalid note URL');
+ setLoading(false);
+ return;
+ }
+
+ fetchPublicNote(slug)
+ .then((data) => {
+ setNote(data);
+ setLoading(false);
+ })
+ .catch((err) => {
+ setError(err.message || 'Failed to load note');
+ setLoading(false);
+ });
+ }, [slug]);
+
+ // Process content: add heading IDs, generate TOC, and sanitize sensitive data
+ useEffect(() => {
+ if (!note?.content) {
+ setProcessedContent('');
+ return;
+ }
+
+ let content = note.content;
+
+ // SECURITY: Strip internal note IDs from note links
+ // Convert note links to plain styled text without exposing internal IDs
+ content = content.replace(/data-note-id="[^"]*"/gi, '');
+
+ // Also remove any other potential data attributes that might leak info
+ content = content.replace(/data-note-link="[^"]*"/gi, '');
+
+ // Parse headings and add IDs
+ const headingRegex = /<(h[1-3])([^>]*)>(.*?)<\/\1>/gi;
+ const headings: Array<{ level: number; text: string; id: string }> = [];
+ let headingIndex = 0;
+
+ content = content.replace(headingRegex, (_match, tag, attrs, text) => {
+ const level = parseInt(tag.charAt(1));
+ const id = `heading-${headingIndex}`;
+ const plainText = stripHtmlTags(text);
+ headings.push({ level, text: plainText, id });
+ headingIndex++;
+ return `<${tag}${attrs} id="${id}">${text}`;
+ });
+
+ // Generate TOC HTML for any [data-toc] placeholders
+ if (content.includes('data-toc')) {
+ let tocHtml: string;
+
+ if (headings.length === 0) {
+ tocHtml = `
+
+
+ No headings found in this document.
+
+
+ ${bullet}
+ ${text}
+
+ `;
+ }).join('');
+
+ // Default to collapsed state
+ tocHtml = `
+
+ `;
+ }
+
+ // Replace all data-toc placeholders (handles both self-closing and with content)
+ content = content.replace(/]*data-toc[^>]*>[\s\S]*?<\/div>/gi, tocHtml);
+ }
+
+ // SECURITY: Sanitize HTML to prevent XSS attacks
+ // Configure DOMPurify to allow safe HTML elements and attributes
+ const sanitizedContent = DOMPurify.sanitize(content, {
+ ADD_TAGS: ['style'], // Allow inline styles from TipTap
+ ADD_ATTR: [
+ 'data-toc',
+ 'data-toc-interactive',
+ 'data-type',
+ 'data-checked',
+ 'data-language',
+ 'data-note-link', // Allow note link styling (IDs already stripped)
+ 'target', // For links opening in new tabs
+ 'rel', // For security attributes on links
+ ],
+ ALLOW_DATA_ATTR: false, // Disable all data-* except those explicitly added
+ });
+
+ setProcessedContent(sanitizedContent);
+ }, [note?.content]);
+
+ // SEO: Update document title and meta tags
+ useEffect(() => {
+ if (!note) {
+ document.title = 'Typelets - Shared Note';
+ return;
+ }
+
+ // Set page title
+ const title = note.title ? `${note.title} - Typelets` : 'Typelets - Shared Note';
+ document.title = title;
+
+ // Set meta description
+ const description = note.content
+ ? stripHtmlTags(note.content).slice(0, 160).trim() + '...'
+ : 'A note shared via Typelets';
+
+ let metaDescription = document.querySelector('meta[name="description"]');
+ if (!metaDescription) {
+ metaDescription = document.createElement('meta');
+ metaDescription.setAttribute('name', 'description');
+ document.head.appendChild(metaDescription);
+ }
+ metaDescription.setAttribute('content', description);
+
+ // Open Graph tags
+ const ogTags = [
+ { property: 'og:title', content: title },
+ { property: 'og:description', content: description },
+ { property: 'og:type', content: 'article' },
+ { property: 'og:url', content: window.location.href },
+ { property: 'og:site_name', content: 'Typelets' },
+ ];
+
+ ogTags.forEach(({ property, content }) => {
+ let meta = document.querySelector(`meta[property="${property}"]`);
+ if (!meta) {
+ meta = document.createElement('meta');
+ meta.setAttribute('property', property);
+ document.head.appendChild(meta);
+ }
+ meta.setAttribute('content', content);
+ });
+
+ // Twitter Card tags
+ const twitterTags = [
+ { name: 'twitter:card', content: 'summary' },
+ { name: 'twitter:title', content: title },
+ { name: 'twitter:description', content: description },
+ ];
+
+ twitterTags.forEach(({ name, content }) => {
+ let meta = document.querySelector(`meta[name="${name}"]`);
+ if (!meta) {
+ meta = document.createElement('meta');
+ meta.setAttribute('name', name);
+ document.head.appendChild(meta);
+ }
+ meta.setAttribute('content', content);
+ });
+
+ // Author meta if available
+ if (note.authorName) {
+ let metaAuthor = document.querySelector('meta[name="author"]');
+ if (!metaAuthor) {
+ metaAuthor = document.createElement('meta');
+ metaAuthor.setAttribute('name', 'author');
+ document.head.appendChild(metaAuthor);
+ }
+ metaAuthor.setAttribute('content', note.authorName);
+ }
+ }, [note]);
+
+ // Apply syntax highlighting and setup TOC toggle after content loads
+ useEffect(() => {
+ if (!processedContent || !contentRef.current) return;
+
+ // Find all code blocks and highlight them
+ const codeBlocks = contentRef.current.querySelectorAll('pre code');
+ codeBlocks.forEach((block) => {
+ // Skip if already highlighted
+ if (block.classList.contains('hljs')) return;
+
+ // Get language from class or parent's data attribute
+ const pre = block.parentElement;
+ let language = pre?.getAttribute('data-language') || '';
+
+ // Also check for language- class
+ const classMatch = block.className.match(/language-(\w+)/);
+ if (classMatch) {
+ language = classMatch[1];
+ }
+
+ if (language && hljs.getLanguage(language)) {
+ const result = hljs.highlight(block.textContent || '', { language });
+ block.innerHTML = result.value;
+ block.classList.add('hljs');
+ } else {
+ // Auto-detect language
+ const result = hljs.highlightAuto(block.textContent || '');
+ block.innerHTML = result.value;
+ block.classList.add('hljs');
+ // Set detected language on pre element
+ if (result.language && pre) {
+ pre.setAttribute('data-language', result.language);
+ }
+ }
+ });
+
+ }, [processedContent]);
+
+ // Setup TOC toggle using event delegation
+ useEffect(() => {
+ const container = contentRef.current;
+ if (!container) return;
+
+ const handleClick = (e: MouseEvent) => {
+ const target = e.target as HTMLElement;
+
+ // Check if click is within TOC header area
+ const toggleBtn = target.closest('.toc-toggle') || target.closest('.toc-header');
+
+ if (toggleBtn) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const tocContainer = toggleBtn.closest('.toc-container');
+
+ if (tocContainer) {
+ tocContainer.classList.toggle('toc-collapsed');
+ }
+ }
+ };
+
+ container.addEventListener('click', handleClick);
+ return () => container.removeEventListener('click', handleClick);
+ }, [processedContent]);
+
+ const toggleTheme = () => {
+ setTheme((current) => current === 'light' ? 'dark' : 'light');
+ };
+
+ const ThemeIcon = () => {
+ return theme === 'light' ?
+
+
+
+ {error === 'Note not found' ? 'Note Not Found' : 'Error Loading Note'}
+
+
+ {error === 'Note not found'
+ ? 'This note may have been unpublished or the link is incorrect.'
+ : 'Something went wrong while loading this note. Please try again later.'}
+
+
+
+ {/* Header */}
+
+
+ {/* Content */}
+
+
+ {/* Title */}
+
+ {note.title || 'Untitled Note'}
+
+
+ {/* Meta */}
+
+ {note.authorName && (
+
+ {note.authorName}
+
+ )}
+
+ Published {formatDate(note.publishedAt)}
+
+ {note.updatedAt !== note.publishedAt && (
+
+ (Updated {formatDate(note.updatedAt)})
+
+ )}
+
+
+
+
+ {/* TipTap content styles */}
+
+
+ {/* Footer */}
+
+
+ {/* Scroll to top FAB - hidden on mobile */}
+ {showScrollTop && (
+
+
+ )}
+
;
onUpdateFolder: (
folderId: string,
@@ -65,6 +66,8 @@ export interface EditorProps {
onUnhideNote: (noteId: string) => Promise;
onRefreshNote?: (noteId: string) => Promise;
onSelectNote?: (note: Note) => void; // Navigate to a linked note
+ onPublishNote?: (noteId: string, authorName?: string) => Promise;
+ onUnpublishNote?: (noteId: string) => Promise;
userId?: string;
isNotesPanelOpen?: boolean;
onToggleNotesPanel?: () => void;
diff --git a/src/types/note.ts b/src/types/note.ts
index c31fd59..8e20285 100644
--- a/src/types/note.ts
+++ b/src/types/note.ts
@@ -26,6 +26,24 @@ export interface Note {
attachments?: FileAttachment[];
attachmentCount?: number; // Number of file attachments (from API)
isNew?: boolean; // Client-side flag to show "NEW" badge
+ // Public note fields
+ isPublished?: boolean;
+ publicSlug?: string | null;
+ publishedAt?: Date | null;
+ publicUpdatedAt?: Date | null;
+}
+
+export interface PublicNote {
+ id: string;
+ slug: string;
+ noteId: string;
+ userId: string;
+ title: string;
+ content: string; // Plaintext HTML (not encrypted)
+ type?: 'note' | 'diagram' | 'code';
+ authorName?: string;
+ publishedAt: Date;
+ updatedAt: Date;
}
export interface Folder {
@@ -43,7 +61,7 @@ export interface Folder {
noteCount?: number;
}
-export type ViewMode = 'all' | 'starred' | 'archived' | 'trash' | 'hidden';
+export type ViewMode = 'all' | 'starred' | 'archived' | 'trash' | 'hidden' | 'public';
export interface NotesState {
notes: Note[];