feat(annotation): add/update/delete/filter tags in publication annota…

…tions (Fixes #2524 PR #2538)

src/common/redux/actions/reader/annotations/update.ts

@@ -12,14 +12,14 @@ export const ID = "READER_ANNOTATIONS_UPDATE";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 // interface IPayload extends Pick<IAnnotationState, "color"|"comment"|"uuid"> {
-interface IPayload extends IAnnotationState {
-}
-export function build(param: IAnnotationState):
+type IPayload = [IAnnotationState, IAnnotationState];
+
+export function build(oldAnnotation: IAnnotationState, newAnnotation: IAnnotationState):
     Action<typeof ID, IPayload> {
 
     return {
         type: ID,
-        payload: param,
+        payload: [oldAnnotation, newAnnotation],
     };
 }
 build.toString = () => ID; // Redux StringableActionCreator

src/common/redux/states/renderer/annotation.ts

@@ -22,6 +22,7 @@ export interface IAnnotationState {
     comment: string;
     color: IColor;
     drawType: TDrawType;
+    tags?: string[] | undefined;
 }
 
 export type TAnnotationState = TPQueueState<number, IAnnotationState>;
@@ -42,3 +43,5 @@ export interface IAnnotationReaderConfigState {
     annotation_defaultDrawType: TDrawType;
     annotation_defaultDrawView: TDrawView;
 }
+
+export type TAnnotationTagsIndex = Record<string, number>;

src/common/redux/states/renderer/readerRootState.ts

@@ -18,7 +18,7 @@ import { LocatorExtended } from "@r2-navigator-js/electron/renderer";
 
 import { TBookmarkState } from "../bookmark";
 import { IRTLFlipState } from "./rtlFlip";
-import { IAnnotationModeState, TAnnotationState } from "./annotation";
+import { IAnnotationModeState, TAnnotationState, TAnnotationTagsIndex } from "./annotation";
 import { ITTSState } from "readium-desktop/renderer/reader/redux/state/tts";
 import { IMediaOverlayState } from "readium-desktop/renderer/reader/redux/state/mediaOverlay";
 import { IAllowCustomConfigState } from "readium-desktop/renderer/reader/redux/state/allowCustom";
@@ -29,6 +29,7 @@ export interface IReaderRootState extends IRendererCommonRootState {
     search: ISearchState;
     mode: ReaderMode;
     annotation: IAnnotationModeState;
+    annotationTagsIndex: TAnnotationTagsIndex;
 }
 
 export interface IReaderStateReader {

src/common/rgb.ts

@@ -0,0 +1,14 @@
+// ==LICENSE-BEGIN==
+// Copyright 2017 European Digital Reading Lab. All rights reserved.
+// Licensed to the Readium Foundation under one or more contributor license agreements.
+// Use of this source code is governed by a BSD-style license
+// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
+// ==LICENSE-END==
+
+export function rgbToHex(color: { red: number; green: number; blue: number }): string {
+    const { red, green, blue } = color;
+    const redHex = Math.min(255, Math.max(0, red)).toString(16).padStart(2, "0");
+    const greenHex = Math.min(255, Math.max(0, green)).toString(16).padStart(2, "0");
+    const blueHex = Math.min(255, Math.max(0, blue)).toString(16).padStart(2, "0");
+    return `#${redHex}${greenHex}${blueHex}`;
+}

src/main/w3c/annotation/converter.ts

@@ -10,14 +10,7 @@ import { v4 as uuidv4 } from "uuid";
 import { _APP_NAME, _APP_VERSION } from "readium-desktop/preprocessor-directives";
 import { PublicationView } from "readium-desktop/common/views/publication";
 import { IAnnotationState } from "readium-desktop/common/redux/states/renderer/annotation";
-
-function rgbToHex(color: { red: number; green: number; blue: number }): string {
-    const { red, green, blue } = color;
-    const redHex = Math.min(255, Math.max(0, red)).toString(16).padStart(2, "0");
-    const greenHex = Math.min(255, Math.max(0, green)).toString(16).padStart(2, "0");
-    const blueHex = Math.min(255, Math.max(0, blue)).toString(16).padStart(2, "0");
-    return `#${redHex}${greenHex}${blueHex}`;
-}
+import { rgbToHex } from "readium-desktop/common/rgb";
 
 export function convertAnnotationToW3CAnnotationModel(annotation: IAnnotationState): IW3CAnnotationModel {