Create the "hiddenCopyElement" in the PDFViewer constructor (PR 16286 follow-up)

To make this functionality work out-of-the-box in custom implementations, see e.g. the "viewer components" examples, it'd be slightly easier if we dynamically create/insert the "hiddenCopyElement" in the `PDFViewer` constructor.
Given that the "copy all text" feature still appears to work just as before with this patch, hopefully I'm not overlooking any reason why doing this would be a bad idea.

web/app.js

@@ -504,7 +504,6 @@ const PDFViewerApplication = {
     this.pdfViewer = new PDFViewer({
       container,
       viewer,
-      hiddenCopyElement: appConfig.hiddenCopyElement,
       eventBus,
       renderingQueue: pdfRenderingQueue,
       linkService: pdfLinkService,

web/pdf_viewer.js

@@ -82,8 +82,6 @@ function isValidAnnotationEditorMode(mode) {
  * @typedef {Object} PDFViewerOptions
  * @property {HTMLDivElement} container - The container for the viewer element.
  * @property {HTMLDivElement} [viewer] - The viewer element.
- * @property {HTMLDivElement} [hiddenCopyElement] - The hidden element used to
- *   check if all is selected.
  * @property {EventBus} eventBus - The application event bus.
  * @property {IPDFLinkService} linkService - The navigation/linking service.
  * @property {IDownloadManager} [downloadManager] - The download manager
@@ -240,7 +238,6 @@ class PDFViewer {
     }
     this.container = options.container;
     this.viewer = options.viewer || options.container.firstElementChild;
-    this.#hiddenCopyElement = options.hiddenCopyElement;
 
     if (
       typeof PDFJSDev === "undefined" ||
@@ -257,6 +254,11 @@ class PDFViewer {
         throw new Error("The `container` must be absolutely positioned.");
       }
     }
+    const hiddenCopyElement = (this.#hiddenCopyElement =
+      document.createElement("div"));
+    hiddenCopyElement.id = "hiddenCopyElement";
+    this.viewer.before(hiddenCopyElement);
+
     this.#resizeObserver.observe(this.container);
 
     this.eventBus = options.eventBus;

web/viewer-geckoview.html

@@ -82,7 +82,6 @@ See https://github.com/adobe-type-tools/cmap-resources
       <div id="mainContainer">
 
         <div id="viewerContainer" tabindex="0">
-          <div id="hiddenCopyElement"></div>
           <div id="viewer" class="pdfViewer"></div>
         </div>
       </div> <!-- mainContainer -->

web/viewer-geckoview.js

@@ -41,7 +41,6 @@ function getViewerConfiguration() {
     appContainer: document.body,
     mainContainer,
     viewerContainer: document.getElementById("viewer"),
-    hiddenCopyElement: document.getElementById("hiddenCopyElement"),
     toolbar: {
       mainContainer,
       container: document.getElementById("floatingToolbar"),

web/viewer.html

@@ -385,7 +385,6 @@ See https://github.com/adobe-type-tools/cmap-resources
         </div>
 
         <div id="viewerContainer" tabindex="0">
-          <div id="hiddenCopyElement"></div>
           <div id="viewer" class="pdfViewer"></div>
         </div>
       </div> <!-- mainContainer -->

web/viewer.js

@@ -41,7 +41,6 @@ function getViewerConfiguration() {
     appContainer: document.body,
     mainContainer: document.getElementById("viewerContainer"),
     viewerContainer: document.getElementById("viewer"),
-    hiddenCopyElement: document.getElementById("hiddenCopyElement"),
     toolbar: {
       container: document.getElementById("toolbarViewer"),
       numPages: document.getElementById("numPages"),