feat: long form article

src/components/HighlightButton/index.tsx

@@ -47,7 +47,7 @@ export default function HighlightButton({ onHighlight, containerRef }: Highlight
 
         // Position button above the selection area, centered horizontally
         setPosition({
-          top: rect.top + scrollTop - 36, // 36px above the selection
+          top: rect.top + scrollTop - 48, // 48px above the selection
           left: rect.left + scrollLeft + rect.width / 2 // Center of the selection
         })
         setSelectedText(text)

src/components/Note/LongFormArticle/index.tsx

@@ -1,10 +1,12 @@
 import { SecondaryPageLink, useSecondaryPage } from '@/PageManager'
 import ImageWithLightbox from '@/components/ImageWithLightbox'
+import HighlightButton from '@/components/HighlightButton'
+import PostEditor from '@/components/PostEditor'
 import { getLongFormArticleMetadataFromEvent } from '@/lib/event-metadata'
 import { toNote, toNoteList, toProfile } from '@/lib/link'
 import { ExternalLink } from 'lucide-react'
 import { Event, kinds } from 'nostr-tools'
-import { useMemo } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import NostrNode from './NostrNode'
@@ -20,6 +22,14 @@ export default function LongFormArticle({
 }) {
   const { push } = useSecondaryPage()
   const metadata = useMemo(() => getLongFormArticleMetadataFromEvent(event), [event])
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [showHighlightEditor, setShowHighlightEditor] = useState(false)
+  const [selectedText, setSelectedText] = useState('')
+
+  const handleHighlight = (text: string) => {
+    setSelectedText(text)
+    setShowHighlightEditor(true)
+  }
 
   const components = useMemo(
     () =>
@@ -74,11 +84,13 @@ export default function LongFormArticle({
           />
         )
       }) as Components,
-    []
+    [event.pubkey]
   )
 
   return (
+    <>
       <div
+        ref={contentRef}
         className={`prose prose-zinc max-w-none dark:prose-invert break-words overflow-wrap-anywhere ${className || ''}`}
       >
         <h1 className="break-words">{metadata.title}</h1>
@@ -123,5 +135,13 @@ export default function LongFormArticle({
           </div>
         )}
       </div>
+      <HighlightButton onHighlight={handleHighlight} containerRef={contentRef} />
+      <PostEditor
+        highlightedText={selectedText}
+        parentStuff={event}
+        open={showHighlightEditor}
+        setOpen={setShowHighlightEditor}
+      />
+    </>
   )
 }