From 0c219ee789a94361428e9331af4f2a31dc62beaa Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Jun 2023 17:10:47 +0800
Subject: [PATCH] Sync deletes of highlights

---
 .../templates/article/HighlightsLayer.tsx       | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index db05aa5aa..4aa3f7ee0 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -546,6 +546,21 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     }
   }
 
+  const deleteHighlightById = useCallback(
+    (event: Event) => {
+      const annotationId = (event as CustomEvent).detail as string
+      if (annotationId) {
+        removeHighlights(
+          highlights.map((h) => h.id),
+          highlightLocations
+        )
+        const keptHighlights = highlights.filter(($0) => $0.id !== annotationId)
+        setHighlights([...keptHighlights])
+      }
+    },
+    [highlights, highlightLocations]
+  )
+
   useEffect(() => {
     const safeHandleAction = async (action: HighlightAction) => {
       try {
@@ -676,6 +691,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     document.addEventListener('setHighlightLabels', setHighlightLabels)
     document.addEventListener('scrollToNextHighlight', goToNextHighlight)
     document.addEventListener('scrollToPrevHighlight', goToPreviousHighlight)
+    document.addEventListener('deleteHighlightbyId', deleteHighlightById)
 
     return () => {
       document.removeEventListener('annotate', annotate)
@@ -692,6 +708,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         'scrollToPrevHighlight',
         goToPreviousHighlight
       )
+      document.removeEventListener('deleteHighlightbyId', deleteHighlightById)
     }
   })