diff --git a/src/components/HelpCenter.js b/src/components/HelpCenter.js
index 904f147..67b83b2 100644
--- a/src/components/HelpCenter.js
+++ b/src/components/HelpCenter.js
@@ -7,6 +7,10 @@ import {
LocalStorageUtils,
Analytics,
MultiSearchAPI,
+ formatPostContent,
+ getResultMatches,
+ scrollToBottom,
+ adjustPadding,
} from '../utils';
import HelpCenterIntro from './HelpCenterIntro';
import SearchInput from './SearchInput';
@@ -74,18 +78,19 @@ const HelpCenter = ( props ) => {
useEffect( () => {
if ( initComplete ) {
- adjustPadding();
- scroll();
+ adjustPadding( wrapper, suggestionsRef, showSuggestions );
+ scrollToBottom( wrapper, introRef, resultsContainer );
}
}, [ initComplete ] );
useEffect( () => {
- adjustPadding();
+ adjustPadding( wrapper, suggestionsRef, showSuggestions );
}, [ showSuggestions ] );
const populateSearchResult = ( postContent, postId, postTitle ) => {
- const resultContentFormatted =
- postContent && postContent.replace( /\n/g, '
' );
+ const resultContentFormatted = postContent
+ ? formatPostContent( postContent )
+ : '';
// Retrieve existing results from local storage and using the updated persistResult method to store the result
LocalStorageUtils.persistResult(
resultContentFormatted,
@@ -224,43 +229,6 @@ const HelpCenter = ( props ) => {
}
};
- const adjustPadding = () => {
- let paddingBottom = 0;
- if ( showSuggestions && suggestionsRef.current ) {
- const suggestionsHeight =
- suggestionsRef.current.getBoundingClientRect().height;
- paddingBottom = `${ suggestionsHeight }px`;
- }
- if ( wrapper && wrapper.current ) {
- wrapper.current.style.paddingBottom = paddingBottom;
- }
- };
-
- const scroll = () => {
- const scrollDistance = wrapper.current.scrollHeight;
- wrapper.current.scrollBy( {
- top: scrollDistance,
- left: 0,
- behavior: 'auto',
- } );
-
- setTimeout( () => {
- introRef.current.style.visibility = 'visible';
- resultsContainer.current.style.visibility = 'visible';
- }, 100 );
- };
-
- const getResultMatches = ( query, tokensMatched, fieldsMatched ) => {
- const clearedQuery = query
- .replace( /[^\w\s]|_/g, '' )
- .replace( /\s{2,}/g, ' ' )
- .trim();
-
- const tokensPerQuery =
- tokensMatched / clearedQuery.split( /\s+/ ).length;
- return fieldsMatched >= 1 && tokensPerQuery >= 0.99;
- };
-
const checkAndPopulateResult = ( hits ) => {
if ( hits?.length > 0 ) {
const resultMatches = getResultMatches(
diff --git a/src/utils.js b/src/utils.js
index 1e43ef3..9531730 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -202,3 +202,50 @@ export const isValidJSON = ( json ) => {
return false;
}
};
+
+export function formatPostContent( postContent = '' ) {
+ return postContent.replace( /\n/g, '
' );
+}
+
+export function getResultMatches( query, tokensMatched, fieldsMatched ) {
+ const clearedQuery = query
+ .replace( /[^\w\s]|_/g, '' )
+ .replace( /\s{2,}/g, ' ' )
+ .trim();
+
+ const tokensPerQuery = tokensMatched / clearedQuery.split( /\s+/ ).length;
+ return fieldsMatched >= 1 && tokensPerQuery >= 0.99;
+}
+
+export function scrollToBottom( wrapperRef, introRef, resultsContainerRef ) {
+ if ( ! wrapperRef?.current ) return;
+ const scrollDistance = wrapperRef.current.scrollHeight;
+
+ wrapperRef.current.scrollBy( {
+ top: scrollDistance,
+ left: 0,
+ behavior: 'auto',
+ } );
+
+ setTimeout( () => {
+ if ( introRef?.current ) {
+ introRef.current.style.visibility = 'visible';
+ }
+ if ( resultsContainerRef?.current ) {
+ resultsContainerRef.current.style.visibility = 'visible';
+ }
+ }, 100 );
+}
+
+export function adjustPadding( wrapperRef, suggestionsRef, showSuggestions ) {
+ let paddingBottom = 0;
+ if ( showSuggestions && suggestionsRef?.current ) {
+ const suggestionsHeight =
+ suggestionsRef.current.getBoundingClientRect().height;
+ paddingBottom = `${ suggestionsHeight }px`;
+ }
+
+ if ( wrapperRef?.current ) {
+ wrapperRef.current.style.paddingBottom = paddingBottom;
+ }
+}
diff --git a/styles.scss b/styles.scss
index 02a777c..7b82461 100644
--- a/styles.scss
+++ b/styles.scss
@@ -419,7 +419,7 @@ body:is(.page, .post-php, .post-new-php) {
.nfd-hc-modal__footer{
position: absolute;
z-index: 10;
- bottom: 0px;
+ bottom: 15px;
.helpcenter-supportinfo__wrapper {
padding: 8px 12px 8px 12px;