From cf8a2b36b148c4eef2f449bde351eab15a630d99 Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Tue, 20 Jun 2023 13:19:41 -0400 Subject: [PATCH 1/9] add support for rendering RichTextv2 and markdown converted to HTML J=BACK-2241 TEST=manual ran test-site of search-ui-react with entity that had formatted RichTextv2 data and verified that it was rendered properly --- .../FeaturedSnippetDirectAnswer.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/FeaturedSnippetDirectAnswer.tsx b/src/components/FeaturedSnippetDirectAnswer.tsx index 97edc630f..bfed9b7ad 100644 --- a/src/components/FeaturedSnippetDirectAnswer.tsx +++ b/src/components/FeaturedSnippetDirectAnswer.tsx @@ -1,5 +1,6 @@ import { FeaturedSnippetDirectAnswer as FeaturedSnippetDirectAnswerType } from '@yext/search-headless-react'; import { renderHighlightedValue } from './utils/renderHighlightedValue'; +import {CSSProperties} from "react"; /** * Props for {@link FeaturedSnippetDirectAnswer}. @@ -29,21 +30,30 @@ interface FeaturedSnippetDirectAnswerCssClasses { * * @internal */ + +const unsupportedTextFormats: string[] = ['rich_text', 'rich_text_v2', 'markdown'] + export function FeaturedSnippetDirectAnswer({ result, readMoreClickHandler, cssClasses = {} -}: FeaturedSnippetDirectAnswerProps): JSX.Element { +}: FeaturedSnippetDirectAnswerProps) : JSX.Element { const answer = result.fieldType === 'multi_line_text' && result.value; - // TODO: SLAP-2340, update rich text snippets to convert the markdown - if (result.fieldType === 'rich_text') { - console.warn('Rendering markdown for rich text direct answer is currently not supported. Displaying the unrendered markdown string as is.'); + if (unsupportedTextFormats.includes(result.fieldType)) { + console.warn('Rendering ${result.fieldType} direct answer is currently not supported. ' + + 'You can modify your search configuration to convert ${result.fieldType} to HTML to be rendered ' + + 'on the page.'); + } + let snippet: JSX.Element; + if(result.fieldType == 'html'){ + snippet =
+ } + else{ + snippet = renderHighlightedValue(result.snippet, { highlighted: cssClasses.highlighted }); } - const snippet = renderHighlightedValue(result.snippet, { highlighted: cssClasses.highlighted }); const link = result.relatedResult.link || result.relatedResult.rawData.landingPageUrl as string; const name = result.relatedResult.name; const snippetLinkMessage = 'Read more about '; - return (
{answer && From 8ab9dd87071dc6c565723637a964e694ef749464 Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Tue, 27 Jun 2023 12:19:42 -0400 Subject: [PATCH 2/9] bump version numbers in package.json and package-lock.json --- package-lock.json | 52 +++++++++---------- package.json | 6 +-- .../FeaturedSnippetDirectAnswer.tsx | 4 +- test-site/package-lock.json | 8 +-- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2d05180a8..aaaeb6e82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@yext/search-ui-react", - "version": "1.2.0", + "version": "1.4.0-beta.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@yext/search-ui-react", - "version": "1.2.0", + "version": "1.4.0-beta.0", "license": "BSD-3-Clause", "dependencies": { "@microsoft/api-documenter": "^7.15.3", @@ -54,7 +54,7 @@ "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.2.0", + "@yext/search-headless-react": "2.3.0-beta.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "eslint": "^8.11.0", @@ -71,7 +71,7 @@ "typescript": "~4.5.5" }, "peerDependencies": { - "@yext/search-headless-react": "^2.2.0", + "@yext/search-headless-react": "2.3.0-beta.0", "react": "^16.14 || ^17 || ^18", "react-dom": "^16.14 || ^17 || ^18" } @@ -10738,9 +10738,9 @@ } }, "node_modules/@yext/search-core": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@yext/search-core/-/search-core-2.3.0.tgz", - "integrity": "sha512-vSvNXWv9E/6s4oRB1og4zHfRTTEHrmUm2sh95Y1Dn94U2mkjNDGSsshEeamU2UIJO7Ee5oT6K6JDU7XAVOxC4A==", + "version": "2.4.0-beta.0", + "resolved": "https://registry.npmjs.org/@yext/search-core/-/search-core-2.4.0-beta.0.tgz", + "integrity": "sha512-daes8WoldwfPmCVxiiT/WZMaBBF7S3ax3pzVLc+z3nmnRDDQBLY1TrnYQqsasfb1YKpy4Qv/+6y/d2pR4IdYgA==", "dev": true, "dependencies": { "@babel/runtime-corejs3": "^7.12.5", @@ -10751,24 +10751,24 @@ } }, "node_modules/@yext/search-headless": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@yext/search-headless/-/search-headless-2.3.0.tgz", - "integrity": "sha512-Uh5DVeV99dkaeF6ayuUEkcUbI8wHn/7bz4aHrjtdDyl3F/6GX3cyHbs/BQh1kWCr+t8EJUWVPl5s4jmL3tst/Q==", + "version": "2.4.0-beta.0", + "resolved": "https://registry.npmjs.org/@yext/search-headless/-/search-headless-2.4.0-beta.0.tgz", + "integrity": "sha512-m5+2chjp3hm80pMpNLMBSqECW4B0WmQg+gQdLVvYZRm9EjQeyR2G9gtU6IyjwcmOL+JY2sMoG5Z2yxUPJtHCPw==", "dev": true, "dependencies": { "@reduxjs/toolkit": "^1.8.1", - "@yext/search-core": "^2.3.0", + "@yext/search-core": "2.4.0-beta.0", "js-levenshtein": "^1.1.6", "lodash": "^4.17.21" } }, "node_modules/@yext/search-headless-react": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@yext/search-headless-react/-/search-headless-react-2.2.0.tgz", - "integrity": "sha512-x2Sx7uS3w5E8RfuIpPsQZGWTGNKS9kRWDlQReUngzxP+UhoBQ8L7qNTGGbJLZ+LUpjRqTS1RuZP4scljbla//g==", + "version": "2.3.0-beta.0", + "resolved": "https://registry.npmjs.org/@yext/search-headless-react/-/search-headless-react-2.3.0-beta.0.tgz", + "integrity": "sha512-hFcWOvcyEYSvBO5YHCFqory/j/Pm/geDg0ENH29J9i3uMa1i5sTCWpUhh5HjOpJBPt3rLmmLKa1KTMQf5t9sTA==", "dev": true, "dependencies": { - "@yext/search-headless": "^2.3.0", + "@yext/search-headless": "2.4.0-beta.0", "use-sync-external-store": "^1.1.0" }, "peerDependencies": { @@ -41108,9 +41108,9 @@ } }, "@yext/search-core": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@yext/search-core/-/search-core-2.3.0.tgz", - "integrity": "sha512-vSvNXWv9E/6s4oRB1og4zHfRTTEHrmUm2sh95Y1Dn94U2mkjNDGSsshEeamU2UIJO7Ee5oT6K6JDU7XAVOxC4A==", + "version": "2.4.0-beta.0", + "resolved": "https://registry.npmjs.org/@yext/search-core/-/search-core-2.4.0-beta.0.tgz", + "integrity": "sha512-daes8WoldwfPmCVxiiT/WZMaBBF7S3ax3pzVLc+z3nmnRDDQBLY1TrnYQqsasfb1YKpy4Qv/+6y/d2pR4IdYgA==", "dev": true, "requires": { "@babel/runtime-corejs3": "^7.12.5", @@ -41118,24 +41118,24 @@ } }, "@yext/search-headless": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@yext/search-headless/-/search-headless-2.3.0.tgz", - "integrity": "sha512-Uh5DVeV99dkaeF6ayuUEkcUbI8wHn/7bz4aHrjtdDyl3F/6GX3cyHbs/BQh1kWCr+t8EJUWVPl5s4jmL3tst/Q==", + "version": "2.4.0-beta.0", + "resolved": "https://registry.npmjs.org/@yext/search-headless/-/search-headless-2.4.0-beta.0.tgz", + "integrity": "sha512-m5+2chjp3hm80pMpNLMBSqECW4B0WmQg+gQdLVvYZRm9EjQeyR2G9gtU6IyjwcmOL+JY2sMoG5Z2yxUPJtHCPw==", "dev": true, "requires": { "@reduxjs/toolkit": "^1.8.1", - "@yext/search-core": "^2.3.0", + "@yext/search-core": "2.4.0-beta.0", "js-levenshtein": "^1.1.6", "lodash": "^4.17.21" } }, "@yext/search-headless-react": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@yext/search-headless-react/-/search-headless-react-2.2.0.tgz", - "integrity": "sha512-x2Sx7uS3w5E8RfuIpPsQZGWTGNKS9kRWDlQReUngzxP+UhoBQ8L7qNTGGbJLZ+LUpjRqTS1RuZP4scljbla//g==", + "version": "2.3.0-beta.0", + "resolved": "https://registry.npmjs.org/@yext/search-headless-react/-/search-headless-react-2.3.0-beta.0.tgz", + "integrity": "sha512-hFcWOvcyEYSvBO5YHCFqory/j/Pm/geDg0ENH29J9i3uMa1i5sTCWpUhh5HjOpJBPt3rLmmLKa1KTMQf5t9sTA==", "dev": true, "requires": { - "@yext/search-headless": "^2.3.0", + "@yext/search-headless": "2.4.0-beta.0", "use-sync-external-store": "^1.1.0" } }, diff --git a/package.json b/package.json index 804d8c9c4..e0d1cd443 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yext/search-ui-react", - "version": "1.3.0-beta.1", + "version": "1.4.0-beta.0", "description": "A library of React Components for powering Yext Search integrations", "author": "slapshot@yext.com", "license": "BSD-3-Clause", @@ -76,7 +76,7 @@ "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.2.0", + "@yext/search-headless-react": "2.3.0-beta.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "eslint": "^8.11.0", @@ -93,7 +93,7 @@ "typescript": "~4.5.5" }, "peerDependencies": { - "@yext/search-headless-react": "^2.2.0", + "@yext/search-headless-react": "2.3.0-beta.0", "react": "^16.14 || ^17 || ^18", "react-dom": "^16.14 || ^17 || ^18" }, diff --git a/src/components/FeaturedSnippetDirectAnswer.tsx b/src/components/FeaturedSnippetDirectAnswer.tsx index bfed9b7ad..a511a5892 100644 --- a/src/components/FeaturedSnippetDirectAnswer.tsx +++ b/src/components/FeaturedSnippetDirectAnswer.tsx @@ -1,6 +1,5 @@ import { FeaturedSnippetDirectAnswer as FeaturedSnippetDirectAnswerType } from '@yext/search-headless-react'; import { renderHighlightedValue } from './utils/renderHighlightedValue'; -import {CSSProperties} from "react"; /** * Props for {@link FeaturedSnippetDirectAnswer}. @@ -37,7 +36,7 @@ export function FeaturedSnippetDirectAnswer({ result, readMoreClickHandler, cssClasses = {} -}: FeaturedSnippetDirectAnswerProps) : JSX.Element { +}: FeaturedSnippetDirectAnswerProps): JSX.Element { const answer = result.fieldType === 'multi_line_text' && result.value; if (unsupportedTextFormats.includes(result.fieldType)) { console.warn('Rendering ${result.fieldType} direct answer is currently not supported. ' + @@ -54,6 +53,7 @@ export function FeaturedSnippetDirectAnswer({ const link = result.relatedResult.link || result.relatedResult.rawData.landingPageUrl as string; const name = result.relatedResult.name; const snippetLinkMessage = 'Read more about '; + return (
{answer && diff --git a/test-site/package-lock.json b/test-site/package-lock.json index b5902bf7c..64a7a315c 100644 --- a/test-site/package-lock.json +++ b/test-site/package-lock.json @@ -32,7 +32,7 @@ }, "..": { "name": "@yext/search-ui-react", - "version": "1.2.0", + "version": "1.4.0-beta.0", "license": "BSD-3-Clause", "dependencies": { "@microsoft/api-documenter": "^7.15.3", @@ -80,7 +80,7 @@ "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.2.0", + "@yext/search-headless-react": "2.3.0-beta.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "eslint": "^8.11.0", @@ -97,7 +97,7 @@ "typescript": "~4.5.5" }, "peerDependencies": { - "@yext/search-headless-react": "^2.2.0", + "@yext/search-headless-react": "2.3.0-beta.0", "react": "^16.14 || ^17 || ^18", "react-dom": "^16.14 || ^17 || ^18" } @@ -20112,7 +20112,7 @@ "@typescript-eslint/parser": "^5.16.0", "@yext/analytics": "^0.2.0-beta.3", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "^2.2.0", + "@yext/search-headless-react": "2.3.0-beta.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "classnames": "^2.3.1", From 7ff3961aa81381652147e892b97dcac7f6839771 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 27 Jun 2023 16:29:45 +0000 Subject: [PATCH 3/9] Automated update to THIRD-PARTY-NOTICES from github action's 3rd party notices check --- THIRD-PARTY-NOTICES | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/THIRD-PARTY-NOTICES b/THIRD-PARTY-NOTICES index 17221cb2e..dcdb417f9 100644 --- a/THIRD-PARTY-NOTICES +++ b/THIRD-PARTY-NOTICES @@ -1020,7 +1020,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. The following NPM package may be included in this product: - - @yext/search-core@2.3.0 + - @yext/search-core@2.4.0-beta.0 This package contains the following license and notice below: @@ -1064,7 +1064,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. The following NPM package may be included in this product: - - @yext/search-headless-react@2.2.0 + - @yext/search-headless-react@2.3.0-beta.0 This package contains the following license and notice below: @@ -1108,7 +1108,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. The following NPM package may be included in this product: - - @yext/search-headless@2.3.0 + - @yext/search-headless@2.4.0-beta.0 This package contains the following license and notice below: From 44868eae999689d7030779d9324c8edd53f91797 Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Tue, 27 Jun 2023 12:34:22 -0400 Subject: [PATCH 4/9] fix linting issues --- src/components/FeaturedSnippetDirectAnswer.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/FeaturedSnippetDirectAnswer.tsx b/src/components/FeaturedSnippetDirectAnswer.tsx index a511a5892..602027d62 100644 --- a/src/components/FeaturedSnippetDirectAnswer.tsx +++ b/src/components/FeaturedSnippetDirectAnswer.tsx @@ -30,7 +30,7 @@ interface FeaturedSnippetDirectAnswerCssClasses { * @internal */ -const unsupportedTextFormats: string[] = ['rich_text', 'rich_text_v2', 'markdown'] +const unsupportedTextFormats: string[] = ['rich_text', 'rich_text_v2', 'markdown']; export function FeaturedSnippetDirectAnswer({ result, @@ -39,15 +39,16 @@ export function FeaturedSnippetDirectAnswer({ }: FeaturedSnippetDirectAnswerProps): JSX.Element { const answer = result.fieldType === 'multi_line_text' && result.value; if (unsupportedTextFormats.includes(result.fieldType)) { - console.warn('Rendering ${result.fieldType} direct answer is currently not supported. ' + - 'You can modify your search configuration to convert ${result.fieldType} to HTML to be rendered ' + - 'on the page.'); + console.warn('Rendering ' + result.fieldType + ' direct answer is currently not supported. ' + + 'You can modify your search configuration to convert ' + result.fieldType + ' to HTML to be rendered ' + + 'on the page.'); } let snippet: JSX.Element; - if(result.fieldType == 'html'){ - snippet =
+ if (result.fieldType === 'html') { + const snippetValue = { __html: result.snippet.value }; + snippet =
; } - else{ + else { snippet = renderHighlightedValue(result.snippet, { highlighted: cssClasses.highlighted }); } const link = result.relatedResult.link || result.relatedResult.rawData.landingPageUrl as string; From 29cf04c387aa8ea66b98d21fc4e79bad119c6d48 Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Tue, 27 Jun 2023 12:41:55 -0400 Subject: [PATCH 5/9] try fixing linting issue again --- src/components/FeaturedSnippetDirectAnswer.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/FeaturedSnippetDirectAnswer.tsx b/src/components/FeaturedSnippetDirectAnswer.tsx index 602027d62..48381014f 100644 --- a/src/components/FeaturedSnippetDirectAnswer.tsx +++ b/src/components/FeaturedSnippetDirectAnswer.tsx @@ -46,7 +46,9 @@ export function FeaturedSnippetDirectAnswer({ let snippet: JSX.Element; if (result.fieldType === 'html') { const snippetValue = { __html: result.snippet.value }; - snippet =
; + snippet = ( +
+ ); } else { snippet = renderHighlightedValue(result.snippet, { highlighted: cssClasses.highlighted }); From 4e5e672979cf78a69081dcfbbc2606f92105e221 Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Tue, 27 Jun 2023 13:21:10 -0400 Subject: [PATCH 6/9] fix linting warning with useMemo --- src/components/FeaturedSnippetDirectAnswer.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/FeaturedSnippetDirectAnswer.tsx b/src/components/FeaturedSnippetDirectAnswer.tsx index 48381014f..cd683c46b 100644 --- a/src/components/FeaturedSnippetDirectAnswer.tsx +++ b/src/components/FeaturedSnippetDirectAnswer.tsx @@ -1,5 +1,6 @@ import { FeaturedSnippetDirectAnswer as FeaturedSnippetDirectAnswerType } from '@yext/search-headless-react'; import { renderHighlightedValue } from './utils/renderHighlightedValue'; +import { useMemo } from 'react'; /** * Props for {@link FeaturedSnippetDirectAnswer}. @@ -44,10 +45,12 @@ export function FeaturedSnippetDirectAnswer({ + 'on the page.'); } let snippet: JSX.Element; + const snippetValue = useMemo(() => + { return { __html: result.snippet.value }; }, [result.snippet.value]); + if (result.fieldType === 'html') { - const snippetValue = { __html: result.snippet.value }; snippet = ( -
+
); } else { From f9be1b1cbaa5671e154a78e020d8709fa2e6f166 Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Tue, 27 Jun 2023 17:48:19 -0400 Subject: [PATCH 7/9] change version number to 1.3.0-beta.2 --- package-lock.json | 4 ++-- package.json | 2 +- test-site/package-lock.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index aaaeb6e82..c5a6a6d86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@yext/search-ui-react", - "version": "1.4.0-beta.0", + "version": "1.3.0-beta.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@yext/search-ui-react", - "version": "1.4.0-beta.0", + "version": "1.3.0-beta.2", "license": "BSD-3-Clause", "dependencies": { "@microsoft/api-documenter": "^7.15.3", diff --git a/package.json b/package.json index e0d1cd443..acd9f994a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@yext/search-ui-react", - "version": "1.4.0-beta.0", + "version": "1.3.0-beta.2", "description": "A library of React Components for powering Yext Search integrations", "author": "slapshot@yext.com", "license": "BSD-3-Clause", diff --git a/test-site/package-lock.json b/test-site/package-lock.json index 64a7a315c..54fea188a 100644 --- a/test-site/package-lock.json +++ b/test-site/package-lock.json @@ -32,7 +32,7 @@ }, "..": { "name": "@yext/search-ui-react", - "version": "1.4.0-beta.0", + "version": "1.3.0-beta.2", "license": "BSD-3-Clause", "dependencies": { "@microsoft/api-documenter": "^7.15.3", From 26d1b821f99c1bc4d4065db6ffe42e3a041d6f8a Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Wed, 28 Jun 2023 14:32:42 -0400 Subject: [PATCH 8/9] add check to prevent crash if snippet is not defined --- src/components/FeaturedSnippetDirectAnswer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FeaturedSnippetDirectAnswer.tsx b/src/components/FeaturedSnippetDirectAnswer.tsx index cd683c46b..8e8585f58 100644 --- a/src/components/FeaturedSnippetDirectAnswer.tsx +++ b/src/components/FeaturedSnippetDirectAnswer.tsx @@ -46,7 +46,7 @@ export function FeaturedSnippetDirectAnswer({ } let snippet: JSX.Element; const snippetValue = useMemo(() => - { return { __html: result.snippet.value }; }, [result.snippet.value]); + { return { __html: result.snippet?.value }; }, [result.snippet.value]); if (result.fieldType === 'html') { snippet = ( From c7ac45b3abe58b001e66c4d03076131e7a9243d1 Mon Sep 17 00:00:00 2001 From: Saahith Janapati Date: Wed, 28 Jun 2023 15:17:11 -0400 Subject: [PATCH 9/9] add another check for snippet --- src/components/FeaturedSnippetDirectAnswer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FeaturedSnippetDirectAnswer.tsx b/src/components/FeaturedSnippetDirectAnswer.tsx index 8e8585f58..f5c15b870 100644 --- a/src/components/FeaturedSnippetDirectAnswer.tsx +++ b/src/components/FeaturedSnippetDirectAnswer.tsx @@ -46,7 +46,7 @@ export function FeaturedSnippetDirectAnswer({ } let snippet: JSX.Element; const snippetValue = useMemo(() => - { return { __html: result.snippet?.value }; }, [result.snippet.value]); + { return { __html: result.snippet?.value }; }, [result.snippet?.value]); if (result.fieldType === 'html') { snippet = (