metadata: pdf text is selectable

(can copy/paste from pdf to metadata input)

public/css/pdf_viewer.css

@@ -0,0 +1,120 @@
+.textLayer{
+    position:absolute;
+    text-align:initial;
+    inset:0;
+    overflow:clip;
+    opacity:1;
+    line-height:1;
+    -webkit-text-size-adjust:none;
+    -moz-text-size-adjust:none;
+    text-size-adjust:none;
+    forced-color-adjust:none;
+    transform-origin:0 0;
+    caret-color:CanvasText;
+    z-index:0;
+}
+
+.textLayer.highlighting{
+    touch-action:none;
+}
+
+.textLayer :is(span,br){
+    color:transparent;
+    position:absolute;
+    white-space:pre;
+    cursor:text;
+    transform-origin:0% 0%;
+}
+
+.textLayer  > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){
+    z-index:1;
+}
+
+.textLayer span.markedContent{
+    top:0;
+    height:0;
+}
+
+.textLayer .highlight{
+    --highlight-bg-color:rgb(180 0 170 / 0.25);
+    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
+    --highlight-backdrop-filter:none;
+    --highlight-selected-backdrop-filter:none;
+}
+
+@media screen and (forced-colors: active){
+
+    .textLayer .highlight{
+        --highlight-bg-color:transparent;
+        --highlight-selected-bg-color:transparent;
+        --highlight-backdrop-filter:var(--hcm-highlight-filter);
+        --highlight-selected-backdrop-filter:var(
+        --hcm-highlight-selected-filter
+        );
+    }
+}
+
+.textLayer .highlight{
+
+    margin:-1px;
+    padding:1px;
+    background-color:var(--highlight-bg-color);
+    -webkit-backdrop-filter:var(--highlight-backdrop-filter);
+    backdrop-filter:var(--highlight-backdrop-filter);
+    border-radius:4px;
+}
+
+.appended:is(.textLayer .highlight){
+    position:initial;
+}
+
+.begin:is(.textLayer .highlight){
+    border-radius:4px 0 0 4px;
+}
+
+.end:is(.textLayer .highlight){
+    border-radius:0 4px 4px 0;
+}
+
+.middle:is(.textLayer .highlight){
+    border-radius:0;
+}
+
+.selected:is(.textLayer .highlight){
+    background-color:var(--highlight-selected-bg-color);
+    -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter);
+    backdrop-filter:var(--highlight-selected-backdrop-filter);
+}
+
+.textLayer ::-moz-selection{
+    background:rgba(0 0 255 / 0.25);
+    background:color-mix(in srgb, AccentColor, transparent 75%);
+}
+
+.textLayer ::selection{
+    background:rgba(0 0 255 / 0.25);
+    background:color-mix(in srgb, AccentColor, transparent 75%);
+}
+
+.textLayer br::-moz-selection{
+    background:transparent;
+}
+
+.textLayer br::selection{
+    background:transparent;
+}
+
+.textLayer .endOfContent{
+    display:block;
+    position:absolute;
+    inset:100% 0 0;
+    z-index:0;
+    cursor:default;
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    user-select:none;
+}
+
+.textLayer.selecting .endOfContent{
+    top:0;
+}

public/js/metadata.js

@@ -81,14 +81,34 @@ async function pageRender(pageIndex) {
   let scaleWidth = sizeWidth / viewport.width;
   let viewportWidth = page.getViewport({scale: scaleWidth });
 
+  document.documentElement.style.setProperty('--scale-factor', scaleWidth) // needed to scale the textLayer
+                                                                           // to the canvas size (var used in style attribute)
+
   viewport = viewportWidth;
 
-  let canvasPDF = document.createElement('canvas');
-  canvasPDF.classList.add('shadow-sm');
-  document.getElementById('container-pages').appendChild(canvasPDF);
-  let context = canvasPDF.getContext('2d');
+  const containerPagePDF = document.createElement('div')
+  const canvasPDF = document.createElement('canvas')
+  const wrapperPDF = document.createElement('div')
+  const textPDF = document.createElement('div')
+
+  document.getElementById('container-pages').appendChild(containerPagePDF)
+  containerPagePDF.appendChild(wrapperPDF)
+  wrapperPDF.appendChild(canvasPDF)
+  wrapperPDF.appendChild(textPDF)
+
+  const context = canvasPDF.getContext('2d')
+
   canvasPDF.height = viewport.height;
   canvasPDF.width = viewport.width;
+  canvasPDF.classList.add('shadow-sm');
+
+  containerPagePDF.classList.add('page')
+  containerPagePDF.setAttribute('id', 'container-page-'+pageIndex)
+
+  wrapperPDF.classList.add('canvasWrapper');
+  wrapperPDF.style.position = 'relative'
+
+  textPDF.classList.add('textLayer')
 
   if(pdfRenderTasks[pageIndex]) {
     pdfRenderTasks[pageIndex].cancel();
@@ -97,6 +117,18 @@ async function pageRender(pageIndex) {
     canvasContext: context,
     viewport: viewport,
   });
+
+  pdfRenderTasks[pageIndex].promise.then(function () {
+    return page.getTextContent()
+  }).then(function (textContent) {
+      const textLayer = new pdfjsLib.TextLayer({
+          textContentSource: textContent,
+          viewport: viewport,
+          container: textPDF,
+      });
+
+      textLayer.render()
+  })
 }
 
 function addMetadata(key, value, type, focus) {

templates/metadata.html.php

@@ -2,6 +2,7 @@
 <html lang="<?php echo $TRANSLATION_LANGUAGE ?>" dir="<?php echo $DIRECTION_LANGUAGE ?>" style="direction: <?php echo $DIRECTION_LANGUAGE ?>;">
 <head>
     <?php include('components/header.html.php'); ?>
+    <link href="<?php echo $REVERSE_PROXY_URL; ?>/css/pdf_viewer.css" rel="stylesheet">
     <title>Signature PDF - Éditer les métadonnées</title>
     <meta name="description" content="Logiciel libre en ligne qui permet d'jouter, modifier ou supprimer les métadonnées d'un PDF">
 </head>