WIP: refactor acceptedUploadFileType

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -17,8 +17,9 @@ import { toastError } from '~/client/util/toastr';
 import type { IEditorMethods } from '~/interfaces/editor-methods';
 import { useSWRxPageComment, useSWRxEditingCommentsNum } from '~/stores/comment';
 import {
-  useCurrentUser, useIsSlackConfigured,
   useIsUploadAllFileAllowed, useIsUploadEnabled,
+  // useAcceptedUploadFileType,
+  useCurrentUser, useIsSlackConfigured,
 } from '~/stores/context';
 import { useSWRxSlackChannels, useIsSlackEnabled, useIsEnabledUnsavedWarning } from '~/stores/editor';
 import { useCurrentPagePath } from '~/stores/page';
@@ -74,6 +75,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   const { data: isSlackConfigured } = useIsSlackConfigured();
   const { data: isUploadAllFileAllowed } = useIsUploadAllFileAllowed();
   const { data: isUploadEnabled } = useIsUploadEnabled();
+  // const { data: acceptedUploadFileType } = useAcceptedUploadFileType();
   const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
   const {
     increment: incrementEditingCommentsNum,
@@ -325,8 +327,6 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
       </Button>
     );
 
-    const isUploadable = isUploadEnabled || isUploadAllFileAllowed;
-
     return (
       <>
         <div className="comment-write">
@@ -334,6 +334,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
           <TabContent activeTab={activeTab}>
             <TabPane tabId="comment_editor">
               <CodeMirrorEditorComment
+                // acceptedUploadFileType={acceptedUploadFileType}
                 onChange={onChangeHandler}
               />
               {/* <Editor

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

@@ -26,7 +26,9 @@ import { SocketEventName } from '~/interfaces/websocket';
 import {
   useDefaultIndentSize, useCurrentUser,
   useCurrentPathname, useIsEnabledAttachTitleHeader,
-  useIsEditable, useIsUploadAllFileAllowed, useIsUploadEnabled, useIsIndentSizeForced,
+  useIsEditable, useIsIndentSizeForced,
+  useIsUploadAllFileAllowed, useIsUploadEnabled,
+  // useAcceptedUploadFileType,
 } from '~/stores/context';
 import {
   useEditorSettings,
@@ -110,6 +112,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { data: defaultIndentSize } = useDefaultIndentSize();
   const { data: isUploadAllFileAllowed } = useIsUploadAllFileAllowed();
   const { data: isUploadEnabled } = useIsUploadEnabled();
+  // const { data: acceptedUploadFileType } = useAcceptedUploadFileType();
   const { data: conflictDiffModalStatus, close: closeConflictDiffModal } = useConflictDiffModal();
   const { data: editorSettings } = useEditorSettings();
   const { mutate: mutateIsLatestRevision } = useIsLatestRevision();
@@ -315,7 +318,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, pageId]);
 
-  const acceptedFileType = useMemo(() => {
+  const acceptedUploadFileType = useMemo(() => {
     if (!isUploadEnabled) {
       return AcceptedUploadFileType.NONE;
     }
@@ -460,7 +463,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
             onChange={markdownChangedHandler}
             onSave={saveWithShortcut}
             onUpload={uploadHandler}
-            acceptedFileType={acceptedFileType}
+            acceptedUploadFileType={acceptedUploadFileType}
             onScroll={scrollEditorHandlerThrottle}
             indentSize={currentIndentSize ?? defaultIndentSize}
             userName={user?.name}

apps/app/src/interfaces/editor-settings.ts

@@ -1,3 +1,5 @@
+import type { AcceptedUploadFileType } from '@growi/editor';
+
 export const DEFAULT_THEME = 'DefaultLight';
 
 const KeyMapMode = {
@@ -21,4 +23,5 @@ export type EditorConfig = {
     isUploadAllFileAllowed: boolean,
     isUploadEnabled: boolean,
   }
+  // acceptedUploadFileType: AcceptedUploadFileType,
 }

apps/app/src/pages/[[...path]].page.tsx

@@ -11,6 +11,7 @@ import type {
 import {
   isClient, pagePathUtils, pathUtils,
 } from '@growi/core/dist/utils';
+import { AcceptedUploadFileType } from '@growi/editor';
 import ExtensibleCustomError from 'extensible-custom-error';
 import type {
   GetServerSideProps, GetServerSidePropsContext,
@@ -40,7 +41,9 @@ import {
   useIsAclEnabled, useIsSearchPage, useIsEnabledAttachTitleHeader,
   useCsrfToken, useIsSearchScopeChildrenAsDefault, useIsEnabledMarp, useCurrentPathname,
   useIsSlackConfigured, useRendererConfig, useGrowiCloudUri,
-  useEditorConfig, useIsAllReplyShown, useIsUploadAllFileAllowed, useIsUploadEnabled, useIsContainerFluid, useIsNotCreatable,
+  useEditorConfig, useIsAllReplyShown, useIsContainerFluid, useIsNotCreatable,
+  useIsUploadAllFileAllowed, useIsUploadEnabled,
+  // useAcceptedUploadFileType,
 } from '~/stores/context';
 import { useEditingMarkdown } from '~/stores/editor';
 import {
@@ -222,6 +225,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
 
   useIsUploadAllFileAllowed(props.editorConfig.upload.isUploadAllFileAllowed);
   useIsUploadEnabled(props.editorConfig.upload.isUploadEnabled);
+  // useAcceptedUploadFileType(props.editorConfig.acceptedUploadFileType);
 
   const { pageWithMeta } = props;
 
@@ -567,7 +571,17 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
       isUploadAllFileAllowed: crowi.fileUploadService.getFileUploadEnabled(),
       isUploadEnabled: crowi.fileUploadService.getIsUploadable(),
     },
+    // acceptedUploadFileType: (() => {
+    //   if (!crowi.fileUploadService.getIsUploadable()) {
+    //     return AcceptedUploadFileType.NONE;
+    //   }
+    //   if (crowi.fileUploadService.getFileUploadEnabled()) {
+    //     return AcceptedUploadFileType.ALL;
+    //   }
+    //   return AcceptedUploadFileType.IMAGE;
+    // })(),
   };
+
   props.adminPreferredIndentSize = configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize');
   props.isIndentSizeForced = configManager.getConfig('markdown', 'markdown:isIndentSizeForced');
 

apps/app/src/stores/context.tsx

@@ -1,13 +1,15 @@
 import type { ColorScheme, IUserHasId } from '@growi/core';
-import useSWR, { SWRResponse } from 'swr';
+import { AcceptedUploadFileType } from '@growi/editor';
+import type { SWRResponse } from 'swr';
+import useSWR from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
-import { SupportedActionType } from '~/interfaces/activity';
-import { EditorConfig } from '~/interfaces/editor-settings';
-import { RendererConfig } from '~/interfaces/services/renderer';
+import type { SupportedActionType } from '~/interfaces/activity';
+import type { EditorConfig } from '~/interfaces/editor-settings';
+import type { RendererConfig } from '~/interfaces/services/renderer';
 import InterceptorManager from '~/services/interceptor-manager';
 
-import { TargetAndAncestors } from '../interfaces/page-listing-results';
+import type { TargetAndAncestors } from '../interfaces/page-listing-results';
 
 import { useContextSWR } from './use-context-swr';
 import { useStaticSWR } from './use-static-swr';
@@ -164,6 +166,10 @@ export const useIsUploadAllFileAllowed = (initialData?: boolean): SWRResponse<bo
   return useContextSWR('isUploadAllFileAllowed', initialData);
 };
 
+// export const useAcceptedUploadFileType = (initialData?: AcceptedUploadFileType): SWRResponse<AcceptedUploadFileType, Error> => {
+//   return useContextSWR('acceptedUploadFileType', initialData, { fallbackData: AcceptedUploadFileType.NONE });
+// };
+
 export const useShowPageLimitationL = (initialData?: number): SWRResponse<number, Error> => {
   return useContextSWR('showPageLimitationL', initialData);
 };
@@ -259,3 +265,14 @@ export const useIsEditable = (): SWRResponse<boolean, Error> => {
     },
   );
 };
+
+// export const useAcceptedMimeType = (): SWRResponse<string, Error> => {
+//   const { data: acceptedUploadFileType } = useAcceptedUploadFileType();
+
+//   return useSWRImmutable(
+//     ['acceptedMimeType', acceptedUploadFileType],
+//     ([, acceptedUploadFileType]) => {
+//       return getMimeType(acceptedUploadFileType ?? AcceptedUploadFileType.NONE);
+//     },
+//   );
+// };

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

@@ -27,29 +27,32 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
   );
 });
 
-type Props = {
-  editorKey: string | GlobalCodeMirrorEditorKey,
-  acceptedFileType: AcceptedUploadFileType,
+export type CodeMirrorEditorProps = {
+  acceptedUploadFileType?: AcceptedUploadFileType,
+  indentSize?: number,
+  editorTheme?: string,
+  editorKeymap?: string,
   onChange?: (value: string) => void,
   onSave?: () => void,
   onUpload?: (files: File[]) => void,
   onScroll?: () => void,
-  indentSize?: number,
-  editorTheme?: string,
-  editorKeymap?: string,
+}
+
+type Props = CodeMirrorEditorProps & {
+  editorKey: string | GlobalCodeMirrorEditorKey,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
     editorKey,
-    acceptedFileType,
+    acceptedUploadFileType = AcceptedUploadFileType.NONE,
+    indentSize,
+    editorTheme,
+    editorKeymap,
     onChange,
     onSave,
     onUpload,
     onScroll,
-    indentSize,
-    editorTheme,
-    editorKeymap,
   } = props;
 
   const containerRef = useRef(null);
@@ -182,7 +185,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     isDragReject,
     isUploading,
     open,
-  } = useFileDropzone({ onUpload, acceptedFileType });
+  } = useFileDropzone({ onUpload, acceptedUploadFileType });
 
   const fileUploadState = useMemo(() => {
 
@@ -190,7 +193,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
       return 'dropzone-uploading';
     }
 
-    switch (acceptedFileType) {
+    switch (acceptedUploadFileType) {
       case AcceptedUploadFileType.NONE:
         return 'dropzone-disabled';
 
@@ -214,14 +217,14 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     }
 
     return '';
-  }, [isUploading, isDragAccept, isDragReject, acceptedFileType]);
+  }, [isUploading, isDragAccept, isDragReject, acceptedUploadFileType]);
 
   return (
     <div className={`${style['codemirror-editor']} flex-expand-vert`}>
       <div {...getRootProps()} className={`dropzone ${fileUploadState} flex-expand-vert`}>
         <FileDropzoneOverlay isEnabled={isDragActive} />
         <CodeMirrorEditorContainer ref={containerRef} />
-        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedFileType={acceptedFileType} />
+        <Toolbar editorKey={editorKey} onFileOpen={open} acceptedUploadFileType={acceptedUploadFileType} />
       </div>
     </div>
   );

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

@@ -6,14 +6,14 @@ import { AcceptedUploadFileType } from '../../../consts/accepted-upload-file-typ
 
 type Props = {
   onFileOpen: () => void,
-  acceptedFileType: AcceptedUploadFileType,
+  acceptedUploadFileType: AcceptedUploadFileType,
 }
 
 export const AttachmentsButton = (props: Props): JSX.Element => {
 
-  const { onFileOpen, acceptedFileType } = props;
+  const { onFileOpen, acceptedUploadFileType } = props;
 
-  if (acceptedFileType === AcceptedUploadFileType.ALL) {
+  if (acceptedUploadFileType === AcceptedUploadFileType.ALL) {
     return (
       <>
         <DropdownItem className="d-flex gap-2 align-items-center" onClick={onFileOpen}>
@@ -23,7 +23,7 @@ export const AttachmentsButton = (props: Props): JSX.Element => {
       </>
     );
   }
-  if (acceptedFileType === AcceptedUploadFileType.IMAGE) {
+  if (acceptedUploadFileType === AcceptedUploadFileType.IMAGE) {
     return (
       <>
         <DropdownItem className="d-flex gap-2 align-items-center" onClick={onFileOpen}>

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

@@ -14,11 +14,11 @@ import { LinkEditButton } from './LinkEditButton';
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onFileOpen: () => void,
-  acceptedFileType: AcceptedUploadFileType,
+  acceptedUploadFileType: AcceptedUploadFileType,
 }
 
 export const AttachmentsDropup = (props: Props): JSX.Element => {
-  const { onFileOpen, acceptedFileType, editorKey } = props;
+  const { onFileOpen, acceptedUploadFileType, editorKey } = props;
 
   return (
     <>
@@ -31,7 +31,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
             Attachments
           </DropdownItem>
           <DropdownItem divider />
-          <AttachmentsButton onFileOpen={onFileOpen} acceptedFileType={acceptedFileType} />
+          <AttachmentsButton onFileOpen={onFileOpen} acceptedUploadFileType={acceptedUploadFileType} />
           <LinkEditButton editorKey={editorKey} />
         </DropdownMenu>
       </UncontrolledDropdown>

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

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

packages/editor/src/components/CodeMirrorEditorComment.tsx

@@ -15,18 +15,18 @@ const additionalExtensions: Extension[] = [
 
 
 type Props = {
+  acceptedUploadFileType?: AcceptedUploadFileType,
   onChange?: (value: string) => void,
   onComment?: () => void,
-  acceptedFileType?: AcceptedUploadFileType,
 }
 
 export const CodeMirrorEditorComment = (props: Props): JSX.Element => {
   const {
-    onComment, onChange, acceptedFileType,
+    acceptedUploadFileType,
+    onComment, onChange,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.COMMENT);
-  const acceptedFileTypeNoOpt = acceptedFileType ?? AcceptedUploadFileType.NONE;
 
   // setup additional extensions
   useEffect(() => {
@@ -61,8 +61,8 @@ export const CodeMirrorEditorComment = (props: Props): JSX.Element => {
   return (
     <CodeMirrorEditor
       editorKey={GlobalCodeMirrorEditorKey.COMMENT}
+      acceptedUploadFileType={acceptedUploadFileType}
       onChange={onChange}
-      acceptedFileType={acceptedFileTypeNoOpt}
     />
   );
 };

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -3,11 +3,11 @@ import { useEffect } from 'react';
 import { type Extension } from '@codemirror/state';
 import { keymap, scrollPastEnd } from '@codemirror/view';
 
-import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../consts';
+import { GlobalCodeMirrorEditorKey } from '../consts';
 import { setDataLine } from '../services/extensions/setDataLine';
 import { useCodeMirrorEditorIsolated, useCollaborativeEditorMode } from '../stores';
 
-import { CodeMirrorEditor } from '.';
+import { CodeMirrorEditor, CodeMirrorEditorProps } from '.';
 
 const additionalExtensions: Extension[] = [
   [
@@ -16,32 +16,25 @@ const additionalExtensions: Extension[] = [
   ],
 ];
 
-type Props = {
-  onChange?: (value: string) => void,
-  onSave?: () => void,
-  onUpload?: (files: File[]) => void,
-  onScroll?: () => void,
-  acceptedFileType?: AcceptedUploadFileType,
-  indentSize?: number,
+type Props = CodeMirrorEditorProps & {
   userName?: string,
   pageId?: string,
   initialValue?: string,
   onOpenEditor?: (markdown: string) => void,
-  editorTheme?: string,
-  editorKeymap?: string,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange, onUpload, onScroll, acceptedFileType, indentSize, userName, pageId, initialValue, onOpenEditor, editorTheme, editorKeymap,
+    acceptedUploadFileType,
+    indentSize, userName, pageId, initialValue,
+    editorTheme, editorKeymap,
+    onSave, onChange, onUpload, onScroll, onOpenEditor,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 
   useCollaborativeEditorMode(userName, pageId, initialValue, onOpenEditor, codeMirrorEditor);
 
-  const acceptedFileTypeNoOpt = acceptedFileType ?? AcceptedUploadFileType.NONE;
-
   // setup additional extensions
   useEffect(() => {
     return codeMirrorEditor?.appendExtensions?.(additionalExtensions);
@@ -80,7 +73,7 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
       onSave={onSave}
       onUpload={onUpload}
       onScroll={onScroll}
-      acceptedFileType={acceptedFileTypeNoOpt}
+      acceptedUploadFileType={acceptedUploadFileType}
       indentSize={indentSize}
       editorTheme={editorTheme}
       editorKeymap={editorKeymap}

packages/editor/src/components/playground/Playground.tsx

@@ -62,7 +62,7 @@ export const Playground = (): JSX.Element => {
             onChange={setMarkdownToPreview}
             onUpload={uploadHandler}
             indentSize={4}
-            acceptedFileType={AcceptedUploadFileType.ALL}
+            acceptedUploadFileType={AcceptedUploadFileType.ALL}
             editorTheme={editorTheme}
             editorKeymap={editorKeymap}
           />

packages/editor/src/consts/accepted-upload-file-type.ts

@@ -2,5 +2,19 @@ export const AcceptedUploadFileType = {
   ALL: '*',
   IMAGE: 'image/*',
   NONE: '',
+  // ALL: 'all',
+  // IMAGE: 'image',
+  // NONE: 'none',
 } as const;
 export type AcceptedUploadFileType = typeof AcceptedUploadFileType[keyof typeof AcceptedUploadFileType];
+
+export const getMimeType = (aufType: AcceptedUploadFileType): string => {
+  switch (aufType) {
+    case AcceptedUploadFileType.ALL:
+      return '*';
+    case AcceptedUploadFileType.IMAGE:
+      return 'image/*';
+    default:
+      return '';
+  }
+};

packages/editor/src/services/file-dropzone/use-file-dropzone/use-file-dropzone.ts

@@ -3,20 +3,20 @@ import { useCallback, useState } from 'react';
 import { useDropzone, Accept } from 'react-dropzone';
 import type { DropzoneState } from 'react-dropzone';
 
-import { AcceptedUploadFileType } from '../../../consts';
+import { AcceptedUploadFileType, getMimeType } from '../../../consts';
 
 type FileDropzoneState = DropzoneState & {
   isUploading: boolean,
 }
 
 type DropzoneEditor = {
+  acceptedUploadFileType: AcceptedUploadFileType,
   onUpload?: (files: File[]) => void,
-  acceptedFileType: AcceptedUploadFileType,
 }
 
 export const useFileDropzone = (props: DropzoneEditor): FileDropzoneState => {
 
-  const { onUpload, acceptedFileType } = props;
+  const { onUpload, acceptedUploadFileType } = props;
 
   const [isUploading, setIsUploading] = useState(false);
 
@@ -24,7 +24,7 @@ export const useFileDropzone = (props: DropzoneEditor): FileDropzoneState => {
     if (onUpload == null) {
       return;
     }
-    if (acceptedFileType === AcceptedUploadFileType.NONE) {
+    if (acceptedUploadFileType === AcceptedUploadFileType.NONE) {
       return;
     }
 
@@ -32,11 +32,11 @@ export const useFileDropzone = (props: DropzoneEditor): FileDropzoneState => {
     onUpload(acceptedFiles);
     setIsUploading(false);
 
-  }, [onUpload, setIsUploading, acceptedFileType]);
+  }, [onUpload, setIsUploading, acceptedUploadFileType]);
 
   const accept: Accept = {
   };
-  accept[acceptedFileType] = [];
+  accept[getMimeType(acceptedUploadFileType)] = [];
 
   const dzState = useDropzone({
     noKeyboard: true,