@brainfish-ai/components 0.18.4 → 0.18.7

package/markdown-editor.plan.md

@@ -1,2101 +0,0 @@
-# Markdown Editor/Viewer Component Implementation Checklist
-
-## Overview
-
-This checklist tracks the implementation progress for the Markdown Editor/Viewer component based on `markdown-editor.spec.md`. The component will replace FormattedMessage.tsx while maintaining compatibility with the existing multimedia/embed system.
-
-### Implementation Strategy
-- **6-Phase Approach**: Foundation → Multimedia → Suggestions → Streaming → Collaboration → Integration
-- **Monorepo Strategy**:
-  - All editor-related development, including the main component (`SimpleEditor` evolving into `MarkdownEditorViewer`), UI primitives, hooks, and extensions, will be centralized within the **`@brainfish-ai/tiptap`** package.
-- **Incremental Development**: Build on existing FormattedMessage.tsx and embed system patterns
-- **TipTap Foundation**: Core editing engine with custom extensions
-- **Backward Compatibility**: Seamless integration with existing codebase
-
-### Dependencies Setup
-- [x] Install TipTap dependencies (@tiptap/react, @tiptap/starter-kit, @tiptap/extension-table, etc.)
-- [x] Install collaboration dependencies (yjs, y-webrtc, @tiptap/extension-collaboration)
-- [x] Install markdown processing dependencies (remark, unified, rehype)
-- [x] Verify existing dependencies (react-markdown, remark-gfm, @radix-ui/*, framer-motion)
-
-## Phase 1: Foundation and Basic Editor (Week 1-2)
-**Objective**: Create basic TipTap editor with markdown conversion and mode switching
-
-### Core Component Structure
-- [ ] Create MarkdownEditorViewer component to lazy load ContentViewer and SimpleEditor component depending on mode
-- [ ] Adapt existing file structure in `packages/tiptap/` for new components (Viewer, Suggestions, etc.)
-- [ ] Implement lazy loading for Editor and Viewer modes within `SimpleEditor.tsx`
-- [ ] Add error boundaries
-
-### Markdown Translation Layer
-- [x] Create `markdownTranslator.ts` utility
-- [x] Implement markdown to TipTap JSON conversion using remark-gfm
-- [x] Implement TipTap JSON to markdown conversion
-- [ ] Handle existing FormattedMessage content patterns (video prefixes, etc.)
-- [x] Add proper error handling and fallbacks
-- [ ] Preserve multimedia embeds and custom HTML elements
-
-### Basic TipTap Editor
-- [x] Initialize TipTap editor with StarterKit extensions
-- [~] Apply consistent Tailwind classes matching FormattedMessage styling
-- [x] Add focus management and event handling
-- [~] Handle content updates and markdown conversion
-- [x] Implement proper cleanup and memory management
-
-### Read-Only Viewer
-- [ ] Create `ViewerContent.tsx` component
-- [ ] Use react-markdown with same configuration as FormattedMessage
-- [ ] Apply identical styling classes from FormattedMessage
-- [ ] Support all existing markdown features (tables, lists, headings)
-- [ ] Implement proper link handling and UTM parameter addition
-- [ ] Handle streaming content display
-- [ ] Maintain consistent component rendering patterns
-
-### Mode Switching
-- [ ] Implement seamless edit/readonly mode switching
-- [ ] Preserve content during mode changes
-- [ ] Handle focus management during switches
-- [ ] Test content integrity across mode changes
-
-### **Phase 1 Success Criteria**
-- [ ] Editor initializes in under 500ms
-- [ ] Mode switching completes in under 100ms
-- [ ] Content preservation across all operations
-- [ ] Styling consistency with FormattedMessage
-- [ ] Unit tests passing for core functionality
-
----
-
-## Phase 2: Multimedia System Integration (Week 3)
-**Objective**: Integrate existing embed system and add multimedia handling capabilities
-
-### Multimedia Extension
-- [ ] Create `MultimediaExtension.ts` for TipTap in `@brainfish-ai/tiptap` package
-- [ ] Integrate with existing EmbedComponent system from embeds/index.tsx
-- [ ] Support all existing embed types (YouTube, Vimeo, Loom, etc.)
-- [ ] Implement drag-and-drop file uploads using react-dropzone patterns
-- [ ] Handle paste event handling for URLs and files
-- [ ] Maintain consistency with FormattedMessage multimedia rendering
-- [ ] Add proper error handling for unsupported media types
-
-### Media Upload Component
-- [ ] Create `MediaUpload.tsx` component
-- [ ] Use react-dropzone for file upload UI
-- [ ] Implement progress indicators and validation
-- [ ] Handle multiple file types (images, videos, documents)
-- [ ] Add file size and type validation with error messages
-- [ ] Support drag-and-drop and click-to-upload interactions
-- [ ] Integrate with existing file upload utilities and styles
-
-### Media Renderer
-- [ ] Create `MediaRenderer.tsx` component
-- [ ] Reuse existing embed components (Youtube, Vimeo, ZoomableImage, etc.)
-- [ ] Handle video content type prefixes and attachment redirects
-- [ ] Implement proper error states and loading indicators
-- [ ] Support all multimedia types defined in specification
-- [ ] Provide consistent styling and responsive behavior
-
-### Media Toolbar
-- [ ] Create `MediaToolbar.tsx` component
-- [ ] Add buttons for different media insertion types
-- [ ] Use existing UI components (Button, Tooltip, DropdownMenu)
-- [ ] Implement keyboard shortcuts for media insertion
-- [ ] Show appropriate icons using @phosphor-icons/react
-- [ ] Integrate with TipTap editor commands for media insertion
-- [ ] Provide contextual media editing options (resize, align, etc.)
-
-### **Phase 2 Success Criteria**
-- [ ] 100% compatibility with existing embed system
-- [ ] All FormattedMessage media types supported
-- [ ] Drag-and-drop functionality working
-- [ ] File upload with progress indicators
-- [ ] Error handling for unsupported media
-- [ ] Integration tests passing
-
----
-
-## Phase 3: Suggestion System (Week 4)
-**Objective**: Implement visual suggestion system with accept/reject functionality
-
-### Suggestion Extension
-- [ ] Create `SuggestionExtension.ts` for TipTap in `@brainfish-ai/tiptap` package
-- [ ] Add suggestion marks to document nodes with visual styling
-- [ ] Implement three suggestion types: insert, delete, replace
-- [ ] Provide keyboard navigation through suggestions (Tab/Shift-Tab)
-- [ ] Handle suggestion acceptance and rejection with proper cleanup
-- [ ] Track suggestion metadata (author, timestamp, reason)
-- [ ] Implement conflict resolution for overlapping suggestions
-
-### Suggestion Visual Styles
-- [ ] Create suggestion CSS styles with consistent color schemes
-- [ ] Provide clear visual distinction between insert/delete/replace
-- [ ] Implement hover and focus states for suggestions
-- [ ] Support dark mode with appropriate color adjustments
-- [ ] Maintain accessibility standards for color contrast
-- [ ] Add smooth transitions for suggestion state changes
-
-### Suggestion List Component
-- [ ] Create `SuggestionList.tsx` component
-- [ ] Display all suggestions in sidebar panel
-- [ ] Group suggestions by type with filtering options
-- [ ] Show suggestion metadata (author, timestamp, reason)
-- [ ] Implement batch accept/reject operations
-- [ ] Add search and sorting functionality
-- [ ] Use existing UI components (ScrollArea, Button, Badge)
-- [ ] Implement keyboard navigation and focus management
-
-### Suggestion Navigation
-- [ ] Create `useSuggestionNavigation` hook
-- [ ] Manage active suggestion focus state
-- [ ] Implement keyboard navigation between suggestions
-- [ ] Provide methods for programmatic navigation
-- [ ] Handle edge cases (no suggestions, deleted suggestions)
-- [ ] Integrate with TipTap editor focus management
-- [ ] Implement smooth scrolling to active suggestions
-
-### **Phase 3 Success Criteria**
-- [ ] All suggestion types visually distinct
-- [ ] Keyboard navigation working smoothly
-- [ ] Accept/reject operations functioning
-- [ ] Conflict resolution working
-- [ ] Accessibility compliance verified
-- [ ] Performance with large suggestion lists
-
----
-
-## Phase 4: Streaming Content Support (Week 5)
-**Objective**: Implement real-time streaming content functionality
-
-### Streaming Extension
-- [ ] Create `StreamingExtension.ts` for TipTap in `@brainfish-ai/tiptap` package
-- [ ] Handle real-time content insertion at document end
-- [ ] Manage streaming state and prevent editing during streams
-- [ ] Implement content buffering and batch updates for performance
-- [ ] Provide visual indicators for streaming content
-- [ ] Handle stream interruption and recovery gracefully
-- [ ] Maintain document structure during streaming updates
-
-### Streaming Hook
-- [ ] Create `useStreaming` hook
-- [ ] Manage streaming state and content buffering
-- [ ] Implement debounced content updates for performance
-- [ ] Handle streaming errors and connection issues
-- [ ] Provide streaming progress and status information
-- [ ] Integrate with TipTap editor streaming extension
-- [ ] Implement proper cleanup and memory management
-
-### Streaming Indicator Component
-- [ ] Create `StreamingIndicator.tsx` component
-- [ ] Show visual feedback during content streaming
-- [ ] Display streaming progress and connection status
-- [ ] Implement pulsing animation for active streaming
-- [ ] Provide error states and retry functionality
-- [ ] Use existing UI components (Progress, Badge, Button)
-- [ ] Maintain consistent styling with rest of editor
-
-### Streaming Buffer Management
-- [ ] Create `StreamingBuffer` utility class
-- [ ] Manage content buffering and batch processing
-- [ ] Implement intelligent content chunking for performance
-- [ ] Handle malformed or incomplete streaming content
-- [ ] Provide content validation and sanitization
-- [ ] Implement backpressure handling for fast streams
-- [ ] Maintain content integrity during streaming
-
-### **Phase 4 Success Criteria**
-- [ ] Streaming content updates at 1000+ chars/second
-- [ ] Buffer overflow protection working
-- [ ] Error handling and recovery functioning
-- [ ] Performance with large streams maintained
-- [ ] Integration with editor state working
-- [ ] Memory usage under control
-
----
-
-## Phase 5: Collaboration Features (Week 6)
-**Objective**: Implement real-time collaboration with cursors and presence
-
-### Collaboration Extension
-- [ ] Create `CollaborationExtension.ts` in `@brainfish-ai/tiptap` package
-- [ ] Integrate with Yjs for operational transformation
-- [ ] Implement real-time cursor tracking and presence
-- [ ] Handle conflict resolution for simultaneous edits
-- [ ] Provide user identification and avatar display
-- [ ] Implement connection management and reconnection
-- [ ] Maintain document consistency across all clients
-
-### Collaborator Components
-- [ ] Create `CollaboratorList.tsx` component
-- [ ] Show all active collaborators with avatars and names
-- [ ] Display real-time presence indicators (typing, idle, away)
-- [ ] Implement user color coding for cursor identification
-- [ ] Show connection status for each collaborator
-- [ ] Use existing UI components (Avatar, Badge, Tooltip)
-- [ ] Handle user interactions like viewing collaborator location
-
-### Cursor Management System
-- [ ] Create `CollaboratorCursor.tsx` component
-- [ ] Render real-time cursor positions for all collaborators
-- [ ] Show user names and colors for cursor identification
-- [ ] Implement smooth cursor animations and transitions
-- [ ] Handle cursor visibility based on viewport
-- [ ] Provide selection range indicators for collaborators
-- [ ] Integrate with TipTap collaboration cursor system
-
-### Presence Management
-- [ ] Create `useCollaborationPresence` hook
-- [ ] Manage user presence state (active, idle, away)
-- [ ] Implement typing indicators with debounced updates
-- [ ] Handle connection status and reconnection logic
-- [ ] Provide methods for sending presence updates
-- [ ] Manage awareness state for all collaborators
-- [ ] Implement proper cleanup and memory management
-
-### **Phase 5 Success Criteria**
-- [ ] Real-time collaboration working
-- [ ] Cursor synchronization accurate
-- [ ] Conflict resolution functioning
-- [ ] Connection handling robust
-- [ ] Presence indicators working
-- [ ] Performance with multiple users maintained
-
----
-
-## Phase 6: Integration and Polish (Week 7-8)
-**Objective**: Complete integration, testing, and production readiness
-
-### FormattedMessage Migration
-- [ ] Create migration utilities for seamless replacement
-- [ ] Maintain backward compatibility with existing props
-- [ ] Implement feature flags for gradual rollout
-- [ ] Provide fallback mechanisms for unsupported features
-- [ ] Handle existing content migration and formatting preservation
-- [ ] Create migration wrapper component for compatibility
-
-### Comprehensive Error Handling
-- [ ] Implement global error boundaries for graceful degradation
-- [ ] Provide detailed error reporting and logging
-- [ ] Handle network failures and API errors gracefully
-- [ ] Implement retry mechanisms for recoverable errors
-- [ ] Provide user-friendly error messages and recovery actions
-- [ ] Integrate with existing error tracking systems
-
-### Performance Optimization
-- [ ] Implement React.memo and useMemo for expensive operations
-- [ ] Add virtual scrolling for large documents
-- [ ] Optimize bundle size with dynamic imports
-- [ ] Implement debouncing for frequent operations
-- [ ] Use web workers for heavy computations
-- [ ] Implement efficient re-rendering strategies
-
-### Accessibility Implementation
-- [ ] Provide proper ARIA labels and roles for all interactive elements
-- [ ] Implement keyboard navigation for all functionality
-- [ ] Support screen readers with descriptive text and live regions
-- [ ] Maintain focus management during mode switches and updates
-- [ ] Provide high contrast mode support
-- [ ] Verify color contrast ratios throughout interface
-
-### Comprehensive Testing Suite
-- [ ] Create unit tests for all major components
-- [ ] Implement integration tests for workflows
-- [ ] Add visual regression testing for UI components
-- [ ] Test accessibility features with automated tools
-- [ ] Include performance benchmarks and memory leak detection
-- [ ] Test cross-browser compatibility
-- [ ] Implement end-to-end testing scenarios
-
-### Documentation and Migration Guide
-- [ ] Create API documentation for all components
-- [ ] Write migration guide from FormattedMessage
-- [ ] Document all prop interfaces and callbacks
-- [ ] Provide usage examples and best practices
-- [ ] Create troubleshooting guide
-- [ ] Document performance considerations
-
-### **Phase 6 Success Criteria**
-- [ ] All functionality working end-to-end
-- [ ] Performance benchmarks met (initialization < 500ms, typing lag < 50ms)
-- [ ] Accessibility compliance verified (WCAG 2.1 AA)
-- [ ] Cross-browser testing complete
-- [ ] Migration path validated
-- [ ] Production deployment ready
-
----
-
-## Final Acceptance Criteria
-
-### Performance Requirements
-- [ ] Editor initialization: < 500ms
-- [ ] Mode switching: < 100ms
-- [ ] Large document loading (1MB): < 2 seconds
-- [ ] Typing lag: < 50ms
-- [ ] Memory usage baseline: < 20MB
-- [ ] Memory leak tolerance: < 1MB/hour
-
-### Functionality Requirements
-- [ ] Complete FormattedMessage.tsx feature parity
-- [ ] 100% compatibility with existing embed system
-- [ ] Consistent styling with existing components
-- [ ] Support for all existing markdown features
-- [ ] Real-time collaboration working
-- [ ] Streaming content support functional
-
-### Quality Assurance
-- [ ] Unit test coverage > 90%
-- [ ] All integration tests passing
-- [ ] End-to-end tests covering complete user scenarios
-- [ ] WCAG 2.1 AA accessibility compliance
-- [ ] Cross-browser support (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
-- [ ] Mobile responsive design working
-- [ ] Touch interface optimized
-
-### Risk Mitigation Completed
-- [ ] TipTap integration complexity managed with incremental approach
-- [ ] Performance monitoring and optimization implemented
-- [ ] Browser compatibility tested across platforms
-- [ ] Backward compatibility maintained strictly
-- [ ] Embed system integration verified
-- [ ] State management patterns proven and tested
-
-### Phase 1: Foundation and Basic Editor (Week 1-2)
-
-**Objective**: Create basic TipTap editor with markdown conversion and mode switching.
-
-**Implementation Prompts:**
-
-**3.1.1 Create Root Component Structure**
-```typescript
-// Prompt: Create the main MarkdownEditorViewer component that:
-// - Accepts all props defined in the specification interface
-// - Implements basic mode switching between 'edit' and 'readonly'
-// - Uses React.lazy for dynamic imports of Editor and Viewer components
-// - Implements error boundaries for graceful error handling
-// - Follows the existing FormattedMessage patterns for props and structure
-
-interface MarkdownEditorViewerProps {
-  content: string;
-  mode: 'edit' | 'readonly';
-  onContentChange?: (content: string) => void;
-  onModeChange?: (mode: 'edit' | 'readonly') => void;
-  // ... other props from specification
-}
-
-const MarkdownEditorViewer: React.FC<MarkdownEditorViewerProps> = (props) => {
-  // Implementation that handles mode switching and component loading
-};
-```
-
-**3.1.2 Build Markdown Translation Layer**
-```typescript
-// Prompt: Create markdownTranslator utility that:
-// - Uses remark-gfm and rehype-raw to parse markdown (like FormattedMessage)
-// - Converts markdown to TipTap JSON format for editing
-// - Converts TipTap JSON back to markdown for export
-// - Handles existing FormattedMessage patterns like video content prefixes
-// - Preserves multimedia embeds and custom HTML elements
-// - Implements proper error handling and fallbacks
-
-const markdownTranslator = {
-  markdownToTipTap: (markdown: string): TipTapDocument => {
-    // Convert markdown to TipTap JSON using remark/rehype pipeline
-  },
-
-  tipTapToMarkdown: (doc: TipTapDocument): string => {
-    // Convert TipTap JSON back to markdown
-  },
-
-  parseExistingContent: (content: string, redirectRules?: RedirectRule[]): TipTapDocument => {
-    // Handle FormattedMessage-specific content patterns
-  }
-};
-```
-
-**3.1.3 Implement Basic TipTap Editor**
-```typescript
-// Prompt: Create EditorContent component that:
-// - Initializes TipTap editor with StarterKit extensions
-// - Applies consistent Tailwind classes matching FormattedMessage styling
-// - Implements proper focus management and event handling
-// - Provides basic formatting toolbar with common actions
-// - Handles content updates and markdown conversion
-// - Implements proper cleanup and memory management
-
-const EditorContent: React.FC<EditorContentProps> = ({ content, onChange, className }) => {
-  const editor = useEditor({
-    extensions: [/* TipTap extensions */],
-    content: markdownTranslator.markdownToTipTap(content),
-    onUpdate: ({ editor }) => {
-      const markdown = markdownTranslator.tipTapToMarkdown(editor.getJSON());
-      onChange(markdown);
-    },
-  });
-
-  // Implementation with proper styling and event handling
-};
-```
-
-**3.1.4 Create Read-Only Viewer**
-```typescript
-// Prompt: Create ViewerContent component that:
-// - Renders markdown content using react-markdown (like FormattedMessage)
-// - Applies identical styling classes from FormattedMessage
-// - Supports all existing markdown features (tables, lists, headings)
-// - Implements proper link handling and UTM parameter addition
-// - Maintains consistent component rendering patterns
-// - Handles streaming content display
-
-const ViewerContent: React.FC<ViewerContentProps> = ({ content, isStreaming, redirectRules }) => {
-  // Use react-markdown with same configuration as FormattedMessage
-  return (
-    <MemoizedReactMarkdown
-      className="dark:prose-invert prose flex-1"
-      remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeRaw]}
-      isStreaming={isStreaming}
-      components={{
-        // Match FormattedMessage component overrides exactly
-      }}
-    >
-      {content}
-    </MemoizedReactMarkdown>
-  );
-};
-```
-
-**Phase 1 Testing Strategy:**
-- Unit tests for markdown translation utilities
-- Integration tests for editor initialization
-- Mode switching functionality tests
-- Content preservation tests
-- Styling consistency verification
-
-### Phase 2: Multimedia System Integration (Week 3)
-
-**Objective**: Integrate existing embed system and add multimedia handling capabilities.
-
-**Implementation Prompts:**
-
-**3.2.1 Create Multimedia Extension**
-```typescript
-// Prompt: Create MultimediaExtension for TipTap that:
-// - Integrates with existing EmbedComponent system from embeds/index.tsx
-// - Supports all existing embed types (YouTube, Vimeo, Loom, etc.)
-// - Handles drag-and-drop file uploads using react-dropzone patterns
-// - Implements paste event handling for URLs and files
-// - Maintains consistency with FormattedMessage multimedia rendering
-// - Provides proper error handling for unsupported media types
-
-const MultimediaExtension = Extension.create({
-  name: 'multimedia',
-
-  addCommands() {
-    return {
-      insertMedia: (attrs: MediaAttributes) => ({ tr, state }) => {
-        // Insert media node using existing EmbedComponent patterns
-      },
-
-      handlePaste: (view: EditorView, event: ClipboardEvent) => {
-        // Handle pasted URLs and files
-      },
-
-      handleDrop: (view: EditorView, event: DragEvent) => {
-        // Handle dropped files
-      }
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        key: new PluginKey('multimedia'),
-        props: {
-          handleDOMEvents: {
-            paste: handlePasteEvent,
-            drop: handleDropEvent,
-          },
-        },
-      }),
-    ];
-  },
-});
-```
-
-**3.2.2 Build Media Upload Component**
-```typescript
-// Prompt: Create MediaUpload component that:
-// - Uses react-dropzone for file upload UI (following existing file-upload patterns)
-// - Implements progress indicators and validation
-// - Handles multiple file types (images, videos, documents)
-// - Provides file size and type validation with clear error messages
-// - Integrates with existing file upload utilities and styles
-// - Supports drag-and-drop and click-to-upload interactions
-
-const MediaUpload: React.FC<MediaUploadProps> = ({ onUpload, allowedTypes, maxSize }) => {
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: allowedTypes,
-    maxSize,
-    onDrop: handleFileDrop,
-  });
-
-  // Implementation with progress tracking and error handling
-};
-```
-
-**3.2.3 Implement Media Renderer**
-```typescript
-// Prompt: Create MediaRenderer component that:
-// - Reuses existing embed components (Youtube, Vimeo, ZoomableImage, etc.)
-// - Maintains consistent rendering patterns from FormattedMessage
-// - Handles video content type prefixes and attachment redirects
-// - Implements proper error states and loading indicators
-// - Supports all multimedia types defined in the specification
-// - Provides consistent styling and responsive behavior
-
-const MediaRenderer: React.FC<MediaRendererProps> = ({ url, type, isAttachmentVideo, alt }) => {
-  // Use existing EmbedComponent logic
-  const embedComponent = EmbedComponent({
-    attrs: { href: url },
-    isAttachmentVideo,
-  });
-
-  if (React.isValidElement(embedComponent)) {
-    return embedComponent;
-  }
-
-  // Handle ZoomableImage for regular images
-  if (type === 'image') {
-    return <ZoomableImage src={url} alt={alt} />;
-  }
-
-  // Fallback for unsupported types
-  return <div>Unsupported media type: {type}</div>;
-};
-```
-
-**3.2.4 Create Media Toolbar**
-```typescript
-// Prompt: Create MediaToolbar component that:
-// - Provides buttons for different media insertion types
-// - Uses existing UI components (Button, Tooltip, DropdownMenu from ui/)
-// - Implements keyboard shortcuts for media insertion
-// - Shows appropriate icons using @phosphor-icons/react
-// - Integrates with TipTap editor commands for media insertion
-// - Provides contextual media editing options (resize, align, etc.)
-
-const MediaToolbar: React.FC<MediaToolbarProps> = ({ editor, onMediaInsert }) => {
-  const insertButtons = [
-    {
-      type: 'image',
-      icon: <Image size={16} />,
-      label: 'Insert Image',
-      shortcut: 'Mod-Shift-I',
-    },
-    {
-      type: 'video',
-      icon: <VideoCamera size={16} />,
-      label: 'Insert Video',
-      shortcut: 'Mod-Shift-V',
-    },
-    // ... other media types
-  ];
-
-  // Implementation with proper button states and handlers
-};
-```
-
-**Phase 2 Testing Strategy:**
-- Integration tests with existing embed components
-- File upload functionality testing
-- Media insertion and rendering tests
-- Drag-and-drop behavior verification
-- Error handling for unsupported media types
-
-### Phase 3: Suggestion System (Week 4)
-
-**Objective**: Implement visual suggestion system with accept/reject functionality.
-
-**Implementation Prompts:**
-
-**3.3.1 Create Suggestion Extension**
-```typescript
-// Prompt: Create SuggestionExtension for TipTap that:
-// - Adds suggestion marks to document nodes with visual styling
-// - Implements three suggestion types: insert, delete, replace
-// - Provides keyboard navigation through suggestions (Tab/Shift-Tab)
-// - Handles suggestion acceptance and rejection with proper cleanup
-// - Tracks suggestion metadata (author, timestamp, reason)
-// - Implements proper conflict resolution for overlapping suggestions
-
-const SuggestionExtension = Extension.create({
-  name: 'suggestions',
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: ['paragraph', 'heading', 'text'],
-        attributes: {
-          suggestionId: { default: null },
-          suggestionType: { default: null },
-          suggestionAuthor: { default: null },
-          suggestionTimestamp: { default: null },
-        },
-      },
-    ];
-  },
-
-  addCommands() {
-    return {
-      addSuggestion: (suggestion: EditorSuggestion) => ({ tr, state }) => {
-        // Add suggestion marks to the document
-      },
-
-      acceptSuggestion: (suggestionId: string) => ({ tr, state }) => {
-        // Apply suggestion changes and remove marks
-      },
-
-      rejectSuggestion: (suggestionId: string) => ({ tr, state }) => {
-        // Remove suggestion marks without applying changes
-      },
-
-      navigateToNextSuggestion: () => ({ tr, state }) => {
-        // Move focus to next suggestion
-      },
-
-      acceptAllSuggestions: () => ({ tr, state }) => {
-        // Accept all pending suggestions
-      }
-    };
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      'Tab': () => this.editor.commands.navigateToNextSuggestion(),
-      'Shift-Tab': () => this.editor.commands.navigateToPreviousSuggestion(),
-      'Enter': () => this.editor.commands.acceptActiveSuggestion(),
-      'Escape': () => this.editor.commands.rejectActiveSuggestion(),
-    };
-  },
-});
-```
-
-**3.3.2 Implement Suggestion Visual Styles**
-```css
-/* Prompt: Create suggestion CSS styles that:
- * - Use consistent color schemes for different suggestion types
- * - Provide clear visual distinction between insert/delete/replace
- * - Implement hover and focus states for suggestions
- * - Support dark mode with appropriate color adjustments
- * - Maintain accessibility standards for color contrast
- * - Provide smooth transitions for suggestion state changes
- */
-
-.suggestion-insert {
-  text-decoration: underline;
-  background-color: rgba(34, 197, 94, 0.1);
-  color: rgba(34, 197, 94, 0.8);
-  border-radius: 2px;
-  padding: 1px 2px;
-  transition: all 0.2s ease;
-}
-
-.suggestion-delete {
-  text-decoration: line-through;
-  background-color: rgba(239, 68, 68, 0.1);
-  color: rgba(239, 68, 68, 0.7);
-  border-radius: 2px;
-  padding: 1px 2px;
-  transition: all 0.2s ease;
-}
-
-.suggestion-replace {
-  position: relative;
-}
-
-.suggestion-replace .old-text {
-  text-decoration: line-through;
-  background-color: rgba(239, 68, 68, 0.1);
-  color: rgba(239, 68, 68, 0.7);
-}
-
-.suggestion-replace .new-text {
-  text-decoration: underline;
-  background-color: rgba(34, 197, 94, 0.1);
-  color: rgba(34, 197, 94, 0.8);
-}
-
-.suggestion-active {
-  outline: 2px solid #3b82f6;
-  outline-offset: 1px;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-/* Dark mode adjustments */
-.dark .suggestion-insert {
-  background-color: rgba(34, 197, 94, 0.2);
-  color: rgba(34, 197, 94, 0.9);
-}
-
-.dark .suggestion-delete {
-  background-color: rgba(239, 68, 68, 0.2);
-  color: rgba(239, 68, 68, 0.8);
-}
-```
-
-**3.3.3 Build Suggestion List Component**
-```typescript
-// Prompt: Create SuggestionList component that:
-// - Displays all suggestions in a sidebar panel
-// - Groups suggestions by type and provides filtering options
-// - Shows suggestion metadata (author, timestamp, reason)
-// - Implements batch accept/reject operations
-// - Provides search and sorting functionality
-// - Uses existing UI components (ScrollArea, Button, Badge)
-// - Implements proper keyboard navigation and focus management
-
-const SuggestionList: React.FC<SuggestionListProps> = ({ suggestions, onAccept, onReject }) => {
-  const [filter, setFilter] = useState<'all' | 'insert' | 'delete' | 'replace'>('all');
-  const [sortBy, setSortBy] = useState<'timestamp' | 'author' | 'type'>('timestamp');
-
-  const filteredSuggestions = useMemo(() => {
-    return suggestions
-      .filter(s => filter === 'all' || s.type === filter)
-      .sort((a, b) => sortBySuggestion(a, b, sortBy));
-  }, [suggestions, filter, sortBy]);
-
-  return (
-    <ScrollArea className="h-full">
-      <div className="space-y-2 p-4">
-        {/* Filter and sort controls */}
-        <div className="flex gap-2 mb-4">
-          <Badge variant="outline" onClick={() => setFilter('all')}>
-            All ({suggestions.length})
-          </Badge>
-          {/* Other filter badges */}
-        </div>
-
-        {/* Suggestion items */}
-        {filteredSuggestions.map(suggestion => (
-          <SuggestionItem
-            key={suggestion.id}
-            suggestion={suggestion}
-            onAccept={() => onAccept(suggestion.id)}
-            onReject={() => onReject(suggestion.id)}
-          />
-        ))}
-      </div>
-    </ScrollArea>
-  );
-};
-```
-
-**3.3.4 Implement Suggestion Navigation Hooks**
-```typescript
-// Prompt: Create useSuggestionNavigation hook that:
-// - Manages active suggestion focus state
-// - Implements keyboard navigation between suggestions
-// - Provides methods for programmatic suggestion navigation
-// - Handles edge cases (no suggestions, deleted suggestions)
-// - Integrates with TipTap editor focus management
-// - Implements smooth scrolling to active suggestions
-
-const useSuggestionNavigation = (editor: Editor, suggestions: EditorSuggestion[]) => {
-  const [activeSuggestionId, setActiveSuggestionId] = useState<string | null>(null);
-
-  const navigateToNext = useCallback(() => {
-    const currentIndex = suggestions.findIndex(s => s.id === activeSuggestionId);
-    const nextIndex = currentIndex < suggestions.length - 1 ? currentIndex + 1 : 0;
-    const nextSuggestion = suggestions[nextIndex];
-
-    if (nextSuggestion) {
-      setActiveSuggestionId(nextSuggestion.id);
-      editor.commands.setTextSelection(nextSuggestion.position.from);
-      scrollToSuggestion(nextSuggestion.id);
-    }
-  }, [editor, suggestions, activeSuggestionId]);
-
-  const navigateToPrevious = useCallback(() => {
-    const currentIndex = suggestions.findIndex(s => s.id === activeSuggestionId);
-    const prevIndex = currentIndex > 0 ? currentIndex - 1 : suggestions.length - 1;
-    const prevSuggestion = suggestions[prevIndex];
-
-    if (prevSuggestion) {
-      setActiveSuggestionId(prevSuggestion.id);
-      editor.commands.setTextSelection(prevSuggestion.position.from);
-      scrollToSuggestion(prevSuggestion.id);
-    }
-  }, [editor, suggestions, activeSuggestionId]);
-
-  return {
-    activeSuggestionId,
-    setActiveSuggestionId,
-    navigateToNext,
-    navigateToPrevious,
-    hasNext: /* logic */,
-    hasPrevious: /* logic */,
-  };
-};
-```
-
-**Phase 3 Testing Strategy:**
-- Suggestion visual rendering tests
-- Keyboard navigation functionality
-- Accept/reject operation tests
-- Suggestion conflict resolution
-- Accessibility compliance testing
-
-### Phase 4: Streaming Content Support (Week 5)
-
-**Objective**: Implement real-time streaming content functionality.
-
-**Implementation Prompts:**
-
-**4.4.1 Create Streaming Extension**
-```typescript
-// Prompt: Create StreamingExtension for TipTap that:
-// - Handles real-time content insertion at document end
-// - Manages streaming state and prevents editing during streams
-// - Implements content buffering and batch updates for performance
-// - Provides visual indicators for streaming content
-// - Handles stream interruption and recovery gracefully
-// - Maintains document structure during streaming updates
-
-const StreamingExtension = Extension.create({
-  name: 'streaming',
-
-  addStorage() {
-    return {
-      isStreaming: false,
-      streamBuffer: '',
-      streamPosition: 0,
-    };
-  },
-
-  addCommands() {
-    return {
-      startStream: () => ({ tr, state }) => {
-        this.storage.isStreaming = true;
-        this.storage.streamPosition = state.doc.content.size;
-        return true;
-      },
-
-      appendStreamContent: (content: string) => ({ tr, state, dispatch }) => {
-        if (!this.storage.isStreaming) return false;
-
-        this.storage.streamBuffer += content;
-
-        // Batch updates for performance
-        if (dispatch) {
-          tr.insertText(content, this.storage.streamPosition);
-          this.storage.streamPosition += content.length;
-        }
-
-        return true;
-      },
-
-      finalizeStream: () => ({ tr, state }) => {
-        this.storage.isStreaming = false;
-        this.storage.streamBuffer = '';
-
-        // Process final content formatting
-        this.editor.commands.focus('end');
-        return true;
-      },
-    };
-  },
-
-  onUpdate() {
-    // Update streaming position if document changes
-    if (this.storage.isStreaming) {
-      this.storage.streamPosition = this.editor.state.doc.content.size;
-    }
-  },
-});
-```
-
-**4.4.2 Implement Streaming Hook**
-```typescript
-// Prompt: Create useStreaming hook that:
-// - Manages streaming state and content buffering
-// - Implements debounced content updates for performance
-// - Handles streaming errors and connection issues
-// - Provides streaming progress and status information
-// - Integrates with TipTap editor streaming extension
-// - Implements proper cleanup and memory management
-
-const useStreaming = (editor: Editor | null, isStreaming?: boolean) => {
-  const [streamState, setStreamState] = useState<StreamingState>({
-    isActive: false,
-    buffer: '',
-    progress: 0,
-    error: null,
-  });
-
-  const debouncedUpdate = useCallback(
-    debounce((content: string) => {
-      if (editor && streamState.isActive) {
-        editor.commands.appendStreamContent(content);
-      }
-    }, 50),
-    [editor, streamState.isActive]
-  );
-
-  const startStream = useCallback(() => {
-    if (!editor) return;
-
-    editor.commands.startStream();
-    setStreamState(prev => ({ ...prev, isActive: true, error: null }));
-  }, [editor]);
-
-  const appendContent = useCallback((chunk: string) => {
-    setStreamState(prev => ({
-      ...prev,
-      buffer: prev.buffer + chunk,
-      progress: prev.progress + chunk.length
-    }));
-
-    debouncedUpdate(chunk);
-  }, [debouncedUpdate]);
-
-  const finalizeStream = useCallback(() => {
-    if (!editor) return;
-
-    editor.commands.finalizeStream();
-    setStreamState(prev => ({
-      ...prev,
-      isActive: false,
-      buffer: '',
-      progress: 0
-    }));
-  }, [editor]);
-
-  // Sync with external streaming prop
-  useEffect(() => {
-    if (isStreaming && !streamState.isActive) {
-      startStream();
-    } else if (!isStreaming && streamState.isActive) {
-      finalizeStream();
-    }
-  }, [isStreaming, streamState.isActive, startStream, finalizeStream]);
-
-  return {
-    streamState,
-    startStream,
-    appendContent,
-    finalizeStream,
-    isStreaming: streamState.isActive,
-  };
-};
-```
-
-**4.4.3 Build Streaming Indicator Component**
-```typescript
-// Prompt: Create StreamingIndicator component that:
-// - Shows visual feedback during content streaming
-// - Displays streaming progress and connection status
-// - Implements pulsing animation for active streaming
-// - Provides error states and retry functionality
-// - Uses existing UI components (Progress, Badge, Button)
-// - Maintains consistent styling with rest of editor
-
-const StreamingIndicator: React.FC<StreamingIndicatorProps> = ({
-  isStreaming,
-  progress,
-  error,
-  onRetry
-}) => {
-  if (error) {
-    return (
-      <div className="flex items-center gap-2 px-3 py-2 bg-red-50 border border-red-200 rounded-md">
-        <ExclamationTriangle className="h-4 w-4 text-red-500" />
-        <span className="text-sm text-red-700">Streaming error: {error.message}</span>
-        <Button size="sm" variant="outline" onClick={onRetry}>
-          Retry
-        </Button>
-      </div>
-    );
-  }
-
-  if (!isStreaming) return null;
-
-  return (
-    <div className="flex items-center gap-2 px-3 py-2 bg-blue-50 border border-blue-200 rounded-md">
-      <div className="flex items-center gap-2">
-        <div className="h-2 w-2 bg-blue-500 rounded-full animate-pulse" />
-        <span className="text-sm text-blue-700">Streaming content...</span>
-      </div>
-
-      {progress > 0 && (
-        <div className="flex items-center gap-2 ml-4">
-          <Progress value={progress} className="w-24 h-1" />
-          <span className="text-xs text-blue-600">{progress}%</span>
-        </div>
-      )}
-    </div>
-  );
-};
-```
-
-**4.4.4 Implement Streaming Buffer Management**
-```typescript
-// Prompt: Create StreamingBuffer utility that:
-// - Manages content buffering and batch processing
-// - Implements intelligent content chunking for performance
-// - Handles malformed or incomplete streaming content
-// - Provides content validation and sanitization
-// - Implements backpressure handling for fast streams
-// - Maintains content integrity during streaming
-
-class StreamingBuffer {
-  private buffer: string = '';
-  private processingQueue: string[] = [];
-  private isProcessing: boolean = false;
-  private readonly chunkSize: number = 1000;
-  private readonly maxBufferSize: number = 50000;
-
-  constructor(
-    private onChunk: (chunk: string) => void,
-    private onError: (error: Error) => void
-  ) {}
-
-  append(content: string): void {
-    if (this.buffer.length + content.length > this.maxBufferSize) {
-      this.onError(new Error('Buffer overflow: content too large'));
-      return;
-    }
-
-    this.buffer += content;
-    this.processBuffer();
-  }
-
-  private async processBuffer(): Promise<void> {
-    if (this.isProcessing) return;
-
-    this.isProcessing = true;
-
-    try {
-      while (this.buffer.length > 0) {
-        const chunk = this.buffer.slice(0, this.chunkSize);
-        this.buffer = this.buffer.slice(this.chunkSize);
-
-        // Process chunk and handle any formatting
-        const processedChunk = this.sanitizeContent(chunk);
-        this.onChunk(processedChunk);
-
-        // Yield to browser for rendering
-        await new Promise(resolve => setTimeout(resolve, 0));
-      }
-    } catch (error) {
-      this.onError(error instanceof Error ? error : new Error('Unknown streaming error'));
-    } finally {
-      this.isProcessing = false;
-    }
-  }
-
-  private sanitizeContent(content: string): string {
-    // Implement content validation and sanitization
-    return content
-      .replace(/\x00/g, '') // Remove null bytes
-      .replace(/[\x01-\x08\x0B\x0C\x0E-\x1F\x7F]/g, ''); // Remove control chars
-  }
-
-  clear(): void {
-    this.buffer = '';
-    this.processingQueue = [];
-    this.isProcessing = false;
-  }
-
-  getBufferSize(): number {
-    return this.buffer.length;
-  }
-}
-```
-
-**Phase 4 Testing Strategy:**
-- Streaming content insertion tests
-- Performance testing with large streams
-- Error handling and recovery tests
-- Buffer overflow and backpressure tests
-- Integration with editor state management
-
-### Phase 5: Collaboration Features (Week 6)
-
-**Objective**: Implement real-time collaboration with cursors and presence.
-
-**Implementation Prompts:**
-
-**5.5.1 Create Collaboration Extension**
-```typescript
-// Prompt: Create CollaborationExtension that:
-// - Integrates with Yjs for operational transformation
-// - Implements real-time cursor tracking and presence
-// - Handles conflict resolution for simultaneous edits
-// - Provides user identification and avatar display
-// - Implements proper connection management and reconnection
-// - Maintains document consistency across all clients
-
-import { Collaboration } from '@tiptap/extension-collaboration';
-import { CollaborationCursor } from '@tiptap/extension-collaboration-cursor';
-import * as Y from 'yjs';
-import { WebrtcProvider } from 'y-webrtc';
-
-const CollaborationExtension = Extension.create({
-  name: 'brainfish-collaboration',
-
-  addExtensions() {
-    const ydoc = new Y.Doc();
-    const provider = new WebrtcProvider(this.options.roomId, ydoc, {
-      signaling: this.options.signalingServer ? [this.options.signalingServer] : undefined,
-    });
-
-    return [
-      Collaboration.configure({
-        document: ydoc,
-      }),
-      CollaborationCursor.configure({
-        provider,
-        user: this.options.currentUser,
-        render: (user) => this.renderCollaboratorCursor(user),
-      }),
-    ];
-  },
-
-  addCommands() {
-    return {
-      updateCursor: (position: number, selection?: { from: number; to: number }) => () => {
-        this.options.onCollaboratorCursor?.(this.options.currentUser.id, position);
-        return true;
-      },
-
-      sendPresence: (data: any) => () => {
-        if (this.provider) {
-          this.provider.awareness.setLocalStateField('user', {
-            ...this.options.currentUser,
-            ...data,
-          });
-        }
-        return true;
-      },
-    };
-  },
-
-  onCreate() {
-    if (this.provider) {
-      this.provider.on('status', (event) => {
-        this.options.onConnectionStatus?.(event.status);
-      });
-
-      this.provider.awareness.on('change', () => {
-        const users = Array.from(this.provider.awareness.getStates().entries())
-          .map(([clientId, state]) => ({ ...state.user, clientId }))
-          .filter((user) => user.clientId !== this.provider.doc.clientID);
-
-        this.options.onCollaboratorsChange?.(users);
-      });
-    }
-  },
-
-  onDestroy() {
-    if (this.provider) {
-      this.provider.destroy();
-    }
-  },
-
-  private renderCollaboratorCursor(user: CollaboratorUser) {
-    const cursor = document.createElement('span');
-    cursor.classList.add('collaboration-cursor');
-    cursor.style.borderColor = user.color || '#3b82f6';
-    cursor.setAttribute('data-user', user.name);
-
-    return cursor;
-  },
-});
-```
-
-**5.5.2 Implement Collaborator Components**
-```typescript
-// Prompt: Create CollaboratorList component that:
-// - Shows all active collaborators with avatars and names
-// - Displays real-time presence indicators (typing, idle, away)
-// - Implements user color coding for cursor identification
-// - Shows connection status for each collaborator
-// - Uses existing UI components (Avatar, Badge, Tooltip)
-// - Handles user interactions like viewing collaborator location
-
-const CollaboratorList: React.FC<CollaboratorListProps> = ({
-  collaborators,
-  currentUser,
-  onUserClick
-}) => {
-  const sortedCollaborators = useMemo(() => {
-    return collaborators.sort((a, b) => {
-      // Sort by activity status, then by name
-      if (a.isActive !== b.isActive) {
-        return a.isActive ? -1 : 1;
-      }
-      return a.name.localeCompare(b.name);
-    });
-  }, [collaborators]);
-
-  return (
-    <div className="flex items-center gap-2 px-4 py-2 border-b">
-      <span className="text-sm font-medium text-gray-700">
-        Collaborators ({collaborators.length})
-      </span>
-
-      <div className="flex items-center gap-1 ml-2">
-        {sortedCollaborators.map(collaborator => (
-          <Tooltip key={collaborator.id} content={collaborator.name}>
-            <div className="relative">
-              <Avatar
-                src={collaborator.avatar}
-                alt={collaborator.name}
-                size="sm"
-                className="cursor-pointer hover:scale-110 transition-transform"
-                style={{ borderColor: collaborator.color }}
-                onClick={() => onUserClick?.(collaborator)}
-              />
-
-              {/* Activity indicator */}
-              <div
-                className={cn(
-                  "absolute -bottom-1 -right-1 h-3 w-3 rounded-full border-2 border-white",
-                  collaborator.isActive ? "bg-green-400" : "bg-gray-400"
-                )}
-              />
-
-              {/* Typing indicator */}
-              {collaborator.isTyping && (
-                <div className="absolute -top-1 -right-1 h-2 w-2 bg-blue-400 rounded-full animate-pulse" />
-              )}
-            </div>
-          </Tooltip>
-        ))}
-      </div>
-    </div>
-  );
-};
-```
-
-**5.5.3 Build Cursor Management System**
-```typescript
-// Prompt: Create CollaboratorCursor component that:
-// - Renders real-time cursor positions for all collaborators
-// - Shows user names and colors for cursor identification
-// - Implements smooth cursor animations and transitions
-// - Handles cursor visibility based on viewport
-// - Provides selection range indicators for collaborators
-// - Integrates with TipTap collaboration cursor system
-
-const CollaboratorCursor: React.FC<CollaboratorCursorProps> = ({
-  user,
-  position,
-  selection
-}) => {
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    // Auto-hide cursor after inactivity
-    const timer = setTimeout(() => setIsVisible(false), 5000);
-    return () => clearTimeout(timer);
-  }, [position]);
-
-  const cursorStyle = useMemo(() => ({
-    borderLeftColor: user.color,
-    transform: `translateY(${position.top}px) translateX(${position.left}px)`,
-  }), [user.color, position]);
-
-  return (
-    <motion.div
-      className={cn(
-        "absolute pointer-events-none z-50",
-        "border-l-2 h-5",
-        { "opacity-0": !isVisible }
-      )}
-      style={cursorStyle}
-      initial={{ opacity: 0, scale: 0.8 }}
-      animate={{ opacity: isVisible ? 1 : 0, scale: 1 }}
-      transition={{ duration: 0.2 }}
-    >
-      {/* User label */}
-      <div
-        className="absolute -top-6 left-0 px-2 py-1 text-xs text-white rounded whitespace-nowrap"
-        style={{ backgroundColor: user.color }}
-      >
-        {user.name}
-      </div>
-
-      {/* Selection range */}
-      {selection && (
-        <div
-          className="absolute opacity-20 rounded"
-          style={{
-            backgroundColor: user.color,
-            top: 0,
-            left: 0,
-            width: selection.width,
-            height: selection.height,
-          }}
-        />
-      )}
-    </motion.div>
-  );
-};
-```
-
-**5.5.4 Implement Presence Management**
-```typescript
-// Prompt: Create useCollaborationPresence hook that:
-// - Manages user presence state (active, idle, away)
-// - Implements typing indicators with debounced updates
-// - Handles connection status and reconnection logic
-// - Provides methods for sending presence updates
-// - Manages awareness state for all collaborators
-// - Implements proper cleanup and memory management
-
-const useCollaborationPresence = (
-  provider: WebrtcProvider | null,
-  currentUser: User,
-  editor: Editor | null
-) => {
-  const [collaborators, setCollaborators] = useState<Collaborator[]>([]);
-  const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'connected' | 'disconnected'>('disconnected');
-  const [isTyping, setIsTyping] = useState(false);
-
-  const typingTimeoutRef = useRef<NodeJS.Timeout>();
-
-  const updatePresence = useCallback((updates: Partial<Collaborator>) => {
-    if (!provider) return;
-
-    const currentState = provider.awareness.getLocalState();
-    provider.awareness.setLocalStateField('user', {
-      ...currentUser,
-      ...currentState.user,
-      ...updates,
-      lastSeen: Date.now(),
-    });
-  }, [provider, currentUser]);
-
-  const startTyping = useCallback(() => {
-    if (isTyping) return;
-
-    setIsTyping(true);
-    updatePresence({ isTyping: true });
-
-    // Clear existing timeout
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-
-    // Stop typing after 3 seconds of inactivity
-    typingTimeoutRef.current = setTimeout(() => {
-      setIsTyping(false);
-      updatePresence({ isTyping: false });
-    }, 3000);
-  }, [isTyping, updatePresence]);
-
-  const stopTyping = useCallback(() => {
-    if (typingTimeoutRef.current) {
-      clearTimeout(typingTimeoutRef.current);
-    }
-    setIsTyping(false);
-    updatePresence({ isTyping: false });
-  }, [updatePresence]);
-
-  // Listen to editor changes for typing indicators
-  useEffect(() => {
-    if (!editor) return;
-
-    const handleUpdate = () => startTyping();
-    editor.on('update', handleUpdate);
-
-    return () => editor.off('update', handleUpdate);
-  }, [editor, startTyping]);
-
-  // Listen to provider awareness changes
-  useEffect(() => {
-    if (!provider) return;
-
-    const handleAwarenessChange = () => {
-      const states = Array.from(provider.awareness.getStates().entries());
-      const users: Collaborator[] = states
-        .filter(([clientId]) => clientId !== provider.doc.clientID)
-        .map(([clientId, state]) => ({
-          id: state.user?.id || clientId.toString(),
-          name: state.user?.name || 'Anonymous',
-          avatar: state.user?.avatar,
-          color: state.user?.color || generateUserColor(clientId),
-          isActive: Date.now() - (state.user?.lastSeen || 0) < 30000,
-          isTyping: state.user?.isTyping || false,
-          cursor: state.cursor,
-        }));
-
-      setCollaborators(users);
-    };
-
-    const handleStatusChange = (event: { status: string }) => {
-      setConnectionStatus(event.status as any);
-    };
-
-    provider.awareness.on('change', handleAwarenessChange);
-    provider.on('status', handleStatusChange);
-
-    return () => {
-      provider.awareness.off('change', handleAwarenessChange);
-      provider.off('status', handleStatusChange);
-    };
-  }, [provider]);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current);
-      }
-      stopTyping();
-    };
-  }, [stopTyping]);
-
-  return {
-    collaborators,
-    connectionStatus,
-    isTyping,
-    updatePresence,
-    startTyping,
-    stopTyping,
-  };
-};
-```
-
-**Phase 5 Testing Strategy:**
-- Real-time collaboration functionality
-- Cursor synchronization across clients
-- Conflict resolution testing
-- Connection handling and recovery
-- Presence and typing indicators
-
-### Phase 6: Integration and Polish (Week 7-8)
-
-**Objective**: Complete integration, testing, and production readiness.
-
-**Implementation Prompts:**
-
-**6.6.1 FormattedMessage Migration Strategy**
-```typescript
-// Prompt: Create migration utilities that:
-// - Provide seamless replacement of FormattedMessage with MarkdownEditorViewer
-// - Maintain backward compatibility with existing props and behavior
-// - Implement feature flags for gradual rollout
-// - Provide fallback mechanisms for unsupported features
-// - Handle existing content migration and formatting preservation
-// - Create comprehensive migration guide and documentation
-
-const FormattedMessageMigration = {
-  // Convert FormattedMessage props to MarkdownEditorViewer props
-  migrateProps: (formattedMessageProps: FormattedMessageProps): MarkdownEditorViewerProps => {
-    return {
-      content: formattedMessageProps.message.content,
-      mode: 'readonly', // FormattedMessage is always readonly
-      isStreaming: formattedMessageProps.isStreaming,
-      redirectRules: formattedMessageProps.redirectRules,
-      contentTypeEndpoint: formattedMessageProps.contentTypeEndpoint,
-      // ... map other relevant props
-    };
-  },
-
-  // Wrapper component for gradual migration
-  FormattedMessageCompatWrapper: React.FC<FormattedMessageProps> = (props) => {
-    const [useNewEditor, setUseNewEditor] = useState(() =>
-      // Check feature flag or user preference
-      window.BRAINFISH_USE_NEW_EDITOR === true
-    );
-
-    if (useNewEditor) {
-      const migratedProps = FormattedMessageMigration.migrateProps(props);
-      return <MarkdownEditorViewer {...migratedProps} />;
-    }
-
-    // Fallback to original FormattedMessage
-    return <FormattedMessage {...props} />;
-  },
-
-  // Validate content compatibility
-  validateContent: (content: string): { isCompatible: boolean; issues: string[] } => {
-    const issues: string[] = [];
-
-    // Check for unsupported patterns
-    if (content.includes('<!-- unsupported -->')) {
-      issues.push('Content contains unsupported HTML comments');
-    }
-
-    // Check for complex nested structures
-    const complexTableRegex = /<table[^>]*>.*?<table/s;
-    if (complexTableRegex.test(content)) {
-      issues.push('Nested tables are not fully supported');
-    }
-
-    return {
-      isCompatible: issues.length === 0,
-      issues,
-    };
-  },
-};
-```
-
-**6.6.2 Comprehensive Error Handling**
-```typescript
-// Prompt: Create robust error handling system that:
-// - Implements global error boundaries for graceful degradation
-// - Provides detailed error reporting and logging
-// - Handles network failures and API errors gracefully
-// - Implements retry mechanisms for recoverable errors
-// - Provides user-friendly error messages and recovery actions
-// - Integrates with existing error tracking systems
-
-class EditorErrorBoundary extends React.Component<
-  { children: React.ReactNode; fallback?: React.ComponentType<any> },
-  { hasError: boolean; error: Error | null }
-> {
-  constructor(props: any) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error('MarkdownEditorViewer Error:', error, errorInfo);
-
-    // Report to error tracking service
-    if (window.BRAINFISH_ERROR_TRACKING) {
-      window.BRAINFISH_ERROR_TRACKING.reportError(error, {
-        component: 'MarkdownEditorViewer',
-        errorInfo,
-      });
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      const FallbackComponent = this.props.fallback || DefaultErrorFallback;
-      return <FallbackComponent error={this.state.error} />;
-    }
-
-    return this.props.children;
-  }
-}
-
-const DefaultErrorFallback: React.FC<{ error: Error | null }> = ({ error }) => {
-  return (
-    <div className="p-4 border border-red-200 rounded-md bg-red-50">
-      <h3 className="text-red-800 font-semibold mb-2">Editor Error</h3>
-      <p className="text-red-700 text-sm mb-3">
-        The editor encountered an error and couldn't load properly. You can try refreshing the page or switching to the basic editor.
-      </p>
-      <div className="flex gap-2">
-        <Button size="sm" onClick={() => window.location.reload()}>
-          Refresh Page
-        </Button>
-        <Button size="sm" variant="outline" onClick={() => {/* Switch to basic editor */}}>
-          Use Basic Editor
-        </Button>
-      </div>
-      {process.env.NODE_ENV === 'development' && error && (
-        <details className="mt-3">
-          <summary className="text-xs cursor-pointer">Error Details</summary>
-          <pre className="text-xs mt-1 overflow-auto">{error.stack}</pre>
-        </details>
-      )}
-    </div>
-  );
-};
-```
-
-**6.6.3 Performance Optimization**
-```typescript
-// Prompt: Implement performance optimizations that:
-// - Use React.memo and useMemo for expensive operations
-// - Implement virtual scrolling for large documents
-// - Optimize bundle size with dynamic imports
-// - Implement debouncing for frequent operations
-// - Use web workers for heavy computations
-// - Implement efficient re-rendering strategies
-
-// Memoized editor component
-const MemoizedEditorContent = React.memo(
-  EditorContent,
-  (prevProps, nextProps) => {
-    return (
-      prevProps.content === nextProps.content &&
-      prevProps.mode === nextProps.mode &&
-      prevProps.isStreaming === nextProps.isStreaming &&
-      shallowEqual(prevProps.suggestions, nextProps.suggestions)
-    );
-  }
-);
-
-// Virtual scrolling for large suggestion lists
-const VirtualizedSuggestionList: React.FC<SuggestionListProps> = ({ suggestions }) => {
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
-  const [scrollTop, setScrollTop] = useState(0);
-
-  const itemHeight = 60;
-  const containerHeight = 400;
-  const overscan = 5;
-
-  const visibleItems = useMemo(() => {
-    if (!containerRef) return suggestions.slice(0, 20);
-
-    const startIndex = Math.floor(scrollTop / itemHeight);
-    const endIndex = Math.min(
-      suggestions.length - 1,
-      startIndex + Math.ceil(containerHeight / itemHeight) + overscan
-    );
-
-    return suggestions.slice(Math.max(0, startIndex - overscan), endIndex + 1);
-  }, [suggestions, scrollTop, containerRef]);
-
-  return (
-    <div
-      ref={setContainerRef}
-      className="h-96 overflow-auto"
-      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
-    >
-      <div style={{ height: suggestions.length * itemHeight }}>
-        <div style={{ transform: `translateY(${Math.floor(scrollTop / itemHeight) * itemHeight}px)` }}>
-          {visibleItems.map((suggestion, index) => (
-            <SuggestionItem key={suggestion.id} suggestion={suggestion} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// Web worker for markdown processing
-const useMarkdownWorker = () => {
-  const workerRef = useRef<Worker>();
-
-  useEffect(() => {
-    workerRef.current = new Worker('/markdown-processor.worker.js');
-    return () => workerRef.current?.terminate();
-  }, []);
-
-  const processMarkdown = useCallback((markdown: string): Promise<TipTapDocument> => {
-    return new Promise((resolve, reject) => {
-      if (!workerRef.current) {
-        reject(new Error('Worker not available'));
-        return;
-      }
-
-      const id = Math.random().toString(36);
-
-      const handleMessage = (e: MessageEvent) => {
-        if (e.data.id === id) {
-          workerRef.current?.removeEventListener('message', handleMessage);
-          if (e.data.error) {
-            reject(new Error(e.data.error));
-          } else {
-            resolve(e.data.result);
-          }
-        }
-      };
-
-      workerRef.current.addEventListener('message', handleMessage);
-      workerRef.current.postMessage({ id, markdown });
-    });
-  }, []);
-
-  return { processMarkdown };
-};
-```
-
-**6.6.4 Accessibility Implementation**
-```typescript
-// Prompt: Implement comprehensive accessibility features that:
-// - Provide proper ARIA labels and roles for all interactive elements
-// - Implement keyboard navigation for all functionality
-// - Support screen readers with descriptive text and live regions
-// - Maintain focus management during mode switches and updates
-// - Provide high contrast mode support
-// - Implement proper color contrast ratios throughout
-
-const AccessibilityProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [announcements, setAnnouncements] = useState<string[]>([]);
-  const [focusedElement, setFocusedElement] = useState<string | null>(null);
-
-  const announce = useCallback((message: string) => {
-    setAnnouncements(prev => [...prev.slice(-2), message]);
-  }, []);
-
-  const manageFocus = useCallback((elementId: string) => {
-    setFocusedElement(elementId);
-    setTimeout(() => {
-      const element = document.getElementById(elementId);
-      element?.focus();
-    }, 0);
-  }, []);
-
-  const contextValue = useMemo(() => ({
-    announce,
-    manageFocus,
-    focusedElement,
-  }), [announce, manageFocus, focusedElement]);
-
-  return (
-    <AccessibilityContext.Provider value={contextValue}>
-      {children}
-
-      {/* Live region for announcements */}
-      <div
-        className="sr-only"
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-      >
-        {announcements[announcements.length - 1]}
-      </div>
-
-      {/* Skip links for keyboard navigation */}
-      <div className="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 z-50">
-        <a
-          href="#editor-content"
-          className="bg-blue-600 text-white p-2 rounded"
-        >
-          Skip to editor
-        </a>
-        <a
-          href="#suggestions-panel"
-          className="bg-blue-600 text-white p-2 rounded ml-2"
-        >
-          Skip to suggestions
-        </a>
-      </div>
-    </AccessibilityContext.Provider>
-  );
-};
-
-// Keyboard shortcuts with accessibility
-const useAccessibleKeyboardShortcuts = (editor: Editor | null) => {
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      // Handle accessibility-specific shortcuts
-      if (event.altKey && event.key === '1') {
-        // Focus main editor
-        event.preventDefault();
-        document.getElementById('editor-content')?.focus();
-        announce('Focused main editor');
-      }
-
-      if (event.altKey && event.key === '2') {
-        // Focus suggestions panel
-        event.preventDefault();
-        document.getElementById('suggestions-panel')?.focus();
-        announce('Focused suggestions panel');
-      }
-
-      if (event.altKey && event.key === '3') {
-        // Focus toolbar
-        event.preventDefault();
-        document.getElementById('editor-toolbar')?.focus();
-        announce('Focused editor toolbar');
-      }
-
-      // Announce current selection or cursor position
-      if (event.key === 'F1' && editor) {
-        event.preventDefault();
-        const { from, to } = editor.state.selection;
-        const text = editor.state.doc.textBetween(from, to);
-        if (text) {
-          announce(`Selected: ${text}`);
-        } else {
-          announce(`Cursor at position ${from}`);
-        }
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [editor]);
-};
-```
-
-**6.6.5 Comprehensive Testing Suite**
-```typescript
-// Prompt: Create comprehensive test suite that:
-// - Tests all major functionality with unit and integration tests
-// - Implements visual regression testing for UI components
-// - Tests accessibility features with automated tools
-// - Includes performance benchmarks and memory leak detection
-// - Tests cross-browser compatibility
-// - Implements end-to-end testing scenarios
-
-// Example test structure
-describe('MarkdownEditorViewer', () => {
-  describe('Core Functionality', () => {
-    it('should render in edit mode with toolbar', async () => {
-      render(
-        <MarkdownEditorViewer
-          content="# Hello World"
-          mode="edit"
-          onContentChange={jest.fn()}
-        />
-      );
-
-      expect(screen.getByRole('textbox', { name: /markdown editor/i })).toBeInTheDocument();
-      expect(screen.getByRole('toolbar', { name: /formatting toolbar/i })).toBeInTheDocument();
-    });
-
-    it('should render in readonly mode without toolbar', async () => {
-      render(
-        <MarkdownEditorViewer
-          content="# Hello World"
-          mode="readonly"
-        />
-      );
-
-      expect(screen.getByRole('article')).toBeInTheDocument();
-      expect(screen.queryByRole('toolbar')).not.toBeInTheDocument();
-    });
-
-    it('should switch modes while preserving content', async () => {
-      const onModeChange = jest.fn();
-      const { rerender } = render(
-        <MarkdownEditorViewer
-          content="# Test Content"
-          mode="edit"
-          onModeChange={onModeChange}
-        />
-      );
-
-      // Switch to readonly
-      rerender(
-        <MarkdownEditorViewer
-          content="# Test Content"
-          mode="readonly"
-          onModeChange={onModeChange}
-        />
-      );
-
-      expect(screen.getByText('Test Content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Suggestion System', () => {
-    it('should display suggestions with proper styling', async () => {
-      const suggestions: EditorSuggestion[] = [
-        {
-          id: '1',
-          type: 'insert',
-          position: { from: 0, to: 0 },
-          newText: 'New text',
-          status: 'pending',
-          timestamp: new Date(),
-        },
-      ];
-
-      render(
-        <MarkdownEditorViewer
-          content="Original text"
-          mode="edit"
-          suggestions={suggestions}
-          showSuggestions={true}
-        />
-      );
-
-      expect(screen.getByText('New text')).toHaveClass('suggestion-insert');
-    });
-
-    it('should handle suggestion acceptance', async () => {
-      const onSuggestionAccept = jest.fn();
-      // ... test implementation
-    });
-  });
-
-  describe('Multimedia Integration', () => {
-    it('should render images using ZoomableImage', async () => {
-      render(
-        <MarkdownEditorViewer
-          content="![Alt text](https://example.com/image.jpg)"
-          mode="readonly"
-        />
-      );
-
-      expect(screen.getByRole('img', { name: /alt text/i })).toBeInTheDocument();
-    });
-
-    it('should handle video embeds', async () => {
-      // ... test implementation
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper ARIA labels', async () => {
-      render(
-        <MarkdownEditorViewer
-          content="# Test"
-          mode="edit"
-        />
-      );
-
-      expect(screen.getByRole('textbox')).toHaveAccessibleName(/markdown editor/i);
-      expect(screen.getByRole('toolbar')).toHaveAccessibleName(/formatting toolbar/i);
-    });
-
-    it('should support keyboard navigation', async () => {
-      // ... test implementation
-    });
-
-    it('should announce changes to screen readers', async () => {
-      // ... test implementation
-    });
-  });
-
-  describe('Performance', () => {
-    it('should handle large documents efficiently', async () => {
-      const largeContent = 'a'.repeat(100000);
-      const startTime = performance.now();
-
-      render(
-        <MarkdownEditorViewer
-          content={largeContent}
-          mode="edit"
-        />
-      );
-
-      const endTime = performance.now();
-      expect(endTime - startTime).toBeLessThan(1000); // Should render in under 1 second
-    });
-
-    it('should not have memory leaks', async () => {
-      // ... memory leak testing
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('should gracefully handle malformed markdown', async () => {
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
-
-      render(
-        <MarkdownEditorViewer
-          content="# Malformed [link"
-          mode="edit"
-        />
-      );
-
-      expect(screen.getByText(/malformed/i)).toBeInTheDocument();
-      expect(consoleSpy).not.toHaveBeenCalled();
-
-      consoleSpy.mockRestore();
-    });
-  });
-});
-```
-
-## 4. Success Metrics and Acceptance Criteria
-
-### 4.1 Performance Benchmarks
-
-**Initialization Performance:**
-- Editor initialization: < 500ms
-- Mode switching: < 100ms
-- Large document loading (1MB): < 2 seconds
-
-**Runtime Performance:**
-- Typing lag: < 50ms
-- Suggestion processing: < 200ms
-- Streaming content updates: 1000+ chars/second
-
-**Memory Usage:**
-- Baseline memory: < 20MB
-- Large document (1MB): < 50MB
-- Memory leak tolerance: < 1MB/hour
-
-### 4.2 Functionality Requirements
-
-**Core Features:**
-- ✅ Mode switching (edit/readonly) with content preservation
-- ✅ Markdown translation (markdown ↔ TipTap JSON)
-- ✅ Complete multimedia system integration
-- ✅ Visual suggestion system with keyboard navigation
-- ✅ Streaming content support
-- ✅ Basic collaboration features
-
-**Compatibility:**
-- ✅ 100% compatibility with existing embed system
-- ✅ FormattedMessage.tsx feature parity
-- ✅ Consistent styling with existing components
-- ✅ Support for all existing markdown features
-
-### 4.3 Quality Assurance
-
-**Testing Coverage:**
-- Unit tests: > 90% coverage
-- Integration tests: All major workflows
-- E2E tests: Complete user scenarios
-- Accessibility: WCAG 2.1 AA compliance
-
-**Browser Support:**
-- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
-- Mobile responsive design
-- Touch interface optimization
-
-**Error Handling:**
-- Graceful degradation for all error scenarios
-- Clear user feedback and recovery options
-- Comprehensive error logging and reporting
-
-## 5. Implementation Timeline
-
-**Week 1-2: Foundation** (Phase 1)
-- Core component structure
-- TipTap integration
-- Markdown translation
-- Basic editor/viewer modes
-
-**Week 3: Multimedia** (Phase 2)
-- Embed system integration
-- File upload functionality
-- Media rendering components
-
-**Week 4: Suggestions** (Phase 3)
-- Visual suggestion system
-- Keyboard navigation
-- Accept/reject functionality
-
-**Week 5: Streaming** (Phase 4)
-- Real-time content streaming
-- Performance optimization
-- Error handling
-
-**Week 6: Collaboration** (Phase 5)
-- Real-time collaboration
-- Cursor synchronization
-- Presence indicators
-
-**Week 7-8: Integration & Polish** (Phase 6)
-- Migration utilities
-- Comprehensive testing
-- Performance optimization
-- Documentation
-
-## 6. Risk Mitigation
-
-**Technical Risks:**
-- **TipTap integration complexity**: Use incremental approach with fallbacks
-- **Performance issues**: Implement monitoring and optimization from start
-- **Browser compatibility**: Test early and often across platforms
-
-**Integration Risks:**
-- **Breaking changes**: Maintain strict backward compatibility
-- **Embed system conflicts**: Leverage existing patterns exactly
-- **State management complexity**: Use proven React patterns
-
-**Timeline Risks:**
-- **Feature creep**: Stick to specification requirements
-- **Testing delays**: Implement testing incrementally
-- **Performance bottlenecks**: Profile and optimize continuously
-
-This comprehensive implementation plan provides detailed guidance for building the Markdown Editor/Viewer component while maintaining consistency with existing codebase patterns and ensuring all specification requirements are met. Each phase builds incrementally on the previous one, with clear success criteria and testing strategies to ensure quality delivery.