From ace0c1ba6bb19037e08c2febec3d8b829d8ebbc5 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Sun, 26 Oct 2025 23:05:45 +0000
Subject: [PATCH 1/2] Implement rich text editing features in TextEditor
 component

- Added toolbar with formatting options (bold, italic, underline, strikethrough, links, code, blockquotes, and lists).
- Introduced markdown to HTML conversion and vice versa for better content handling.
- Enhanced contentEditable area for improved user interaction and experience.
- Implemented link editing functionality with a popup for managing links.
- Refactored content change handling to support rich text features and maintain state consistency.
---
 src/routes/_protected/content.tsx | 587 +++++++++++++++++++++++++++---
 1 file changed, 529 insertions(+), 58 deletions(-)

diff --git a/src/routes/_protected/content.tsx b/src/routes/_protected/content.tsx
index 41a2ffb..5429eb5 100644
--- a/src/routes/_protected/content.tsx
+++ b/src/routes/_protected/content.tsx
@@ -24,7 +24,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { toast } from '@/hooks/use-toast'
-import { Image as ImageIcon, Plus, Trash2, Save, Video, MapPin, Type as TypeIcon, Upload, ArrowLeft, LogOut, GripVertical, Brain, Loader2, Heading1, Quote, Pin as PinIcon, FileText, Quote as QuoteIcon, Code, Bug, ChevronLeft, ChevronRight, MoreHorizontal, Copy, MessageCircle, Eye, EyeOff, Archive, BookOpen, FileDown, ExternalLink, ChevronUp, ChevronDown } from 'lucide-react'
+import { Image as ImageIcon, Plus, Trash2, Save, Video, MapPin, Type as TypeIcon, Upload, ArrowLeft, LogOut, GripVertical, Brain, Loader2, Heading1, Quote, Pin as PinIcon, FileText, Quote as QuoteIcon, Code, Bug, ChevronLeft, ChevronRight, MoreHorizontal, Copy, MessageCircle, Eye, EyeOff, Archive, BookOpen, FileDown, ExternalLink, ChevronUp, ChevronDown, Bold, Italic, Underline, Strikethrough, Link as LinkIcon, Unlink, List, ListOrdered } from 'lucide-react'
 import { AgentChat } from '@/components/agent/agent-chat'
 import { AuthorSelector } from '@/components/author'
 import { CategorySelector } from '@/components/category'
@@ -3995,79 +3995,212 @@ const QuoteEditor = memo(({ section, onLocalChange, disabled = false }: { sectio
     )
 })
 
