fix: remove highlight does not refresh list and book.

src/components/highlightList.tsx

@@ -11,6 +11,7 @@ import MoreVert from "@mui/icons-material/MoreVert";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import type * as Prisma from "@prisma/client";
+import { useMemoizedFn } from "ahooks";
 
 const useStyles = makeStyles()((theme) => ({
   title: {
@@ -105,7 +106,6 @@ function HighlightListItem(props: HighlightListItemProps) {
           </IconButton>
         </Box>
         <Typography variant="body1">{selectedString}</Typography>
-        {/* <br /> */}
         {comment}
       </Box>
       <Divider />
@@ -121,7 +121,10 @@ type HighlightListProps = {
 };
 
 export function HighlightList(props: HighlightListProps) {
-  const { onClick, onRemoveMark, highlightList } = props;
+  const { highlightList } = props;
+
+  const onRemoveMark = useMemoizedFn(props.onRemoveMark);
+  const onClick = useMemoizedFn(props.onClick);
 
   const list = useMemo(
     () => (
@@ -136,8 +139,7 @@ export function HighlightList(props: HighlightListProps) {
         ))}
       </List>
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [highlightList],
+    [highlightList, onClick, onRemoveMark],
   );
 
   return list;

src/components/nestedList.tsx

@@ -14,6 +14,7 @@ import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
 import IconButton from "@mui/material/IconButton";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
+import { useMemoizedFn } from "ahooks";
 
 const NestedListContext = React.createContext({
   selected: "",
@@ -166,13 +167,10 @@ export function NestedList(props: NestedListProps) {
     previousPropSelectedRef.current = props.selected;
   }
 
-  const onSelected = useCallback<NestedListItemClick>(
-    (item) => {
-      setSelected(item.src);
-      onClick(item);
-    },
-    [onClick],
-  );
+  const onSelected = useMemoizedFn<NestedListItemClick>((item) => {
+    setSelected(item.src);
+    onClick(item);
+  });
 
   return (
     <NestedListContext.Provider value={{ selected, onSelected }}>

src/pages/reader/index.tsx

@@ -217,13 +217,14 @@ export default function Reader(props: ReaderProps) {
     [epubReaderRef],
   );
 
-  const handleRemoveMark = useCallback(
-    async (mark: Prisma.Mark) => {
-      await removeMarkMutation.mutateAsync(mark.id);
-      await bookmarkListQuery.refetch();
-    },
-    [bookmarkListQuery, removeMarkMutation],
-  );
+  const handleRemoveMark = async (mark: Prisma.Mark) => {
+    await removeMarkMutation.mutateAsync(mark.id);
+    await Promise.all([
+      bookmarkListQuery.refetch(),
+      highlightListQuery.refetch(),
+    ]);
+    epubReaderRef.current?.removeHighlightById(mark.id);
+  };
 
   return (
     <div className={classes.root}>

src/utils/epubReader.ts

@@ -115,6 +115,13 @@ export class EpubReader extends EventEmitter<
     this.rendition.annotations.remove(epubcfi, EpubAnnotationType.Highlight);
   }
 
+  removeHighlightById(id: string | number) {
+    const g: SVGGElement | null = document.querySelector(`g[data-id="${id}"]`);
+    const epubcfi = g?.dataset.epubcfi;
+    if (!epubcfi) return;
+    this.rendition.annotations.remove(epubcfi, EpubAnnotationType.Highlight);
+  }
+
   updateHighlight(mark: Pick<Prisma.Mark, "epubcfi" | "color">) {
     const annotations = (this.rendition.annotations as any)
       ._annotations as Record<string, Annotation>;