[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

@ -13,7 +13,7 @@
* limitations under the License.
*/
import { AnnotationEditorType, noContextMenu } from "pdfjs-lib";
import { AnnotationEditorType, ColorPicker, noContextMenu } from "pdfjs-lib";
import {
DEFAULT_SCALE,
DEFAULT_SCALE_VALUE,
@ -120,9 +120,24 @@ class Toolbar {
// Bind the event listeners for click and various other actions.
this.#bindListeners(options);
if (options.editorHighlightColorPicker) {
this.eventBus._on("annotationeditoruimanager", ({ uiManager }) => {
this.#setAnnotationEditorUIManager(
uiManager,
options.editorHighlightColorPicker
);
});
}
this.reset();
}
#setAnnotationEditorUIManager(uiManager, parentContainer) {
const colorPicker = new ColorPicker({ uiManager });
uiManager.setMainHighlightColorPicker(colorPicker);
parentContainer.append(colorPicker.renderMainDropdown());
}
setPageNumber(pageNumber, pageLabel) {
this.pageNumber = pageNumber;
this.pageLabel = pageLabel;