feat(web): 聊天框粘贴图片发送与bbcode解析

src/web/components/chatBox/useInputMsgEditorMsgSend.tsx

@@ -8,6 +8,11 @@ import React from 'react';
 import { MsgInputEditor } from '../editor/MsgInputEditor';
 import { useConverseDetail } from '@redux/hooks/chat';
 import { serializeToBBCode } from '../editor/utils/serialize/bbcode';
+import * as pasteUtils from '@shared/utils/paste-utils';
+import { showToasts } from '@shared/manager/ui';
+import { insertImage } from '../editor/changes/insertImage';
+import _isNil from 'lodash/isNil';
+import _isString from 'lodash/isString';
 
 export function useInputMsgEditorMsgSend(converseUUID: string) {
   const editorRef = useRef<Editor>();
@@ -29,6 +34,28 @@ export function useInputMsgEditorMsgSend(converseUUID: string) {
     [handleSendMsg]
   );
 
+  const handlePaste = useCallback(
+    async (e: React.ClipboardEvent<HTMLDivElement>) => {
+      if (e.clipboardData && e.clipboardData.items) {
+        const image = pasteUtils.isPasteImage(e.clipboardData.items);
+        if (image) {
+          // 上传图片
+          e.preventDefault();
+          try {
+            const file = image.getAsFile();
+            const chatimgUrl = await pasteUtils.upload(file!);
+            if (!_isNil(editorRef.current) && _isString(chatimgUrl)) {
+              insertImage(editorRef.current, chatimgUrl);
+            }
+          } catch (err) {
+            showToasts(err, 'error');
+          }
+        }
+      }
+    },
+    []
+  );
+
   useEffect(() => {
     if (message === '') {
       // 清空输入框信息
@@ -56,6 +83,7 @@ export function useInputMsgEditorMsgSend(converseUUID: string) {
       value={messageData}
       onChange={handleMessageDataChange}
       onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
       onEditor={(editor) => (editorRef.current = editor)}
     />
   );

src/web/components/editor/utils/serialize/bbcode.ts

@@ -16,6 +16,8 @@ export function serializeToBBCode(node: TRPGEditorNode): string {
         'data.text',
         ''
       )}[/at]`;
+    case 'image':
+      return `[img]${_get(node, 'url', '')}[/img]`;
     default:
       return children;
   }