From d511d4359374d371c6a7bec5bb1fa48daa7d0913 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 28 Jun 2023 15:42:31 +0800
Subject: [PATCH] Handle all whitespace nodes when creating highlights, improve
 highlight view styling

---
 packages/web/components/patterns/HighlightView.tsx | 2 +-
 packages/web/lib/highlights/highlightGenerator.ts  | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index d12f3023e..c6539926b 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -118,7 +118,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
                 display: 'inline',
                 padding: '2px',
                 backgroundColor: `rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
-                boxShadow: `1px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha}), -1px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
+                boxShadow: `3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha}), -3px 0 0 rgba(var(--colors-highlightBackground), ${highlightAlpha})`,
                 boxDecorationBreak: 'clone',
                 borderRadius: '2px',
               },
diff --git a/packages/web/lib/highlights/highlightGenerator.ts b/packages/web/lib/highlights/highlightGenerator.ts
index 07027d743..392d29d11 100644
--- a/packages/web/lib/highlights/highlightGenerator.ts
+++ b/packages/web/lib/highlights/highlightGenerator.ts
@@ -115,6 +115,11 @@ export function makeHighlightNodeAttributes(
     })
     const { parentNode, nextSibling } = node
 
+    if (node.textContent && !/[^\t\n\r ]/.test(node.textContent)) {
+      startingTextNodeIndex++
+      continue
+    }
+
     let isPre = false
     const nodeElement = node instanceof HTMLElement ? node : node.parentElement
     if (nodeElement) {