refactor AttachmentsDropup

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

@@ -237,7 +237,11 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
         <input {...getInputProps()} />
         <FileDropzoneOverlay isEnabled={isDragActive} />
         <CodeMirrorEditorContainer ref={containerRef} />
-        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedUploadFileType={acceptedUploadFileType} />
+        <Toolbar
+          editorKey={editorKey}
+          acceptedUploadFileType={acceptedUploadFileType}
+          onAttachmentMenuItemClicked={open}
+        />
       </div>
     </div>
   );

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

@@ -4,18 +4,18 @@ import {
 } from 'reactstrap';
 
 type Props = {
-  onFileOpen: () => void,
+  onItemClicked: () => void,
   acceptedUploadFileType: AcceptedUploadFileType,
 }
 
 export const AttachmentsButton = (props: Props): JSX.Element => {
 
-  const { onFileOpen, acceptedUploadFileType } = props;
+  const { onItemClicked, acceptedUploadFileType } = props;
 
   if (acceptedUploadFileType === AcceptedUploadFileType.ALL) {
     return (
       <>
-        <DropdownItem className="d-flex gap-2 align-items-center" onClick={onFileOpen}>
+        <DropdownItem className="d-flex gap-2 align-items-center" onClick={onItemClicked}>
           <span className="material-symbols-outlined fs-5">attach_file</span>
           Files
         </DropdownItem>
@@ -25,7 +25,7 @@ export const AttachmentsButton = (props: Props): JSX.Element => {
   if (acceptedUploadFileType === AcceptedUploadFileType.IMAGE) {
     return (
       <>
-        <DropdownItem className="d-flex gap-2 align-items-center" onClick={onFileOpen}>
+        <DropdownItem className="d-flex gap-2 align-items-center" onClick={onItemClicked}>
           <span className="material-symbols-outlined fs-5">image</span>
           Images
         </DropdownItem>

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

@@ -1,9 +1,11 @@
+import { useCallback, useState } from 'react';
+
 import { AcceptedUploadFileType } from '@growi/core';
 import {
-  UncontrolledDropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
+  Dropdown,
 } from 'reactstrap';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../consts';
@@ -13,16 +15,25 @@ import { LinkEditButton } from './LinkEditButton';
 
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
-  onFileOpen: () => void,
   acceptedUploadFileType: AcceptedUploadFileType,
+  onMenuItemClicked: () => void,
 }
 
 export const AttachmentsDropup = (props: Props): JSX.Element => {
-  const { onFileOpen, acceptedUploadFileType, editorKey } = props;
+  const { onMenuItemClicked, acceptedUploadFileType, editorKey } = props;
+
+  const [isOpen, setOpen] = useState(false);
+
+  const itemClickedHandler = useCallback(() => {
+    onMenuItemClicked();
+
+    // Force close against react-dropzone's { noClick: true } option
+    setOpen(false);
+  }, [onMenuItemClicked]);
 
   return (
     <>
-      <UncontrolledDropdown direction="up" className="lh-1">
+      <Dropdown isOpen={isOpen} toggle={() => setOpen(!isOpen)} direction="up" className="lh-1">
         <DropdownToggle className="btn-toolbar-button rounded-circle">
           <span className="material-symbols-outlined fs-6">add</span>
         </DropdownToggle>
@@ -31,10 +42,10 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
             Attachments
           </DropdownItem>
           <DropdownItem divider />
-          <AttachmentsButton onFileOpen={onFileOpen} acceptedUploadFileType={acceptedUploadFileType} />
+          <AttachmentsButton onItemClicked={itemClickedHandler} acceptedUploadFileType={acceptedUploadFileType} />
           <LinkEditButton editorKey={editorKey} />
         </DropdownMenu>
-      </UncontrolledDropdown>
+      </Dropdown>
     </>
   );
 };

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

@@ -15,16 +15,16 @@ import styles from './Toolbar.module.scss';
 
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
-  onFileOpen: () => void,
   acceptedUploadFileType: AcceptedUploadFileType,
+  onAttachmentMenuItemClicked: () => void,
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
 
-  const { editorKey, onFileOpen, acceptedUploadFileType } = props;
+  const { editorKey, onAttachmentMenuItemClicked, acceptedUploadFileType } = props;
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
-      <AttachmentsDropup editorKey={editorKey} onFileOpen={onFileOpen} acceptedUploadFileType={acceptedUploadFileType} />
+      <AttachmentsDropup editorKey={editorKey} onMenuItemClicked={onAttachmentMenuItemClicked} acceptedUploadFileType={acceptedUploadFileType} />
       <TextFormatTools editorKey={editorKey} />
       <EmojiButton
         editorKey={editorKey}