+// Helper functions for markdown conversion
+const htmlToMarkdown = (html: string): string => {
+    if (!html || html.trim() === '') return ''
+    
+    const tempDiv = document.createElement('div')
+    tempDiv.innerHTML = html
+    
+    // Extract text content with formatting
+    const extractText = (node: Node, inList = false, listPrefix = ''): string => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return node.textContent || ''
+        }
+        
+        const element = node as HTMLElement
+        const tagName = element.tagName.toLowerCase()
+        const childrenStr = Array.from(element.childNodes)
+            .map(n => extractText(n, inList, listPrefix))
+            .join('')
+        
+        switch (tagName) {
+            case 'ul':
+                const ulItems = Array.from(element.childNodes)
+                    .filter(n => (n as HTMLElement).tagName === 'LI')
+                    .map(n => {
+                        const text = Array.from((n as HTMLElement).childNodes)
+                            .map(c => extractText(c, false, ''))
+                            .join('')
+                        return '- ' + text.trim()
+                    })
+                    .filter(text => text.trim())
+                return ulItems.join('\n') + '\n\n'
+                
+            case 'ol':
+                const olItems = Array.from(element.childNodes)
+                    .filter(n => (n as HTMLElement).tagName === 'LI')
+                    .map((n, idx) => {
+                        const text = Array.from((n as HTMLElement).childNodes)
+                            .map(c => extractText(c, false, ''))
+                            .join('')
+                        return `${idx + 1}. ${text.trim()}`
+                    })
+                    .filter(text => text.trim())
+                return olItems.join('\n') + '\n\n'
+                
+            case 'li':
+                return inList ? listPrefix + childrenStr.trim() + '\n' : '- ' + childrenStr.trim()
+                
+            case 'strong':
+            case 'b':
+                return `**${childrenStr}**`
+            case 'em':
+            case 'i':
+                return `*${childrenStr}*`
+            case 'u':
+                return `<u>${childrenStr}</u>`
+            case 's':
+            case 'del':
+                return `~~${childrenStr}~~`
+            case 'code':
+                return `\`${childrenStr}\``
+            case 'a':
+                const href = element.getAttribute('href') || ''
+                return `[${childrenStr}](${href})`
+            case 'blockquote':
+                return `> ${childrenStr.replace(/\n/g, '\n> ')}`
+            case 'br':
+                return '\n'
+            case 'p':
+            case 'div':
+                return inList ? childrenStr : childrenStr + '\n\n'
+            default:
+                return childrenStr
+        }
+    }
+    
+    const text = extractText(tempDiv)
+    return text.trim()
+}
+
+const markdownToHtml = (markdown: string): string => {
+    if (!markdown || markdown.trim() === '') return '<p><br></p>'
+    
+    const lines = markdown.split('\n')
+    const processedLines: string[] = []
+    
+    let inList = false
+    let listTag = ''
+    
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i]
+        
+        // Headers
+        if (line.startsWith('#### ')) {
+            if (inList) {
+                processedLines.push('</' + listTag + '>')
+                inList = false
+            }
+            processedLines.push(line.replace(/^#### (.+)$/, '<h4>$1</h4>'))
+        } else if (line.startsWith('### ')) {
+            if (inList) {
+                processedLines.push('</' + listTag + '>')
+                inList = false
+            }
+            processedLines.push(line.replace(/^### (.+)$/, '<h3>$1</h3>'))
+        } else if (line.startsWith('## ')) {
+            if (inList) {
+                processedLines.push('</' + listTag + '>')
+                inList = false
+            }
+            processedLines.push(line.replace(/^## (.+)$/, '<h2>$1</h2>'))
+        } else if (line.startsWith('# ')) {
+            if (inList) {
+                processedLines.push('</' + listTag + '>')
+                inList = false
+            }
+            processedLines.push(line.replace(/^# (.+)$/, '<h1>$1</h1>'))
+        } 
+        // Blockquotes
+        else if (line.startsWith('> ')) {
+            if (inList) {
+                processedLines.push('</' + listTag + '>')
+                inList = false
+            }
+            processedLines.push(line.replace(/^> (.+)$/, '<blockquote>$1</blockquote>'))
+        }
+        // Lists
+        else if (line.startsWith('- ')) {
+            if (!inList) {
+                processedLines.push('<ul>')
+                inList = true
+                listTag = 'ul'
+            }
+            processedLines.push(`<li>${line.slice(2)}</li>`)
+        } else if (line.match(/^\d+\. /)) {
+            if (!inList) {
+                processedLines.push('<ol>')
+                inList = true
+                listTag = 'ol'
+            }
+            processedLines.push(line.replace(/^\d+\. (.+)$/, '<li>$1</li>'))
+        } 
+        // Regular text
+        else if (line.trim()) {
+            if (inList) {
+                processedLines.push('</' + listTag + '>')
+                inList = false
+            }
+            processedLines.push(`<p>${line}</p>`)
+        }
+    }
+    
+    if (inList) {
+        processedLines.push('</' + listTag + '>')
+    }
+    
+    let html = processedLines.join('')
+    
+    // Inline formatting
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    html = html.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>')
+    html = html.replace(/~~(.+?)~~/g, '<s>$1</s>')
+    html = html.replace(/`([^`]+)`/g, '<code>$1</code>')
+    html = html.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')
+    
+    return html || '<p><br></p>'
+}
+
 const TextEditor = memo(({ section, onLocalChange, disabled = false }: { section: any; onLocalChange: (data: Partial<any>) => void; disabled?: boolean }) => {
     const [value, setValue] = useState(section.content ?? '')
-    const ref = useRef<HTMLTextAreaElement | null>(null)
+    const [linkPopup, setLinkPopup] = useState<{ element: HTMLAnchorElement; x: number; y: number } | null>(null)
+    const editorRef = useRef<HTMLDivElement | null>(null)
     const onLocalChangeRef = useRef(onLocalChange)
     const isInternalUpdate = useRef(false)
     const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
     onLocalChangeRef.current = onLocalChange
 
-    // Function to adjust textarea height (optimized)
-    const adjustHeight = useCallback(() => {
-        if (!ref.current) return
-        // Reset height to auto to get accurate scrollHeight
-        ref.current.style.height = 'auto'
-        const scrollHeight = ref.current.scrollHeight
-        ref.current.style.height = `${scrollHeight}px`
-    }, [])
-
-    // Debounced height adjustment
-    const debouncedAdjustHeight = useCallback(() => {
-        if (debounceTimeoutRef.current) {
-            clearTimeout(debounceTimeoutRef.current)
-        }
-        debounceTimeoutRef.current = setTimeout(() => {
-            adjustHeight()
-        }, 16) // ~60fps
-    }, [adjustHeight])
-
-    // Adjust height when value changes (debounced)
+    // Initialize editor content
     useEffect(() => {
-        debouncedAdjustHeight()
-    }, [value])
+        if (editorRef.current && section.content && !editorRef.current.innerHTML) {
+            editorRef.current.innerHTML = markdownToHtml(section.content)
+        }
+    }, [])
 
-    // Sync external changes to local state (when section content changes externally)
+    // Sync external changes to local state
     useEffect(() => {
         if (section.content !== value && !isInternalUpdate.current) {
             setValue(section.content ?? '')
+            if (editorRef.current) {
+                editorRef.current.innerHTML = markdownToHtml(section.content ?? '')
+            }
         }
     }, [section.content, value])
 
-    // Adjust height on initial render and window resize
-    useEffect(() => {
-        const handleResize = () => adjustHeight()
-        
-        // Initial adjustment
-        const timer = setTimeout(() => {
-            adjustHeight()
-        }, 0)
-        
-        // Add resize listener
-        window.addEventListener('resize', handleResize)
-        
-        return () => {
-            clearTimeout(timer)
-            window.removeEventListener('resize', handleResize)
-        }
-    }, [adjustHeight])
-
     // Debounced parent notification (only on internal changes)
     useEffect(() => {
         if (isInternalUpdate.current) {
-            // Clear any pending debounced update
             if (debounceTimeoutRef.current) {
                 clearTimeout(debounceTimeoutRef.current)
             }
-            // Debounce the parent notification
             debounceTimeoutRef.current = setTimeout(() => {
                 onLocalChangeRef.current({ content: value, type: 'text' })
                 isInternalUpdate.current = false
-            }, 300) // 300ms debounce for parent updates
+            }, 300)
         }
     }, [value])
 
-    // Cleanup timeout on unmount
     useEffect(() => {
         return () => {
             if (debounceTimeoutRef.current) {
@@ -4076,25 +4209,363 @@ const TextEditor = memo(({ section, onLocalChange, disabled = false }: { section
         }
     }, [])
 
-    const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const handleContentChange = useCallback(() => {
+        if (!editorRef.current) return
+        const html = editorRef.current.innerHTML
+        const markdown = htmlToMarkdown(html)
         isInternalUpdate.current = true
-        setValue(e.target.value)
+        setValue(markdown)
+    }, [])
+
+    const handlePaste = useCallback((e: React.ClipboardEvent) => {
+        e.preventDefault()
+        const paste = e.clipboardData.getData('text/plain')
+        document.execCommand('insertText', false, paste)
+        handleContentChange()
+    }, [handleContentChange])
+
+    const execCommand = useCallback((command: string, valueArg?: string) => {
+        document.execCommand(command, false, valueArg)
+        editorRef.current?.focus()
+        handleContentChange()
+    }, [handleContentChange])
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        // Handle Enter key to exit blockquote
+        if (e.key === 'Enter' && !e.shiftKey) {
+            const selection = window.getSelection()
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0)
+                let node: Node | null = range.commonAncestorContainer
+                while (node && node.nodeType !== Node.ELEMENT_NODE && node.parentNode) {
+                    node = node.parentNode
+                }
+                
+                if (node) {
+                    let element = node as HTMLElement
+                    let blockquote: HTMLElement | null = null
+                    while (element && element.parentElement) {
+                        if (element.tagName === 'BLOCKQUOTE') {
+                            blockquote = element
+                            break
+                        }
+                        element = element.parentElement
+                    }
+                    
+                    // If we're inside a blockquote, create paragraph after it
+                    if (blockquote) {
+                        e.preventDefault()
+                        
+                        // Move cursor after the blockquote
+                        const pTag = document.createElement('p')
+                        pTag.innerHTML = '<br>'
+                        
+                        if (blockquote.parentNode) {
+                            blockquote.parentNode.insertBefore(pTag, blockquote.nextSibling)
+                            
+                            // Set cursor in new paragraph
+                            const newRange = document.createRange()
+                            newRange.selectNodeContents(pTag)
+                            newRange.collapse(true)
+                            selection.removeAllRanges()
+                            selection.addRange(newRange)
+                            handleContentChange()
+                        }
+                        return
+                    }
+                }
+            }
+        }
+        
+        // Allow Shift+Enter for line breaks inside blockquotes
+        if (e.key === 'Enter' && e.shiftKey) {
+            // Let the default behavior happen (inserts <br> tag)
+            return
+        }
+        
+        // Handle keyboard shortcuts
+        if (e.ctrlKey || e.metaKey) {
+            switch (e.key) {
+                case 'b':
+                    e.preventDefault()
+                    execCommand('bold')
+                    break
+                case 'u':
+                    e.preventDefault()
+                    execCommand('underline')
+                    break
+                case 'i':
+                    e.preventDefault()
+                    execCommand('italic')
+                    break
+                case 'k':
+                    e.preventDefault()
+                    const url = prompt('Enter URL:')
+                    if (url) {
+                        execCommand('createLink', url)
+                    }
+                    break
+            }
+        }
+    }, [execCommand, handleContentChange])
+
+    const handleClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation()
+        
+        // Check if clicking on a link
+        const target = e.target as HTMLElement
+        if (target.tagName === 'A') {
+            e.preventDefault()
+            const rect = target.getBoundingClientRect()
+            setLinkPopup({ element: target as HTMLAnchorElement, x: rect.left, y: rect.top + rect.height + 4 })
+        } else {
+            setLinkPopup(null)
+        }
+    }, [])
+
+    // Close popup when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (e: MouseEvent) => {
+            const target = e.target as HTMLElement
+            if (target.tagName !== 'A' && !target.closest('.link-popup')) {
+                setLinkPopup(null)
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside)
+        return () => document.removeEventListener('mousedown', handleClickOutside)
     }, [])
 
     return (
         <div className="space-y-1 w-full min-w-0">
             <Label htmlFor={`text-${section.id}`}>Text</Label>
-            <Textarea
-                id={`text-${section.id}`}
-                ref={ref}
-                value={value}
-                onChange={handleChange}
-                placeholder="Write text…"
-                rows={1}
-                className="min-h-[40px] text-sm w-full min-w-0"
-                style={{ overflow: 'hidden', resize: 'none', width: '100%', maxWidth: '100%' }}
+            {/* Toolbar */}
+            <div className="border border-input rounded-md">
+                <div className="flex items-center gap-0.5 p-1 border-b border-input bg-muted/20 rounded-t-md">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => execCommand('bold')}
                 disabled={disabled}
+                    >
+                        <Bold className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => execCommand('italic')}
+                        disabled={disabled}
+                    >
+                        <Italic className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => execCommand('underline')}
+                        disabled={disabled}
+                    >
+                        <Underline className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => execCommand('strikeThrough')}
+                        disabled={disabled}
+                    >
+                        <Strikethrough className="h-4 w-4" />
+                    </Button>
+                    <div className="h-6 w-px bg-border mx-1" />
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => {
+                            const url = prompt('Enter URL:')
+                            if (url) execCommand('createLink', url)
+                        }}
+                        disabled={disabled}
+                    >
+                        <LinkIcon className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => {
+                            const selection = window.getSelection()
+                            if (selection && selection.rangeCount > 0) {
+                                const range = selection.getRangeAt(0)
+                                const selectedText = range.toString()
+                                
+                                if (selectedText) {
+                                    // Check if already in a code tag
+                                    let node: Node | null = range.commonAncestorContainer
+                                    while (node && node.nodeType !== Node.ELEMENT_NODE) {
+                                        node = node.parentNode
+                                    }
+                                    let element = node as HTMLElement | null
+                                    while (element && element.tagName !== 'CODE' && element.parentElement) {
+                                        element = element.parentElement
+                                    }
+                                    
+                                    if (element && element.tagName === 'CODE' && element.parentNode) {
+                                        // Unwrap: replace code element with its text content
+                                        const textNode = document.createTextNode(selectedText)
+                                        element.parentNode.replaceChild(textNode, element)
+                                        handleContentChange()
+                                    } else {
+                                        // Wrap: create code element
+                                        const codeElement = document.createElement('code')
+                                        codeElement.textContent = selectedText
+                                        range.deleteContents()
+                                        range.insertNode(codeElement)
+                                        handleContentChange()
+                                    }
+                                } else {
+                                    // No selection, prompt for text
+                                    const code = prompt('Enter code:')
+                                    if (code) {
+                                        const codeElement = document.createElement('code')
+                                        codeElement.textContent = code
+                                        range.insertNode(codeElement)
+                                        handleContentChange()
+                                    }
+                                }
+                            }
+                        }}
+                        disabled={disabled}
+                    >
+                        <Code className="h-4 w-4" />
+                    </Button>
+                    <div className="h-6 w-px bg-border mx-1" />
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => {
+                            const heading = prompt('Enter heading text:')
+                            if (heading) {
+                                document.execCommand('formatBlock', false, 'h2')
+                                editorRef.current?.focus()
+                            }
+                        }}
+                        disabled={disabled}
+                    >
+                        <Heading1 className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => {
+                            execCommand('formatBlock', 'blockquote')
+                        }}
+                        disabled={disabled}
+                    >
+                        <Quote className="h-4 w-4" />
+                    </Button>
+                    <div className="h-6 w-px bg-border mx-1" />
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => execCommand('insertUnorderedList')}
+                        disabled={disabled}
+                    >
+                        <List className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0"
+                        onClick={() => execCommand('insertOrderedList')}
+                        disabled={disabled}
+                    >
+                        <ListOrdered className="h-4 w-4" />
+                    </Button>
+                </div>
+                {/* Editor */}
+                <div
+                    ref={editorRef}
+                    contentEditable={!disabled}
+                    onInput={handleContentChange}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    onClick={handleClick}
+                    className="min-h-[120px] p-3 text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 [&:empty:before]:content-[attr(data-placeholder)] [&:empty:before]:text-muted-foreground prose prose-sm dark:prose-invert max-w-none [&_p]:mb-3 [&_h1]:mb-3 [&_h2]:mb-3 [&_h3]:mb-3 [&_h4]:mb-3 [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:mb-3 [&_ul]:mb-3 [&_ul]:list-disc [&_ul]:ml-6 [&_ol]:mb-3 [&_ol]:list-decimal [&_ol]:ml-6 [&_li]:ml-0 [&_a]:text-blue-600 [&_a]:underline [&_a]:hover:text-blue-700 [&_a]:dark:text-blue-400 [&_a]:dark:hover:text-blue-300 [&_a]:decoration-2 [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm [&_code]:font-mono rounded-b-md"
+                    data-placeholder="Write text…"
+                    style={{
+                        fontFamily: 'inherit',
+                        lineHeight: '1.6',
+                    }}
+                />
+            </div>
+            {/* Hidden input for accessibility */}
+            <input
+                type="text"
+                value={value}
+                onChange={() => {}}
+                readOnly
+                className="sr-only"
+                tabIndex={-1}
+                aria-hidden="true"
             />
+            
+            {/* Link popup */}
+            {linkPopup && (
+                <div
+                    className="link-popup fixed z-50 bg-popover border border-border rounded-md shadow-md p-2 flex gap-1"
+                    style={{ left: linkPopup.x, top: linkPopup.y }}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={() => {
+                            const newUrl = prompt('Edit URL:', linkPopup.element.href)
+                            if (newUrl && newUrl !== linkPopup.element.href) {
+                                linkPopup.element.href = newUrl
+                                linkPopup.element.setAttribute('href', newUrl)
+                                handleContentChange()
+                            }
+                            setLinkPopup(null)
+                        }}
+                    >
+                        Edit
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={() => {
+                            if (linkPopup.element.parentNode) {
+                                const textNode = document.createTextNode(linkPopup.element.textContent || '')
+                                linkPopup.element.parentNode.replaceChild(textNode, linkPopup.element)
+                                handleContentChange()
+                            }
+                            setLinkPopup(null)
+                        }}
+                    >
+                        Unlink
+                    </Button>
+                </div>
+            )}
         </div>
     )
 })

From f2049a4b54f984e6cfddb3e1dbfd173872934987 Mon Sep 17 00:00:00 2001
From: eldadfux <eldad.fux@gmail.com>
Date: Mon, 27 Oct 2025 16:46:55 +0000
Subject: [PATCH 2/2] Refactor CSS and enhance TextEditor functionality

- Updated overscroll behavior in CSS to contain for better scrolling experience.
- Adjusted z-index values in various components for improved layering.
- Implemented auto-scrolling during drag events in ArticleEditor for better usability.
- Enhanced TextEditor with a configurable toolbar and floating toolbar for rich text editing features, including link management and formatting options.
---
 src/components/agent/agent-chat.tsx           |   4 +-
 .../notification/notification-bell.tsx        |   4 +-
 .../team-blog/team-blog-selector.tsx          | 100 ++-
 src/components/ui/loader.tsx                  |   2 +-
 src/components/user-avatar.tsx                |   4 +-
 src/index.css                                 |   8 +-
 src/routes/_protected/content.tsx             | 760 +++++++++++++-----
 7 files changed, 636 insertions(+), 246 deletions(-)

diff --git a/src/components/agent/agent-chat.tsx b/src/components/agent/agent-chat.tsx
index 767115c..0199340 100644
--- a/src/components/agent/agent-chat.tsx
+++ b/src/components/agent/agent-chat.tsx
@@ -1986,7 +1986,7 @@ I've made several changes to your content including creating new paragraphs, upd
     return (
         <TooltipProvider>
             <aside
-                className="fixed left-0 z-10 flex flex-col border-r bg-background"
+                className="fixed left-0 z-[60] flex flex-col border-r bg-background"
                 style={{ 
                     top: topOffset, 
                     bottom: 0, 
@@ -1996,7 +1996,7 @@ I've made several changes to your content including creating new paragraphs, upd
             >
             {/* Resize handle */}
             <div
-                className="absolute -right-2 top-0 bottom-0 w-4 cursor-col-resize z-20"
+                className="absolute -right-2 top-0 bottom-0 w-4 cursor-col-resize z-[70]"
                 onMouseDown={handleMouseDown}
             >
                 {/* Visual hover effect - split 50-50 across the border line */}
diff --git a/src/components/notification/notification-bell.tsx b/src/components/notification/notification-bell.tsx
index a5ac208..3926bfd 100644
--- a/src/components/notification/notification-bell.tsx
+++ b/src/components/notification/notification-bell.tsx
@@ -60,8 +60,8 @@ export function NotificationBell({ userId, className }: NotificationBellProps) {
       {isOpen && (
         <>
           {/* Arrow pointing to the bell */}
-          <div className="absolute right-3 top-full w-0 h-0 border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent border-b-border z-50" />
-          <div className="absolute right-0 top-full mt-1 w-80 bg-background border rounded-lg shadow-lg z-50 animate-in fade-in-0 zoom-in-95 duration-200">
+          <div className="absolute right-3 top-full w-0 h-0 border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent border-b-border z-[70]" />
+          <div className="absolute right-0 top-full mt-1 w-80 bg-background border rounded-lg shadow-lg z-[70] animate-in fade-in-0 zoom-in-95 duration-200">
             <div className="p-3 border-b">
               <h3 className="font-semibold text-sm">Notifications</h3>
             </div>
diff --git a/src/components/team-blog/team-blog-selector.tsx b/src/components/team-blog/team-blog-selector.tsx
index 6ee9ed0..f95f322 100644
--- a/src/components/team-blog/team-blog-selector.tsx
+++ b/src/components/team-blog/team-blog-selector.tsx
@@ -1,18 +1,16 @@
 import { useState, useRef, useEffect } from 'react'
-import { useQuery } from '@tanstack/react-query'
+import { createPortal } from 'react-dom'
 import { useNavigate } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
 import { StandardAvatar } from '@/components/ui/standard-avatar'
-import { ChevronDown, Plus, Users, FileText } from 'lucide-react'
+import { ChevronDown, Plus, FileText } from 'lucide-react'
 import { TeamBlogDropdown } from './team-blog-dropdown'
 import { CreateTeamModal } from './create-team-modal'
 import { CreateBlogModal } from './create-blog-modal'
 import { TeamSettingsModal } from './team-settings-modal'
 import { BlogSettingsModal } from './blog-settings-modal'
-import { useTeamBlog } from '@/hooks/use-team-blog'
 import { useTeamBlogContext } from '@/contexts/team-blog-context'
-import { getTeamsClient } from '@/lib/appwrite'
-import { cn, truncateText } from '@/lib/utils'
+import { truncateText } from '@/lib/utils'
 
 interface TeamBlogSelectorProps {
   userId: string
@@ -27,11 +25,31 @@ export function TeamBlogSelector({ userId }: TeamBlogSelectorProps) {
   const [selectedTeam, setSelectedTeam] = useState<any>(null)
   const [selectedBlog, setSelectedBlog] = useState<any>(null)
   const [selectedTeamForBlog, setSelectedTeamForBlog] = useState<string>('')
+  const [buttonPosition, setButtonPosition] = useState({ top: 0, left: 0 })
   const containerRef = useRef<HTMLDivElement>(null)
+  const buttonRef = useRef<HTMLButtonElement>(null)
   const { currentTeam, currentBlog, setCurrentTeam, setCurrentBlog, teams } = useTeamBlogContext()
   const navigate = useNavigate()
 
-  // Teams data now comes from shared context
+  // Update button position when dropdown opens or on scroll
+  useEffect(() => {
+    const updatePosition = () => {
+      if (buttonRef.current) {
+        const rect = buttonRef.current.getBoundingClientRect()
+        setButtonPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left + window.scrollX
+        })
+      }
+    }
+
+    if (isOpen) {
+      updatePosition()
+      const handleScroll = () => updatePosition()
+      window.addEventListener('scroll', handleScroll, true)
+      return () => window.removeEventListener('scroll', handleScroll, true)
+    }
+  }, [isOpen])
 
   // Close dropdown when clicking outside
   useEffect(() => {
@@ -113,9 +131,35 @@ export function TeamBlogSelector({ userId }: TeamBlogSelectorProps) {
     setIsOpen(!isOpen)
   }
 
+  const dropdownContent = isOpen && createPortal(
+    <div className="fixed z-[100]" style={{ top: `${buttonPosition.top}px`, left: `${buttonPosition.left}px` }}>
+      {/* Arrow pointing to the button */}
+      <div className="absolute left-6 sm:left-6 top-[-6px] w-0 h-0 border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent border-b-border" />
+      <div className="mt-1 w-[80vw] sm:w-[600px] max-w-[600px] bg-background border rounded-lg shadow-lg animate-in fade-in-0 zoom-in-95 duration-200">
+        <TeamBlogDropdown
+          userId={userId}
+          onClose={() => setIsOpen(false)}
+          onCreateTeam={() => {
+            setShowCreateTeamModal(true)
+            setIsOpen(false)
+          }}
+          onCreateBlog={handleCreateBlog}
+          onTeamSettings={handleTeamSettings}
+          onBlogSettings={handleBlogSettings}
+          setCurrentTeam={setCurrentTeam}
+          setCurrentBlog={setCurrentBlog}
+          onBlogSelect={handleBlogSelect}
+          isOpen={isOpen}
+        />
+      </div>
+    </div>,
+    document.body
+  )
+
   return (
     <div ref={containerRef} className="relative">
       <Button
+        ref={buttonRef}
         variant="ghost"
         size="sm"
         onClick={handleButtonClick}
@@ -129,39 +173,17 @@ export function TeamBlogSelector({ userId }: TeamBlogSelectorProps) {
         <ChevronDown className="h-4 w-4" />
       </Button>
       
-      {isOpen && (
-        <>
-          {/* Arrow pointing to the button */}
-          <div className="absolute left-6 sm:left-6 top-full w-0 h-0 border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent border-b-border z-50" />
-          <div className="absolute left-0 sm:left-0 top-full mt-1 w-[80vw] sm:w-[600px] max-w-[600px] bg-background border rounded-lg shadow-lg z-50 animate-in fade-in-0 zoom-in-95 duration-200">
-                    <TeamBlogDropdown
-                      userId={userId}
-                      onClose={() => setIsOpen(false)}
-                      onCreateTeam={() => {
-                        setShowCreateTeamModal(true)
-                        setIsOpen(false)
-                      }}
-                      onCreateBlog={handleCreateBlog}
-                      onTeamSettings={handleTeamSettings}
-                      onBlogSettings={handleBlogSettings}
-                      setCurrentTeam={setCurrentTeam}
-                      setCurrentBlog={setCurrentBlog}
-                      onBlogSelect={handleBlogSelect}
-                      isOpen={isOpen}
-                    />
-          </div>
-        </>
-      )}
-
-              <CreateTeamModal
-                isOpen={showCreateTeamModal}
-                onClose={() => setShowCreateTeamModal(false)}
-                userId={userId}
-                onTeamCreated={(team, blog) => {
-                  setCurrentTeam(team)
-                  setCurrentBlog(blog)
-                }}
-              />
+      {dropdownContent}
+
+      <CreateTeamModal
+        isOpen={showCreateTeamModal}
+        onClose={() => setShowCreateTeamModal(false)}
+        userId={userId}
+        onTeamCreated={(team, blog) => {
+          setCurrentTeam(team)
+          setCurrentBlog(blog)
+        }}
+      />
 
       <CreateBlogModal
         isOpen={showCreateBlogModal}
diff --git a/src/components/ui/loader.tsx b/src/components/ui/loader.tsx
index c582c7d..486cafa 100644
--- a/src/components/ui/loader.tsx
+++ b/src/components/ui/loader.tsx
@@ -76,7 +76,7 @@ export function FullscreenLoader({ isVisible, onComplete }: FullscreenLoaderProp
           initial={{ opacity: 1 }}
           exit={{ opacity: 0 }}
           transition={{ duration: 0.5, ease: "easeInOut" }}
-          className="fixed inset-0 z-50 bg-background loader-container"
+          className="fixed inset-0 z-[9999] bg-background loader-container"
         >
           {/* Centered Welcome Message */}
           <div className="absolute inset-0 flex items-center justify-center">
diff --git a/src/components/user-avatar.tsx b/src/components/user-avatar.tsx
index 5dab1fa..3520c53 100644
--- a/src/components/user-avatar.tsx
+++ b/src/components/user-avatar.tsx
@@ -178,8 +178,8 @@ export function UserAvatar({ user, onSignOut }: UserAvatarProps) {
       {isOpen && (
         <>
           {/* Arrow pointing to the avatar - matching notification style */}
-          <div className="absolute right-3 top-full w-0 h-0 border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent border-b-border z-50" />
-          <div className="absolute right-0 top-full mt-1 w-80 bg-background border rounded-xl shadow-xl z-50 animate-in fade-in-0 zoom-in-95 duration-200 overflow-hidden">
+          <div className="absolute right-3 top-full w-0 h-0 border-l-[6px] border-r-[6px] border-b-[6px] border-l-transparent border-r-transparent border-b-border z-[70]" />
+          <div className="absolute right-0 top-full mt-1 w-80 bg-background border rounded-xl shadow-xl z-[70] animate-in fade-in-0 zoom-in-95 duration-200 overflow-hidden">
             {/* User details section */}
             <div className="p-4 space-y-4">
               {/* Email */}
diff --git a/src/index.css b/src/index.css
index 3b6dbe9..38b64b6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -121,18 +121,18 @@
     color: var(--foreground);
     margin: 0;
     padding: 0;
-    overscroll-behavior: none;
+    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
   }
   
-  /* Disable elastic scroll on the entire page */
+  /* Contain elastic scroll */
   html {
-    overscroll-behavior-y: none;
+    overscroll-behavior-y: contain;
     -webkit-overflow-scrolling: touch;
   }
   
   body {
-    overscroll-behavior: none;
+    overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
   }
   
diff --git a/src/routes/_protected/content.tsx b/src/routes/_protected/content.tsx
index 5429eb5..c26cc3f 100644
--- a/src/routes/_protected/content.tsx
+++ b/src/routes/_protected/content.tsx
@@ -277,7 +277,7 @@ function RouteComponent() {
 
     return (
         <TeamBlogProvider userId={userId}>
-            <div className="h-dvh overflow-y-auto overscroll-none flex flex-col">
+            <div className="h-dvh overflow-y-auto overscroll-contain flex flex-col">
                 <Header userId={userId} onSignOut={() => signOut.mutate()} user={user} />
                 <Content userId={userId} user={user} />
             </div>
@@ -289,7 +289,7 @@ function Header({ userId, onSignOut, user }: { userId: string; onSignOut: () =>
     const { isDebugMode, toggleDebugMode } = useDebugMode()
     
     return (
-        <header className="sticky top-0 z-20 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/70">
+        <header className="sticky top-0 z-[60] border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/70">
             <div className="px-6 h-16 flex items-center justify-between">
                 {/* Left side - Team/Blog Selector */}
                 <div className="flex items-center gap-6 -ml-2">
@@ -1563,12 +1563,77 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
     const [isInRevertMode, setIsInRevertMode] = useState(false)
     const isRevertingRef = useRef(false)
 
+    // Auto-scroll during drag near viewport edges
+    const scrollIntervalRef = useRef<number | null>(null)
+    
+    const clearScrollInterval = useCallback(() => {
+        if (scrollIntervalRef.current !== null) {
+            clearInterval(scrollIntervalRef.current)
+            scrollIntervalRef.current = null
+        }
+    }, [])
+    
+    useEffect(() => {
+        if (!draggingId) {
+            clearScrollInterval()
+            return
+        }
+        
+        const handleGlobalDrag = (e: DragEvent) => {
+            const viewportHeight = window.innerHeight
+            const scrollThreshold = 100 // pixels from edge to trigger scroll
+            const scrollSpeed = 8
+            
+            // Check if near top or bottom of viewport and scroll accordingly
+            if (e.clientY < scrollThreshold) {
+                if (!scrollIntervalRef.current) {
+                    scrollIntervalRef.current = window.setInterval(() => {
+                        // Try to find and use the scrollable container
+                        const scrollContainer = document.querySelector('.h-dvh.overflow-y-auto') as HTMLElement
+                        if (scrollContainer) {
+                            scrollContainer.scrollBy({ top: -scrollSpeed, behavior: 'auto' })
+                        } else {
+                            window.scrollBy({ top: -scrollSpeed, behavior: 'auto' })
+                        }
+                    }, 16)
+                }
+            } else if (e.clientY > viewportHeight - scrollThreshold) {
+                if (!scrollIntervalRef.current) {
+                    scrollIntervalRef.current = window.setInterval(() => {
+                        // Try to find and use the scrollable container
+                        const scrollContainer = document.querySelector('.h-dvh.overflow-y-auto') as HTMLElement
+                        if (scrollContainer) {
+                            scrollContainer.scrollBy({ top: scrollSpeed, behavior: 'auto' })
+                        } else {
+                            window.scrollBy({ top: scrollSpeed, behavior: 'auto' })
+                        }
+                    }, 16)
+                }
+            } else {
+                clearScrollInterval()
+            }
+        }
+        
+        document.addEventListener('dragover', handleGlobalDrag)
+        
+        return () => {
+            clearScrollInterval()
+            document.removeEventListener('dragover', handleGlobalDrag)
+        }
+    }, [draggingId, clearScrollInterval])
+
     const onDragStart = (id: string, e: React.DragEvent) => {
         dragIdRef.current = id
         setDraggingId(id)
         e.dataTransfer.effectAllowed = 'move'
         try { e.dataTransfer.setData('text/plain', id) } catch { }
     }
+    
+    const onDragEnd = useCallback(() => {
+        setDraggingId(null)
+        setOverInfo({ id: null, where: 'below' })
+        clearScrollInterval()
+    }, [clearScrollInterval])
 
     const onDragOverRow = (id: string, e: React.DragEvent) => {
         e.preventDefault()
@@ -2460,7 +2525,7 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
                     onToggle={() => setIsCommentsOpen(!isCommentsOpen)}
                     sections={localSections}
                 />
-                <div className="sticky top-[4.0625rem] z-5 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/70 border-b h-12">
+                <div className="sticky top-[4.0625rem] z-[50] bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/70 border-b h-12">
                     <div 
                         className="px-4 sm:px-6 h-12 flex items-center justify-between"
                         style={{ 
@@ -2485,7 +2550,7 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
                 </div>
 
                 <div 
-                    className="main-content-area flex justify-center px-6 sm:px-12 lg:px-20 py-8 pb-24"
+                    className="main-content-area flex justify-center px-6 sm:px-12 lg:px-20 py-8 pb-32"
                     style={{ 
                         marginLeft: !isMobile 
                             ? (isMinimized ? '60px' : `${chatWidth}px`) 
@@ -2575,7 +2640,7 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
                 onToggle={() => setIsCommentsOpen(!isCommentsOpen)}
                 sections={localSections}
             />
-            <div className="sticky top-[4.0625rem] z-5 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/70 border-b h-12">
+            <div className="sticky top-[4.0625rem] z-[50] bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/70 border-b h-12">
                     <div 
                         className="px-4 sm:px-6 h-12 flex items-center justify-between"
                         style={{ 
@@ -2602,7 +2667,7 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
                             <MessageCircle className="h-4 w-4" />
                         </Button>
                         
-                        <div ref={menuRef} className="relative">
+                        <div ref={menuRef} className="relative z-[100]">
                             <Button 
                                 variant="ghost" 
                                 size="sm" 
@@ -2859,7 +2924,7 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
             </div>
 
             <div 
-                className="main-content-area py-8 pb-24"
+                className="main-content-area py-8 pb-32"
                 style={{ 
                     marginLeft: !isMobile 
                         ? (isMinimized ? '60px' : `${chatWidth}px`) 
@@ -3352,7 +3417,7 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
                             </div>
                         </div>
                     ) : (
-                        <div className="relative sections-table-container">
+                        <div className="relative sections-table-container pb-4">
                             {/* Sticky Add Section button positioned to the left of the table */}
                             <div 
                                 className="sticky left-0 z-10 w-0"
@@ -3462,7 +3527,7 @@ function ArticleEditor({ articleId, userId, user, onBack }: { articleId: string;
                                                             aria-label="Drag to reorder"
                                                             draggable={!isInRevertMode}
                                                             onDragStart={(e) => onDragStart(s.id, e)}
-                                                            onDragEnd={() => { setDraggingId(null); setOverInfo({ id: null, where: 'below' }) }}
+                                                            onDragEnd={onDragEnd}
                                                             className={`p-1 rounded hover:bg-accent text-muted-foreground hidden [@media(hover:hover)]:block ${isInRevertMode ? 'cursor-not-allowed opacity-50' : 'cursor-grab active:cursor-grabbing'} ${draggingId === s.id ? 'opacity-60 ring-2 ring-primary/40' : ''}`}
                                                             title={isInRevertMode ? "Disabled in revert mode" : "Drag to reorder"}
                                                             disabled={isInRevertMode}
@@ -3789,7 +3854,31 @@ function SectionEditor({ section, onLocalChange, isDragging = false, userId, dis
         return <QuoteEditor section={section} onLocalChange={onLocalChange} disabled={disabled} />
     }
     if (section.type === 'text' || section.type === 'paragraph') {
-        return <TextEditor section={section} onLocalChange={onLocalChange} disabled={disabled} />
+        return <TextEditor 
+            section={section} 
+            onLocalChange={onLocalChange} 
+            disabled={disabled}
+            toolbarConfig={{
+                toolbar: {
+                    bold: true,
+                    italic: true,
+                    underline: false,
+                    strikethrough: true,
+                    link: true,
+                    code: true,
+                    heading: false,
+                    blockquote: false,
+                    unorderedList: true,
+                    orderedList: true
+                },
+                floatingToolbar: {
+                    bold: true,
+                    italic: true,
+                    strikethrough: true,
+                    link: true
+                }
+            }}
+        />
     }
     if (section.type === 'image') {
         return <ImageEditor section={section} onLocalChange={onLocalChange} userId={userId} disabled={disabled} />
@@ -4162,15 +4251,173 @@ const markdownToHtml = (markdown: string): string => {
     return html || '<p><br></p>'
 }
 
-const TextEditor = memo(({ section, onLocalChange, disabled = false }: { section: any; onLocalChange: (data: Partial<any>) => void; disabled?: boolean }) => {
+interface TextEditorToolbarConfig {
+    toolbar?: {
+        bold?: boolean
+        italic?: boolean
+        underline?: boolean
+        strikethrough?: boolean
+        link?: boolean
+        code?: boolean
+        heading?: boolean
+        blockquote?: boolean
+        unorderedList?: boolean
+        orderedList?: boolean
+    }
+    floatingToolbar?: {
+        bold?: boolean
+        italic?: boolean
+        strikethrough?: boolean
+        link?: boolean
+    }
+}
+
+const LinkEditPopup = ({ linkElement, position, onClose, onUpdate, onUnlink }: { 
+    linkElement: HTMLAnchorElement
+    position: { x: number; y: number }
+    onClose: () => void
+    onUpdate: (newUrl: string) => void
+    onUnlink?: () => void
+}) => {
+    const [url, setUrl] = useState(linkElement.href)
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        inputRef.current?.focus()
+        inputRef.current?.select()
+    }, [])
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+        if (url && url !== linkElement.href) {
+            onUpdate(url)
+        }
+        onClose()
+    }
+
+    const handleUnlink = () => {
+        if (linkElement.parentNode) {
+            const textNode = document.createTextNode(linkElement.textContent || '')
+            linkElement.parentNode.replaceChild(textNode, linkElement)
+            onUnlink?.()
+        }
+        onClose()
+    }
+
+    const linkText = linkElement.textContent || linkElement.innerText
+
+    return (
+        <div
+            className="link-popup fixed z-50 bg-popover border border-border rounded-md shadow-md p-3 w-80"
+            style={{ left: position.x, top: position.y }}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <div className="space-y-2">
+                <div className="text-xs font-medium mb-1">Edit Link</div>
+                <form onSubmit={handleSubmit} className="space-y-2">
+                    <Input
+                        ref={inputRef}
+                        value={url}
+                        onChange={(e) => setUrl(e.target.value)}
+                        className="text-xs"
+                        placeholder="Enter URL"
+                    />
+                    <div className="flex gap-1">
+                        <Button
+                            type="submit"
+                            variant="default"
+                            size="sm"
+                            className="h-7 px-3 text-xs"
+                        >
+                            Update
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 px-3 text-xs"
+                            onClick={handleUnlink}
+                        >
+                            Unlink
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 px-3 text-xs"
+                            onClick={onClose}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+const TextEditor = memo(({ 
+    section, 
+    onLocalChange, 
+    disabled = false,
+    toolbarConfig = {
+        toolbar: {
+            bold: true,
+            italic: true,
+            underline: true,
+            strikethrough: true,
+            link: true,
+            code: true,
+            heading: true,
+            blockquote: true,
+            unorderedList: true,
+            orderedList: true
+        },
+        floatingToolbar: {
+            bold: true,
+            italic: true,
+            link: true
+        }
+    }
+}: { 
+    section: any; 
+    onLocalChange: (data: Partial<any>) => void; 
+    disabled?: boolean;
+    toolbarConfig?: TextEditorToolbarConfig;
+}) => {
     const [value, setValue] = useState(section.content ?? '')
     const [linkPopup, setLinkPopup] = useState<{ element: HTMLAnchorElement; x: number; y: number } | null>(null)
+    const [floatingToolbar, setFloatingToolbar] = useState<{ x: number; y: number } | null>(null)
     const editorRef = useRef<HTMLDivElement | null>(null)
     const onLocalChangeRef = useRef(onLocalChange)
     const isInternalUpdate = useRef(false)
     const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null)
     onLocalChangeRef.current = onLocalChange
 
+    // Merge config with defaults
+    const config = {
+        toolbar: {
+            bold: true,
+            italic: true,
+            underline: true,
+            strikethrough: true,
+            link: true,
+            code: true,
+            heading: true,
+            blockquote: true,
+            unorderedList: true,
+            orderedList: true,
+            ...toolbarConfig?.toolbar
+        },
+        floatingToolbar: {
+            bold: true,
+            italic: true,
+            strikethrough: true,
+            link: true,
+            ...toolbarConfig?.floatingToolbar
+        }
+    }
+
     // Initialize editor content
     useEffect(() => {
         if (editorRef.current && section.content && !editorRef.current.innerHTML) {
@@ -4209,6 +4456,30 @@ const TextEditor = memo(({ section, onLocalChange, disabled = false }: { section
         }
     }, [])
 
+    // Track selection changes for floating toolbar
+    useEffect(() => {
+        const handleSelectionChange = () => {
+            const selection = window.getSelection()
+            if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {
+                const range = selection.getRangeAt(0)
+                const rect = range.getBoundingClientRect()
+                
+                // Check if selection is within editor
+                if (editorRef.current && editorRef.current.contains(range.commonAncestorContainer)) {
+                    setFloatingToolbar({
+                        x: rect.left + (rect.width / 2),
+                        y: rect.top - 40
+                    })
+                }
+            } else {
+                setFloatingToolbar(null)
+            }
+        }
+
+        document.addEventListener('selectionchange', handleSelectionChange)
+        return () => document.removeEventListener('selectionchange', handleSelectionChange)
+    }, [])
+
     const handleContentChange = useCallback(() => {
         if (!editorRef.current) return
         const html = editorRef.current.innerHTML
@@ -4341,161 +4612,187 @@ const TextEditor = memo(({ section, onLocalChange, disabled = false }: { section
             {/* Toolbar */}
             <div className="border border-input rounded-md">
                 <div className="flex items-center gap-0.5 p-1 border-b border-input bg-muted/20 rounded-t-md">
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => execCommand('bold')}
+                    {config.toolbar.bold && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => execCommand('bold')}
                 disabled={disabled}
-                    >
-                        <Bold className="h-4 w-4" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => execCommand('italic')}
-                        disabled={disabled}
-                    >
-                        <Italic className="h-4 w-4" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => execCommand('underline')}
-                        disabled={disabled}
-                    >
-                        <Underline className="h-4 w-4" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => execCommand('strikeThrough')}
-                        disabled={disabled}
-                    >
-                        <Strikethrough className="h-4 w-4" />
-                    </Button>
-                    <div className="h-6 w-px bg-border mx-1" />
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => {
-                            const url = prompt('Enter URL:')
-                            if (url) execCommand('createLink', url)
-                        }}
-                        disabled={disabled}
-                    >
-                        <LinkIcon className="h-4 w-4" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => {
-                            const selection = window.getSelection()
-                            if (selection && selection.rangeCount > 0) {
-                                const range = selection.getRangeAt(0)
-                                const selectedText = range.toString()
-                                
-                                if (selectedText) {
-                                    // Check if already in a code tag
-                                    let node: Node | null = range.commonAncestorContainer
-                                    while (node && node.nodeType !== Node.ELEMENT_NODE) {
-                                        node = node.parentNode
-                                    }
-                                    let element = node as HTMLElement | null
-                                    while (element && element.tagName !== 'CODE' && element.parentElement) {
-                                        element = element.parentElement
-                                    }
+                        >
+                            <Bold className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.toolbar.italic && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => execCommand('italic')}
+                            disabled={disabled}
+                        >
+                            <Italic className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.toolbar.underline && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => execCommand('underline')}
+                            disabled={disabled}
+                        >
+                            <Underline className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.toolbar.strikethrough && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => execCommand('strikeThrough')}
+                            disabled={disabled}
+                        >
+                            <Strikethrough className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {(config.toolbar.bold || config.toolbar.italic || config.toolbar.underline || config.toolbar.strikethrough) && 
+                     (config.toolbar.link || config.toolbar.code) && 
+                     <div className="h-6 w-px bg-border mx-1" />}
+                    {config.toolbar.link && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => {
+                                const url = prompt('Enter URL:')
+                                if (url) execCommand('createLink', url)
+                            }}
+                            disabled={disabled}
+                        >
+                            <LinkIcon className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.toolbar.code && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => {
+                                const selection = window.getSelection()
+                                if (selection && selection.rangeCount > 0) {
+                                    const range = selection.getRangeAt(0)
+                                    const selectedText = range.toString()
                                     
-                                    if (element && element.tagName === 'CODE' && element.parentNode) {
-                                        // Unwrap: replace code element with its text content
-                                        const textNode = document.createTextNode(selectedText)
-                                        element.parentNode.replaceChild(textNode, element)
-                                        handleContentChange()
+                                    if (selectedText) {
+                                        // Check if already in a code tag
+                                        let node: Node | null = range.commonAncestorContainer
+                                        while (node && node.nodeType !== Node.ELEMENT_NODE) {
+                                            node = node.parentNode
+                                        }
+                                        let element = node as HTMLElement | null
+                                        while (element && element.tagName !== 'CODE' && element.parentElement) {
+                                            element = element.parentElement
+                                        }
+                                        
+                                        if (element && element.tagName === 'CODE' && element.parentNode) {
+                                            // Unwrap: replace code element with its text content
+                                            const textNode = document.createTextNode(selectedText)
+                                            element.parentNode.replaceChild(textNode, element)
+                                            handleContentChange()
+                                        } else {
+                                            // Wrap: create code element
+                                            const codeElement = document.createElement('code')
+                                            codeElement.textContent = selectedText
+                                            range.deleteContents()
+                                            range.insertNode(codeElement)
+                                            handleContentChange()
+                                        }
                                     } else {
-                                        // Wrap: create code element
-                                        const codeElement = document.createElement('code')
-                                        codeElement.textContent = selectedText
-                                        range.deleteContents()
-                                        range.insertNode(codeElement)
-                                        handleContentChange()
-                                    }
-                                } else {
-                                    // No selection, prompt for text
-                                    const code = prompt('Enter code:')
-                                    if (code) {
-                                        const codeElement = document.createElement('code')
-                                        codeElement.textContent = code
-                                        range.insertNode(codeElement)
-                                        handleContentChange()
+                                        // No selection, prompt for text
+                                        const code = prompt('Enter code:')
+                                        if (code) {
+                                            const codeElement = document.createElement('code')
+                                            codeElement.textContent = code
+                                            range.insertNode(codeElement)
+                                            handleContentChange()
+                                        }
                                     }
                                 }
-                            }
-                        }}
-                        disabled={disabled}
-                    >
-                        <Code className="h-4 w-4" />
-                    </Button>
-                    <div className="h-6 w-px bg-border mx-1" />
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => {
-                            const heading = prompt('Enter heading text:')
-                            if (heading) {
-                                document.execCommand('formatBlock', false, 'h2')
-                                editorRef.current?.focus()
-                            }
-                        }}
-                        disabled={disabled}
-                    >
-                        <Heading1 className="h-4 w-4" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => {
-                            execCommand('formatBlock', 'blockquote')
-                        }}
-                        disabled={disabled}
-                    >
-                        <Quote className="h-4 w-4" />
-                    </Button>
-                    <div className="h-6 w-px bg-border mx-1" />
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => execCommand('insertUnorderedList')}
-                        disabled={disabled}
-                    >
-                        <List className="h-4 w-4" />
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-8 w-8 p-0"
-                        onClick={() => execCommand('insertOrderedList')}
-                        disabled={disabled}
-                    >
-                        <ListOrdered className="h-4 w-4" />
-                    </Button>
+                            }}
+                            disabled={disabled}
+                        >
+                            <Code className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {(config.toolbar.link || config.toolbar.code) && 
+                     (config.toolbar.heading || config.toolbar.blockquote) && 
+                     <div className="h-6 w-px bg-border mx-1" />}
+                    {config.toolbar.heading && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => {
+                                const heading = prompt('Enter heading text:')
+                                if (heading) {
+                                    document.execCommand('formatBlock', false, 'h2')
+                                    editorRef.current?.focus()
+                                }
+                            }}
+                            disabled={disabled}
+                        >
+                            <Heading1 className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.toolbar.blockquote && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => {
+                                execCommand('formatBlock', 'blockquote')
+                            }}
+                            disabled={disabled}
+                        >
+                            <Quote className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {(config.toolbar.heading || config.toolbar.blockquote) && 
+                     (config.toolbar.unorderedList || config.toolbar.orderedList) && 
+                     <div className="h-6 w-px bg-border mx-1" />}
+                    {config.toolbar.unorderedList && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => execCommand('insertUnorderedList')}
+                            disabled={disabled}
+                        >
+                            <List className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.toolbar.orderedList && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={() => execCommand('insertOrderedList')}
+                            disabled={disabled}
+                        >
+                            <ListOrdered className="h-4 w-4" />
+                        </Button>
+                    )}
                 </div>
                 {/* Editor */}
                 <div
@@ -4526,44 +4823,115 @@ const TextEditor = memo(({ section, onLocalChange, disabled = false }: { section
             
             {/* Link popup */}
             {linkPopup && (
+                <LinkEditPopup
+                    linkElement={linkPopup.element}
+                    position={{ x: linkPopup.x, y: linkPopup.y }}
+                    onClose={() => setLinkPopup(null)}
+                    onUpdate={(newUrl) => {
+                        linkPopup.element.href = newUrl
+                        linkPopup.element.setAttribute('href', newUrl)
+                        handleContentChange()
+                    }}
+                    onUnlink={() => handleContentChange()}
+                />
+            )}
+            
+            {/* Floating toolbar */}
+            {floatingToolbar && (
                 <div
-                    className="link-popup fixed z-50 bg-popover border border-border rounded-md shadow-md p-2 flex gap-1"
-                    style={{ left: linkPopup.x, top: linkPopup.y }}
+                    className="fixed z-50 bg-popover border border-border rounded-md shadow-lg p-1 flex items-center gap-0.5"
+                    style={{ 
+                        left: `${floatingToolbar.x}px`, 
+                        top: `${floatingToolbar.y}px`,
+                        transform: 'translateX(-50%)'
+                    }}
+                    onMouseDown={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                    }}
                     onClick={(e) => e.stopPropagation()}
                 >
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-7 px-2 text-xs"
-                        onClick={() => {
-                            const newUrl = prompt('Edit URL:', linkPopup.element.href)
-                            if (newUrl && newUrl !== linkPopup.element.href) {
-                                linkPopup.element.href = newUrl
-                                linkPopup.element.setAttribute('href', newUrl)
-                                handleContentChange()
-                            }
-                            setLinkPopup(null)
-                        }}
-                    >
-                        Edit
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="h-7 px-2 text-xs"
-                        onClick={() => {
-                            if (linkPopup.element.parentNode) {
-                                const textNode = document.createTextNode(linkPopup.element.textContent || '')
-                                linkPopup.element.parentNode.replaceChild(textNode, linkPopup.element)
-                                handleContentChange()
-                            }
-                            setLinkPopup(null)
-                        }}
-                    >
-                        Unlink
-                    </Button>
+                    {config.floatingToolbar.bold && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            onMouseDown={(e) => {
+                                e.preventDefault()
+                                execCommand('bold')
+                                setFloatingToolbar(null)
+                                // Restore focus and selection
+                                setTimeout(() => {
+                                    editorRef.current?.focus()
+                                }, 0)
+                            }}
+                            disabled={disabled}
+                        >
+                            <Bold className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.floatingToolbar.italic && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            onMouseDown={(e) => {
+                                e.preventDefault()
+                                execCommand('italic')
+                                setFloatingToolbar(null)
+                                setTimeout(() => {
+                                    editorRef.current?.focus()
+                                }, 0)
+                            }}
+                            disabled={disabled}
+                        >
+                            <Italic className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {config.floatingToolbar.strikethrough && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 w-7 p-0"
+                            onMouseDown={(e) => {
+                                e.preventDefault()
+                                execCommand('strikeThrough')
+                                setFloatingToolbar(null)
+                                setTimeout(() => {
+                                    editorRef.current?.focus()
+                                }, 0)
+                            }}
+                            disabled={disabled}
+                        >
+                            <Strikethrough className="h-4 w-4" />
+                        </Button>
+                    )}
+                    {(config.floatingToolbar.bold || config.floatingToolbar.italic || config.floatingToolbar.strikethrough) && config.floatingToolbar.link && 
+                     <div className="h-5 w-px bg-border mx-0.5" />}
+                    {config.floatingToolbar.link && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 px-2 text-xs"
+                            onMouseDown={(e) => {
+                                e.preventDefault()
+                                const url = prompt('Add link:')
+                                if (url) execCommand('createLink', url)
+                                setFloatingToolbar(null)
+                                setTimeout(() => {
+                                    editorRef.current?.focus()
+                                }, 0)
+                            }}
+                            disabled={disabled}
+                        >
+                            <LinkIcon className="h-3 w-3 mr-1" />
+                            Link
+                        </Button>
+                    )}
                 </div>
             )}
         </div>