change button view from accepted file type

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

@@ -366,7 +366,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     if (isUploadableImage) {
       return AcceptedUploadFileType.IMAGE;
     }
-    return AcceptedUploadFileType.NO;
+    return AcceptedUploadFileType.NONE;
   }, [isUploadableFile, isUploadableImage]);
 
   const scrollPreviewByEditorLine = useCallback((line: number) => {

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

@@ -0,0 +1,38 @@
+import {
+  DropdownItem,
+} from 'reactstrap';
+
+import { AcceptedUploadFileType } from '../../../consts/accepted-upload-file-type';
+
+type Props = {
+  onFileOpen: () => void,
+  acceptedFileType?: AcceptedUploadFileType,
+}
+
+export const AttachmentsButton = (props: Props): JSX.Element => {
+
+  const { onFileOpen, acceptedFileType } = props;
+
+  if (acceptedFileType === AcceptedUploadFileType.ALL) {
+    return (
+      <>
+        <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
+          <span className="material-icons-outlined fs-5">attach_file</span>
+          Files
+        </DropdownItem>
+      </>
+    );
+  }
+  if (acceptedFileType === AcceptedUploadFileType.IMAGE) {
+    return (
+      <>
+        <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
+          <span className="material-icons-outlined fs-5">image</span>
+          Images
+        </DropdownItem>
+      </>
+    );
+  }
+
+  return <></>;
+};

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

@@ -5,7 +5,10 @@ import {
   DropdownItem,
 } from 'reactstrap';
 
-import { AcceptedUploadFileType } from 'src/consts';
+import { AcceptedUploadFileType } from '../../../consts/accepted-upload-file-type';
+
+import { AttachmentsButton } from './AttachmentsButton';
+
 
 type Props = {
   onFileOpen: () => void,
@@ -14,7 +17,7 @@ type Props = {
 
 export const AttachmentsDropup = (props: Props): JSX.Element => {
 
-  const { onFileOpen } = props;
+  const { onFileOpen, acceptedFileType } = props;
   return (
     <>
       <UncontrolledDropdown direction="up" className="lh-1">
@@ -27,14 +30,7 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
             Attachments
           </DropdownItem>
           <DropdownItem divider />
-          <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
-            <span className="material-icons-outlined fs-5">attach_file</span>
-            Files
-          </DropdownItem>
-          <DropdownItem className="d-flex gap-1 align-items-center" onClick={onFileOpen}>
-            <span className="material-icons-outlined fs-5">image</span>
-            Images
-          </DropdownItem>
+          <AttachmentsButton onFileOpen={onFileOpen} acceptedFileType={acceptedFileType} />
           <DropdownItem className="d-flex gap-1 align-items-center">
             <span className="material-icons-outlined fs-5">link</span>
             Link

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

@@ -4,7 +4,7 @@ import {
 
 import { toast } from 'react-toastify';
 
-import { GlobalCodeMirrorEditorKey } from '../../consts';
+import { AcceptedUploadFileType, GlobalCodeMirrorEditorKey } from '../../consts';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 import { CodeMirrorEditorMain } from '../CodeMirrorEditorMain';
 
@@ -48,7 +48,6 @@ export const Playground = (): JSX.Element => {
 
   }, [codeMirrorEditor]);
 
-
   return (
     <>
       <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '83px' }}>
@@ -61,6 +60,7 @@ export const Playground = (): JSX.Element => {
             onChange={setMarkdownToPreview}
             onUpload={uploadHandler}
             indentSize={4}
+            acceptedFileType={AcceptedUploadFileType.ALL}
           />
         </div>
         <div className="flex-expand-vert d-none d-lg-flex bg-light text-dark border-start border-dark-subtle p-3">