diff --git a/frontend/public/locales/en-US/translation.json b/frontend/public/locales/en-US/translation.json index 40c6d72ce..f6ec4c83e 100644 --- a/frontend/public/locales/en-US/translation.json +++ b/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.", diff --git a/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx b/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx index a570efb19..9a267f638 100644 --- a/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx +++ b/frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx @@ -15,6 +15,16 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false } return ( + {/* Size - single row */} + onParameterChange('fontSize', typeof value === 'number' ? value : 12)} + unit={parameters.watermarkType === 'text' ? 'pt' : 'px'} + min={1} + disabled={disabled} + /> + {/* Position & Appearance - 2 per row */} - - - - {t("watermark.settings.color", "Colour")} - - onParameterChange("customColor", value)} - disabled={disabled} - format="hex" - /> - - - - - {t("watermark.settings.fontSize", "Size")} - - onParameterChange("fontSize", value || 12)} - min={8} - max={72} - disabled={disabled} - /> - - - - {t("watermark.settings.alphabet", "Alphabet")} - - value && onParameterChange("alphabet", value)} + data={alphabetOptions} + disabled={disabled} + /> + ); }; diff --git a/frontend/src/components/tools/addWatermark/WatermarkWording.tsx b/frontend/src/components/tools/addWatermark/WatermarkWording.tsx index aad046130..621a0f399 100644 --- a/frontend/src/components/tools/addWatermark/WatermarkWording.tsx +++ b/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) => { + const value = e.target.value; + const filteredValue = removeEmojis(value); + onParameterChange('watermarkText', filteredValue); + }; + return ( onParameterChange('watermarkText', e.target.value)} + onChange={handleTextChange} disabled={disabled} /> diff --git a/frontend/src/components/tooltips/useWatermarkTips.ts b/frontend/src/components/tooltips/useWatermarkTips.ts index dd14a31cc..d9ffbd7d9 100644 --- a/frontend/src/components/tooltips/useWatermarkTips.ts +++ b/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, { diff --git a/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts b/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts index f9bab0a7c..aa2f3bdda 100644 --- a/frontend/src/hooks/tools/addWatermark/useAddWatermarkParameters.ts +++ b/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; diff --git a/frontend/src/utils/textUtils.ts b/frontend/src/utils/textUtils.ts new file mode 100644 index 000000000..e033d505a --- /dev/null +++ b/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, ''); +}; \ No newline at end of file