[editor] Introduce a proper annotationEditorMode option/preference (PR 15075 follow-up)

extensions/chromium/preferences_schema.json

@@ -160,9 +160,9 @@
       ],
       "default": 2
     },
-    "annotationEditorEnabled": {
-      "type": "boolean",
-      "default": false
+    "annotationEditorMode": {
+      "type": "integer",
+      "default": -1
     },
     "enablePermissions": {
       "type": "boolean",

l10n/en-US/viewer.properties

@@ -258,7 +258,7 @@ editor_free_text_label=FreeText Annotation
 editor_ink.title=Add Ink Annotation
 editor_ink_label=Ink Annotation
 
-freetext_default_content=Enter some text…
+freetext_default_content=Enter text…
 
 # Editor Parameters
 editor_free_text_font_color=Font Color

src/shared/util.js

@@ -55,6 +55,7 @@ const AnnotationMode = {
 const AnnotationEditorPrefix = "pdfjs_internal_editor_";
 
 const AnnotationEditorType = {
+  DISABLE: -1,
   NONE: 0,
   FREETEXT: 3,
   INK: 15,

web/app.js

@@ -34,9 +34,8 @@ import {
   SpreadMode,
   TextLayerMode,
 } from "./ui_utils.js";
-import { AppOptions, OptionKind } from "./app_options.js";
-import { AutomationEventBus, EventBus } from "./event_utils.js";
 import {
+  AnnotationEditorType,
   build,
   createPromiseCapability,
   getDocument,
@@ -54,6 +53,8 @@ import {
   UNSUPPORTED_FEATURES,
   version,
 } from "pdfjs-lib";
+import { AppOptions, OptionKind } from "./app_options.js";
+import { AutomationEventBus, EventBus } from "./event_utils.js";
 import { CursorTool, PDFCursorTools } from "./pdf_cursor_tools.js";
 import { LinkTarget, PDFLinkService } from "./pdf_link_service.js";
 import { AnnotationEditorParams } from "./annotation_editor_params.js";
@@ -510,7 +511,7 @@ const PDFViewerApplication = {
 
     const container = appConfig.mainContainer,
       viewer = appConfig.viewerContainer;
-    const annotationEditorEnabled = AppOptions.get("annotationEditorEnabled");
+    const annotationEditorMode = AppOptions.get("annotationEditorMode");
     const pageColors = {
       background: AppOptions.get("pageColorsBackground"),
       foreground: AppOptions.get("pageColorsForeground"),
@@ -534,7 +535,7 @@ const PDFViewerApplication = {
       l10n: this.l10n,
       textLayerMode: AppOptions.get("textLayerMode"),
       annotationMode: AppOptions.get("annotationMode"),
-      annotationEditorEnabled,
+      annotationEditorMode,
       imageResourcesPath: AppOptions.get("imageResourcesPath"),
       enablePrintAutoRotate: AppOptions.get("enablePrintAutoRotate"),
       useOnlyCssZoom: AppOptions.get("useOnlyCssZoom"),
@@ -570,7 +571,7 @@ const PDFViewerApplication = {
       this.findBar = new PDFFindBar(appConfig.findBar, eventBus, this.l10n);
     }
 
-    if (annotationEditorEnabled) {
+    if (annotationEditorMode !== AnnotationEditorType.DISABLE) {
       this.annotationEditorParams = new AnnotationEditorParams(
         appConfig.annotationEditorParams,
         eventBus

web/app_options.js

@@ -59,11 +59,12 @@ const OptionKind = {
  *       primitive types and cannot rely on any imported types.
  */
 const defaultOptions = {
-  annotationEditorEnabled: {
+  annotationEditorMode: {
     /** @type {boolean} */
     value:
-      typeof PDFJSDev === "undefined" ||
-      PDFJSDev.test("!PRODUCTION || TESTING"),
+      typeof PDFJSDev === "undefined" || PDFJSDev.test("!PRODUCTION || TESTING")
+        ? 0
+        : -1,
     kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
   },
   annotationMode: {

web/base_viewer.js

@@ -86,7 +86,10 @@ const PagesCountLimit = {
 };
 
 function isValidAnnotationEditorMode(mode) {
-  return Object.values(AnnotationEditorType).includes(mode);
+  return (
+    Object.values(AnnotationEditorType).includes(mode) &&
+    mode !== AnnotationEditorType.DISABLE
+  );
 }
 
 /**
@@ -113,8 +116,9 @@ function isValidAnnotationEditorMode(mode) {
  *   being rendered. The constants from {@link AnnotationMode} should be used;
  *   see also {@link RenderParameters} and {@link GetOperatorListParameters}.
  *   The default value is `AnnotationMode.ENABLE_FORMS`.
- * @property {boolean} [annotationEditorEnabled] - Enables the creation and
- *   editing of new Annotations.
+ * @property {boolean} [annotationEditorMode] - Enables the creation and editing
+ *   of new Annotations. The constants from {@link AnnotationEditorType} should
+ *   be used. The default value is `AnnotationEditorType.DISABLE`.
  * @property {string} [imageResourcesPath] - Path for image resources, mainly
  *   mainly for annotation icons. Include trailing slash.
  * @property {boolean} [enablePrintAutoRotate] - Enables automatic rotation of
@@ -213,7 +217,7 @@ class PDFPageViewBuffer {
 class BaseViewer {
   #buffer = null;
 
-  #annotationEditorMode = AnnotationEditorType.NONE;
+  #annotationEditorMode = AnnotationEditorType.DISABLE;
 
   #annotationEditorUIManager = null;
 
@@ -273,9 +277,8 @@ class BaseViewer {
     this.textLayerMode = options.textLayerMode ?? TextLayerMode.ENABLE;
     this.#annotationMode =
       options.annotationMode ?? AnnotationMode.ENABLE_FORMS;
-    this.#annotationEditorMode = options.annotationEditorEnabled
-      ? AnnotationEditorType.NONE
-      : null;
+    this.#annotationEditorMode =
+      options.annotationEditorMode ?? AnnotationEditorType.DISABLE;
     this.imageResourcesPath = options.imageResourcesPath || "";
     this.enablePrintAutoRotate = options.enablePrintAutoRotate || false;
     this.renderer = options.renderer || RendererType.CANVAS;
@@ -560,7 +563,7 @@ class BaseViewer {
     }
 
     if (!permissions.includes(PermissionFlag.MODIFY_CONTENTS)) {
-      params.annotationEditorMode = null;
+      params.annotationEditorMode = AnnotationEditorType.DISABLE;
     }
 
     if (
@@ -710,19 +713,26 @@ class BaseViewer {
         const { annotationEditorMode, annotationMode, textLayerMode } =
           this.#initializePermissions(permissions);
 
-        if (annotationEditorMode !== null) {
+        if (annotationEditorMode !== AnnotationEditorType.DISABLE) {
+          const mode = annotationEditorMode;
+
           if (isPureXfa) {
             console.warn("Warning: XFA-editing is not implemented.");
-          } else {
+          } else if (isValidAnnotationEditorMode(mode)) {
             // Ensure that the Editor buttons, in the toolbar, are updated.
             this.eventBus.dispatch("annotationeditormodechanged", {
               source: this,
-              mode: annotationEditorMode,
+              mode,
             });
 
             this.#annotationEditorUIManager = new AnnotationEditorUIManager(
               this.eventBus
             );
+            if (mode !== AnnotationEditorType.NONE) {
+              this.#annotationEditorUIManager.updateMode(mode);
+            }
+          } else {
+            console.error(`Invalid AnnotationEditor mode: ${mode}`);
           }
         }
 
@@ -885,9 +895,6 @@ class BaseViewer {
   }
 
   _resetView() {
-    if (this.#annotationEditorMode !== null) {
-      this.#annotationEditorMode = AnnotationEditorType.NONE;
-    }
     this.#annotationEditorUIManager = null;
     this._pages = [];
     this._currentPageNumber = 1;
@@ -2142,7 +2149,7 @@ class BaseViewer {
   }
 
   /**
-   * @type {number | null}
+   * @type {number}
    */
   get annotationEditorMode() {
     return this.#annotationEditorMode;

web/l10n_utils.js

@@ -82,7 +82,7 @@ const DEFAULT_L10N_STRINGS = {
   web_fonts_disabled:
     "Web fonts are disabled: unable to use embedded PDF fonts.",
 
-  freetext_default_content: "Enter some text…",
+  freetext_default_content: "Enter text…",
 };
 
 function getL10nFallback(key, args) {

web/viewer.html

@@ -151,11 +151,11 @@
           <div class="editorParamsToolbarContainer">
             <div class="editorParamsSetter">
               <label for="editorFreeTextColor" class="editorParamsLabel" data-l10n-id="editor_free_text_font_color">Font Color</label>
-              <input type="color" id="editorFreeTextColor" name="fontColor" class="editorParamsColor" tabindex="100">
+              <input type="color" id="editorFreeTextColor" class="editorParamsColor" tabindex="100">
             </div>
             <div class="editorParamsSetter">
               <label for="editorFreeTextFontSize" class="editorParamsLabel" data-l10n-id="editor_free_text_font_size">Font Size</label>
-              <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" name="fontSize" value="10" min="5" max="100" step="1" tabindex="101">
+              <input type="range" id="editorFreeTextFontSize" class="editorParamsSlider" value="10" min="5" max="100" step="1" tabindex="101">
             </div>
           </div>
         </div>
@@ -164,11 +164,11 @@
           <div class="editorParamsToolbarContainer">
             <div class="editorParamsSetter">
               <label for="editorInkColor" class="editorParamsLabel" data-l10n-id="editor_ink_line_color">Line Color</label>
-              <input type="color" id="editorInkColor" name="inkColor" class="editorParamsColor" tabindex="102">
+              <input type="color" id="editorInkColor" class="editorParamsColor" tabindex="102">
             </div>
             <div class="editorParamsSetter">
               <label for="editorInkThickness" class="editorParamsLabel" data-l10n-id="editor_ink_line_thickness">Line Thickness</label>
-              <input type="range" id="editorInkThickness" class="editorParamsSlider" name="lineThickness" value="1" min="1" max="20" step="1" tabindex="103">
+              <input type="range" id="editorInkThickness" class="editorParamsSlider" value="1" min="1" max="20" step="1" tabindex="103">
             </div>
           </div>
         </div>