Fix German text for sign tool text entry (#5232)

# Description of Changes
Fix #5206

Required splitting out the logic for the text with font entry so that
the labels are configurable from the call-site instead of all using the
same ones for Sign.

frontend/public/locales/de-DE/translation.toml

@@ -6131,8 +6131,8 @@ tags = "text,anmerkung,beschriftung"
 applySignatures = "Text anwenden"
 
 [addText.text]
-name = "Textinhalt"
+name = "Text"
-placeholder = "Geben Sie den hinzuzufügenden Text ein"
+placeholder = "Text eingeben"
 fontLabel = "Schriftart"
 fontSizeLabel = "Schriftgröße"
 fontSizePlaceholder = "Schriftgröße eingeben oder wählen (8-200)"

frontend/src/core/components/annotation/shared/TextInputWithFont.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { Stack, TextInput, Select, Combobox, useCombobox, Group, Box } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
 import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';
 
 interface TextInputWithFontProps {
@@ -13,8 +12,12 @@ interface TextInputWithFontProps {
   textColor?: string;
   onTextColorChange?: (color: string) => void;
   disabled?: boolean;
-  label?: string;
+  label: string;
-  placeholder?: string;
+  placeholder: string;
+  fontLabel: string;
+  fontSizeLabel: string;
+  fontSizePlaceholder: string;
+  colorLabel?: string;
   onAnyChange?: () => void;
 }
 
@@ -30,9 +33,12 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
   disabled = false,
   label,
   placeholder,
+  fontLabel,
+  fontSizeLabel,
+  fontSizePlaceholder,
+  colorLabel,
   onAnyChange
 }) => {
-  const { t } = useTranslation();
   const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
   const fontSizeCombobox = useCombobox();
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
@@ -66,8 +72,8 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
   return (
     <Stack gap="sm">
       <TextInput
-        label={label || t('sign.text.name', 'Signer name')}
+        label={label}
-        placeholder={placeholder || t('sign.text.placeholder', 'Enter your full name')}
+        placeholder={placeholder}
         value={text}
         onChange={(e) => {
           onTextChange(e.target.value);
@@ -79,7 +85,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
 
       {/* Font Selection */}
       <Select
-        label={t('sign.text.fontLabel', 'Font')}
+        label={fontLabel}
         value={fontFamily}
         onChange={(value) => {
           onFontFamilyChange(value || 'Helvetica');
@@ -107,8 +113,8 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
         >
           <Combobox.Target>
             <TextInput
-              label={t('sign.text.fontSizeLabel', 'Font size')}
+              label={fontSizeLabel}
-              placeholder={t('sign.text.fontSizePlaceholder', 'Type or select font size (8-200)')}
+              placeholder={fontSizePlaceholder}
               value={fontSizeInput}
               onChange={(event) => {
                 const value = event.currentTarget.value;
@@ -155,7 +161,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
         {onTextColorChange && (
           <Box>
             <TextInput
-              label={t('sign.text.colorLabel', 'Text colour')}
+              label={colorLabel}
               value={colorInput}
               placeholder="#000000"
               disabled={disabled}

frontend/src/core/components/annotation/tools/TextTool.tsx

@@ -1,57 +0,0 @@
-import React, { useState } from 'react';
-import { Stack } from '@mantine/core';
-import { BaseAnnotationTool } from '@app/components/annotation/shared/BaseAnnotationTool';
-import { TextInputWithFont } from '@app/components/annotation/shared/TextInputWithFont';
-
-interface TextToolProps {
-  onTextChange?: (text: string) => void;
-  disabled?: boolean;
-}
-
-export const TextTool: React.FC<TextToolProps> = ({
-  onTextChange,
-  disabled = false
-}) => {
-  const [text, setText] = useState('');
-  const [fontSize, setFontSize] = useState(16);
-  const [fontFamily, setFontFamily] = useState('Helvetica');
-
-  const handleTextChange = (newText: string) => {
-    setText(newText);
-    onTextChange?.(newText);
-  };
-
-  const handleSignatureDataChange = (data: string | null) => {
-    if (data) {
-      onTextChange?.(data);
-    }
-  };
-
-  const toolConfig = {
-    enableTextInput: true,
-    showPlaceButton: true,
-    placeButtonText: "Place Text"
-  };
-
-  return (
-    <BaseAnnotationTool
-      config={toolConfig}
-      onSignatureDataChange={handleSignatureDataChange}
-      disabled={disabled}
-    >
-      <Stack gap="sm">
-        <TextInputWithFont
-          text={text}
-          onTextChange={handleTextChange}
-          fontSize={fontSize}
-          onFontSizeChange={setFontSize}
-          fontFamily={fontFamily}
-          onFontFamilyChange={setFontFamily}
-          disabled={disabled}
-          label="Text Content"
-          placeholder="Enter text to place on the PDF"
-        />
-      </Stack>
-    </BaseAnnotationTool>
-  );
-};

frontend/src/core/components/tools/sign/SignSettings.tsx

@@ -853,6 +853,12 @@ const SignSettings = ({
           textColor={parameters.textColor || '#000000'}
           onTextColorChange={(color) => onParameterChange('textColor', color)}
           disabled={disabled}
+          label={translate('text.name', 'Text')}
+          placeholder={translate('text.placeholder', 'Enter text')}
+          fontLabel={translate('text.fontLabel', 'Font')}
+          fontSizeLabel={translate('text.fontSizeLabel', 'Font size')}
+          fontSizePlaceholder={translate('text.fontSizePlaceholder', 'Type or select font size (8-200)')}
+          colorLabel={translate('text.colorLabel', 'Text colour')}
           onAnyChange={() => {
             setPlacementManuallyPaused(false);
             lastAppliedPlacementKey.current = null;