From 659fd7e2c99026fbce7ee520828007f3815ea245 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Mon, 6 Feb 2023 17:32:38 +0000
Subject: [PATCH] feat: support img no-optimization option

---
 src/components/ui/Image.tsx     | 21 ++++++++++++++++++++-
 src/markdown/sanitize-schema.ts |  8 ++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx
index 7fe17649..e7204dfa 100644
--- a/src/components/ui/Image.tsx
+++ b/src/components/ui/Image.tsx
@@ -18,8 +18,27 @@ export const Image: React.FC<
   const [paddingTop, setPaddingTop] = React.useState("0")
   const [autoWidth, setAutoWidth] = React.useState(0)
   const autoSize = !width && !height && !fill
+  const noOptimization = className?.includes("no-optimization")
 
-  return (
+  return noOptimization ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      {...props}
+      src={toGateway(src)}
+      className={className}
+      alt={alt}
+      width={width}
+      height={height}
+      onLoad={({ target }) => {
+        if (autoSize) {
+          const { naturalWidth, naturalHeight } = target as HTMLImageElement
+          setPaddingTop(`calc(100% / (${naturalWidth} / ${naturalHeight})`)
+          setAutoWidth(naturalWidth)
+        }
+      }}
+      ref={imageRef}
+    />
+  ) : (
     <span
       className="inline-block w-full h-full overflow-hidden"
       style={
diff --git a/src/markdown/sanitize-schema.ts b/src/markdown/sanitize-schema.ts
index 782b14a5..3c20ce00 100644
--- a/src/markdown/sanitize-schema.ts
+++ b/src/markdown/sanitize-schema.ts
@@ -18,6 +18,14 @@ const scheme = {
   attributes: {
     ...defaultSchema.attributes,
     div: [...(defaultSchema.attributes?.div || []), "className", "style", "id"],
+    img: [
+      ...(defaultSchema.attributes?.img || []),
+      "className",
+      "style",
+      "id",
+      "width",
+      "height",
+    ],
     code: ["className"],
     blockquote: allowedBlockquoteAttrs,
     video: [