Skip to content

[Search] fix: FormattedMessage rendering escaped HTML instead of markup#234079

Merged
seialkali merged 1 commit intoelastic:mainfrom
seialkali:fix/docs-explorer-result-render
Sep 5, 2025
Merged

[Search] fix: FormattedMessage rendering escaped HTML instead of markup#234079
seialkali merged 1 commit intoelastic:mainfrom
seialkali:fix/docs-explorer-result-render

Conversation

@seialkali
Copy link
Contributor

@seialkali seialkali commented Sep 4, 2025

Summary

After upgrading to react-intl@6.6.6, <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

Screenshot 2025-09-04 at 18 19 21

After

Screenshot 2025-09-04 at 18 27 04

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Release note

Fixes the Docs Explorer paging info to correctly render bold text. After upgrading to react-intl@6.6.6, 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.

@seialkali seialkali requested a review from a team as a code owner September 4, 2025 17:35
@seialkali seialkali added release_note:fix Team:Search backport:all-open Backport to all branches that could still receive a release v9.2.0 labels Sep 4, 2025
@wildemat
Copy link
Contributor

wildemat commented Sep 4, 2025

Do all open backport versions have this updated react-intl version?

@seialkali seialkali changed the title fix: FormattedMessage rendering escaped HTML instead of markup Sep 4, 2025
@seialkali
Copy link
Contributor Author

seialkali commented Sep 4, 2025

Do all open backport versions have this updated react-intl version?

@wildemat Good question! I'm not entirely sure. As this bug goes all the way back to v8.15, I asked @TattdCodeMonkey how far back I should backport and he suggested I use the backport:all-open tag. @TattdCodeMonkey how would we be able to tell how far back the open backport versions go?

@wildemat
Copy link
Contributor

wildemat commented Sep 4, 2025

As this bug goes all the way back to v8.15, I asked @TattdCodeMonkey how far back I should backport and he suggested I use the backport:all-open tag

Good enough for me!

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
enterpriseSearch 1.1MB 1.1MB +3.0B

Saved Objects .kibana field count

Every field in each saved object type adds overhead to Elasticsearch. Kibana needs to keep the total field count below Elasticsearch's default limit of 1000 fields. Only specify field mappings for the fields you wish to search on or query. See https://www.elastic.co/guide/en/kibana/master/saved-objects-service.html#_mappings

id before after diff
_data_stream_timestamp 1 - -1
_doc_count 1 - -1
_ignored_source 1 - -1
_index_mode 1 - -1
_inference_fields 1 - -1
_tier 1 - -1
apm-custom-dashboards 5 - -5
apm-server-schema 2 - -2
apm-service-group 5 - -5
application_usage_daily 2 - -2
config 2 - -2
config-global 2 - -2
coreMigrationVersion 1 - -1
created_at 1 - -1
created_by 1 - -1
entity-definition 9 - -9
entity-discovery-api-key 2 - -2
event_loop_delays_daily 2 - -2
favorites 4 - -4
file 11 - -11
file-upload-usage-collection-telemetry 3 - -3
fileShare 5 - -5
infra-custom-dashboards 4 - -4
infrastructure-monitoring-log-view 2 - -2
intercept_trigger_record 5 - -5
legacy-url-alias 7 - -7
managed 1 - -1
ml-job 6 - -6
ml-module 13 - -13
ml-trained-model 7 - -7
monitoring-telemetry 2 - -2
namespace 1 - -1
namespaces 1 - -1
observability-onboarding-state 2 - -2
originId 1 - -1
product-doc-install-status 7 - -7
references 4 - -4
sample-data-telemetry 3 - -3
security-ai-prompt 8 - -8
slo 11 - -11
space 5 - -5
synthetics-monitor 34 - -34
synthetics-monitor-multi-space 34 - -34
tag 4 - -4
type 1 - -1
typeMigrationVersion 1 - -1
ui-metric 2 - -2
updated_at 1 - -1
updated_by 1 - -1
upgrade-assistant-ml-upgrade-operation 3 - -3
upgrade-assistant-reindex-operation 3 - -3
uptime-synthetics-api-key 2 - -2
url 5 - -5
usage-counters 2 - -2
total -246
@seialkali seialkali merged commit 760c553 into elastic:main Sep 5, 2025
22 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.18, 8.19, 9.0, 9.1

