[Editor] Add a toolbar to selected editors with a button to delete it (bug 1863763)

src/display/editor/editor.js

@@ -23,6 +23,7 @@ import {
   KeyboardManager,
 } from "./tools.js";
 import { FeatureTest, shadow, unreachable } from "../../shared/util.js";
+import { EditorToolbar } from "./toolbar.js";
 import { noContextMenu } from "../display_utils.js";
 
 /**
@@ -62,6 +63,8 @@ class AnnotationEditor {
 
   #boundFocusout = this.focusout.bind(this);
 
+  #editToolbar = null;
+
   #focusedResizerName = "";
 
   #hasBeenClicked = false;
@@ -1034,6 +1037,22 @@ class AnnotationEditor {
     this.#altTextWasFromKeyBoard = false;
   }
 
+  addEditToolbar() {
+    if (this.#editToolbar || this.#isInEditMode) {
+      return;
+    }
+    this.#editToolbar = new EditorToolbar(this);
+    this.div.append(this.#editToolbar.render());
+  }
+
+  removeEditToolbar() {
+    if (!this.#editToolbar) {
+      return;
+    }
+    this.#editToolbar.remove();
+    this.#editToolbar = null;
+  }
+
   getClientDimensions() {
     return this.div.getBoundingClientRect();
   }
@@ -1386,6 +1405,7 @@ class AnnotationEditor {
       this.#moveInDOMTimeout = null;
     }
     this.#stopResizing();
+    this.removeEditToolbar();
   }
 
   /**
@@ -1543,6 +1563,8 @@ class AnnotationEditor {
   select() {
     this.makeResizable();
     this.div?.classList.add("selectedEditor");
+    this.addEditToolbar();
+    this.#editToolbar?.show();
   }
 
   /**
@@ -1556,6 +1578,7 @@ class AnnotationEditor {
       // go.
       this._uiManager.currentLayer.div.focus();
     }
+    this.#editToolbar?.hide();
   }
 
   /**

src/display/editor/ink.js

@@ -624,7 +624,7 @@ class InkEditor extends AnnotationEditor {
     this.div.classList.add("disabled");
 
     this.#fitToContent(/* firstTime = */ true);
-    this.makeResizable();
+    this.select();
 
     this.parent.addInkEditorIfNeeded(/* isCommitting = */ true);
 

src/display/editor/toolbar.js

@@ -0,0 +1,97 @@
+/* Copyright 2023 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { noContextMenu } from "../display_utils.js";
+
+class EditorToolbar {
+  #toolbar = null;
+
+  #editor;
+
+  #buttons = null;
+
+  constructor(editor) {
+    this.#editor = editor;
+  }
+
+  render() {
+    const editToolbar = (this.#toolbar = document.createElement("div"));
+    editToolbar.className = "editToolbar";
+    editToolbar.addEventListener("contextmenu", noContextMenu);
+    editToolbar.addEventListener("pointerdown", EditorToolbar.#pointerDown);
+
+    const buttons = (this.#buttons = document.createElement("div"));
+    buttons.className = "buttons";
+    editToolbar.append(buttons);
+
+    this.#addDeleteButton();
+
+    return editToolbar;
+  }
+
+  static #pointerDown(e) {
+    e.stopPropagation();
+  }
+
+  #focusIn(e) {
+    this.#editor._focusEventsAllowed = false;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  #focusOut(e) {
+    this.#editor._focusEventsAllowed = true;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  #addListenersToElement(element) {
+    // If we're clicking on a button with the keyboard or with
+    // the mouse, we don't want to trigger any focus events on
+    // the editor.
+    element.addEventListener("focusin", this.#focusIn.bind(this), {
+      capture: true,
+    });
+    element.addEventListener("focusout", this.#focusOut.bind(this), {
+      capture: true,
+    });
+    element.addEventListener("contextmenu", noContextMenu);
+  }
+
+  hide() {
+    this.#toolbar.classList.add("hidden");
+  }
+
+  show() {
+    this.#toolbar.classList.remove("hidden");
+  }
+
+  #addDeleteButton() {
+    const button = document.createElement("button");
+    button.className = "delete";
+    button.tabIndex = 0;
+    this.#addListenersToElement(button);
+    button.addEventListener("click", e => {
+      this.#editor._uiManager.delete();
+    });
+    this.#buttons.append(button);
+  }
+
+  remove() {
+    this.#toolbar.remove();
+  }
+}
+
+export { EditorToolbar };

src/display/editor/tools.js

@@ -669,8 +669,9 @@ class AnnotationEditorUIManager {
             // Those shortcuts can be used in the toolbar for some other actions
             // like zooming, hence we need to check if the container has the
             // focus.
-            checker: self =>
-              self.#container.contains(document.activeElement) &&
+            checker: (self, { target: el }) =>
+              !(el instanceof HTMLButtonElement) &&
+              self.#container.contains(el) &&
               !self.isEnterHandled,
           },
         ],