Better highlight position calculation

packages/web/components/templates/article/HighlightsLayer.tsx

@@ -222,20 +222,14 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   )
 
   const selectionPercentPos = (selection: Selection): number | undefined => {
-    if (
-      selection.rangeCount > 0 &&
-      window &&
-      window.document.scrollingElement
-    ) {
-      const percent =
-        (selection.getRangeAt(0).getBoundingClientRect().y + window.scrollY) /
-        window.document.scrollingElement.scrollHeight
-      console.log(
-        'percent breakdown: ',
-        selection.getRangeAt(0).getBoundingClientRect().y,
-        window.scrollY,
-        window.document.scrollingElement.scrollHeight
-      )
+    const containerRect = document
+      .getElementById('readability-page-1')
+      ?.getBoundingClientRect()
+    if (selection.rangeCount > 0 && containerRect) {
+      const selectionTop = selection.getRangeAt(0).getBoundingClientRect().y
+      const relativeTop = selectionTop - containerRect.y
+      const percent = relativeTop / containerRect.height
+
       return Math.min(Math.max(0, percent * 100), 100)
     }
     return undefined
@@ -264,7 +258,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
 
   const createHighlightCallback = useCallback(
     async (successAction: HighlightModalAction, annotation?: string) => {
-      console.log('creating highlight from: ', selectionData)
       if (!selectionData) {
         return
       }

packages/web/lib/highlights/createHighlight.ts

@@ -51,25 +51,16 @@ export async function createHighlight(
     return {}
   }
 
-  console.log(
-    ' input.selection.overlapHighlights: ',
-    input.selection.overlapHighlights
-  )
-
   const shouldMerge = input.selection.overlapHighlights.length > 0
 
   const { range, selection } = input.selection
 
-  console.log('original range: ', range.toString())
   extendRangeToWordBoundaries(range)
 
   // Create a temp container for copying the range HTML
   const container = document.createElement('div')
   container.appendChild(range.cloneContents())
 
-  console.log(' - html: ', container.innerHTML)
-  console.log(' - markdown: ', htmlToMarkdown(container.innerHTML))
-
   const id = uuidv4()
   const patch = generateDiffPatch(range)