[Editor] Add a color picker with predefined colors for highlighting text (bug 1866434)

The doorhanger for highlighting has a basic color picker composed of 5 predefined colors
to set the default color to use.
These colors can be changed thanks to a preference for now but it's something which could
be changed in the Firefox settings in the future.
Each highlight has in its own toolbar a color picker to just change its color.
The different color pickers are so similar (modulo few differences in their styles) that
this patch introduces a new class ColorPicker which provides a color picker component
which could be reused in future editors.
All in all, a large part of this patch is dedicated to color picker itself and its style
and the rest is almost a matter of wiring the component.
This commit is contained in:
Calixte Denizet 2023-11-30 16:21:13 +01:00
parent c0436013a0
commit ff23d37fa2
22 changed files with 573 additions and 87 deletions

View file

@ -109,6 +109,8 @@ function isValidAnnotationEditorMode(mode) {
* @property {number} [annotationEditorMode] - Enables the creation and editing
* of new Annotations. The constants from {@link AnnotationEditorType} should
* be used. The default value is `AnnotationEditorType.NONE`.
* @property {string} [annotationEditorHighlightColors] - A comma separated list
* of colors to propose to highlight some text in the pdf.
* @property {string} [imageResourcesPath] - Path for image resources, mainly
* mainly for annotation icons. Include trailing slash.
* @property {boolean} [enablePrintAutoRotate] - Enables automatic rotation of
@ -202,6 +204,8 @@ class PDFViewer {
#altTextManager = null;
#annotationEditorHighlightColors = null;
#annotationEditorMode = AnnotationEditorType.NONE;
#annotationEditorUIManager = null;
@ -276,6 +280,8 @@ class PDFViewer {
options.annotationMode ?? AnnotationMode.ENABLE_FORMS;
this.#annotationEditorMode =
options.annotationEditorMode ?? AnnotationEditorType.NONE;
this.#annotationEditorHighlightColors =
options.annotationEditorHighlightColors || null;
this.imageResourcesPath = options.imageResourcesPath || "";
this.enablePrintAutoRotate = options.enablePrintAutoRotate || false;
if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
@ -862,8 +868,13 @@ class PDFViewer {
this.#altTextManager,
this.eventBus,
pdfDocument,
this.pageColors
this.pageColors,
this.#annotationEditorHighlightColors
);
this.eventBus.dispatch("annotationeditoruimanager", {
source: this,
uiManager: this.#annotationEditorUIManager,
});
if (mode !== AnnotationEditorType.NONE) {
this.#annotationEditorUIManager.updateMode(mode);
}