Tips, settings and translation fixes

frontend/public/locales/en-US/translation.json

@@ -1863,14 +1863,7 @@
           "text": "Enter the text that will appear as your watermark across the document.",
           "bullet1": "Keep it concise for better readability",
           "bullet2": "Common examples: 'CONFIDENTIAL', 'DRAFT', company name",
-          "bullet3": "Supports all Unicode characters"
-        },
-        "fontSize": {
-          "title": "Font Size",
-          "text": "Control the size of your watermark text (8-72 points).",
-          "bullet1": "Smaller sizes (8-14pt) for subtle watermarks",
-          "bullet2": "Medium sizes (16-24pt) for standard visibility",
-          "bullet3": "Large sizes (30-72pt) for prominent watermarks"
+          "bullet3": "Emoji characters are not supported and will be filtered out"
         }
       },
       "textStyle": {
@@ -1916,6 +1909,11 @@
         "header": {
           "title": "Formatting & Layout"
         },
+        "size": {
+          "title": "Size Control",
+          "text": "Adjust the size of your watermark (text or image).",
+          "bullet1": "Larger sizes create more prominent watermarks"
+        },
         "appearance": {
           "title": "Appearance Settings",
           "text": "Control how your watermark looks and blends with the document.",

frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx

@@ -15,6 +15,16 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
 
   return (
     <Stack gap="md">
+      {/* Size - single row */}
+      <NumberInputWithUnit
+        label={t('watermark.settings.size', 'Size')}
+        value={parameters.fontSize}
+        onChange={(value) => onParameterChange('fontSize', typeof value === 'number' ? value : 12)}
+        unit={parameters.watermarkType === 'text' ? 'pt' : 'px'}
+        min={1}
+        disabled={disabled}
+      />
+
       {/* Position & Appearance - 2 per row */}
       <Group grow align="flex-start">
         <NumberInputWithUnit

frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Stack, Text, Select, ColorInput, NumberInput, Group } from "@mantine/core";
+import { Stack, Text, Select, ColorInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
 import { alphabetOptions } from "../../../constants/addWatermarkConstants";
@@ -16,8 +16,7 @@ const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }:
 
   return (
     <Stack gap="sm">
-      <Group align="flex-start">
-        <Stack gap="xs" style={{ flex: 1 }}>
+      <Stack gap="xs">
         <Text size="xs" fw={500}>
           {t("watermark.settings.color", "Colour")}
         </Text>
@@ -29,19 +28,7 @@ const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }:
         />
       </Stack>
       
-        <Stack gap="xs" style={{ flex: 0.5 }}>
-          <Text size="xs" fw={500}>
-            {t("watermark.settings.fontSize", "Size")}
-          </Text>
-          <NumberInput
-            value={parameters.fontSize}
-            onChange={(value) => onParameterChange("fontSize", value || 12)}
-            min={8}
-            max={72}
-            disabled={disabled}
-          />
-        </Stack>
-      </Group>
+      <Stack gap="xs">
         <Text size="xs" fw={500}>
           {t("watermark.settings.alphabet", "Alphabet")}
         </Text>
@@ -52,6 +39,7 @@ const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }:
           disabled={disabled}
         />
       </Stack>
+    </Stack>
   );
 };
 

