From e465791a3d6bb6fe08fd52eff140a1bcb2267d82 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 14 Sep 2021 21:46:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20bbcode=20=E5=9B=BE=E7=89=87=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/plugins/com.msgbyte.bbcode/src/tags/ImgTag.tsx | 12 ++++++++++++
 web/plugins/com.msgbyte.bbcode/src/tags/__all__.ts |  2 ++
 web/src/components/Image.tsx                       | 13 +++++++++++++
 web/src/components/modals/ImageUploadPreviewer.tsx |  2 +-
 web/src/plugin/component/index.tsx                 |  3 ++-
 web/src/styles/antd/overwrite.less                 |  4 ++++
 6 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 web/plugins/com.msgbyte.bbcode/src/tags/ImgTag.tsx
 create mode 100644 web/src/components/Image.tsx

diff --git a/web/plugins/com.msgbyte.bbcode/src/tags/ImgTag.tsx b/web/plugins/com.msgbyte.bbcode/src/tags/ImgTag.tsx
new file mode 100644
index 00000000..acda5a64
--- /dev/null
+++ b/web/plugins/com.msgbyte.bbcode/src/tags/ImgTag.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Image } from '@capital/component';
+import type { TagProps } from '../bbcode/type';
+
+export const ImgTag: React.FC<TagProps> = React.memo((props) => {
+  const { node } = props;
+  const text = node.content.join('');
+  const url = node.attrs.url ?? text;
+
+  return <Image preview={true} src={url} />;
+});
+ImgTag.displayName = 'ImgTag';
diff --git a/web/plugins/com.msgbyte.bbcode/src/tags/__all__.ts b/web/plugins/com.msgbyte.bbcode/src/tags/__all__.ts
index e492127b..35308c24 100644
--- a/web/plugins/com.msgbyte.bbcode/src/tags/__all__.ts
+++ b/web/plugins/com.msgbyte.bbcode/src/tags/__all__.ts
@@ -1,6 +1,8 @@
 import { registerBBCodeTag } from '../bbcode/parser';
+import { ImgTag } from './ImgTag';
 import { PlainText } from './PlainText';
 import { UrlTag } from './UrlTag';
 
 registerBBCodeTag('_text', PlainText);
 registerBBCodeTag('url', UrlTag);
+registerBBCodeTag('img', ImgTag);
diff --git a/web/src/components/Image.tsx b/web/src/components/Image.tsx
new file mode 100644
index 00000000..b7f78b14
--- /dev/null
+++ b/web/src/components/Image.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Image as AntdImage, ImageProps as AntdImageProps } from 'antd';
+
+export const Image: React.FC<AntdImageProps> = React.memo((props) => {
+  return (
+    <AntdImage
+      fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
+      preview={false}
+      {...props}
+    />
+  );
+});
+Image.displayName = 'Image';
diff --git a/web/src/components/modals/ImageUploadPreviewer.tsx b/web/src/components/modals/ImageUploadPreviewer.tsx
index e7a31e83..5e2fbd62 100644
--- a/web/src/components/modals/ImageUploadPreviewer.tsx
+++ b/web/src/components/modals/ImageUploadPreviewer.tsx
@@ -21,7 +21,7 @@ export const ImageUploadPreviewer: React.FC<ImageUploadPreviewerProps> =
       <ModalWrapper style={{ maxHeight: '60vh', maxWidth: '60vw' }}>
         <div className="flex">
           <div className="w-2/3 p-2.5 bg-black bg-opacity-20 rounded">
-            <img className="max-h-160" src={imageUrl} />
+            <img className="max-h-72 m-auto" src={imageUrl} />
           </div>
 
           <div className="w-1/3 p-2 flex flex-col items-end justify-between">
diff --git a/web/src/plugin/component/index.tsx b/web/src/plugin/component/index.tsx
index cf911aa8..24ac375c 100644
--- a/web/src/plugin/component/index.tsx
+++ b/web/src/plugin/component/index.tsx
@@ -1,4 +1,5 @@
 import Button from 'antd/lib/button';
 import TextArea from 'antd/lib/input/TextArea';
+import { Image } from '@/components/Image';
 
-export { Button, TextArea };
+export { Button, TextArea, Image };
diff --git a/web/src/styles/antd/overwrite.less b/web/src/styles/antd/overwrite.less
index c2911d64..384bd6fa 100644
--- a/web/src/styles/antd/overwrite.less
+++ b/web/src/styles/antd/overwrite.less
@@ -20,3 +20,7 @@
     background-color: black;
   }
 }
+
+.ant-image-preview-img {
+  display: inline;
+}