tails fix

frontend/src/proprietary/components/tools/pdfJsonEditor/PdfJsonEditorView.tsx

@@ -28,6 +28,7 @@ import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import UploadIcon from '@mui/icons-material/Upload';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import CloseIcon from '@mui/icons-material/Close';
 import { Rnd } from 'react-rnd';
 
 import {
@@ -235,6 +236,7 @@ const PdfJsonEditorView = ({ data }: PdfJsonEditorViewProps) => {
     onLoadJson,
     onSelectPage,
     onGroupEdit,
+    onGroupDelete,
     onImageTransform,
     onImageReset,
     onReset,
@@ -749,6 +751,7 @@ const PdfJsonEditorView = ({ data }: PdfJsonEditorViewProps) => {
 
   const renderGroupContainer = (
     groupId: string,
+    pageIndex: number,
     isActive: boolean,
     isChanged: boolean,
     content: React.ReactNode,
@@ -757,8 +760,10 @@ const PdfJsonEditorView = ({ data }: PdfJsonEditorViewProps) => {
     <Box
       component="div"
       style={{
-        width: '100%',
-        height: '100%',
+        width: 'calc(100% + 4px)',
+        height: 'calc(100% + 6px)',
+        marginLeft: '-2px',
+        marginTop: '-3px',
         outline: isActive
           ? '2px solid var(--mantine-color-blue-5)'
           : isChanged
@@ -773,7 +778,8 @@ const PdfJsonEditorView = ({ data }: PdfJsonEditorViewProps) => {
         display: 'flex',
         alignItems: 'flex-start',
         justifyContent: 'flex-start',
-        padding: 0,
+        padding: '3px 2px 3px 2px',
+        position: 'relative',
       }}
       onClick={(event) => {
         event.stopPropagation();
@@ -787,6 +793,29 @@ const PdfJsonEditorView = ({ data }: PdfJsonEditorViewProps) => {
       }}
     >
       {content}
+      {isActive && editingGroupId !== groupId && (
+        <ActionIcon
+          size="xs"
+          variant="filled"
+          color="red"
+          radius="xl"
+          style={{
+            position: 'absolute',
+            top: -8,
+            right: -8,
+            zIndex: 10,
+            cursor: 'pointer',
+          }}
+          onClick={(event) => {
+            event.stopPropagation();
+            onGroupDelete(pageIndex, groupId);
+            setActiveGroupId(null);
+            setEditingGroupId(null);
+          }}
+        >
+          <CloseIcon style={{ fontSize: 12 }} />
+        </ActionIcon>
+      )}
     </Box>
   );
 
@@ -1352,6 +1381,7 @@ const PdfJsonEditorView = ({ data }: PdfJsonEditorViewProps) => {
                           <Box key={group.id} style={containerStyle}>
                             {renderGroupContainer(
                               group.id,
+                              group.pageIndex,
                               true,
                               changed,
                               <div
@@ -1440,6 +1470,7 @@ const PdfJsonEditorView = ({ data }: PdfJsonEditorViewProps) => {
                         <Box key={group.id} style={containerStyle}>
                           {renderGroupContainer(
                             group.id,
+                            group.pageIndex,
                             isActive,
                             changed,
                             <div

frontend/src/proprietary/tools/pdfJsonEditor/PdfJsonEditor.tsx

@@ -576,6 +576,16 @@ const PdfJsonEditor = ({ onComplete, onError }: BaseToolProps) => {
     );
   }, []);
 
+  const handleGroupDelete = useCallback((pageIndex: number, groupId: string) => {
+    setGroupsByPage((previous) =>
+      previous.map((groups, idx) =>
+        idx !== pageIndex
+          ? groups
+          : groups.map((group) => (group.id === groupId ? { ...group, text: '' } : group))
+      )
+    );
+  }, []);
+
   const handleImageTransform = useCallback(
     (
       pageIndex: number,
@@ -913,8 +923,9 @@ const PdfJsonEditor = ({ onComplete, onError }: BaseToolProps) => {
 
         try {
           const textContent = await page.getTextContent();
-          const maskMarginX = Math.max(0.45 * scale, 0.45);
-          const maskMarginY = Math.max(0.85 * scale, 0.85);
+          const maskMarginX = 0;
+          const maskMarginTop = 0;
+          const maskMarginBottom = Math.max(3 * scale, 3);
           context.save();
           context.globalCompositeOperation = 'destination-out';
           context.fillStyle = '#000000';
@@ -931,8 +942,8 @@ const PdfJsonEditor = ({ onComplete, onError }: BaseToolProps) => {
             const width = (item.width || 0) * viewport.scale + maskMarginX * 2;
             const fontHeight = Math.hypot(c, d);
             const rawHeight = item.height ? item.height * viewport.scale : fontHeight;
-            const height = Math.max(rawHeight + maskMarginY * 2, fontHeight + maskMarginY * 2);
-            const baselineOffset = height - maskMarginY;
+            const height = Math.max(rawHeight + maskMarginTop + maskMarginBottom, fontHeight + maskMarginTop + maskMarginBottom);
+            const baselineOffset = height - maskMarginBottom;
 
             context.save();
             context.translate(e, f);
@@ -984,6 +995,7 @@ const PdfJsonEditor = ({ onComplete, onError }: BaseToolProps) => {
     onLoadJson: handleLoadFile,
     onSelectPage: handleSelectPage,
     onGroupEdit: handleGroupTextChange,
+    onGroupDelete: handleGroupDelete,
     onImageTransform: handleImageTransform,
     onImageReset: handleImageReset,
     onReset: handleResetEdits,
@@ -1001,6 +1013,7 @@ const PdfJsonEditor = ({ onComplete, onError }: BaseToolProps) => {
     handleDownloadJson,
     handleGeneratePdf,
     handleGroupTextChange,
+    handleGroupDelete,
     handleImageReset,
     handleLoadFile,
     handleResetEdits,

frontend/src/proprietary/tools/pdfJsonEditor/pdfJsonEditorTypes.ts

@@ -199,6 +199,7 @@ export interface PdfJsonEditorViewData {
   onLoadJson: (file: File | null) => Promise<void> | void;
   onSelectPage: (pageIndex: number) => void;
   onGroupEdit: (pageIndex: number, groupId: string, value: string) => void;
+  onGroupDelete: (pageIndex: number, groupId: string) => void;
   onImageTransform: (
     pageIndex: number,
     imageId: string,