Browse Source

fix: remove legacy behavior from Link components and simplify rendering logic

Yuki Takei 1 month ago
parent
commit
5b0ba3fe96

+ 5 - 15
apps/app/src/client/components/PageList/PageListItemL.tsx

@@ -230,9 +230,6 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (
   // background color of list item changes when class "active" exists under 'list-group-item'
   const styleActive = isDeviceLargerThanLg && isSelected ? 'active' : '';
 
-  const shouldDangerouslySetInnerHTMLForPaths =
-    elasticSearchResult != null && elasticSearchResult.highlightedPath != null;
-
   const canRenderESSnippet =
     elasticSearchResult != null && elasticSearchResult.snippet != null;
   const canRenderRevisionSnippet = revisionShortBody != null;
@@ -288,26 +285,19 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (
                     {/* Use permanent links to care for pages with the same name (Cannot use page path url) */}
                     <span className="text-break">
                       <Link
-                        legacyBehavior
                         href={returnPathForURL(pageData.path, pageData._id)}
                         prefetch={false}
+                        className="page-segment"
                       >
-                        {shouldDangerouslySetInnerHTMLForPaths ? (
-                          <a
-                            className="page-segment"
-                            href={returnPathForURL(pageData.path, pageData._id)}
+                        {elasticSearchResult?.highlightedPath != null ? (
+                          <span
                             // biome-ignore lint/security/noDangerouslySetInnerHtml: highlight markup is sanitized
                             dangerouslySetInnerHTML={{
                               __html: linkedPagePathHighlightedLatter.pathName,
                             }}
-                          ></a>
+                          />
                         ) : (
-                          <a
-                            className="page-segment"
-                            href={returnPathForURL(pageData.path, pageData._id)}
-                          >
-                            {linkedPagePathHighlightedLatter.pathName}
-                          </a>
+                          linkedPagePathHighlightedLatter.pathName
                         )}
                       </Link>
                     </span>

+ 6 - 11
apps/app/src/components/Common/PagePathHierarchicalLink/PagePathHierarchicalLink.tsx

@@ -83,8 +83,6 @@ export const PagePathHierarchicalLink: FC<PagePathHierarchicalLinkProps> = memo(
     const isParentRoot = linkedPagePath.parent?.isRoot;
     const isSeparatorRequired = isParentExists && !isParentRoot;
 
-    const shouldDangerouslySetInnerHTML = linkedPagePathByHtml != null;
-
     const href = encodeURI(urljoin(basePath || '/', linkedPagePath.href));
 
     return (
@@ -102,19 +100,16 @@ export const PagePathHierarchicalLink: FC<PagePathHierarchicalLinkProps> = memo(
         {isSeparatorRequired && (
           <span className={`separator ${styles.separator}`}>/</span>
         )}
-        <Link href={href} prefetch={false} legacyBehavior>
-          {shouldDangerouslySetInnerHTML ? (
-            // biome-ignore-start lint/a11y/useValidAnchor: ignore
-            <a
-              className="page-segment"
-              // biome-ignore lint/security/noDangerouslySetInnerHtml: ignore
+        <Link href={href} prefetch={false} className="page-segment">
+          {linkedPagePathByHtml != null ? (
+            <span
+              // biome-ignore lint/security/noDangerouslySetInnerHtml: highlight markup is sanitized
               dangerouslySetInnerHTML={{
                 __html: linkedPagePathByHtml.pathName,
               }}
-            ></a>
+            />
           ) : (
-            <a className="page-segment">{linkedPagePath.pathName}</a>
-            // biome-ignore-end lint/a11y/useValidAnchor: ignore
+            linkedPagePath.pathName
           )}
         </Link>
       </RootElm>