feat: 优化图片上传，改为 promise all

src/components/lake-editor/editor.tsx

@@ -8,6 +8,7 @@
 import { Root, createRoot } from 'react-dom/client';
 import bowser from 'bowser';
 import OcrIconSvg from '@/assets/svg/ocr-icon.svg';
+import { onSandboxClose } from '@/pages/sandbox/helper';
 import loadLakeEditor from './load';
 import { InjectEditorPlugin } from './editor-plugin';
 import { slash } from './slash-options';
@@ -18,8 +19,9 @@
 
 export interface EditorProps {
   value: string;
+  enableEsc?: boolean;
   children?: React.ReactNode;
   onChange?: (value: string) => void;
   onLoad?: () => void;
   onSave: () => void;
   uploadImage: (params: { data: string | File }) => Promise<{
@@ -84,7 +86,7 @@
 }
 
 export default forwardRef<IEditorRef, EditorProps>((props, ref) => {
-  const { value, onChange, onLoad } = props;
+  const { value, enableEsc, onChange, onLoad } = props;
   const [ _loading, setLoading ] = useState(true);
   const [ editor, setEditor ] = useState<any>(null);
   const contextRef = useRef({
@@ -324,6 +326,22 @@
     [ editor ],
   );
 
+  useEffect(() => {
+    if (!enableEsc) {
+      return;
+    }
+    const listener = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' || e.key === 'Esc') {
+        onSandboxClose();
+      }
+    };
+
+    iframeRef.current?.contentWindow?.addEventListener('keydown', listener)
+    return () => {
+      iframeRef.current?.contentWindow?.removeEventListener('keydown', listener)
+    }
+  }, [enableEsc])
+
   useEffect(() => {
     if (!rootNodeRef.current.div) return;
     rootNodeRef.current.div.render(props.children);

src/core/html-parser.ts

@@ -43,11 +43,7 @@ async function uploadImage(imageUrl: string) {
   return uploadedImageUrl;
 }
 
-export async function urlOrFileUpload(data: string | File): Promise<{
-  url: string;
-  size: number;
-  filename: string;
-}> {
+export async function transformUrlToFile(data: string | File) {
   let file:File | undefined;
   if (typeof data === 'string') {
     if (isRelativePath(data)) {
@@ -58,6 +54,15 @@ export async function urlOrFileUpload(data: string | File): Promise<{
   } else {
     file = data;
   }
+  return file;
+}
+
+export async function urlOrFileUpload(data: string | File): Promise<{
+  url: string;
+  size: number;
+  filename: string;
+}> {
+  const file = await transformUrlToFile(data);
 
   console.info(data, file);
 

src/pages/sandbox/App.tsx

@@ -3,34 +3,24 @@ import { ConfigProvider, Radio, RadioChangeEvent } from 'antd';
 import { CloseOutlined, SettingOutlined } from '@ant-design/icons';
 import classnames from 'classnames';
 import Chrome from '@/core/chrome';
-import { GLOBAL_EVENTS } from '@/events';
 import { initI18N } from '@/isomorphic/i18n';
 import { AccountContext } from '@/context/account-context';
 import AccountLayout from '@/components/sandbox/account-layout';
 import { __i18n } from '@/isomorphic/i18n';
 import { preferencesUrl } from '@/isomorphic/word-mark';
-import eventManager from '@/core/event/eventManager';
-import { AppEvents } from '@/core/event/events';
 import { useEffectAsync } from '@/hooks/useAsyncEffect';
 import { STORAGE_KEYS } from '@/config';
 import { EnableOcrStatus, ocrManager } from './ocr/ocr-manager';
 import { SandboxProvider, useSandboxContext } from './provider/sandBoxProvider';
 import UserInfo from './UserInfo';
 import { Other } from './Other';
 import SaveTo from './SaveTo';
+import { onSandboxClose } from './helper';
 import styles from './App.module.less';
 
 initI18N();
 type TabName = 'save-to' | 'other';
 
-const onClose = () => {
-  Chrome.tabs.getCurrent((tab: any) => {
-    Chrome.tabs.sendMessage(tab.id, {
-      action: GLOBAL_EVENTS.CLOSE_BOARD,
-    });
-  });
-  eventManager.notify(AppEvents.CLOSE_BOARD);
-};
 
 const App = () => {
   const accountContext = useContext(AccountContext);
@@ -44,7 +34,7 @@ const App = () => {
   useEffect(() => {
     const listener = (e: KeyboardEvent) => {
       if (e.key === 'Escape' || e.key === 'Esc') {
-        onClose();
+        onSandboxClose();
       }
     };
 
@@ -80,7 +70,7 @@ const App = () => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>{__i18n('语雀剪藏')}</div>
-      <CloseOutlined className={styles.close} onClick={onClose} />
+      <CloseOutlined className={styles.close} onClick={onSandboxClose} />
       <div className={styles.items}>
         <Radio.Group
           value={tab}
@@ -132,7 +122,7 @@ function ContextApp() {
       }}
     >
       <SandboxProvider>
-        <AccountLayout close={onClose}>
+        <AccountLayout close={onSandboxClose}>
           <App />
         </AccountLayout>
       </SandboxProvider>

src/pages/sandbox/SaveTo/index.tsx

@@ -12,7 +12,7 @@ import Icon from '@ant-design/icons';
 import classnames from 'classnames';
 import { noteProxy } from '@/core/proxy/note';
 import type { MenuInfo } from 'rc-menu/lib/interface';
-import { urlOrFileUpload } from '@/core/html-parser';
+import { transformUrlToFile, urlOrFileUpload } from '@/core/html-parser';
 import LinkHelper from '@/core/link-helper';
 import LakeEditor, { IEditorRef } from '@/components/lake-editor/editor';
 import BookWithIcon from '@/components/common/book-with-icon';
@@ -233,12 +233,16 @@ const useViewModel = (props: ISaveToProps) => {
   }, [editorRef, currentBookId]);
 
   const onUploadImage = useCallback(async (params: { data: string }) => {
-    const res = await urlOrFileUpload(params.data);
-    const ocrLocations = await ocrManager.startOCR('url', res.url);
-    return {
-      ...res,
-      ocrLocations,
-    };
+      const file = await transformUrlToFile(params.data);
+      const res = await Promise.all(
+        [urlOrFileUpload(file), ocrManager.startOCR('file', file)].map(p =>
+          p.catch(e => e),
+        ),
+      );
+      return {
+        ...(res[0] || {}),
+        ocrLocations: res[1],
+      };
   }, []);
 
   const handleTypeSelect = async (info: MenuInfo) => {
@@ -373,6 +377,7 @@ export default function SaveTo(props: ISaveToProps) {
             onSave={onSave}
             onLoad={onLoad}
             uploadImage={onUploadImage}
+            enableEsc={true}
           >
             {renderContinue()}
           </LakeEditor>

src/pages/sandbox/helper/index.ts

@@ -1,4 +1,6 @@
 import Chrome from '@/core/chrome';
+import eventManager from '@/core/event/eventManager';
+import { AppEvents } from '@/core/event/events';
 import { GLOBAL_EVENTS } from '@/events';
 import { StartSelectEnum } from '@/isomorphic/constants';
 
@@ -11,13 +13,19 @@ const blockquoteID = 'yqextensionblockquoteid';
  * @param needHeading 是否添加标题
  * @return {string} html片段
  */
-export const getBookmarkHtml = (tab: chrome.tabs.Tab, useQuote = false, needHeading = true) => {
+export const getBookmarkHtml = (
+  tab: chrome.tabs.Tab,
+  useQuote = false,
+  needHeading = true,
+) => {
   const ret = [];
   if (needHeading) {
     ret.push(`<h2>${tab.title}</h2>`);
   }
   if (useQuote) {
-    ret.push(`<blockquote><p>来自: <a href="${tab.url}">${tab.title}</a></p></blockquote>`);
+    ret.push(
+      `<blockquote><p>来自: <a href="${tab.url}">${tab.title}</a></p></blockquote>`,
+    );
   } else {
     ret.push(`<p><a href="${tab.url}">${tab.title}</a></p>`);
   }
@@ -57,7 +65,6 @@ export const getCurrentTab = (): Promise<chrome.tabs.Tab> =>
     });
   });
 
-
 /**
  * 开始选择需要剪藏的内容
  */
@@ -67,7 +74,19 @@ export const startSelect = (type: StartSelectEnum) => {
       action: GLOBAL_EVENTS.START_SELECT,
       data: {
         type,
-      }
+      },
+    });
+  });
+};
+
+/**
+ * 关闭 sandbox
+ */
+export const onSandboxClose = () => {
+  Chrome.tabs.getCurrent((tab: any) => {
+    Chrome.tabs.sendMessage(tab.id, {
+      action: GLOBAL_EVENTS.CLOSE_BOARD,
     });
   });
+  eventManager.notify(AppEvents.CLOSE_BOARD);
 };