Skip to content

Commit 760c553

Browse files
authored
[Search] fix: FormattedMessage rendering escaped HTML instead of markup (#234079)
## Summary After upgrading to [email protected], `<FormattedMessage>` no longer renders raw HTML when returning strings from value formatters. Previously, returning a string like `"<strong>...</strong>"` would be interpreted as HTML and rendered. In v6, all strings are escaped for safety, and only React elements are rendered as markup. As a result, the `PagingInfoView` component which uses, `<FormattedMessage>`, was displaying `<strong>` tags as plain text instead of styled markup on the Docs Explorer page. This has been fixed by updating the strong property in `<FormattedMessage>` to return a React element. **Before** <img width="600" alt="Screenshot 2025-09-04 at 18 19 21" src="https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6" /> **After** <img width="600" alt="Screenshot 2025-09-04 at 18 27 04" src="https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] ~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~ - [ ] ~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~ - [ ] ~[Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios~ - [ ] ~If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] ~This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~ - [ ] ~[Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~ - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ## Release note Fixes the Docs Explorer paging info to correctly render bold text. After upgrading to [email protected], the `<FormattedMessage>` component escaped HTML returned from value formatters, causing `<strong>` tags to appear as plain text. The component now uses React elements to render the bold text properly.
1 parent f7add87 commit 760c553

File tree

1 file changed

+1
-1
lines changed
  • x-pack/solutions/search/plugins/enterprise_search/public/applications/applications/components/search_application/docs_explorer

1 file changed

+1
-1
lines changed

x-pack/solutions/search/plugins/enterprise_search/public/applications/applications/components/search_application/docs_explorer/search_ui_components.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,8 +171,8 @@ export const PagingInfoView: React.FC<PagingInfoViewProps> = ({ start, end, tota
171171
values={{
172172
end,
173173
start,
174+
strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
174175
totalResults,
175-
strong: (chunks) => `<strong>${chunks}</strong>`,
176176
}}
177177
/>
178178
</EuiText>

0 commit comments

Comments
 (0)