From 4d6c70c3cf15a82b56ae02c479cec9583b6a065c Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 30 Aug 2023 23:12:19 +0800
Subject: [PATCH] feat: add upload image feature

---
 client/shared/utils/url-helper.ts             |  4 +++-
 client/web/src/components/Markdown.tsx        | 18 ++++++++++++----
 .../src/components/MarkdownEditor/editor.tsx  | 21 +++++++++++++++++++
 client/web/src/utils/url-helper.ts            |  2 +-
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/client/shared/utils/url-helper.ts b/client/shared/utils/url-helper.ts
index 672a71fa..f1cba5f7 100644
--- a/client/shared/utils/url-helper.ts
+++ b/client/shared/utils/url-helper.ts
@@ -6,5 +6,7 @@ import { getServiceUrl } from '../manager/service';
  * @returns 解析后的url
  */
 export function parseUrlStr(originUrl: string): string {
-  return String(originUrl).replace('{BACKEND}', getServiceUrl());
+  return String(originUrl)
+    .replace('{BACKEND}', getServiceUrl())
+    .replace('%7BBACKEND%7D', getServiceUrl());
 }
diff --git a/client/web/src/components/Markdown.tsx b/client/web/src/components/Markdown.tsx
index 1a6c1eb3..f4617f61 100644
--- a/client/web/src/components/Markdown.tsx
+++ b/client/web/src/components/Markdown.tsx
@@ -1,9 +1,10 @@
-import { markAbsoluteUrl } from '@/utils/url-helper';
+import { makeAbsoluteUrl } from '@/utils/url-helper';
 import React, { useCallback, useMemo } from 'react';
-import { isValidStr } from 'tailchat-shared';
+import { isValidStr, parseUrlStr } from 'tailchat-shared';
 import { Loadable } from './Loadable';
 import { Image } from 'tailchat-design';
 import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 import './Markdown.less';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -16,11 +17,12 @@ export const Markdown: React.FC<{
 }> = React.memo(({ raw, baseUrl }) => {
   const transformUrl = useCallback(
     (url: string) => {
+      url = parseUrlStr(url);
       if (!isValidStr(baseUrl)) {
         return url;
       }
 
-      return new URL(url, markAbsoluteUrl(baseUrl)).href;
+      return new URL(url, makeAbsoluteUrl(baseUrl)).href;
     },
     [baseUrl]
   );
@@ -32,7 +34,15 @@ export const Markdown: React.FC<{
     React.ComponentProps<typeof ReactMarkdown>['components']
   >(
     () => ({
-      img: (props) => <Image src={props.src} preview={true} />,
+      img: (props) => (
+        <Image
+          style={props.style}
+          width={props.width}
+          height={props.height}
+          src={props.src}
+          preview={true}
+        />
+      ),
     }),
     []
   );
diff --git a/client/web/src/components/MarkdownEditor/editor.tsx b/client/web/src/components/MarkdownEditor/editor.tsx
index 09e51b1c..97ee12a9 100644
--- a/client/web/src/components/MarkdownEditor/editor.tsx
+++ b/client/web/src/components/MarkdownEditor/editor.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { Editor } from '@bytemd/react';
 import { plugins } from './plugins';
+import { uploadFile } from 'tailchat-shared';
+import { Markdown } from '../Markdown';
+import { createRoot } from 'react-dom/client';
 import 'bytemd/dist/index.css';
 import './style.less';
 
@@ -15,6 +18,24 @@ export const MarkdownEditor: React.FC<MarkdownEditorProps> = React.memo(
         plugins={plugins}
         value={props.value ?? ''}
         onChange={props.onChange}
+        uploadImages={(files) => {
+          return Promise.all(
+            files.map((f) =>
+              uploadFile(f).then((file) => {
+                return {
+                  url: file.url,
+                };
+              })
+            )
+          );
+        }}
+        overridePreview={(el, props) =>
+          createRoot(el).render(
+            <div className="markdown-body">
+              <Markdown raw={props.value} />
+            </div>
+          )
+        }
       />
     );
   }
diff --git a/client/web/src/utils/url-helper.ts b/client/web/src/utils/url-helper.ts
index 3f429bc1..0d830f81 100644
--- a/client/web/src/utils/url-helper.ts
+++ b/client/web/src/utils/url-helper.ts
@@ -5,7 +5,7 @@ import { stringify as urlSearchStringify, parse as urlSearchParse } from 'qs';
  * @param relativeUrl 相对或绝对url
  * @returns 绝对url
  */
-export function markAbsoluteUrl(relativeUrl: string): string {
+export function makeAbsoluteUrl(relativeUrl: string): string {
   return new URL(relativeUrl, location.href).href;
 }