Skip to content

feat: warn about invalid ICU placeholders in the editor - #3782

Merged
dkrizan merged 2 commits into
mainfrom
bdshadow/invalid-icu-placeholders
Jul 20, 2026
Merged

feat: warn about invalid ICU placeholders in the editor#3782
dkrizan merged 2 commits into
mainfrom
bdshadow/invalid-icu-placeholders

Conversation

@bdshadow

@bdshadow bdshadow commented Jul 1, 2026

Copy link
Copy Markdown
Member

What

When ICU is enabled for a project and the edited translation contains an invalid ICU placeholder (e.g. {placeholder:space}), show an Invalid ICU: {value} message next to the "Missing:" placeholder hint, listing the offending expression(s).

This complements the editor-side change (tolgee/editor#10, released as @tginternal/editor 1.19.0), where such expressions now render as plain text: no chip in "Hide code", no highlighting in "Show code", and no RTL scrambling. Invalid RTL content keeps its own direction instead of being forced LTR.

Changes

  • useInvalidPlaceholders hook: detects invalid placeholders in the current translation via getInvalidPlaceholders, gated on project.icuPlaceholders.
  • MissingPlaceholders: renders the Invalid ICU: {value} warning (error color) alongside the missing-placeholders hint.
  • Wired into both the list and table TranslationWrite views.
  • @tginternal/editor bumped to 1.19.0.

TODO before merge

  • feat: render invalid ICU placeholders as plain text editor#10 merged and published (adds the getInvalidPlaceholders export).
  • Bump @tginternal/editor to the published version.
  • Create the translations_invalid_icu_placeholders key in the Tolgee project (tagged draft: invalid-icu-placeholders, with screenshot).

Testing

eslint and tsc pass. Verified manually against RTL Arabic translations mixing valid ({name}) and invalid ({placeholder:space}, {هذا نص عربي}) placeholders: valid ones render as chips in the correct RTL position, invalid ones as plain text following their content direction, and the warning message shows in both editor layouts.

Summary by CodeRabbit

  • New Features
    • Added validation for invalid ICU placeholders while editing translations.
    • Show warnings for invalid placeholders alongside existing missing-placeholder alerts.
    • Enabled invalid-placeholder detection in both translation lists and translation tables.
  • Bug Fixes
    • Improved translation feedback by surfacing malformed placeholder issues during editing.

@coderabbitai

coderabbitai Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ef8e06c6-b7b4-49e6-a237-89c05bcc9fa4

📥 Commits

Reviewing files that changed from the base of the PR and between 565613c and 01032b8.

⛔ Files ignored due to path filters (1)
  • webapp/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (5)
  • webapp/package.json
  • webapp/src/views/projects/translations/TranslationsList/TranslationWrite.tsx
  • webapp/src/views/projects/translations/TranslationsTable/TranslationWrite.tsx
  • webapp/src/views/projects/translations/cell/MissingPlaceholders.tsx
  • webapp/src/views/projects/translations/cell/useInvalidPlaceholders.ts
🚧 Files skipped from review as they are similar to previous changes (5)
  • webapp/package.json
  • webapp/src/views/projects/translations/cell/useInvalidPlaceholders.ts
  • webapp/src/views/projects/translations/TranslationsTable/TranslationWrite.tsx
  • webapp/src/views/projects/translations/TranslationsList/TranslationWrite.tsx
  • webapp/src/views/projects/translations/cell/MissingPlaceholders.tsx

📝 Walkthrough

Walkthrough

The translation list and table editors now compute invalid ICU placeholders using project placeholder data and display them through MissingPlaceholders alongside missing placeholder messages.

Changes

Invalid ICU placeholder validation

Layer / File(s) Summary
Placeholder validation hook and editor dependency
webapp/package.json, webapp/src/views/projects/translations/cell/useInvalidPlaceholders.ts
Updates @tginternal/editor and adds a memoized hook for computing invalid placeholders.
Translation editor validation wiring
webapp/src/views/projects/translations/TranslationsList/TranslationWrite.tsx, webapp/src/views/projects/translations/TranslationsTable/TranslationWrite.tsx
Both editors invoke the hook and pass results to MissingPlaceholders; the table editor renders it for missing or invalid placeholders.
Invalid placeholder message rendering
webapp/src/views/projects/translations/cell/MissingPlaceholders.tsx
Adds the invalid placeholder prop and renders a localized message with the invalid values.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant TranslationWrite
  participant useInvalidPlaceholders
  participant useProject
  participant getInvalidPlaceholders
  participant MissingPlaceholders
  TranslationWrite->>useInvalidPlaceholders: pass translation state
  useInvalidPlaceholders->>useProject: read ICU placeholders
  useInvalidPlaceholders->>getInvalidPlaceholders: validate translation placeholders
  getInvalidPlaceholders-->>useInvalidPlaceholders: return invalid placeholders
  useInvalidPlaceholders-->>TranslationWrite: return invalid placeholders
  TranslationWrite->>MissingPlaceholders: pass missing and invalid placeholders
  MissingPlaceholders-->>TranslationWrite: render localized validation messages
Loading

Suggested reviewers: anty0, dkrizan

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the main change: adding editor warnings for invalid ICU placeholders.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch bdshadow/invalid-icu-placeholders

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@bdshadow
bdshadow requested a review from Anty0 July 1, 2026 13:07
@bdshadow
bdshadow marked this pull request as ready for review July 18, 2026 22:46
@bdshadow
bdshadow requested a review from dkrizan July 18, 2026 22:46
@bdshadow
bdshadow force-pushed the bdshadow/invalid-icu-placeholders branch from b8f1ee4 to 565613c Compare July 20, 2026 08:29
bdshadow added 2 commits July 20, 2026 13:48
Show an "Invalid ICU: {value}" message next to the missing-placeholders
hint when the edited translation contains text that looks like a
placeholder but isn't valid ICU (e.g. `{placeholder:space}`), using the
new getInvalidPlaceholders helper from @tginternal/editor.
@bdshadow
bdshadow force-pushed the bdshadow/invalid-icu-placeholders branch from 565613c to 01032b8 Compare July 20, 2026 11:49
@dkrizan
dkrizan merged commit 95838f5 into main Jul 20, 2026
71 of 74 checks passed
@dkrizan
dkrizan deleted the bdshadow/invalid-icu-placeholders branch July 20, 2026 13:18
TolgeeMachine added a commit that referenced this pull request Jul 20, 2026
# [3.214.0](v3.213.1...v3.214.0) (2026-07-20)

### Features

* warn about invalid ICU placeholders in the editor ([#3782](#3782)) ([95838f5](95838f5)), closes [tolgee/editor#10](tolgee/editor#10) [tolgee/editor#10](tolgee/editor#10)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants