- Fix inability to unset note

- Better highlights style - Add special style for highlights with note
jdrch · Jun 28, 2024 · 263cec4 · 263cec4
1 parent 1bb341b
commit 263cec4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/marker/modern.ts b/src/marker/modern.ts
@@ -28,7 +28,7 @@ export function apply(highlights: RaindropHighlight[]) {
         for(const i in highlights) {
             if (!textsRanges[i].length) continue
 
-            const { _id, color } = highlights[i]
+            const { _id, color, note } = highlights[i]
             const cssId = `${cssprefix}${_id}`
 
             //@ts-ignore
@@ -39,8 +39,10 @@ export function apply(highlights: RaindropHighlight[]) {
             cssRules.push(`
                 ::highlight(${cssId}) {
                     all: unset;
-                    background-color: color-mix(in srgb, ${colors.get(color!) || color}, white 50%) !important;
-                    color: black;
+                    background-color: color-mix(in srgb, ${colors.get(color!) || color || 'yellow'}, white 60%) !important;
+                    color: color-mix(in srgb, ${colors.get(color!) || color}, black 80%) !important;
+                    ${note ? `text-decoration: underline wavy;` : ''}
+                    text-decoration-thickness: from-font;
                 }
 
                 :root {

diff --git a/src/store.svelte.ts b/src/store.svelte.ts
@@ -41,9 +41,9 @@ export function createStore(
 
     function upsert(highlight: RaindropHighlight) {
         const item: RaindropHighlight = {
-            ...(highlight._id ? { _id: highlight._id } : {}),
-            ...(highlight.text ? { text: highlight.text } : {}),
-            ...(highlight.note ? { note: highlight.note } : {}),
+            ...(typeof highlight._id == 'string' ? { _id: highlight._id } : {}),
+            ...(typeof highlight.text == 'string' ? { text: highlight.text } : {}),
+            ...(typeof highlight.note == 'string' ? { note: highlight.note } : {}),
             color: highlight.color || 'yellow',
             //ignore all unknown fields (otherwise breaks ios)
         }