Merge pull request #16659 from calixteman/edit_freetexts

[Editor] Edit an existing FreeText annotation in double-clicking on it (bug 1787298)

src/display/annotation_layer.js

@@ -601,6 +601,20 @@ class AnnotationElement {
       triggers.classList.add("highlightArea");
     }
   }
+
+  _editOnDoubleClick() {
+    const {
+      annotationEditorType: mode,
+      data: { id: editId },
+    } = this;
+    this.container.addEventListener("dblclick", () => {
+      this.linkService.eventBus?.dispatch("switchannotationeditormode", {
+        source: this,
+        mode,
+        editId,
+      });
+    });
+  }
 }
 
 class LinkAnnotationElement extends AnnotationElement {
@@ -2217,6 +2231,9 @@ class FreeTextAnnotationElement extends AnnotationElement {
     if (!this.data.popupRef) {
       this._createPopup();
     }
+
+    this._editOnDoubleClick();
+
     return this.container;
   }
 }

src/display/editor/editor.js

@@ -621,6 +621,11 @@ class AnnotationEditor {
    */
   enableEditing() {}
 
+  /**
+   * The editor is about to be edited.
+   */
+  enterInEditMode() {}
+
   /**
    * Get the div which really contains the displayed content.
    */

src/display/editor/freetext.js

@@ -403,13 +403,18 @@ class FreeTextEditor extends AnnotationEditor {
     return this.isInEditMode();
   }
 
+  /** @inheritdoc */
+  enterInEditMode() {
+    this.enableEditMode();
+    this.editorDiv.focus();
+  }
+
   /**
    * ondblclick callback.
    * @param {MouseEvent} event
    */
   dblclick(event) {
-    this.enableEditMode();
+    this.enterInEditMode();
-    this.editorDiv.focus();
   }
 
   /**
@@ -418,8 +423,7 @@ class FreeTextEditor extends AnnotationEditor {
    */
   keydown(event) {
     if (event.target === this.div && event.key === "Enter") {
-      this.enableEditMode();
+      this.enterInEditMode();
-      this.editorDiv.focus();
     }
   }
 

src/display/editor/tools.js

@@ -912,17 +912,28 @@ class AnnotationEditorUIManager {
   /**
    * Change the editor mode (None, FreeText, Ink, ...)
    * @param {number} mode
+   * @param {string|null} editId
    */
-  updateMode(mode) {
+  updateMode(mode, editId = null) {
     this.#mode = mode;
     if (mode === AnnotationEditorType.NONE) {
       this.setEditingState(false);
       this.#disableAll();
-    } else {
+      return;
-      this.setEditingState(true);
+    }
-      this.#enableAll();
+    this.setEditingState(true);
-      for (const layer of this.#allLayers.values()) {
+    this.#enableAll();
-        layer.updateMode(mode);
+    for (const layer of this.#allLayers.values()) {
+      layer.updateMode(mode);
+    }
+    if (!editId) {
+      return;
+    }
+    for (const editor of this.#allEditors.values()) {
+      if (editor.annotationElementId === editId) {
+        this.setSelected(editor);
+        editor.enterInEditMode();
+        break;
       }
     }
   }

test/integration/freetext_editor_spec.js

@@ -1115,6 +1115,39 @@ describe("FreeText Editor", () => {
     });
   });
 
+  describe("FreeText (edit existing in double clicking on it)", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("freetexts.pdf", ".annotationEditorLayer");
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must move an annotation", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await page.click("[data-annotation-id='26R']", { clickCount: 2 });
+          await page.waitForTimeout(10);
+
+          const [focusedId, editable] = await page.evaluate(() => {
+            const el = document.activeElement;
+            return [el.id, el.contentEditable];
+          });
+          expect(focusedId)
+            .withContext(`In ${browserName}`)
+            .toEqual("pdfjs_internal_editor_0-editor");
+          expect(editable).withContext(`In ${browserName}`).toEqual("true");
+
+          const editorIds = await getEditors(page, "freeText");
+          expect(editorIds.length).withContext(`In ${browserName}`).toEqual(6);
+        })
+      );
+    });
+  });
+
   describe("FreeText with popup", () => {
     let pages;
 

web/app.js

@@ -2518,7 +2518,7 @@ function webViewerPresentationMode() {
   PDFViewerApplication.requestPresentationMode();
 }
 function webViewerSwitchAnnotationEditorMode(evt) {
-  PDFViewerApplication.pdfViewer.annotationEditorMode = evt.mode;
+  PDFViewerApplication.pdfViewer.annotationEditorMode = evt;
 }
 function webViewerSwitchAnnotationEditorParams(evt) {
   PDFViewerApplication.pdfViewer.annotationEditorParams = evt;

web/pdf_presentation_mode.js

@@ -175,7 +175,9 @@ class PDFPresentationMode {
       this.pdfViewer.currentScaleValue = "page-fit";
 
       if (this.#args.annotationEditorMode !== null) {
-        this.pdfViewer.annotationEditorMode = AnnotationEditorType.NONE;
+        this.pdfViewer.annotationEditorMode = {
+          mode: AnnotationEditorType.NONE,
+        };
       }
     }, 0);
 

web/pdf_viewer.js

@@ -2203,7 +2203,7 @@ class PDFViewer {
   /**
    * @param {number} mode - AnnotationEditor mode (None, FreeText, Ink, ...)
    */
-  set annotationEditorMode(mode) {
+  set annotationEditorMode({ mode, editId = null }) {
     if (!this.#annotationEditorUIManager) {
       throw new Error(`The AnnotationEditor is not enabled.`);
     }
@@ -2222,7 +2222,7 @@ class PDFViewer {
       mode,
     });
 
-    this.#annotationEditorUIManager.updateMode(mode);
+    this.#annotationEditorUIManager.updateMode(mode, editId);
   }
 
   // eslint-disable-next-line accessor-pairs