From b7d49950424f1f2cc813dfc7e35ca44087ffc450 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Thu, 13 Nov 2025 15:24:35 +0000
Subject: [PATCH] fix text rendering

---
 .../tools/pdfTextEditor/PdfTextEditorView.tsx | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/frontend/src/proprietary/components/tools/pdfTextEditor/PdfTextEditorView.tsx b/frontend/src/proprietary/components/tools/pdfTextEditor/PdfTextEditorView.tsx
index 9d78e5a2e..875ca0d2c 100644
--- a/frontend/src/proprietary/components/tools/pdfTextEditor/PdfTextEditorView.tsx
+++ b/frontend/src/proprietary/components/tools/pdfTextEditor/PdfTextEditorView.tsx
@@ -551,9 +551,6 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   const isParagraphPage = useMemo(() => analyzePageContentType(pageGroups), [pageGroups]);
   const isParagraphLayout =
     externalGroupingMode === 'paragraph' || (externalGroupingMode === 'auto' && isParagraphPage);
-  const paragraphWhiteSpace = isParagraphLayout ? 'pre-wrap' : 'pre';
-  const paragraphWordBreak = isParagraphLayout ? 'break-word' : 'normal';
-  const paragraphOverflowWrap = isParagraphLayout ? 'break-word' : 'normal';
 
   const syncEditorValue = useCallback(
     (
@@ -847,8 +844,16 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
           return;
         }
 
-        // Skip multi-line paragraphs - auto-scaling doesn't work well with wrapped text
+        // Only apply auto-scaling to unchanged text
+        const hasChanges = group.text !== group.originalText;
+        if (hasChanges) {
+          newScales.set(group.id, 1);
+          return;
+        }
+
         const lineCount = (group.text || '').split('\n').length;
+
+        // Skip multi-line paragraphs - auto-scaling doesn't work well with wrapped text
         if (lineCount > 1) {
           newScales.set(group.id, 1);
           return;
@@ -901,6 +906,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
     scale,
     fontFamilies.size,
     selectedPage,
+    isParagraphLayout,
   ]);
 
   useLayoutEffect(() => {
@@ -1636,13 +1642,29 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
                       const textColor = group.color || '#111827';
                       const fontWeight = group.fontWeight || getFontWeight(effectiveFontId, group.pageIndex);
 
+                      // Determine text wrapping behavior based on whether text has been changed
+                      const hasChanges = changed;
+                      const shouldWrap = hasChanges && isParagraphLayout;
+                      const whiteSpace = shouldWrap ? 'pre-wrap' : 'pre';
+                      const wordBreak = shouldWrap ? 'break-word' : 'normal';
+                      const overflowWrap = shouldWrap ? 'break-word' : 'normal';
+
+                      // For paragraph mode, allow height to grow to accommodate lines without wrapping
+                      // For single-line mode, maintain fixed height based on PDF bounds
+                      const useFlexibleHeight = isEditing || shouldWrap || (isParagraphLayout && lineCount > 1);
+
+                      // The renderGroupContainer wrapper adds 4px horizontal padding (2px left + 2px right)
+                      // We need to add this to the container width to compensate, so the inner content
+                      // has the full PDF-defined width available for text
+                      const WRAPPER_HORIZONTAL_PADDING = 4;
+
                       const containerStyle: React.CSSProperties = {
                         position: 'absolute',
                         left: `${containerLeft}px`,
                         top: `${containerTop}px`,
-                        width: `${containerWidth}px`,
-                        height: isEditing ? 'auto' : `${containerHeight}px`,
-                        minHeight: `${containerHeight}px`,
+                        width: `${containerWidth + WRAPPER_HORIZONTAL_PADDING}px`,
+                        height: useFlexibleHeight ? 'auto' : `${containerHeight}px`,
+                        minHeight: useFlexibleHeight ? 'auto' : `${containerHeight}px`,
                         display: 'flex',
                         alignItems: 'flex-start',
                         justifyContent: 'flex-start',
@@ -1718,9 +1740,9 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
                                   outline: 'none',
                                   border: 'none',
                                   display: 'block',
-                                  whiteSpace: paragraphWhiteSpace,
-                                  wordBreak: paragraphWordBreak,
-                                  overflowWrap: paragraphOverflowWrap,
+                                  whiteSpace: isParagraphLayout ? 'pre-wrap' : 'pre',
+                                  wordBreak: isParagraphLayout ? 'break-word' : 'normal',
+                                  overflowWrap: isParagraphLayout ? 'break-word' : 'normal',
                                   cursor: 'text',
                                   overflow: 'visible',
                                 }}
@@ -1748,9 +1770,9 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
                                 width: '100%',
                                 minHeight: '100%',
                                 padding: 0,
-                                whiteSpace: paragraphWhiteSpace,
-                                wordBreak: paragraphWordBreak,
-                                overflowWrap: paragraphOverflowWrap,
+                                whiteSpace,
+                                wordBreak,
+                                overflowWrap,
                                 fontSize: `${fontSizePx}px`,
                                 fontFamily,
                                 fontWeight,
@@ -1758,17 +1780,17 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
                                 color: textColor,
                                 display: 'block',
                                 cursor: 'text',
-                                overflow: 'hidden',
+                                overflow: shouldWrap ? 'visible' : 'hidden',
                               }}
                             >
                               <span
                                 data-text-content
                                 style={{
                                   pointerEvents: 'none',
-                                  display: 'inline-block',
+                                  display: shouldWrap ? 'inline' : 'inline-block',
                                   transform: shouldScale ? `scaleX(${textScale})` : 'none',
                                   transformOrigin: 'left center',
-                                  whiteSpace: paragraphWhiteSpace,
+                                  whiteSpace,
                                 }}
                               >
                                 {group.text || '\u00A0'}