couple of small fixes for text editor (#5155)

# Description of Changes

- Workbench.tsx: Allow PDF text editor to handle it's own custom state
(this is a bit of a hotfix, we're going to handle the PDF text editors
file upload flow better in a future PR).
- PdfTextEditorView.tsx: Added a dropzone and some helper text to upload
the first file.
- PdfTextEditorView.tsx: Hide document view when isConverting is true.
Prevents showing stale content from previous file during conversion.
- useTranslatedToolRegistry.tsx: Moved PDF Text Editor to top of
Recommended tools list. Increased visibility of the new feature.
- PdfTextEditor.tsx: Removed auto-navigation to PDF Editor workbench on
file selection. Stops the "jumpy" behavior when selecting files.
- HomePage.tsx: Check specifically for pdfTextEditor tool instead of any
custom workbench. Prevents auto-switch to viewer when uploading files
while in PDF Text Editor.

<img width="2056" height="1073" alt="Screenshot 2025-12-03 at 6 01
14 PM"
src="https://github.com/user-attachments/assets/dfc63a46-7991-486c-ba00-0ce7637502f5"
/>


---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Anthony Stirling <[email protected]>

frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx

@@ -21,6 +21,7 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
 import { useTranslation } from 'react-i18next';
 import DescriptionIcon from '@mui/icons-material/DescriptionOutlined';
 import FileDownloadIcon from '@mui/icons-material/FileDownloadOutlined';
@@ -32,9 +33,12 @@ import CloseIcon from '@mui/icons-material/Close';
 import MergeTypeIcon from '@mui/icons-material/MergeType';
 import CallSplitIcon from '@mui/icons-material/CallSplit';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import UploadFileIcon from '@mui/icons-material/UploadFileOutlined';
+import SaveIcon from '@mui/icons-material/SaveOutlined';
 import { Rnd } from 'react-rnd';
 import NavigationWarningModal from '@app/components/shared/NavigationWarningModal';
 
+import { useFileContext } from '@app/contexts/FileContext';
 import {
   PdfTextEditorViewData,
   PdfJsonFont,
@@ -313,6 +317,7 @@ type GroupingMode = 'auto' | 'paragraph' | 'singleLine';
 
 const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   const { t } = useTranslation();
+  const { activeFiles } = useFileContext();
   const [activeGroupId, setActiveGroupId] = useState<string | null>(null);
   const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
   const [activeImageId, setActiveImageId] = useState<string | null>(null);
@@ -375,6 +380,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
     fileName,
     errorMessage,
     isGeneratingPdf,
+    isSavingToWorkbench,
     isConverting,
     conversionProgress,
     hasChanges,
@@ -389,11 +395,12 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
     onReset,
     onDownloadJson,
     onGeneratePdf,
-    onGeneratePdfForNavigation,
+    onSaveToWorkbench,
     onForceSingleTextElementChange,
     onGroupingModeChange,
     onMergeGroups,
     onUngroupGroup,
+    onLoadFile,
   } = data;
 
   // Define derived variables immediately after props destructuring, before any hooks
@@ -1430,7 +1437,8 @@ const selectionToolbarPosition = useMemo(() => {
         height: '100%',
         display: 'grid',
         gridTemplateColumns: 'minmax(0, 1fr) 320px',
-        alignItems: 'start',
+        gridTemplateRows: '1fr',
+        alignItems: hasDocument ? 'start' : 'stretch',
         gap: '1.5rem',
       }}
     >
@@ -1486,6 +1494,17 @@ const selectionToolbarPosition = useMemo(() => {
               >
                 {t('pdfTextEditor.actions.generatePdf', 'Generate PDF')}
               </Button>
+              <Button
+                variant="filled"
+                color="green"
+                leftSection={<SaveIcon fontSize="small" />}
+                onClick={onSaveToWorkbench}
+                loading={isSavingToWorkbench}
+                disabled={!hasDocument || !hasChanges || isConverting}
+                fullWidth
+              >
+                {t('pdfTextEditor.actions.saveChanges', 'Save Changes')}
+              </Button>
             </Stack>
 
             {fileName && (
@@ -1639,17 +1658,45 @@ const selectionToolbarPosition = useMemo(() => {
       )}
 
       {!hasDocument && !isConverting && (
-        <Card withBorder radius="md" padding="xl" style={{ gridColumn: '1 / 2', gridRow: 1 }}>
-          <Stack align="center" gap="md">
-            <DescriptionIcon sx={{ fontSize: 48 }} />
-            <Text size="lg" fw={600}>
-              {t('pdfTextEditor.empty.title', 'No document loaded')}
-            </Text>
-            <Text size="sm" c="dimmed" ta="center" maw={420}>
-              {t('pdfTextEditor.empty.subtitle', 'Load a PDF or JSON file to begin editing text content.')}
-            </Text>
-          </Stack>
-        </Card>
+        <Stack
+          align="center"
+          justify="center"
+          style={{ gridColumn: '1 / 2', gridRow: 1, height: '100%' }}
+        >
+          <Dropzone
+            onDrop={(files) => {
+              if (files.length > 0) {
+                onLoadFile(files[0]);
+              }
+            }}
+            accept={['application/pdf', 'application/json']}
+            maxFiles={1}
+            style={{
+              width: '100%',
+              maxWidth: 480,
+              minHeight: 200,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              border: '2px dashed var(--mantine-color-gray-4)',
+              borderRadius: 'var(--mantine-radius-lg)',
+              cursor: 'pointer',
+              transition: 'border-color 150ms ease, background-color 150ms ease',
+            }}
+          >
+            <Stack align="center" gap="md" style={{ pointerEvents: 'none' }}>
+              <UploadFileIcon sx={{ fontSize: 48, color: 'var(--mantine-color-blue-5)' }} />
+              <Text size="lg" fw={600}>
+                {t('pdfTextEditor.empty.title', 'No document loaded')}
+              </Text>
+              <Text size="sm" c="dimmed" ta="center" maw={420}>
+                {activeFiles.length > 0
+                  ? t('pdfTextEditor.empty.dropzoneWithFiles', 'Select a file from the Files tab, or drag and drop a PDF or JSON file here, or click to browse')
+                  : t('pdfTextEditor.empty.dropzone', 'Drag and drop a PDF or JSON file here, or click to browse')}
+              </Text>
+            </Stack>
+          </Dropzone>
+        </Stack>
       )}
 
       {isConverting && (
@@ -1683,7 +1730,7 @@ const selectionToolbarPosition = useMemo(() => {
         </Card>
       )}
 
-      {hasDocument && (
+      {hasDocument && !isConverting && (
         <Stack
           gap="lg"
           className="flex-1"
@@ -2444,7 +2491,7 @@ const selectionToolbarPosition = useMemo(() => {
 
       {/* Navigation Warning Modal */}
       <NavigationWarningModal
-        onApplyAndContinue={onGeneratePdfForNavigation}
+        onApplyAndContinue={onSaveToWorkbench}
       />
     </Stack>
   );