set onUpload function

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -575,6 +575,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
         <CodeMirrorEditorMain
           onChange={markdownChangedHandler}
           onSave={saveWithShortcut}
+          onUpload={uploadHandler}
           indentSize={currentIndentSize ?? defaultIndentSize}
         />
       </div>

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -1,5 +1,5 @@
 import {
-  forwardRef, useMemo, useRef, useEffect,
+  forwardRef, useMemo, useRef, useEffect, useCallback,
 } from 'react';
 
 import { defaultKeymap } from '@codemirror/commands';
@@ -25,6 +25,7 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
+  onUpload?: (file: any) => Promise<void>,
   indentSize?: number,
 }
 
@@ -32,6 +33,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
     editorKey,
     onChange,
+    onUpload,
     indentSize,
   } = props;
 
@@ -66,11 +68,18 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [codeMirrorEditor, indentSize]);
 
   // ------------------------| Dropzone |------------------------------------------
+  const dropHandler = useCallback((accepted) => {
+    if (onUpload == null) {
+      return;
+    }
+    accepted.forEach(file => onUpload(file));
+  }, [onUpload]);
+
   const { getRootProps, open } = useDropzone(
     {
       noKeyboard: true,
       noClick: true,
-      onDrop: (props) => { console.log(props); return 0 },
+      onDrop: dropHandler,
     },
   );
 

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -17,12 +17,13 @@ const additionalExtensions: Extension[] = [
 type Props = {
   onChange?: (value: string) => void,
   onSave?: () => void,
+  onUpload?: () => void,
   indentSize?: number,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange, indentSize,
+    onSave, onChange, onUpload, indentSize,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -61,6 +62,7 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
     <CodeMirrorEditor
       editorKey={GlobalCodeMirrorEditorKey.MAIN}
       onChange={onChange}
+      onUpload={onUpload}
       indentSize={indentSize}
     />
   );