Merge pull request #7381 from weseek/fix/115071-make-collapse-work

fix: Make collapse work for anchor tags

packages/app/src/components/ReactMarkdownComponents/NextLink.tsx

@@ -28,9 +28,10 @@ type Props = Omit<LinkProps, 'href'> & {
   className?: string,
 };
 
-export const NextLink = ({
-  href, children, className, ...props
-}: Props): JSX.Element => {
+export const NextLink = (props: Props): JSX.Element => {
+  const {
+    href, children, className, ...rest
+  } = props;
 
   const { data: siteUrl } = useSiteUrl();
 
@@ -38,24 +39,29 @@ export const NextLink = ({
     return <a className={className}>{children}</a>;
   }
 
+  // extract 'data-*' props
+  const dataAttributes = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-')),
+  );
+
   // when href is an anchor link
   if (isAnchorLink(href)) {
     return (
-      <a href={href} className={className}>{children}</a>
+      <a href={href} className={className} {...dataAttributes}>{children}</a>
     );
   }
 
   if (isExternalLink(href, siteUrl)) {
     return (
-      <a href={href} className={className} target="_blank" rel="noopener noreferrer">
+      <a href={href} className={className} target="_blank" rel="noopener noreferrer" {...dataAttributes}>
         {children}&nbsp;<i className='icon-share-alt small'></i>
       </a>
     );
   }
 
   return (
-    <Link {...props} href={href} prefetch={false}>
-      <a href={href} className={className}>{children}</a>
+    <Link {...rest} href={href} prefetch={false}>
+      <a href={href} className={className} {...dataAttributes}>{children}</a>
     </Link>
   );
 };

packages/app/src/services/renderer/renderer.tsx

@@ -71,7 +71,9 @@ const baseSanitizeSchema = {
   tagNames: ['iframe', 'section'],
   attributes: {
     iframe: ['allow', 'referrerpolicy', 'sandbox', 'src', 'srcdoc'],
-    '*': ['class', 'className', 'style'],
+    // The special value 'data*' as a property name can be used to allow all data properties.
+    // see: https://github.com/syntax-tree/hast-util-sanitize/
+    '*': ['class', 'className', 'style', 'data*'],
   },
 };
 
@@ -87,7 +89,7 @@ let isInjectedCustomSanitaizeOption = false;
 
 const injectCustomSanitizeOption = (config: RendererConfig) => {
   if (!isInjectedCustomSanitaizeOption && config.isEnabledXssPrevention && config.xssOption === RehypeSanitizeOption.CUSTOM) {
-    commonSanitizeOption.tagNames = deepmerge(baseSanitizeSchema.tagNames, config.tagWhiteList ?? []);
+    commonSanitizeOption.tagNames = baseSanitizeSchema.tagNames.concat(config.tagWhiteList ?? []);
     commonSanitizeOption.attributes = deepmerge(baseSanitizeSchema.attributes, config.attrWhiteList ?? {});
     isInjectedCustomSanitaizeOption = true;
   }