Merge pull request #18134 from calixteman/hide_annotations

[api-minor][Editor] When switching to editing mode, redraw pages containing editable annotations (bug 1883884)

src/core/annotation.js

@@ -680,6 +680,7 @@ class Annotation {
       hasOwnCanvas: false,
       noRotate: !!(this.flags & AnnotationFlag.NOROTATE),
       noHTML: isLocked && isContentLocked,
+      isEditable: false,
     };
 
     if (params.collectFields) {
@@ -776,6 +777,10 @@ class Annotation {
     return this.printable;
   }
 
+  mustBeViewedWhenEditing() {
+    return !this.data.isEditable;
+  }
+
   /**
    * @type {boolean}
    */
@@ -3802,7 +3807,8 @@ class FreeTextAnnotation extends MarkupAnnotation {
     // It uses its own canvas in order to be hidden if edited.
     // But if it has the noHTML flag, it means that we don't want to be able
     // to modify it so we can just draw it on the main canvas.
-    this.data.hasOwnCanvas = !this.data.noHTML;
+    this.data.hasOwnCanvas = this.data.noRotate;
+    this.data.isEditable = !this.data.noHTML;
     // We want to be able to add mouse listeners to the annotation.
     this.data.noHTML = false;
 

src/core/document.js

@@ -411,6 +411,8 @@ class Page {
     intent,
     cacheKey,
     annotationStorage = null,
+    isEditing = false,
+    modifiedIds = null,
   }) {
     const contentStreamPromise = this.getContentStream();
     const resourcesPromise = this.loadResources([
@@ -579,7 +581,9 @@ class Page {
         if (
           intentAny ||
           (intentDisplay &&
-            annotation.mustBeViewed(annotationStorage, renderForms)) ||
+            annotation.mustBeViewed(annotationStorage, renderForms) &&
+            ((isEditing && annotation.mustBeViewedWhenEditing()) ||
+              (!isEditing && !modifiedIds?.has(annotation.data.id)))) ||
           (intentPrint && annotation.mustBePrinted(annotationStorage))
         ) {
           opListPromises.push(

src/core/worker.js

@@ -752,6 +752,8 @@ class WorkerMessageHandler {
             intent: data.intent,
             cacheKey: data.cacheKey,
             annotationStorage: data.annotationStorage,
+            isEditing: data.isEditing,
+            modifiedIds: data.modifiedIds,
           })
           .then(
             function (operatorListInfo) {

src/display/annotation_layer.js

@@ -198,6 +198,10 @@ class AnnotationElement {
     return !!(titleObj?.str || contentsObj?.str || richText?.str);
   }
 
+  get _isEditable() {
+    return this.data.isEditable;
+  }
+
   get hasPopupData() {
     return AnnotationElement._hasPopupData(this.data);
   }
@@ -734,10 +738,6 @@ class AnnotationElement {
     }
   }
 
-  get _isEditable() {
-    return false;
-  }
-
   _editOnDoubleClick() {
     if (!this._isEditable) {
       return;
@@ -2530,10 +2530,6 @@ class FreeTextAnnotationElement extends AnnotationElement {
 
     return this.container;
   }
-
-  get _isEditable() {
-    return this.data.hasOwnCanvas;
-  }
 }
 
 class LineAnnotationElement extends AnnotationElement {
@@ -3107,6 +3103,10 @@ class AnnotationLayer {
     }
   }
 
+  hasEditableAnnotations() {
+    return this.#editableAnnotations.size > 0;
+  }
+
   #appendElement(element, id) {
     const contentElement = element.firstChild || element;
     contentElement.id = `${AnnotationPrefix}${id}`;
@@ -3188,7 +3188,7 @@ class AnnotationLayer {
       }
       this.#appendElement(rendered, data.id);
 
-      if (element.annotationEditorType > 0) {
+      if (element._isEditable) {
         this.#editableAnnotations.set(element.data.id, element);
         this._annotationEditorUIManager?.renderAnnotationElement(element);
       }

src/display/annotation_storage.js

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { objectFromMap, unreachable } from "../shared/util.js";
+import { objectFromMap, shadow, unreachable } from "../shared/util.js";
 import { AnnotationEditor } from "./editor/editor.js";
 import { MurmurHash3_64 } from "../shared/murmurhash3.js";
 
@@ -29,6 +29,8 @@ const SerializableEmpty = Object.freeze({
 class AnnotationStorage {
   #modified = false;
 
+  #modifiedIds = null;
+
   #storage = new Map();
 
   constructor() {
@@ -248,6 +250,34 @@ class AnnotationStorage {
     }
     return stats;
   }
+
+  resetModifiedIds() {
+    this.#modifiedIds = null;
+  }
+
+  /**
+   * @returns {{ids: Set<string>, hash: string}}
+   */
+  get modifiedIds() {
+    if (this.#modifiedIds) {
+      return this.#modifiedIds;
+    }
+    const ids = [];
+    for (const value of this.#storage.values()) {
+      if (
+        !(value instanceof AnnotationEditor) ||
+        !value.annotationElementId ||
+        !value.serialize()
+      ) {
+        continue;
+      }
+      ids.push(value.annotationElementId);
+    }
+    return (this.#modifiedIds = {
+      ids: new Set(ids),
+      hash: ids.join(","),
+    });
+  }
 }
 
 /**
@@ -282,6 +312,13 @@ class PrintAnnotationStorage extends AnnotationStorage {
   get serializable() {
     return this.#serializable;
   }
+
+  get modifiedIds() {
+    return shadow(this, "modifiedIds", {
+      ids: new Set(),
+      hash: "",
+    });
+  }
 }
 
 export { AnnotationStorage, PrintAnnotationStorage, SerializableEmpty };

src/display/api.js

@@ -1227,6 +1227,7 @@ class PDFDocumentProxy {
  * @property {Map<string, HTMLCanvasElement>} [annotationCanvasMap] - Map some
  *   annotation ids with canvases used to render them.
  * @property {PrintAnnotationStorage} [printAnnotationStorage]
+ * @property {boolean} [isEditing] - Render the page in editing mode.
  */
 
 /**
@@ -1248,6 +1249,7 @@ class PDFDocumentProxy {
  *      from the {@link AnnotationStorage}-instance; useful e.g. for printing.
  *   The default value is `AnnotationMode.ENABLE`.
  * @property {PrintAnnotationStorage} [printAnnotationStorage]
+ * @property {boolean} [isEditing] - Render the page in editing mode.
  */
 
 /**
@@ -1420,13 +1422,15 @@ class PDFPageProxy {
     annotationCanvasMap = null,
     pageColors = null,
     printAnnotationStorage = null,
+    isEditing = false,
   }) {
     this._stats?.time("Overall");
 
     const intentArgs = this._transport.getRenderingIntent(
       intent,
       annotationMode,
-      printAnnotationStorage
+      printAnnotationStorage,
+      isEditing
     );
     const { renderingIntent, cacheKey } = intentArgs;
     // If there was a pending destroy, cancel it so no cleanup happens during
@@ -1560,6 +1564,7 @@ class PDFPageProxy {
     intent = "display",
     annotationMode = AnnotationMode.ENABLE,
     printAnnotationStorage = null,
+    isEditing = false,
   } = {}) {
     if (typeof PDFJSDev !== "undefined" && !PDFJSDev.test("GENERIC")) {
       throw new Error("Not implemented: getOperatorList");
@@ -1576,6 +1581,7 @@ class PDFPageProxy {
       intent,
       annotationMode,
       printAnnotationStorage,
+      isEditing,
       /* isOpList = */ true
     );
     let intentState = this._intentStates.get(intentArgs.cacheKey);
@@ -1812,6 +1818,8 @@ class PDFPageProxy {
     renderingIntent,
     cacheKey,
     annotationStorageSerializable,
+    isEditing,
+    modifiedIds,
   }) {
     if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
       assert(
@@ -1828,6 +1836,8 @@ class PDFPageProxy {
         intent: renderingIntent,
         cacheKey,
         annotationStorage: map,
+        isEditing,
+        modifiedIds,
       },
       transfer
     );
@@ -2420,6 +2430,7 @@ class WorkerTransport {
     intent,
     annotationMode = AnnotationMode.ENABLE,
     printAnnotationStorage = null,
+    isEditing = false,
     isOpList = false
   ) {
     let renderingIntent = RenderingIntentFlag.DISPLAY; // Default value.
@@ -2438,6 +2449,12 @@ class WorkerTransport {
         warn(`getRenderingIntent - invalid intent: ${intent}`);
     }
 
+    const annotationStorage =
+      renderingIntent & RenderingIntentFlag.PRINT &&
+      printAnnotationStorage instanceof PrintAnnotationStorage
+        ? printAnnotationStorage
+        : this.annotationStorage;
+
     switch (annotationMode) {
       case AnnotationMode.DISABLE:
         renderingIntent += RenderingIntentFlag.ANNOTATIONS_DISABLE;
@@ -2450,12 +2467,6 @@ class WorkerTransport {
       case AnnotationMode.ENABLE_STORAGE:
         renderingIntent += RenderingIntentFlag.ANNOTATIONS_STORAGE;
 
-        const annotationStorage =
-          renderingIntent & RenderingIntentFlag.PRINT &&
-          printAnnotationStorage instanceof PrintAnnotationStorage
-            ? printAnnotationStorage
-            : this.annotationStorage;
-
         annotationStorageSerializable = annotationStorage.serializable;
         break;
       default:
@@ -2466,10 +2477,22 @@ class WorkerTransport {
       renderingIntent += RenderingIntentFlag.OPLIST;
     }
 
+    const { ids: modifiedIds, hash: modifiedIdsHash } =
+      annotationStorage.modifiedIds;
+
+    const cacheKeyBuf = [
+      renderingIntent,
+      annotationStorageSerializable.hash,
+      isEditing ? 1 : 0,
+      modifiedIdsHash,
+    ];
+
     return {
       renderingIntent,
-      cacheKey: `${renderingIntent}_${annotationStorageSerializable.hash}`,
+      cacheKey: cacheKeyBuf.join("_"),
       annotationStorageSerializable,
+      isEditing,
+      modifiedIds,
     };
   }
 

test/integration/annotation_spec.mjs

@@ -503,6 +503,14 @@ describe("ResetForm action", () => {
       it("must check that the Ink annotation has a popup", async () => {
         await Promise.all(
           pages.map(async ([browserName, page]) => {
+            if (browserName) {
+              // TODO
+              pending(
+                "Re-enable this test when the Ink annotation has been made editable."
+              );
+              return;
+            }
+
             await page.waitForFunction(
               `document.querySelector("[data-annotation-id='25R']").hidden === false`
             );

test/integration/freetext_editor_spec.mjs

@@ -45,6 +45,7 @@ import {
   scrollIntoView,
   switchToEditor,
   waitForAnnotationEditorLayer,
+  waitForAnnotationModeChanged,
   waitForSelectedEditor,
   waitForSerialized,
   waitForStorageEntries,
@@ -987,6 +988,29 @@ describe("FreeText Editor", () => {
         pages.map(async ([browserName, page]) => {
           await switchToFreeText(page);
 
+          const isEditorWhite = editorRect =>
+            page.evaluate(rect => {
+              const canvas = document.querySelector(".canvasWrapper canvas");
+              const ctx = canvas.getContext("2d");
+              rect ||= {
+                x: 0,
+                y: 0,
+                width: canvas.width,
+                height: canvas.height,
+              };
+              const { data } = ctx.getImageData(
+                rect.x,
+                rect.y,
+                rect.width,
+                rect.height
+              );
+              return data.every(x => x === 0xff);
+            }, editorRect);
+
+          // The page has been re-rendered but with no freetext annotations.
+          let isWhite = await isEditorWhite();
+          expect(isWhite).withContext(`In ${browserName}`).toBeTrue();
+
           let editorIds = await getEditors(page, "freeText");
           expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
 
@@ -1041,11 +1065,9 @@ describe("FreeText Editor", () => {
           // canvas.
           editorIds = await getEditors(page, "freeText");
           expect(editorIds.length).withContext(`In ${browserName}`).toEqual(1);
-          const hidden = await page.$eval(
+
-            "[data-annotation-id='26R'] canvas",
+          isWhite = await isEditorWhite(editorRect);
-            el => getComputedStyle(el).display === "none"
+          expect(isWhite).withContext(`In ${browserName}`).toBeTrue();
-          );
-          expect(hidden).withContext(`In ${browserName}`).toBeTrue();
 
           // Check we've now a div containing the text.
           const newDivText = await page.$eval(
@@ -1288,10 +1310,12 @@ describe("FreeText Editor", () => {
       await closePages(pages);
     });
 
-    it("must move an annotation", async () => {
+    it("must edit an annotation", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
+          const modeChangedHandle = await waitForAnnotationModeChanged(page);
           await page.click("[data-annotation-id='26R']", { count: 2 });
+          await awaitPromise(modeChangedHandle);
           await page.waitForSelector(`${getEditorSelector(0)}-editor`);
 
           const [focusedId, editable] = await page.evaluate(() => {
@@ -1347,6 +1371,7 @@ describe("FreeText Editor", () => {
 
           // TODO: remove this when we switch to BiDi.
           await hover(page, "[data-annotation-id='23R']");
+
           // Wait for the popup to be displayed.
           await page.waitForFunction(
             () =>
@@ -1588,12 +1613,6 @@ describe("FreeText Editor", () => {
     it("must open an existing annotation and check that the position are good", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          await switchToFreeText(page);
-
-          await page.evaluate(() => {
-            document.getElementById("editorFreeTextParamsToolbar").remove();
-          });
-
           const toBinary = buf => {
             for (let i = 0; i < buf.length; i += 4) {
               const gray =
@@ -1646,8 +1665,12 @@ describe("FreeText Editor", () => {
             return null;
           };
 
-          for (const n of [0, 1, 2, 3, 4]) {
+          const firstPixelsAnnotations = new Map();
-            const rect = await getRect(page, getEditorSelector(n));
+
+          // [26, 32, ...] are the annotation ids
+          for (const n of [26, 32, 42, 57, 35, 1]) {
+            const id = `${n}R`;
+            const rect = await getRect(page, `[data-annotation-id="${id}"]`);
             const editorPng = await page.screenshot({
               clip: rect,
               type: "png",
@@ -1658,33 +1681,33 @@ describe("FreeText Editor", () => {
               editorImage.width,
               editorImage.height
             );
+            firstPixelsAnnotations.set(id, { editorFirstPix, rect });
+          }
 
+          await switchToFreeText(page);
+
+          await page.evaluate(() => {
+            document.getElementById("editorFreeTextParamsToolbar").remove();
+          });
+
+          for (const n of [0, 1, 2, 3, 4]) {
             const annotationId = await page.evaluate(N => {
               const editor = document.getElementById(
                 `pdfjs_internal_editor_${N}`
               );
-              const annId = editor.getAttribute("annotation-id");
+              return editor.getAttribute("annotation-id");
-              const annotation = document.querySelector(
-                `[data-annotation-id="${annId}"]`
-              );
-              editor.hidden = true;
-              annotation.hidden = false;
-              return annId;
             }, n);
-            await page.waitForSelector(`${getEditorSelector(n)}[hidden]`);
+            const { editorFirstPix: annotationFirstPix, rect } =
-            await page.waitForSelector(
+              firstPixelsAnnotations.get(annotationId);
-              `[data-annotation-id="${annotationId}"]:not([hidden])`
+            const editorPng = await page.screenshot({
-            );
-
-            const annotationPng = await page.screenshot({
               clip: rect,
               type: "png",
             });
-            const annotationImage = PNG.sync.read(annotationPng);
+            const editorImage = PNG.sync.read(editorPng);
-            const annotationFirstPix = getFirstPixel(
+            const editorFirstPix = getFirstPixel(
-              annotationImage.data,
+              editorImage.data,
-              annotationImage.width,
+              editorImage.width,
-              annotationImage.height
+              editorImage.height
             );
 
             expect(
@@ -1719,12 +1742,6 @@ describe("FreeText Editor", () => {
     it("must open an existing rotated annotation and check that the position are good", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {
-          await switchToFreeText(page);
-
-          await page.evaluate(() => {
-            document.getElementById("editorFreeTextParamsToolbar").remove();
-          });
-
           const toBinary = buf => {
             for (let i = 0; i < buf.length; i += 4) {
               const gray =
@@ -1806,13 +1823,15 @@ describe("FreeText Editor", () => {
             return null;
           };
 
+          const firstPixelsAnnotations = new Map();
           for (const [n, start] of [
-            [0, "BL"],
+            [17, "BL"],
-            [1, "BR"],
+            [18, "BR"],
-            [2, "TR"],
+            [19, "TR"],
-            [3, "TL"],
+            [20, "TL"],
           ]) {
-            const rect = await getRect(page, getEditorSelector(n));
+            const id = `${n}R`;
+            const rect = await getRect(page, `[data-annotation-id="${id}"]`);
             const editorPng = await page.screenshot({
               clip: rect,
               type: "png",
@@ -1824,33 +1843,38 @@ describe("FreeText Editor", () => {
               editorImage.height,
               start
             );
+            firstPixelsAnnotations.set(id, { editorFirstPix, rect });
+          }
 
+          await switchToFreeText(page);
+
+          await page.evaluate(() => {
+            document.getElementById("editorFreeTextParamsToolbar").remove();
+          });
+
+          for (const [n, start] of [
+            [0, "BL"],
+            [1, "BR"],
+            [2, "TR"],
+            [3, "TL"],
+          ]) {
             const annotationId = await page.evaluate(N => {
               const editor = document.getElementById(
                 `pdfjs_internal_editor_${N}`
               );
-              const annId = editor.getAttribute("annotation-id");
+              return editor.getAttribute("annotation-id");
-              const annotation = document.querySelector(
-                `[data-annotation-id="${annId}"]`
-              );
-              editor.hidden = true;
-              annotation.hidden = false;
-              return annId;
             }, n);
-            await page.waitForSelector(`${getEditorSelector(n)}[hidden]`);
+            const { editorFirstPix: annotationFirstPix, rect } =
-            await page.waitForSelector(
+              firstPixelsAnnotations.get(annotationId);
-              `[data-annotation-id="${annotationId}"]:not([hidden])`
+            const editorPng = await page.screenshot({
-            );
-
-            const annotationPng = await page.screenshot({
               clip: rect,
               type: "png",
             });
-            const annotationImage = PNG.sync.read(annotationPng);
+            const editorImage = PNG.sync.read(editorPng);
-            const annotationFirstPix = getFirstPixel(
+            const editorFirstPix = getFirstPixel(
-              annotationImage.data,
+              editorImage.data,
-              annotationImage.width,
+              editorImage.width,
-              annotationImage.height,
+              editorImage.height,
               start
             );
 
@@ -3552,13 +3576,6 @@ describe("FreeText Editor", () => {
             );
           }
 
-          await page.waitForSelector("[data-annotation-id='998R'] canvas");
-          let hidden = await page.$eval(
-            "[data-annotation-id='998R'] canvas",
-            el => getComputedStyle(el).display === "none"
-          );
-          expect(hidden).withContext(`In ${browserName}`).toBeTrue();
-
           // Check we've now a div containing the text.
           await page.waitForSelector(
             "[data-annotation-id='998R'] div.annotationContent"
@@ -3571,6 +3588,24 @@ describe("FreeText Editor", () => {
             .withContext(`In ${browserName}`)
             .toEqual("Hello World and edited in Firefox");
 
+          // Check that the canvas has nothing drawn at the annotation position.
+          await page.$eval(
+            "[data-annotation-id='998R']",
+            el => (el.hidden = true)
+          );
+          let editorPng = await page.screenshot({
+            clip: editorRect,
+            type: "png",
+          });
+          await page.$eval(
+            "[data-annotation-id='998R']",
+            el => (el.hidden = false)
+          );
+          let editorImage = PNG.sync.read(editorPng);
+          expect(editorImage.data.every(x => x === 0xff))
+            .withContext(`In ${browserName}`)
+            .toBeTrue();
+
           const oneToThirteen = Array.from(new Array(13).keys(), n => n + 2);
           for (const pageNumber of oneToThirteen) {
             await scrollIntoView(
@@ -3587,6 +3622,19 @@ describe("FreeText Editor", () => {
           await switchToFreeText(page, /* disable = */ true);
 
           const thirteenToOne = Array.from(new Array(13).keys(), n => 13 - n);
+          const handlePromise = await createPromise(page, resolve => {
+            const callback = e => {
+              if (e.source.id === 1) {
+                window.PDFViewerApplication.eventBus.off(
+                  "pagerendered",
+                  callback
+                );
+                resolve();
+              }
+            };
+            window.PDFViewerApplication.eventBus.on("pagerendered", callback);
+          });
+
           for (const pageNumber of thirteenToOne) {
             await scrollIntoView(
               page,
@@ -3594,12 +3642,16 @@ describe("FreeText Editor", () => {
             );
           }
 
-          await page.waitForSelector("[data-annotation-id='998R'] canvas");
+          await awaitPromise(handlePromise);
-          hidden = await page.$eval(
+
-            "[data-annotation-id='998R'] canvas",
+          editorPng = await page.screenshot({
-            el => getComputedStyle(el).display === "none"
+            clip: editorRect,
-          );
+            type: "png",
-          expect(hidden).withContext(`In ${browserName}`).toBeFalse();
+          });
+          editorImage = PNG.sync.read(editorPng);
+          expect(editorImage.data.every(x => x === 0xff))
+            .withContext(`In ${browserName}`)
+            .toBeFalse();
         })
       );
     });

test/integration/stamp_editor_spec.mjs

@@ -564,14 +564,14 @@ describe("Stamp Editor", () => {
       for (let i = 0; i < pages1.length; i++) {
         const [, page1] = pages1[i];
         await page1.bringToFront();
-        await page1.click("#editorStamp");
+        await switchToStamp(page1);
 
         await copyImage(page1, "../images/firefox_logo.png", 0);
         await copy(page1);
 
         const [, page2] = pages2[i];
         await page2.bringToFront();
-        await page2.click("#editorStamp");
+        await switchToStamp(page2);
 
         await paste(page2);
 

test/integration/test_utils.mjs

@@ -447,11 +447,30 @@ function waitForAnnotationEditorLayer(page) {
   return createPromise(page, resolve => {
     window.PDFViewerApplication.eventBus.on(
       "annotationeditorlayerrendered",
-      resolve
+      resolve,
+      { once: true }
     );
   });
 }
 
+function waitForAnnotationModeChanged(page) {
+  return createPromise(page, resolve => {
+    window.PDFViewerApplication.eventBus.on(
+      "annotationeditormodechanged",
+      resolve,
+      { once: true }
+    );
+  });
+}
+
+function waitForPageRendered(page) {
+  return createPromise(page, resolve => {
+    window.PDFViewerApplication.eventBus.on("pagerendered", resolve, {
+      once: true,
+    });
+  });
+}
+
 async function scrollIntoView(page, selector) {
   const handle = await page.evaluateHandle(
     sel => [
@@ -695,8 +714,10 @@ export {
   serializeBitmapDimensions,
   switchToEditor,
   waitForAnnotationEditorLayer,
+  waitForAnnotationModeChanged,
   waitForEntryInStorage,
   waitForEvent,
+  waitForPageRendered,
   waitForSandboxTrip,
   waitForSelectedEditor,
   waitForSerialized,

web/annotation_layer_builder.js

@@ -182,6 +182,10 @@ class AnnotationLayerBuilder {
     this.div.hidden = true;
   }
 
+  hasEditableAnnotations() {
+    return !!this.annotationLayer?.hasEditableAnnotations();
+  }
+
   #updatePresentationModeState(state) {
     if (!this.div) {
       return;

web/pdf_page_view.js

@@ -119,6 +119,8 @@ class PDFPageView {
 
   #hasRestrictedScaling = false;
 
+  #isEditing = false;
+
   #layerProperties = null;
 
   #loadingId = null;
@@ -354,6 +356,10 @@ class PDFPageView {
     this.pdfPage?.cleanup();
   }
 
+  hasEditableAnnotations() {
+    return !!this.annotationLayer?.hasEditableAnnotations();
+  }
+
   get _textHighlighter() {
     return shadow(
       this,
@@ -582,6 +588,20 @@ class PDFPageView {
     }
   }
 
+  toggleEditingMode(isEditing) {
+    if (!this.hasEditableAnnotations()) {
+      return;
+    }
+    this.#isEditing = isEditing;
+    this.reset({
+      keepZoomLayer: true,
+      keepAnnotationLayer: true,
+      keepAnnotationEditorLayer: true,
+      keepXfaLayer: true,
+      keepTextLayer: true,
+    });
+  }
+
   /**
    * @typedef {Object} PDFPageViewUpdateParameters
    * @property {number} [scale] The new scale, if specified.
@@ -1037,6 +1057,7 @@ class PDFPageView {
       optionalContentConfigPromise: this._optionalContentConfigPromise,
       annotationCanvasMap: this._annotationCanvasMap,
       pageColors,
+      isEditing: this.#isEditing,
     };
     const renderTask = (this.renderTask = pdfPage.render(renderContext));
     renderTask.onContinue = renderContinueCallback;

web/pdf_viewer.js

@@ -223,6 +223,10 @@ class PDFViewer {
 
   #mlManager = null;
 
+  #onPageRenderedCallback = null;
+
+  #switchAnnotationEditorModeTimeoutId = null;
+
   #getAllTextInProgress = false;
 
   #hiddenCopyElement = null;
@@ -1117,6 +1121,10 @@ class PDFViewer {
 
     this.#hiddenCopyElement?.remove();
     this.#hiddenCopyElement = null;
+
+    this.#onPageRenderedCallback = null;
+    clearTimeout(this.#switchAnnotationEditorModeTimeoutId);
+    this.#switchAnnotationEditorModeTimeoutId = null;
   }
 
   #ensurePageViewVisible() {
@@ -1653,6 +1661,32 @@ class PDFViewer {
     });
   }
 
+  #switchToEditAnnotationMode() {
+    const visible = this._getVisiblePages();
+    const pagesToRefresh = [];
+    const { ids, views } = visible;
+    for (const page of views) {
+      const { view } = page;
+      if (!view.hasEditableAnnotations()) {
+        ids.delete(view.id);
+        continue;
+      }
+      pagesToRefresh.push(page);
+    }
+
+    if (pagesToRefresh.length === 0) {
+      return null;
+    }
+    this.renderingQueue.renderHighestPriority({
+      first: pagesToRefresh[0],
+      last: pagesToRefresh.at(-1),
+      views: pagesToRefresh,
+      ids,
+    });
+
+    return ids;
+  }
+
   containsElement(element) {
     return this.container.contains(element);
   }
@@ -2259,13 +2293,56 @@ class PDFViewer {
     if (!this.pdfDocument) {
       return;
     }
-    this.#annotationEditorMode = mode;
-    this.eventBus.dispatch("annotationeditormodechanged", {
-      source: this,
-      mode,
-    });
 
-    this.#annotationEditorUIManager.updateMode(mode, editId, isFromKeyboard);
+    const { eventBus } = this;
+    const updater = () => {
+      if (this.#onPageRenderedCallback) {
+        eventBus._off("pagerendered", this.#onPageRenderedCallback);
+        this.#onPageRenderedCallback = null;
+      }
+      if (this.#switchAnnotationEditorModeTimeoutId !== null) {
+        clearTimeout(this.#switchAnnotationEditorModeTimeoutId);
+        this.#switchAnnotationEditorModeTimeoutId = null;
+      }
+      this.#annotationEditorMode = mode;
+      eventBus.dispatch("annotationeditormodechanged", {
+        source: this,
+        mode,
+      });
+      this.#annotationEditorUIManager.updateMode(mode, editId, isFromKeyboard);
+    };
+
+    if (
+      mode === AnnotationEditorType.NONE ||
+      this.#annotationEditorMode === AnnotationEditorType.NONE
+    ) {
+      const isEditing = mode !== AnnotationEditorType.NONE;
+      if (!isEditing) {
+        this.pdfDocument.annotationStorage.resetModifiedIds();
+      }
+      for (const pageView of this._pages) {
+        pageView.toggleEditingMode(isEditing);
+      }
+      // We must call #switchToEditAnnotationMode unconditionally to ensure that
+      // page is rendered if it's useful or not.
+      const idsToRefresh = this.#switchToEditAnnotationMode();
+      if (isEditing && editId && idsToRefresh) {
+        // We're editing an existing annotation so we must switch to editing
+        // mode when the rendering is done.
+        const { signal } = this.#eventAbortController;
+        this.#onPageRenderedCallback = ({ pageNumber }) => {
+          idsToRefresh.delete(pageNumber);
+          if (idsToRefresh.size === 0) {
+            eventBus._off("pagerendered", this.#onPageRenderedCallback);
+            this.#onPageRenderedCallback = null;
+            this.#switchAnnotationEditorModeTimeoutId = setTimeout(updater, 0);
+          }
+        };
+        eventBus._on("pagerendered", this.#onPageRenderedCallback, { signal });
+        return;
+      }
+    }
+    updater();
   }
 
   // eslint-disable-next-line accessor-pairs