feat: add upload image feature

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());
 }

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}
+        />
+      ),
     }),
     []
   );

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>
+          )
+        }
       />
     );
   }

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;
 }