fix: block link fallback render

src/components/ui/markdown/customize.md

@@ -139,6 +139,18 @@ https://github.com/toeverything/AFFiNE/blob/himself65/0710/remove-effect/apps/we
 
 https://github.com/toeverything/AFFiNE/blob/himself65/0710/remove-effect/apps/web/src/atoms/index.ts
 
+```
+https://trpc.io/docs/client/react/useInfiniteQuery
+```
+
+https://trpc.io/docs/client/react/useInfiniteQuery
+
+```
+[TRPC](https://trpc.io/docs/client/react/useInfiniteQuery)
+```
+
+[TRPC](https://trpc.io/docs/client/react/useInfiniteQuery)
+
 ## LinkCard
 
 ```

src/components/ui/markdown/renderers/LinkRenderer.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
 import dynamic from 'next/dynamic'
+import type { PropsWithChildren } from 'react'
 
 import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
 import {
@@ -24,7 +25,10 @@ import { MLink } from '../../link/MLink'
 const Tweet = dynamic(() => import('~/components/widgets/shared/Tweet'), {
  ssr: false,
 })
-export const LinkRenderer = ({ href }: { href: string }) => {
+export const LinkRenderer = ({
+ href,
+ children,
+}: PropsWithChildren<{ href: string }>) => {
  const url = useMemo(() => {
  try {
  return new URL(href)
@@ -33,14 +37,17 @@ export const LinkRenderer = ({ href }: { href: string }) => {
  }
  }, [href])
 
- if (!url) {
- return (
+ const fallbackElement = useMemo(
+ () => (
  <p>
- <MLink href={href}>
- <span>{href}</span>
- </MLink>
+ <MLink href={href}>{children ?? <span>{href}</span>}</MLink>
  </p>
- )
+ ),
+ [children, href],
+ )
+
+ if (!url) {
+ return fallbackElement
  }
  switch (true) {
  case isTweetUrl(url): {
@@ -136,6 +143,9 @@ export const LinkRenderer = ({ href }: { href: string }) => {
  case isSelfArticleUrl(url): {
  return <LinkCard source="self" id={url.pathname.slice(1)} />
  }
+
+ default:
+ return fallbackElement
  }
 }
 

src/components/ui/markdown/renderers/paragraph.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
-import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react'
+import type { DetailedHTMLProps, FC, HTMLAttributes, ReactNode } from 'react'
 
 import { LinkRenderer } from './LinkRenderer'
 
@@ -19,7 +19,12 @@ export const MParagraph: FC<
 
  // isLink
  if (isLink(child)) {
- return <LinkRenderer href={(child as any)?.props?.href} />
+ const children = (child as any)?.props?.children as ReactNode[]
+ return (
+ <LinkRenderer href={(child as any)?.props?.href}>
+ {children}
+ </LinkRenderer>
+ )
  }
  }
  // console.log(children)