[Editor] Move an the editor div in the DOM once a translation with the keyboard is done

When moving an element in the DOM, the focus is potentially lost, so we need to make sure
that the focused element before the translation will get back its focus after it.
But we must take care to not execute any focus/blur callbacks because the user didn't
do anything which should trigger such events: it's a detail of implementation. For example,
when several editors are selected and moved, then at the end the same must be selected, so
no element receive a focus event which will set it as selected.

src/display/editor/annotation_editor_layer.js

@@ -320,19 +320,15 @@ class AnnotationEditorLayer {
 
     this.detach(editor);
     this.#uiManager.removeEditor(editor);
-    editor.div.style.display = "none";
-    setTimeout(() => {
-      // When the div is removed from DOM the focus can move on the
-      // document.body, so we just slightly postpone the removal in
-      // order to let an element potentially grab the focus before
-      // the body.
-      editor.div.style.display = "";
-      editor.div.remove();
-      editor.isAttachedToDOM = false;
-      if (document.activeElement === document.body) {
+    if (editor.div.contains(document.activeElement)) {
+      setTimeout(() => {
+        // When the div is removed from DOM the focus can move on the
+        // document.body, so we need to move it back to the main container.
         this.#uiManager.focusMainContainer();
-      }
-    }, 0);
+      }, 0);
+    }
+    editor.div.remove();
+    editor.isAttachedToDOM = false;
 
     if (!this.#isCleaningUp) {
       this.addInkEditorIfNeeded(/* isCommitting = */ false);
@@ -385,6 +381,25 @@ class AnnotationEditorLayer {
   }
 
   moveEditorInDOM(editor) {
+    const { activeElement } = document;
+    if (editor.div.contains(activeElement)) {
+      // When the div is moved in the DOM the focus can move somewhere else,
+      // so we want to be sure that the focus will stay on the editor but we
+      // don't want to call any focus callbacks, hence we disable them and only
+      // re-enable them when the editor has the focus.
+      editor._focusEventsAllowed = false;
+      setTimeout(() => {
+        editor.div.addEventListener(
+          "focusin",
+          () => {
+            editor._focusEventsAllowed = true;
+          },
+          { once: true }
+        );
+        activeElement.focus();
+      }, 0);
+    }
+
     this.#accessibilityManager?.moveElementInDOM(
       this.div,
       editor.div,

src/display/editor/editor.js

@@ -50,6 +50,8 @@ class AnnotationEditor {
 
   _uiManager = null;
 
+  _focusEventsAllowed = true;
+
   #isDraggable = false;
 
   #zIndex = AnnotationEditor._zIndex++;
@@ -190,6 +192,9 @@ class AnnotationEditor {
    * onfocus callback.
    */
   focusin(event) {
+    if (!this._focusEventsAllowed) {
+      return;
+    }
     if (!this.#hasBeenSelected) {
       this.parent.setSelected(this);
     } else {
@@ -202,6 +207,10 @@ class AnnotationEditor {
    * @param {FocusEvent} event
    */
   focusout(event) {
+    if (!this._focusEventsAllowed) {
+      return;
+    }
+
     if (!this.isAttachedToDOM) {
       return;
     }
@@ -284,6 +293,7 @@ class AnnotationEditor {
    */
   translateInPage(x, y) {
     this.#translate(this.pageDimensions, x, y);
+    this.parent.moveEditorInDOM(this);
     this.div.scrollIntoView({ block: "nearest" });
   }
 
@@ -790,7 +800,6 @@ class AnnotationEditor {
 
       this.fixAndSetPosition();
       this.parent.moveEditorInDOM(this);
-      this.div.focus();
     };
     window.addEventListener("pointerup", pointerUpCallback);
     // If the user is using alt+tab during the dragging session, the pointerup

src/display/editor/freetext.js

@@ -342,6 +342,9 @@ class FreeTextEditor extends AnnotationEditor {
 
   /** @inheritdoc */
   focusin(event) {
+    if (!this._focusEventsAllowed) {
+      return;
+    }
     super.focusin(event);
     if (event.target !== this.editorDiv) {
       this.editorDiv.focus();

src/display/editor/ink.js

@@ -634,6 +634,9 @@ class InkEditor extends AnnotationEditor {
 
   /** @inheritdoc */
   focusin(event) {
+    if (!this._focusEventsAllowed) {
+      return;
+    }
     super.focusin(event);
     this.enableEditMode();
   }