update implementation of text rect

package.json

@@ -48,4 +48,4 @@
   "@parcel/resolver-default": {
     "packageExports": true
   }
-}
+}

packages/engines/package.json

@@ -74,4 +74,4 @@
   "overrides": {
     "lmdb": "2.6.0"
   }
-}
+}

packages/models/package.json

@@ -55,4 +55,4 @@
   "overrides": {
     "lmdb": "2.6.0"
   }
-}
+}

packages/pdfium/package.json

@@ -66,4 +66,4 @@
     "ts-jest": "^29.2.5",
     "typescript": "^5.7.2"
   }
-}
+}

packages/react/package.json

@@ -82,4 +82,4 @@
   "overrides": {
     "lmdb": "2.6.0"
   }
-}
+}

packages/react/src/components/pageLayers/text.css

@@ -1,4 +1,12 @@
 .pdf__page__layer--text {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  pointer-events: none;
 }
 
 .pdf__text__rect {
@@ -10,4 +18,16 @@
   line-height: 1;
 
   overflow: hidden;
+
+  pointer-events: auto;
+}
+
+.pdf__text__rect__content {
+  display: inline-block;
+  transform-origin: top left;
+}
+
+.pdf__text__rect__content::selection {
+  color: transparent;
+  background-color: rgba(0, 0, 255, 0.15);
 }

packages/react/src/components/pageLayers/text.tsx

@@ -1,10 +1,12 @@
 import {
   ignore,
   PdfErrorCode,
+  PdfPageObject,
   PdfTextRectObject,
+  Rotation,
   transformRect,
 } from '@unionpdf/models';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { usePdfEngine, usePdfDocument } from '../../core';
 import { PdfPageLayerComponentProps } from './layer';
 import './text.css';
@@ -43,41 +45,55 @@ export function PdfPageTextLayer(props: PdfPageTextLayerProps) {
     <div className="pdf__page__layer pdf__page__layer--text">
       {isVisible
         ? rects.map((textRect, index) => {
-            const rect = transformRect(
-              page.size,
-              textRect.rect,
-              rotation,
-              scaleFactor,
-            );
-            const style = {
-              top: rect.origin.y,
-              left: rect.origin.x,
-              width: rect.size.width,
-              height: rect.size.height,
-            };
-
             return (
-              <span className="pdf__text__rect" key={index} style={style}>
-                <svg
-                  width={style.width}
-                  height={style.height}
-                  viewBox={`0 0 ${style.width} ${style.height}`}
-                >
-                  <text
-                    y={style.height}
-                    fontSize={style.height}
-                    textLength={style.width}
-                    lengthAdjust="spacingAndGlyphs"
-                    fill="transparent"
-                    height={style.height}
-                  >
-                    {textRect.content}
-                  </text>
-                </svg>
-              </span>
+              <PdfPageTextRect
+                key={index}
+                page={page}
+                textRect={textRect}
+                rotation={rotation}
+                scaleFactor={scaleFactor}
+              />
             );
           })
         : null}
     </div>
   );
 }
+
+export interface PdfPageTextRectProps {
+  page: PdfPageObject;
+  textRect: PdfTextRectObject;
+  rotation: Rotation;
+  scaleFactor: number;
+}
+
+export function PdfPageTextRect(props: PdfPageTextRectProps) {
+  const { page, textRect, rotation, scaleFactor } = props;
+  const rect = transformRect(page.size, textRect.rect, rotation, scaleFactor);
+  const style = {
+    top: rect.origin.y,
+    left: rect.origin.x,
+    width: rect.size.width,
+    height: rect.size.height,
+  };
+
+  const textElemRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (textElemRef.current) {
+      const contentElem = textElemRef.current;
+      const width = contentElem.offsetWidth;
+      const height = contentElem.offsetHeight;
+
+      contentElem.style.transform = `scale(${rect.size.width / width}, ${rect.size.height / height})`;
+    }
+  }, [rect]);
+
+  return (
+    <span className="pdf__text__rect" style={style}>
+      <span className="pdf__text__rect__content" ref={textElemRef}>
+        {textRect.content}
+      </span>
+    </span>
+  );
+}