fix(mark): scroll into marks, add scroll margin and forwardRef

Closes #172

src/App.scss

@@ -141,6 +141,8 @@ li {
   color: black;
   letter-spacing: normal;
   border: 1px solid transparent;
+
+  scroll-margin-top: $header-height + $body-vertical-padding;
 }
 
 [data-dev='true'] {

src/components/PDFView/PdfMarkItem.tsx

@@ -2,6 +2,8 @@ import { CurrentUserMark } from '../../types/mark.ts'
 import styles from '../DrawPDFFields/style.module.scss'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'
+import { forwardRef } from 'react'
+import { npubToHex } from '../../utils/nostr.ts'
 
 interface PdfMarkItemProps {
   userMark: CurrentUserMark
@@ -14,35 +16,41 @@ interface PdfMarkItemProps {
 /**
  * Responsible for display an individual Pdf Mark.
  */
-const PdfMarkItem = ({
+const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
-  selectedMark,
+  (
-  handleMarkClick,
+    { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
-  selectedMarkValue,
+    ref
-  userMark,
+  ) => {
-  pageWidth
+    const { location } = userMark.mark
-}: PdfMarkItemProps) => {
+    const handleClick = () => handleMarkClick(userMark.mark.id)
-  const { location } = userMark.mark
+    const isEdited = () => selectedMark?.mark.id === userMark.mark.id
-  const handleClick = () => handleMarkClick(userMark.mark.id)
+    const getMarkValue = () =>
-  const isEdited = () => selectedMark?.mark.id === userMark.mark.id
+      isEdited() ? selectedMarkValue : userMark.currentValue
-  const getMarkValue = () =>
+    const { from } = useScale()
-    isEdited() ? selectedMarkValue : userMark.currentValue
+    return (
-  const { from } = useScale()
+      <div
-  return (
+        ref={ref}
-    <div
+        onClick={handleClick}
-      onClick={handleClick}
+        className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
-      className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
+        style={{
-      style={{
+          backgroundColor: selectedMark?.mark.npub
-        left: inPx(from(pageWidth, location.left)),
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
-        top: inPx(from(pageWidth, location.top)),
+            : undefined,
-        width: inPx(from(pageWidth, location.width)),
+          borderColor: selectedMark?.mark.npub
-        height: inPx(from(pageWidth, location.height)),
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
-        fontFamily: FONT_TYPE,
+            : undefined,
-        fontSize: inPx(from(pageWidth, FONT_SIZE))
+          left: inPx(from(pageWidth, location.left)),
-      }}
+          top: inPx(from(pageWidth, location.top)),
-    >
+          width: inPx(from(pageWidth, location.width)),
-      {getMarkValue()}
+          height: inPx(from(pageWidth, location.height)),
-    </div>
+          fontFamily: FONT_TYPE,
-  )
+          fontSize: inPx(from(pageWidth, FONT_SIZE))
-}
+        }}
+      >
+        {getMarkValue()}
+      </div>
+    )
+  }
+)
 
 export default PdfMarkItem

src/components/PDFView/PdfPageItem.tsx

@@ -48,16 +48,15 @@ const PdfPageItem = ({
         alt={`page ${pageIndex + 1} of ${fileName}`}
       />
       {currentUserMarks.map((m, i) => (
-        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
+        <PdfMarkItem
-          <PdfMarkItem
+          key={i}
-            key={i}
+          ref={(el) => (markRefs.current[m.id] = el)}
-            handleMarkClick={handleMarkClick}
+          handleMarkClick={handleMarkClick}
-            selectedMarkValue={selectedMarkValue}
+          selectedMarkValue={selectedMarkValue}
-            userMark={m}
+          userMark={m}
-            selectedMark={selectedMark}
+          selectedMark={selectedMark}
-            pageWidth={page.width}
+          pageWidth={page.width}
-          />
+        />
-        </div>
       ))}
       {otherUserMarks.map((m, i) => {
         return (