Merge pull request #5619 from weseek/fix/91643-91645-fix-highlight-link

fix: remove em tag from page path to be displayed

packages/app/src/components/PageList/PageListItemL.tsx

@@ -88,9 +88,12 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
   const elasticSearchResult = isIPageSearchMeta(pageMeta) ? pageMeta.elasticSearchResult : null;
   const revisionShortBody = isIPageInfoForListing(pageMeta) ? pageMeta.revisionShortBody : null;
 
-  const dPagePath: DevidedPagePath = new DevidedPagePath(elasticSearchResult?.highlightedPath || pageData.path, true);
+  const dPagePath: DevidedPagePath = new DevidedPagePath(pageData.path, false);
   const linkedPagePathFormer = new LinkedPagePath(dPagePath.former);
-  const linkedPagePathLatter = new LinkedPagePath(dPagePath.latter);
+
+  const dPagePathHighlighted: DevidedPagePath = new DevidedPagePath(elasticSearchResult?.highlightedPath || pageData.path, true);
+  const linkedPagePathHighlightedFormer = new LinkedPagePath(dPagePathHighlighted.former);
+  const linkedPagePathHighlightedLatter = new LinkedPagePath(dPagePathHighlighted.latter);
 
   const lastUpdateDate = format(new Date(pageData.updatedAt), 'yyyy/MM/dd HH:mm:ss');
 
@@ -191,7 +194,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
               {/* page path */}
               <PagePathHierarchicalLink
                 linkedPagePath={linkedPagePathFormer}
-                shouldDangerouslySetInnerHTML={shouldDangerouslySetInnerHTMLForPaths}
+                linkedPagePathByHtml={linkedPagePathHighlightedFormer}
               />
               { showPageUpdatedTime && (
                 <span className="page-list-updated-at text-muted">Last update: {lastUpdateDate}</span>
@@ -213,11 +216,11 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
                           className="page-segment"
                           href={encodeURI(urljoin('/', pageData._id))}
                           // eslint-disable-next-line react/no-danger
-                          dangerouslySetInnerHTML={{ __html: linkedPagePathLatter.pathName }}
+                          dangerouslySetInnerHTML={{ __html: linkedPagePathHighlightedLatter.pathName }}
                         >
                         </a>
                       )
-                      : <a className="page-segment" href={encodeURI(urljoin('/', pageData._id))}>{linkedPagePathLatter.pathName}</a>
+                      : <a className="page-segment" href={encodeURI(urljoin('/', pageData._id))}>{linkedPagePathHighlightedLatter.pathName}</a>
                     }
                   </span>
                 </span>

packages/app/src/components/PagePathHierarchicalLink.jsx

@@ -6,9 +6,10 @@ import urljoin from 'url-join';
 import LinkedPagePath from '../models/linked-page-path';
 
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const PagePathHierarchicalLink = (props) => {
   const {
-    linkedPagePath, basePath, isInTrash, shouldDangerouslySetInnerHTML,
+    linkedPagePath, linkedPagePathByHtml, basePath, isInTrash,
   } = props;
   // render root element
   if (linkedPagePath.isRoot) {
@@ -41,6 +42,8 @@ const PagePathHierarchicalLink = (props) => {
   const isParentRoot = linkedPagePath.parent?.isRoot;
   const isSeparatorRequired = isParentExists && !isParentRoot;
 
+  const shouldDangerouslySetInnerHTML = linkedPagePathByHtml != null;
+
   const href = encodeURI(urljoin(basePath || '/', linkedPagePath.href));
 
   // eslint-disable-next-line react/prop-types
@@ -55,10 +58,10 @@ const PagePathHierarchicalLink = (props) => {
       { isParentExists && (
         <PagePathHierarchicalLink
           linkedPagePath={linkedPagePath.parent}
+          linkedPagePathByHtml={linkedPagePathByHtml?.parent}
           basePath={basePath}
           isInTrash={isInTrash || linkedPagePath.isInTrash}
           isInnerElem
-          shouldDangerouslySetInnerHTML={shouldDangerouslySetInnerHTML}
         />
       ) }
       { isSeparatorRequired && (
@@ -67,7 +70,8 @@ const PagePathHierarchicalLink = (props) => {
 
       {
         shouldDangerouslySetInnerHTML
-          ? <a className="page-segment" href={href} dangerouslySetInnerHTML={{ __html: linkedPagePath.pathName }}></a>
+          // eslint-disable-next-line react/no-danger
+          ? <a className="page-segment" href={href} dangerouslySetInnerHTML={{ __html: linkedPagePathByHtml.pathName }}></a>
           : <a className="page-segment" href={href}>{linkedPagePath.pathName}</a>
       }
 
@@ -77,9 +81,9 @@ const PagePathHierarchicalLink = (props) => {
 
 PagePathHierarchicalLink.propTypes = {
   linkedPagePath: PropTypes.instanceOf(LinkedPagePath).isRequired,
+  linkedPagePathByHtml: PropTypes.instanceOf(LinkedPagePath), // Not required
   basePath: PropTypes.string,
   isInTrash: PropTypes.bool,
-  shouldDangerouslySetInnerHTML: PropTypes.bool,
 
   // !!INTERNAL USE ONLY!!
   isInnerElem: PropTypes.bool,

packages/app/src/server/service/search.ts

@@ -408,8 +408,8 @@ class SearchService implements SearchQueryParser, SearchResolver {
         const isHtmlInPath = highlightData['path.en'] != null || highlightData['path.ja'] != null;
 
         elasticSearchResult = {
-          snippet: typeof snippet === 'string' ? filterXss.process(snippet) : null,
-          highlightedPath: typeof pathMatch === 'string' ? filterXss.process(pathMatch) : null,
+          snippet: snippet != null && typeof snippet[0] === 'string' ? filterXss.process(snippet) : null,
+          highlightedPath: pathMatch != null && typeof pathMatch[0] === 'string' ? filterXss.process(pathMatch) : null,
           isHtmlInPath,
         };
       }