add file type object literal

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

@@ -7,7 +7,9 @@ import nodePath from 'path';
 
 import type { IPageHasId } from '@growi/core';
 import { pathUtils } from '@growi/core/dist/utils';
-import { CodeMirrorEditorMain, GlobalCodeMirrorEditorKey, useCodeMirrorEditorIsolated } from '@growi/editor';
+import {
+  CodeMirrorEditorMain, GlobalCodeMirrorEditorKey, useCodeMirrorEditorIsolated, AcceptedUploadFileType,
+} from '@growi/editor';
 import detectIndent from 'detect-indent';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
@@ -359,12 +361,12 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   const acceptedFileType = useMemo(() => {
     if (isUploadableFile) {
-      return '*';
+      return AcceptedUploadFileType.ALL;
     }
     if (isUploadableImage) {
-      return 'image/*';
+      return AcceptedUploadFileType.IMAGE;
     }
-    return null;
+    return AcceptedUploadFileType.NO;
   }, [isUploadableFile, isUploadableImage]);
 
   const scrollPreviewByEditorLine = useCallback((line: number) => {

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

@@ -5,7 +5,7 @@ import {
 import { indentUnit } from '@codemirror/language';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
-import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../../consts';
 import { useFileDropzone } from '../../services';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
@@ -23,6 +23,7 @@ type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
   onUpload?: (files: File[]) => void,
+  acceptedFileType?: AcceptedUploadFileType,
   indentSize?: number,
 }
 
@@ -31,6 +32,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     editorKey,
     onChange,
     onUpload,
+    acceptedFileType,
     indentSize,
   } = props;
 
@@ -59,7 +61,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   return (
     <div {...getRootProps()} className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />
-      <Toolbar fileOpen={open} />
+      <Toolbar fileOpen={open} acceptedFileType={acceptedFileType} />
     </div>
   );
 };

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

@@ -5,8 +5,11 @@ import {
   DropdownItem,
 } from 'reactstrap';
 
+import { AcceptedUploadFileType } from 'src/consts';
+
 type Props = {
   fileOpen: () => void,
+  acceptedFileType?: AcceptedUploadFileType,
 }
 
 export const AttachmentsDropup = (props: Props): JSX.Element => {

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

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

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import type { Extension } from '@codemirror/state';
 import { keymap, scrollPastEnd } from '@codemirror/view';
 
-import { GlobalCodeMirrorEditorKey } from '../consts';
+import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../consts';
 import { useCodeMirrorEditorIsolated } from '../stores';
 
 import { CodeMirrorEditor } from '.';
@@ -18,12 +18,13 @@ type Props = {
   onChange?: (value: string) => void,
   onSave?: () => void,
   onUpload?: (files: File[]) => void,
+  acceptedFileType?: AcceptedUploadFileType,
   indentSize?: number,
 }
 
 export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
   const {
-    onSave, onChange, onUpload, indentSize,
+    onSave, onChange, onUpload, acceptedFileType, indentSize,
   } = props;
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
@@ -63,6 +64,7 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
       editorKey={GlobalCodeMirrorEditorKey.MAIN}
       onChange={onChange}
       onUpload={onUpload}
+      acceptedFileType={acceptedFileType}
       indentSize={indentSize}
     />
   );

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

@@ -0,0 +1,6 @@
+export const AcceptedUploadFileType = {
+  ALL: '*',
+  IMAGE: 'image/*',
+  NO: null,
+} as const;
+export type AcceptedUploadFileType = typeof AcceptedUploadFileType[keyof typeof AcceptedUploadFileType];

packages/editor/src/consts/index.ts

@@ -1 +1,2 @@
 export * from './global-code-mirror-editor-key';
+export * from './accepted-upload-file-type';

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

@@ -3,13 +3,16 @@ import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import type { DropzoneState } from 'react-dropzone';
 
+import { AcceptedUploadFileType } from 'src/consts';
+
 type DropzoneEditor = {
   onUpload?: (files: File[]) => void,
+  acceptedFileType?: AcceptedUploadFileType,
 }
 
 export const useFileDropzone = (props: DropzoneEditor): DropzoneState => {
 
-  const { onUpload } = props;
+  const { onUpload, acceptedFileType } = props;
 
   const dropHandler = useCallback((acceptedFiles: File[]) => {
     if (onUpload == null) {