use inline svg for highlight note icon

packages/web/lib/highlights/highlightGenerator.ts

@@ -2,7 +2,11 @@ import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch'
 import { RefObject } from 'react'
 import type { Highlight } from '../networking/fragments/highlightFragment'
 import { interpolationSearch } from './interpolationSearch'
-import { highlightIdAttribute, highlightNoteIdAttribute } from './highlightHelpers'
+import {
+  highlightIdAttribute,
+  highlightNoteIdAttribute,
+  noteImage,
+} from './highlightHelpers'
 
 const highlightTag = 'omnivore_highlight'
 const highlightClassname = 'highlight'
@@ -10,7 +14,8 @@ const highlightWithNoteClassName = 'highlight_with_note'
 const articleContainerId = 'article-container'
 export const maxHighlightLength = 2000
 
-const nonParagraphTagsRegEx = /^(a|b|basefont|bdo|big|em|font|i|s|small|span|strike|strong|su[bp]|tt|u|code|mark)$/i
+const nonParagraphTagsRegEx =
+  /^(a|b|basefont|bdo|big|em|font|i|s|small|span|strike|strong|su[bp]|tt|u|code|mark)$/i
 const highlightContentRegex = new RegExp(
   `<${highlightTag}>([\\s\\S]*)<\\/${highlightTag}>`,
   'i'
@@ -47,10 +52,8 @@ export type HighlightNodeAttributes = {
 export function makeHighlightStartEndOffset(
   highlight: Highlight
 ): HighlightLocation {
-  const {
-    startLocation: highlightTextStart,
-    endLocation: highlightTextEnd,
-  } = nodeAttributesFromHighlight(highlight)
+  const { startLocation: highlightTextStart, endLocation: highlightTextEnd } =
+    nodeAttributesFromHighlight(highlight)
   return {
     id: highlight.id,
     start: highlightTextStart,
@@ -129,7 +132,9 @@ export function makeHighlightNodeAttributes(
         }
 
         const newHighlightSpan = document.createElement('span')
-        newHighlightSpan.className = withNote ? highlightWithNoteClassName : highlightClassname
+        newHighlightSpan.className = withNote
+          ? highlightWithNoteClassName
+          : highlightClassname
         newHighlightSpan.setAttribute(highlightIdAttribute, id)
         customColor &&
           newHighlightSpan.setAttribute(
@@ -146,6 +151,7 @@ export function makeHighlightNodeAttributes(
   }
   if (withNote && lastElement) {
     lastElement.classList.add('last_element')
+
     const button = document.createElement('img')
     button.className = 'highlight_note_button'
     button.src = '/static/icons/highlight-note-icon.svg'
@@ -153,6 +159,10 @@ export function makeHighlightNodeAttributes(
     button.setAttribute(highlightNoteIdAttribute, id)
 
     lastElement.appendChild(button)
+
+    // const svg = noteImage()
+    // svg.setAttribute(highlightNoteIdAttribute, id)
+    // lastElement.appendChild(svg)
   }
 
   return {
@@ -199,9 +209,8 @@ export function generateDiffPatch(range: Range): string {
 
 export function wrapHighlightTagAroundRange(range: Range): [number, number] {
   const patch = generateDiffPatch(range)
-  const { highlightTextStart, highlightTextEnd } = selectionOffsetsFromPatch(
-    patch
-  )
+  const { highlightTextStart, highlightTextEnd } =
+    selectionOffsetsFromPatch(patch)
   return [highlightTextStart, highlightTextEnd]
 }
 
@@ -290,11 +299,7 @@ const selectionOffsetsFromPatch = (
   }
 }
 
-export function getPrefixAndSuffix({
-  patch,
-}: {
-  patch: string
-}): {
+export function getPrefixAndSuffix({ patch }: { patch: string }): {
   prefix: string
   suffix: string
   highlightTextStart: number
@@ -305,9 +310,8 @@ export function getPrefixAndSuffix({
   if (!patch) throw new Error('Invalid patch')
   const { textNodes } = getArticleTextNodes()
 
-  const { highlightTextStart, highlightTextEnd } = selectionOffsetsFromPatch(
-    patch
-  )
+  const { highlightTextStart, highlightTextEnd } =
+    selectionOffsetsFromPatch(patch)
   // Searching for the starting text node using interpolation search algorithm
   const textNodeIndex = interpolationSearch(
     textNodes.map(({ startIndex: startIndex }) => startIndex),
@@ -360,9 +364,11 @@ const fillHighlight = ({
   highlightTextStart: number
   highlightTextEnd: number
 }): FillNodeResponse => {
-  const { node, startIndex: startIndex, startsParagraph } = textNodes[
-    startingTextNodeIndex
-  ]
+  const {
+    node,
+    startIndex: startIndex,
+    startsParagraph,
+  } = textNodes[startingTextNodeIndex]
   const text = node.nodeValue || ''
 
   const textBeforeHighlightLenght = highlightTextStart - startIndex

packages/web/lib/highlights/highlightHelpers.ts

@@ -24,3 +24,24 @@ export function getHighlightNoteButton(highlightId: string): Element[] {
     document.querySelectorAll(`[${highlightNoteIdAttribute}='${highlightId}']`)
   )
 }
+
+export function noteImage(): SVGSVGElement {
+  const svgURI = 'http://www.w3.org/2000/svg'
+  const svg = document.createElementNS(svgURI, 'svg')
+  svg.setAttribute('viewBox', '0 0 14 14')
+  svg.setAttribute('width', '14')
+  svg.setAttribute('height', '14')
+  svg.setAttribute('fill', 'none')
+  svg.setAttribute('class', 'highlight_note_button')
+
+  const path = document.createElementNS(svgURI, 'path')
+  path.setAttribute(
+    'd',
+    'M1 5.66602C1 3.7804 1 2.83759 1.58579 2.2518C2.17157 1.66602 3.11438 1.66602 5 1.66602H9C10.8856 1.66602 11.8284 1.66602 12.4142 2.2518C13 2.83759 13 3.7804 13 5.66602V7.66601C13 9.55163 13 10.4944 12.4142 11.0802C11.8284 11.666 10.8856 11.666 9 11.666H4.63014C4.49742 11.666 4.43106 11.666 4.36715 11.6701C3.92582 11.6984 3.50632 11.8722 3.17425 12.1642C3.12616 12.2065 3.07924 12.2534 2.98539 12.3473V12.3473C2.75446 12.5782 2.639 12.6937 2.55914 12.7475C1.96522 13.1481 1.15512 12.8125 1.01838 12.1093C1 12.0148 1 11.8515 1 11.5249V5.66602Z'
+  )
+  path.setAttribute('stroke', 'rgba(255, 210, 52, 0.8)')
+  path.setAttribute('stroke-width', '1.8')
+  path.setAttribute('stroke-linejoin', 'round')
+  svg.appendChild(path)
+  return svg
+}