Merge pull request #53 from newfold-labs/enhance/render-markdown-in-c…

…ontent Render markdown in search result content
newfold-labs · Aug 21, 2024 · f5c8c59 · f5c8c59
2 parents 83a1382 + 4681e62
commit f5c8c59
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 27 deletions.
diff --git a/build/index.asset.php b/build/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '35e0e269e4ed473deb03');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '85bd21a71ebc930f4591');
diff --git a/build/index.js b/build/index.js
diff --git a/composer.lock b/composer.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
 		"algoliasearch": "4.20.0",
 		"lodash": "4.17.21",
 		"lodash.debounce": "4.0.8",
+		"marked": "14.0.0",
 		"react-instantsearch-hooks-web": "6.43.0",
 		"react-loader-spinner": "6.1.6",
 		"react-router-dom": "6.6.2",

diff --git a/src/components/ResultContent.js b/src/components/ResultContent.js
@@ -1,6 +1,8 @@
 //
 import Feedback from './Feedback';
 import NoResults from './NoResults';
+import { useEffect, useState } from 'react';
+import { marked } from 'marked';
 
 export const ResultContent = ( {
 	content,
@@ -13,10 +15,22 @@ export const ResultContent = ( {
 		return <NoResults />;
 	}
 
+	const MarkdownRenderer = ( { markdownText } ) => {
+		const [ htmlContent, setHtmlContent ] = useState( '' );
+
+		useEffect( () => {
+			// Convert Markdown to HTML whenever markdownText changes
+			const convertedHTML = marked( markdownText );
+			setHtmlContent( convertedHTML );
+		}, [ markdownText ] ); // Dependency array ensures this runs on markdownText change
+
+		return <p dangerouslySetInnerHTML={ { __html: htmlContent } } />;
+	};
+
 	if ( content && content.length > 0 ) {
 		return (
 			<>
-				<p dangerouslySetInnerHTML={ { __html: content } } />
+				<MarkdownRenderer markdownText={ content } />
 				{ showFeedbackSection && content && content.length > 0 && (
 					<Feedback postId={ postId } source={ source } />
 				) }

diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
@@ -70,7 +70,7 @@ const SearchResults = ( props ) => {
 				setPostId( currentResultPostId );
 			}
 			const savedInput = LocalStorageUtils.getSearchInput();
-			const input = savedInput || ' ';
+			const input = savedInput || '';
 			setSearchInput( input );
 			const brand = await CapabilityAPI.getBrand();
 			const multiSearchResults = await fetchMultiSearchResults(
@@ -164,7 +164,7 @@ const SearchResults = ( props ) => {
 			} finally {
 				setLoading( false );
 			}
-		}, 300 );
+		}, 500 );
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '35e0e269e4ed473deb03');
		<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '85bd21a71ebc930f4591');