open files from dialog

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

@@ -65,7 +65,8 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, indentSize]);
 
-  const { getRootProps } = useDropzone(
+  // ------------------------| Dropzone |------------------------------------------
+  const { getRootProps, open } = useDropzone(
     {
       noKeyboard: true,
       noClick: true,
@@ -73,10 +74,11 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     },
   );
 
+  // ------------------------| Dropzone |-------------------------------------------
   return (
     <div {...getRootProps()} className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />
-      <Toolbar />
+      <Toolbar fileOpen={open} />
     </div>
   );
 };

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

@@ -5,7 +5,13 @@ import {
   DropdownItem,
 } from 'reactstrap';
 
-export const AttachmentsDropup = (): JSX.Element => {
+type Props = {
+  fileOpen: () => void,
+}
+
+export const AttachmentsDropup = (props: Props): JSX.Element => {
+
+  const { fileOpen } = props;
   return (
     <>
       <UncontrolledDropdown direction="up" className="lh-1">
@@ -18,11 +24,11 @@ export const AttachmentsDropup = (): JSX.Element => {
             Attachments
           </DropdownItem>
           <DropdownItem divider />
-          <DropdownItem className="d-flex gap-1 align-items-center">
+          <DropdownItem className="d-flex gap-1 align-items-center" onClick={fileOpen}>
             <span className="material-icons-outlined fs-5">attach_file</span>
             Files
           </DropdownItem>
-          <DropdownItem className="d-flex gap-1 align-items-center">
+          <DropdownItem className="d-flex gap-1 align-items-center" onClick={fileOpen}>
             <span className="material-icons-outlined fs-5">image</span>
             Images
           </DropdownItem>

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

@@ -9,10 +9,16 @@ import { TextFormatTools } from './TextFormatTools';
 
 import styles from './Toolbar.module.scss';
 
-export const Toolbar = memo((): JSX.Element => {
+type Props = {
+  fileOpen: () => void,
+}
+
+export const Toolbar = memo((props: Props): JSX.Element => {
+
+  const { fileOpen } = props;
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
-      <AttachmentsDropup />
+      <AttachmentsDropup fileOpen={fileOpen} />
       <TextFormatTools />
       <EmojiButton />
       <TableButton />