From 9440e99227b8028207c414fac5fbb1c33d070f28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Sz=C3=BCcs?= <127139797+balazs-szucs@users.noreply.github.com> Date: Thu, 6 Nov 2025 15:33:34 +0100 Subject: [PATCH] [V2] feat(replaceColor): add CMYK color space conversion option (#4832) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description of Changes TLDR: - Introduced a new "Convert to CMYK" option in Replace Color settings. - Added tooltips for the new CMYK conversion feature. - Updated ReplaceColorParameters to support COLOR_SPACE_CONVERSION option. For backend reference see this PR: #4494 This pull request adds support for converting PDF colors to the CMYK color space in the Replace Color tool, which is especially useful for preparing documents for professional printing. The changes include updates to the user interface, tooltips, and type definitions to accommodate this new option. **Replace Color tool: Add CMYK color space conversion option** * Feature addition: * Added a new `COLOR_SPACE_CONVERSION` option to the `replaceAndInvertOption` parameter in the `ReplaceColorParameters` type, enabling support for CMYK color conversion. * Updated the `ReplaceColorSettings` component to include "Convert to CMYK" as a selectable option in the UI. * User guidance: * Added a new tooltip entry explaining the "Convert to CMYK" feature, describing its purpose and use case for professional printing. ### Front-end image --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [x] 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) - [x] I have performed a self-review of my own code - [x] 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) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [x] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [x] 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. --------- Signed-off-by: Balázs Szücs --- frontend/public/locales/en-GB/translation.json | 7 ++++++- .../components/tools/replaceColor/ReplaceColorSettings.tsx | 4 ++++ .../src/core/components/tooltips/useReplaceColorTips.ts | 6 +++++- .../hooks/tools/replaceColor/useReplaceColorParameters.ts | 2 +- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index 5d70efc9c..1ee4aeac2 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -2996,7 +2996,8 @@ "options": { "highContrast": "High contrast", "invertAll": "Invert all colours", - "custom": "Custom" + "custom": "Custom", + "cmyk": "Convert to CMYK" }, "tooltip": { "header": { @@ -3023,6 +3024,10 @@ "text": "Define your own text and background colours using the colour pickers. Perfect for creating branded documents or specific accessibility requirements.", "bullet1": "Text colour - Choose the colour for text elements", "bullet2": "Background colour - Set the background colour for the document" + }, + "cmyk": { + "title": "Convert to CMYK", + "text": "Convert the PDF from RGB colour space to CMYK colour space, optimized for professional printing. This process converts colours to the Cyan, Magenta, Yellow, Black model used by printers." } }, "error": { diff --git a/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx b/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx index a49342cd5..d0cdca5ce 100644 --- a/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx +++ b/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx @@ -23,6 +23,10 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false { value: 'CUSTOM_COLOR', label: t('replaceColor.options.custom', 'Custom') + }, + { + value: 'COLOR_SPACE_CONVERSION', + label: t('replaceColor.options.cmyk', 'Convert to CMYK') } ]; diff --git a/frontend/src/core/components/tooltips/useReplaceColorTips.ts b/frontend/src/core/components/tooltips/useReplaceColorTips.ts index 3fa8f7234..a6c3808d1 100644 --- a/frontend/src/core/components/tooltips/useReplaceColorTips.ts +++ b/frontend/src/core/components/tooltips/useReplaceColorTips.ts @@ -34,7 +34,11 @@ export const useReplaceColorTips = (): TooltipContent => { t("replaceColor.tooltip.custom.bullet1", "Text colour - Choose the colour for text elements"), t("replaceColor.tooltip.custom.bullet2", "Background colour - Set the background colour for the document") ] + }, + { + title: t("replaceColor.tooltip.cmyk.title", "Convert to CMYK"), + description: t("replaceColor.tooltip.cmyk.text", "Convert the PDF from RGB colour space to CMYK colour space, optimized for professional printing. This process converts colours to the Cyan, Magenta, Yellow, Black model used by printers.") } ] }; -}; \ No newline at end of file +}; diff --git a/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts b/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts index a91459715..a0a0099c4 100644 --- a/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts +++ b/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts @@ -2,7 +2,7 @@ import { BaseParameters } from '@app/types/parameters'; import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters'; export interface ReplaceColorParameters extends BaseParameters { - replaceAndInvertOption: 'HIGH_CONTRAST_COLOR' | 'CUSTOM_COLOR' | 'FULL_INVERSION'; + replaceAndInvertOption: 'HIGH_CONTRAST_COLOR' | 'CUSTOM_COLOR' | 'FULL_INVERSION' | 'COLOR_SPACE_CONVERSION'; highContrastColorCombination: 'WHITE_TEXT_ON_BLACK' | 'BLACK_TEXT_ON_WHITE' | 'YELLOW_TEXT_ON_BLACK' | 'GREEN_TEXT_ON_BLACK'; textColor: string; backGroundColor: string;