frontend/src/components/tools/addWatermark/WatermarkWording.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Stack, Text, TextInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
+import { removeEmojis } from "../../../utils/textUtils";
 
 interface WatermarkWordingProps {
   parameters: AddWatermarkParameters;
@@ -12,12 +13,18 @@ interface WatermarkWordingProps {
 const WatermarkWording = ({ parameters, onParameterChange, disabled = false }: WatermarkWordingProps) => {
   const { t } = useTranslation();
 
+  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const filteredValue = removeEmojis(value);
+    onParameterChange('watermarkText', filteredValue);
+  };
+
   return (
     <Stack gap="sm">
       <TextInput
         placeholder={t('watermark.settings.text.placeholder', 'Enter watermark text')}
         value={parameters.watermarkText}
-        onChange={(e) => onParameterChange('watermarkText', e.target.value)}
+        onChange={handleTextChange}
         disabled={disabled}
       />
     </Stack>

frontend/src/components/tooltips/useWatermarkTips.ts

@@ -7,13 +7,7 @@ const useSharedWatermarkContent = () => {
 
   const languageSupportTip: TooltipTip = {
     title: t("watermark.tooltip.language.title", "Language Support"),
-    description: t("watermark.tooltip.language.text", "Choose the appropriate language setting to ensure proper font rendering for your text."),
-    bullets: [
-      t("watermark.tooltip.language.bullet1", "Roman/Latin for Western languages"),
-      t("watermark.tooltip.language.bullet2", "Arabic for Arabic script"),
-      t("watermark.tooltip.language.bullet3", "Japanese, Korean, Chinese for Asian languages"),
-      t("watermark.tooltip.language.bullet4", "Thai for Thai script")
-    ]
+    description: t("watermark.tooltip.language.text", "Choose the appropriate language setting to ensure proper font rendering for your text.")
   };
 
   const appearanceTip: TooltipTip = {
@@ -89,16 +83,7 @@ export const useWatermarkWordingTips = (): TooltipContent => {
         bullets: [
           t("watermark.tooltip.wording.text.bullet1", "Keep it concise for better readability"),
           t("watermark.tooltip.wording.text.bullet2", "Common examples: 'CONFIDENTIAL', 'DRAFT', company name"),
-          t("watermark.tooltip.wording.text.bullet3", "Supports all Unicode characters")
-        ]
-      },
-      {
-        title: t("watermark.tooltip.wording.fontSize.title", "Font Size"),
-        description: t("watermark.tooltip.wording.fontSize.text", "Control the size of your watermark text (8-72 points)."),
-        bullets: [
-          t("watermark.tooltip.wording.fontSize.bullet1", "Smaller sizes (8-14pt) for subtle watermarks"),
-          t("watermark.tooltip.wording.fontSize.bullet2", "Medium sizes (16-24pt) for standard visibility"),
-          t("watermark.tooltip.wording.fontSize.bullet3", "Large sizes (30-72pt) for prominent watermarks")
+          t("watermark.tooltip.wording.text.bullet3", "Emoji characters are not supported and will be filtered out")
         ]
       }
     ]
@@ -114,7 +99,6 @@ export const useWatermarkTextStyleTips = (): TooltipContent => {
       title: t("watermark.tooltip.textStyle.header.title", "Text Style")
     },
     tips: [
-      languageSupportTip,
       {
         title: t("watermark.tooltip.textStyle.color.title", "Color Selection"),
         description: t("watermark.tooltip.textStyle.color.text", "Choose a color that provides good contrast with your document content."),
@@ -123,7 +107,8 @@ export const useWatermarkTextStyleTips = (): TooltipContent => {
           t("watermark.tooltip.textStyle.color.bullet2", "Black or dark colors for high contrast"),
           t("watermark.tooltip.textStyle.color.bullet3", "Custom colors for branding purposes")
         ]
-      }
+      },
+      languageSupportTip
     ]
   };
 };
@@ -167,6 +152,13 @@ export const useWatermarkFormattingTips = (): TooltipContent => {
       title: t("watermark.tooltip.formatting.header.title", "Formatting & Layout")
     },
     tips: [
+      {
+        title: t("watermark.tooltip.formatting.size.title", "Size Control"),
+        description: t("watermark.tooltip.formatting.size.text", "Adjust the size of your watermark (text or image)."),
+        bullets: [
+          t("watermark.tooltip.formatting.size.bullet1", "Larger sizes create more prominent watermarks")
+        ]
+      },
       appearanceTip,
       spacingTip,
       {

frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts

@@ -5,7 +5,7 @@ export interface AddWatermarkParameters {
   watermarkType?: 'text' | 'image';
   watermarkText: string;
   watermarkImage?: File;
-  fontSize: number;
+  fontSize: number; // Used for both text size and image size
   rotation: number;
   opacity: number;
   widthSpacer: number;

frontend/src/utils/textUtils.ts

@@ -0,0 +1,9 @@
+/**
+ * Filters out emoji characters from a text string
+ * @param text - The input text string
+ * @returns The filtered text without emoji characters
+ */
+export const removeEmojis = (text: string): string => {
+  // Filter out emoji characters (Unicode ranges for emojis)
+  return text.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu, '');
+};