fix: populated image src in markdown

Signed-off-by: Innei <[email protected]>

apps/renderer/src/components/ui/markdown/renderers/InlineImage.tsx

@@ -0,0 +1,28 @@
+import { cn } from "~/lib/utils"
+import { useEntryContentContext } from "~/modules/entry-content/hooks"
+
+import { Media } from "../../media"
+import { usePopulatedFullUrl } from "../utils"
+
+export const MarkdownInlineImage = (
+ props: React.ImgHTMLAttributes<HTMLImageElement> & {
+ proxy?: {
+ width: number
+ height: number
+ }
+ },
+) => {
+ const { feedId } = useEntryContentContext()
+ const populatedUrl = usePopulatedFullUrl(feedId, props.src)
+ return (
+ <Media
+ type="photo"
+ {...props}
+ src={populatedUrl}
+ mediaContainerClassName={cn("inline max-w-full rounded-md")}
+ popper
+ className="inline"
+ showFallback
+ />
+ )
+}

apps/renderer/src/lib/parse-html.ts

@@ -21,6 +21,7 @@ import { ShikiHighLighter } from "~/components/ui/code-highlighter"
 import { MarkdownBlockImage, MarkdownLink, MarkdownP } from "~/components/ui/markdown/renderers"
 import { BlockError } from "~/components/ui/markdown/renderers/BlockErrorBoundary"
 import { createHeadingRenderer } from "~/components/ui/markdown/renderers/Heading"
+import { MarkdownInlineImage } from "~/components/ui/markdown/renderers/InlineImage"
 import { Media } from "~/components/ui/media"
 
 function markInlineImage(node?: Element) {
@@ -208,19 +209,10 @@ const Img: Components["img"] = ({ node, ...props }) => {
  proxy: { height: 0, width: 700 },
  }
 
- if (node?.properties.inline) {
- return createElement(Media, {
- type: "photo",
- ...nextProps,
-
- mediaContainerClassName: tw`max-w-full inline rounded-md`,
- popper: true,
- className: tw`inline`,
- showFallback: true,
- })
- }
-
- return createElement(MarkdownBlockImage, nextProps)
+ return createElement(
+ node?.properties.inline ? MarkdownInlineImage : MarkdownBlockImage,
+ nextProps,
+ )
 }
 
 function extractCodeFromHtml(htmlString: string) {