fix: table table style

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

src/renderer/src/components/ui/markdown/renderers/BlockImage.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@renderer/lib/utils"
+import { useWrappedElementSize } from "@renderer/providers/wrapped-element-provider"
+
+import { Media } from "../../media"
+
+export const MarkdownBlockImage = (
+  props: React.ImgHTMLAttributes<HTMLImageElement>,
+) => {
+  const size = useWrappedElementSize()
+
+  return (
+    <Media
+      type="photo"
+      {...props}
+      mediaContainerClassName={cn(
+        "rounded",
+        size.w < Number.parseInt(props.width as string) && "w-full",
+      )}
+      popper
+      className="flex justify-center"
+    />
+  )
+}

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

@@ -1,6 +1,7 @@
 import { Checkbox } from "@renderer/components/ui/checkbox"
 import { ShikiHighLighter } from "@renderer/components/ui/code-highlighter"
 import { MarkdownLink } from "@renderer/components/ui/link"
+import { MarkdownBlockImage } from "@renderer/components/ui/markdown/renderers/BlockImage"
 import { Media } from "@renderer/components/ui/media"
 import { toJsxRuntime } from "hast-util-to-jsx-runtime"
 import { createElement } from "react"
@@ -58,24 +59,21 @@ export const parseHtml = async (
           createElement(MarkdownLink, { ...props } as any),
         img: ({ node, ...props }) => {
           if (node?.properties.inline) {
-            return createElement("img", {
-              src: props.src,
-              style: { maxWidth: "100%", display: "inline" },
+            return createElement(Media, {
+              type: "photo",
+              ...props,
+              mediaContainerClassName: tw`max-w-full inline size-auto`,
+              popper: true,
+              className: tw`inline`,
             })
           }
-          return createElement(Media, {
-            ...props,
-            mediaContainerClassName: "w-full rounded",
-            className: "flex justify-center",
 
-            popper: true,
-            type: "photo",
-          })
+          return createElement(MarkdownBlockImage, props)
         },
         video: ({ node, ...props }) =>
           createElement(Media, { ...props, popper: true, type: "video" }),
         p: ({ node, ...props }) => {
-          if (node?.children) {
+          if (node?.children && node.children.length !== 1) {
             for (const item of node.children) {
               item.type === "element" &&
               item.tagName === "img" &&

src/renderer/src/modules/entry-column/list-item-template.tsx

@@ -61,11 +61,7 @@ export function ListItem({
           <span className="truncate">{feed.title}</span>
           <span>·</span>
           <span className="shrink-0">
-            {!!displayTime && (
-              <RelativeTime
-                date={displayTime}
-              />
-            )}
+            {!!displayTime && <RelativeTime date={displayTime} />}
           </span>
         </div>
         <div

src/renderer/src/styles/tailwind.css

@@ -74,4 +74,8 @@
   table * {
     font-size: 1rem;
   }
+
+  table table {
+    margin: 0;
+  }
 }