https://github.com/elastic/kibana/actions/runs/17487444787

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Sep 5, 2025
…up (elastic#234079)

## Summary

After upgrading to react-intl@6.6.6, `<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 react-intl@6.6.6, 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.

(cherry picked from commit 760c553)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Sep 5, 2025
…up (elastic#234079)

## Summary

After upgrading to react-intl@6.6.6, `<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 react-intl@6.6.6, 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.

(cherry picked from commit 760c553)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Sep 5, 2025
…up (elastic#234079)

## Summary

After upgrading to react-intl@6.6.6, `<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 react-intl@6.6.6, 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.

(cherry picked from commit 760c553)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Sep 5, 2025
…up (elastic#234079)

## Summary

After upgrading to react-intl@6.6.6, `<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 react-intl@6.6.6, 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.

(cherry picked from commit 760c553)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.18
8.19
9.0
9.1

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Sep 5, 2025
…f markup (#234079) (#234134)

# Backport

This will backport the following commits from `main` to `9.1`:
- [[Search] fix: FormattedMessage rendering escaped HTML instead of
markup (#234079)](#234079)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT
[{"author":{"name":"Brittany","email":"seialkali@gmail.com"},"sourceCommit":{"committedDate":"2025-09-05T08:05:07Z","message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Search","backport:all-open","v9.2.0"],"title":"[Search]
fix: FormattedMessage rendering escaped HTML instead of
markup","number":234079,"url":"https://github.com/elastic/kibana/pull/234079","mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/234079","number":234079,"mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}}]}]
BACKPORT-->

Co-authored-by: Brittany <seialkali@gmail.com>
kibanamachine added a commit that referenced this pull request Sep 5, 2025
…of markup (#234079) (#234132)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Search] fix: FormattedMessage rendering escaped HTML instead of
markup (#234079)](#234079)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT
[{"author":{"name":"Brittany","email":"seialkali@gmail.com"},"sourceCommit":{"committedDate":"2025-09-05T08:05:07Z","message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Search","backport:all-open","v9.2.0"],"title":"[Search]
fix: FormattedMessage rendering escaped HTML instead of
markup","number":234079,"url":"https://github.com/elastic/kibana/pull/234079","mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/234079","number":234079,"mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}}]}]
BACKPORT-->

Co-authored-by: Brittany <seialkali@gmail.com>
kibanamachine added a commit that referenced this pull request Sep 5, 2025
…f markup (#234079) (#234133)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Search] fix: FormattedMessage rendering escaped HTML instead of
markup (#234079)](#234079)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT
[{"author":{"name":"Brittany","email":"seialkali@gmail.com"},"sourceCommit":{"committedDate":"2025-09-05T08:05:07Z","message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Search","backport:all-open","v9.2.0"],"title":"[Search]
fix: FormattedMessage rendering escaped HTML instead of
markup","number":234079,"url":"https://github.com/elastic/kibana/pull/234079","mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/234079","number":234079,"mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}}]}]
BACKPORT-->

Co-authored-by: Brittany <seialkali@gmail.com>
kibanamachine added a commit that referenced this pull request Sep 5, 2025
…of markup (#234079) (#234131)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[Search] fix: FormattedMessage rendering escaped HTML instead of
markup (#234079)](#234079)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT
[{"author":{"name":"Brittany","email":"seialkali@gmail.com"},"sourceCommit":{"committedDate":"2025-09-05T08:05:07Z","message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Search","backport:all-open","v9.2.0"],"title":"[Search]
fix: FormattedMessage rendering escaped HTML instead of
markup","number":234079,"url":"https://github.com/elastic/kibana/pull/234079","mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/234079","number":234079,"mergeCommit":{"message":"[Search]
fix: FormattedMessage rendering escaped HTML instead of markup
(#234079)\n\n## Summary\n\nAfter upgrading to react-intl@6.6.6,
`<FormattedMessage>` no longer\nrenders raw HTML when returning strings
from value formatters.\nPreviously, returning a string like
`\"<strong>...</strong>\"` would be\ninterpreted as HTML and rendered.
In v6, all strings are escaped for\nsafety, and only React elements are
rendered as markup.\n\nAs a result, the `PagingInfoView` component which
uses,\n`<FormattedMessage>`, was displaying `<strong>` tags as plain
text\ninstead of styled markup on the Docs Explorer page. This has been
fixed\nby updating the strong property in `<FormattedMessage>` to return
a\nReact element.\n\n**Before**\n\n<img width=\"600\" alt=\"Screenshot
2025-09-04 at 18 19
21\"\nsrc=\"https://github.com/user-attachments/assets/b0024691-753c-47ab-8d5c-92e9e06d96a6\"\n/>\n\n**After**\n\n<img
width=\"600\" alt=\"Screenshot 2025-09-04 at 18 27
04\"\nsrc=\"https://github.com/user-attachments/assets/63de1c5e-e129-4dd0-9f79-3537196c3a4c\"\n/>\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [ ] ~Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~\n-
[
]\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\nwas
added for features that require explanation or tutorials~\n- [ ] ~[Unit
or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common scenarios~\n- [ ] ~If a plugin
configuration key changed, check if it needs to be\nallowlisted in the
cloud and added to the
[docker\nlist]~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)\n-
[ ] ~This was checked for breaking HTTP API changes, and any
breaking\nchanges have been approved by the breaking-change committee.
The\n`release_note:breaking` label should be applied in these
situations.~\n- [ ] ~[Flaky
Test\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\nused on any tests changed~\n- [x] The PR description includes the
appropriate Release Notes section,\nand the correct `release_note:*`
label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\n-
[x] Review the
[backport\nguidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)\nand
apply applicable `backport:*` labels.\n\n## Release note\n\nFixes the
Docs Explorer paging info to correctly render bold text.
After\nupgrading to react-intl@6.6.6, the `<FormattedMessage>`
component\nescaped HTML returned from value formatters, causing
`<strong>` tags to\nappear as plain text. The component now uses React
elements to render\nthe bold text
properly.","sha":"760c5535685c46a429e07d9eaae8d9cd2972096f"}}]}]
BACKPORT-->

Co-authored-by: Brittany <seialkali@gmail.com>
shahargl pushed a commit to shahargl/kibana that referenced this pull request Sep 7, 2025
…up (elastic#234079)

## Summary

After upgrading to react-intl@6.6.6, `<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 react-intl@6.6.6, 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.
KodeRad pushed a commit to KodeRad/kibana that referenced this pull request Sep 15, 2025
…up (elastic#234079)

## Summary

After upgrading to react-intl@6.6.6, `<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 react-intl@6.6.6, 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.
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Sep 24, 2025
…up (elastic#234079)

## Summary

After upgrading to react-intl@6.6.6, `<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 react-intl@6.6.6, 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

4 participants