Merge pull request #32 from typelets/feature/public-notes

feat: add public notes sharing with security hardening

Author: rui-typelets

README.md

@@ -88,6 +88,19 @@ Available on iOS and Android with the same powerful features and encryption.
 - 🌐 **Cross-platform** - Responsive web app that works seamlessly on desktop, tablet, and mobile
 - 🖨️ **Print support** - Clean printing with proper formatting
 
+### 🌐 Public Notes (Sharing)
+- 🔗 **Shareable links** - Publish any note with a unique, unguessable URL
+- 👤 **Optional author attribution** - Add your name or publish anonymously
+- 🎨 **Full formatting preserved** - Rich text, code blocks, images, and diagrams render beautifully
+- 📑 **Table of contents** - Collapsible TOC for easy navigation
+- 🌙 **Theme toggle** - Readers can switch between light and dark mode
+- 📱 **Mobile-friendly** - Responsive design for all screen sizes
+- 🔄 **Auto-sync** - Changes to your note automatically update the public version
+- ❌ **Instant unpublish** - Remove public access at any time (hard delete)
+- 🛡️ **Security hardened** - DOMPurify sanitization, rate limiting, no internal IDs exposed
+
+> ⚠️ **Important:** Publishing a note bypasses end-to-end encryption. An unencrypted copy is stored on our servers and anyone with the link can view it. Use this feature only for content you intend to share publicly.
+
 ### ⚡ Executable Code Blocks
 
 ![Execute Code Demo](https://github.com/typelets/typelets-app/blob/main/assets/execute-code-demo.gif)

package.json

@@ -88,9 +88,11 @@
     "@tiptap/react": "^3.4.4",
     "@tiptap/starter-kit": "^3.4.4",
     "@tiptap/suggestion": "^3.4.4",
+    "@types/dompurify": "^3.2.0",
     "@unhead/react": "^2.0.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dompurify": "^3.3.0",
     "highlight.js": "^11.11.1",
     "lowlight": "^3.3.0",
     "lucide-react": "^0.544.0",

pnpm-lock.yaml

@@ -19,6 +19,7 @@ import { codeExecutionService } from '@/services/codeExecutionService';
 import { clearUserEncryptionData } from '@/lib/encryption';
 import { MonacoThemeProvider } from '@/contexts/MonacoThemeContext';
 import MainApp from '@/pages/MainApp';
+import PublicNotePage from '@/pages/PublicNotePage';
 
 function AppContent() {
   const { getToken, isSignedIn } = useAuth();
@@ -46,6 +47,7 @@ function AppContent() {
 
   const isSignInPage = window.location.pathname === '/sign-in';
   const isSignUpPage = window.location.pathname === '/sign-up';
+  const isPublicNotePage = window.location.pathname.startsWith('/p/');
 
   // Check if user wants to force web version
   const urlParams = new URLSearchParams(window.location.search);
@@ -58,10 +60,15 @@ function AppContent() {
     localStorage.setItem('forceWebVersion', 'true');
   }
 
-  if (isMobileDevice && !isSignedIn && !forceWeb) {
+  if (isMobileDevice && !isSignedIn && !forceWeb && !isPublicNotePage) {
     return <MobileAppDownload />;
   }
 
+  // Public note pages don't require authentication
+  if (isPublicNotePage) {
+    return <PublicNotePage />;
+  }
+
   if (isSignInPage) {
     return (
       <div className="flex min-h-screen items-center justify-center">

src/App.tsx

@@ -12,6 +12,7 @@ import {
   PanelRightClose,
   PanelRightOpen,
   RefreshCw,
+  Globe,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ButtonGroup } from '@/components/ui/button-group';
@@ -39,6 +40,7 @@ import { editorStyles } from './config/editor-styles';
 import { EmptyState } from '@/components/editor/Editor/EmptyState';
 import { Toolbar } from '@/components/editor/Editor/Toolbar';
 import MoveNoteModal from '@/components/editor/modals/MoveNoteModal';
+import PublishNoteModal from '@/components/editor/modals/PublishNoteModal';
 import FileUpload from '@/components/editor/FileUpload';
 import { StatusBar } from '@/components/editor/Editor/StatusBar';
 import { useEditorState } from '@/components/editor/hooks/useEditorState';
@@ -101,6 +103,8 @@ interface NoteEditorProps {
   onUnhideNote: (noteId: string) => void;
   onRefreshNote?: (noteId: string) => void;
   onSelectNote?: (note: Note) => void; // Navigate to a linked note
+  onPublishNote?: (noteId: string, authorName?: string) => Promise<unknown>;
+  onUnpublishNote?: (noteId: string) => Promise<boolean>;
   userId?: string;
   isNotesPanelOpen?: boolean;
   onToggleNotesPanel?: () => void;
@@ -128,6 +132,8 @@ export default function Index({
   onUnhideNote,
   onRefreshNote,
   onSelectNote,
+  onPublishNote,
+  onUnpublishNote,
   userId = 'current-user',
   isNotesPanelOpen,
   onToggleNotesPanel,
@@ -140,6 +146,7 @@ export default function Index({
   onWsDisconnect,
 }: NoteEditorProps) {
   const [isMoveModalOpen, setIsMoveModalOpen] = useState(false);
+  const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
   const [showAttachments, setShowAttachments] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
@@ -1084,6 +1091,12 @@ export default function Index({
                       <Printer className="mr-2 h-4 w-4" />
                       Print
                     </DropdownMenuItem>
+                    {onPublishNote && onUnpublishNote && (
+                      <DropdownMenuItem onClick={() => setIsPublishModalOpen(true)}>
+                        <Globe className="mr-2 h-4 w-4" />
+                        {note.isPublished ? 'Manage' : 'Publish'}
+                      </DropdownMenuItem>
+                    )}
                     <DropdownMenuItem onClick={() => onArchiveNote(note.id)}>
                       <Archive className="mr-2 h-4 w-4" />
                       Archive
@@ -1204,6 +1217,16 @@ export default function Index({
             noteTitle={note.title}
           />
         )}
+
+        {note && onPublishNote && onUnpublishNote && (
+          <PublishNoteModal
+            isOpen={isPublishModalOpen}
+            onClose={() => setIsPublishModalOpen(false)}
+            note={note}
+            onPublish={onPublishNote}
+            onUnpublish={onUnpublishNote}
+          />
+        )}
       </div>
     </>
   );