diff --git a/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx b/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx index 50b304e0b..97ca4f6d4 100644 --- a/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx +++ b/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx @@ -3,6 +3,7 @@ import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelection import { parseSelectionWithDiagnostics } from '@app/utils/bulkselection/parseSelection'; import PageSelectionInput from '@app/components/pageEditor/bulkSelectionPanel/PageSelectionInput'; import SelectedPagesDisplay from '@app/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay'; +import PageSelectionSyntaxHint from '@app/components/shared/PageSelectionSyntaxHint'; import AdvancedSelectionPanel from '@app/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel'; interface BulkSelectionPanelProps { @@ -56,10 +57,12 @@ const BulkSelectionPanel = ({ onToggleAdvanced={setAdvancedOpened} /> + + { + const [syntaxError, setSyntaxError] = useState(null); + + useEffect(() => { + const text = (input || '').trim(); + if (!text) { + setSyntaxError(null); + return; + } + + try { + const { warning } = parseSelectionWithDiagnostics(text, maxPages && maxPages > 0 ? maxPages : FALLBACK_MAX_PAGES); + setSyntaxError(warning ? 'There is a syntax issue. See Page Selection tips for help.' : null); + } catch { + setSyntaxError('There is a syntax issue. See Page Selection tips for help.'); + } + }, [input, maxPages]); + + if (!syntaxError) return null; + + return ( +
+ {syntaxError} +
+ ); +}; + +export default PageSelectionSyntaxHint; + + diff --git a/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx b/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx index 672c6b175..4489458db 100644 --- a/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx +++ b/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx @@ -1,6 +1,7 @@ import { Stack, TextInput } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { ExtractPagesParameters } from "@app/hooks/tools/extractPages/useExtractPagesParameters"; +import PageSelectionSyntaxHint from "@app/components/shared/PageSelectionSyntaxHint"; interface ExtractPagesSettingsProps { parameters: ExtractPagesParameters; @@ -25,6 +26,7 @@ const ExtractPagesSettings = ({ parameters, onParameterChange, disabled = false disabled={disabled} required /> + ); };