fix(annotator): update highlight style, color and range handlers when showing different annotations, closes #3286 (#3289)

This commit is contained in:
Huang Xin
2026-02-13 23:46:44 +08:00
committed by GitHub
parent 239b32fcc2
commit ae3bb9da9a
2 changed files with 8 additions and 9 deletions
@@ -161,7 +161,6 @@ const AnnotationRangeEditor: React.FC<AnnotationRangeEditorProps> = ({
const { handlePositions, getHandlePositionsFromRange, handleAnnotationRangeChange } =
useAnnotationEditor({ bookKey, annotation, getAnnotationText, setSelection });
const initializedRef = useRef(false);
const handleColorHex = getHighlightColorHex(settings, handleColor) ?? '#FFFF00';
const draggingRef = useRef<'start' | 'end' | null>(null);
const dragPointerTypeRef = useRef<string>('');
@@ -173,9 +172,6 @@ const AnnotationRangeEditor: React.FC<AnnotationRangeEditorProps> = ({
const [loupePoint, setLoupePoint] = useState<Point | null>(null);
useEffect(() => {
if (initializedRef.current) return;
initializedRef.current = true;
const range = selection.range;
const positions = getHandlePositionsFromRange(range, isVertical);
if (positions) {
@@ -161,13 +161,12 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
}, [selection, bookKey, viewSettings.vertical]);
useEffect(() => {
setSelectedStyle(settings.globalReadSettings.highlightStyle);
const highlightStyle = settings.globalReadSettings.highlightStyle;
setSelectedStyle(highlightStyle);
setSelectedColor(settings.globalReadSettings.highlightStyles[highlightStyle]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [settings.globalReadSettings.highlightStyle]);
useEffect(() => {
setSelectedColor(settings.globalReadSettings.highlightStyles[selectedStyle]);
}, [settings.globalReadSettings.highlightStyles, selectedStyle]);
const transformCtx: TransformContext = useMemo(
() => ({
bookKey,
@@ -373,6 +372,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
setHighlightOptionsVisible(false);
setEditingAnnotation(null);
} else {
setShowAnnotPopup(false);
setEditingAnnotation(null);
setShowAnnotationNotes(false);
setAnnotationNotes([]);
if (style && color) {
@@ -612,6 +613,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
if (!cfi) return;
const style = highlightStyle || settings.globalReadSettings.highlightStyle;
const color = settings.globalReadSettings.highlightStyles[style];
setSelectedStyle(style);
setSelectedColor(color);
const annotation: BookNote = {
id: uniqueId(),
type: 'annotation',