From d5d6f8970799a70d596d69dd368e3dbb17cec045 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 3 Aug 2023 16:28:09 +0200
Subject: [PATCH] Lexical: Allow images only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../floating-block-type-toolbar-plugin.tsx    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx b/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
index 404ff6188f..e3c9bb6730 100644
--- a/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
+++ b/app/soapbox/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
@@ -26,7 +26,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { uploadFile } from 'soapbox/actions/compose';
 import { useAppDispatch, useInstance } from 'soapbox/hooks';
 
-import { onlyImages } from '../../components/upload-button';
 import { $createImageNode } from '../nodes/image-node';
 import { setFloatingElemPosition } from '../utils/set-floating-elem-position';
 
@@ -47,17 +46,24 @@ const UploadButton: React.FC<IUploadButton> = ({ onSelectFile }) => {
   const intl = useIntl();
   const { configuration } = useInstance();
   const dispatch = useAppDispatch();
+  const [disabled, setDisabled] = useState(false);
 
   const fileElement = useRef<HTMLInputElement>(null);
   const attachmentTypes = configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>;
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     if (e.target.files?.length) {
+      setDisabled(true);
+
       // @ts-ignore
       dispatch(uploadFile(
         e.target.files.item(0) as File,
         intl,
-        ({ url }) => onSelectFile(url),
+        ({ url }) => {
+          onSelectFile(url);
+          setDisabled(false);
+        },
+        () => setDisabled(false),
       ));
     }
   };
@@ -66,11 +72,7 @@ const UploadButton: React.FC<IUploadButton> = ({ onSelectFile }) => {
     fileElement.current?.click();
   };
 
-  const src = (
-    onlyImages(attachmentTypes)
-      ? require('@tabler/icons/photo.svg')
-      : require('@tabler/icons/paperclip.svg')
-  );
+  const src = require('@tabler/icons/photo.svg');
 
   return (
     <label>
@@ -80,13 +82,12 @@ const UploadButton: React.FC<IUploadButton> = ({ onSelectFile }) => {
         icon={src}
       />
       <input
-        // key={resetFileKey}
         ref={fileElement}
         type='file'
         multiple
-        accept={attachmentTypes && attachmentTypes.toArray().join(',')}
+        accept={attachmentTypes ? attachmentTypes.filter(type => type.startsWith('image/')).toArray().join(',') : 'image/*'}
         onChange={handleChange}
-        // disabled={disabled}
+        disabled={disabled}
         className='hidden'
       />
     </label>
@@ -200,12 +201,12 @@ const BlockTypeFloatingToolbar = ({
     >
       {editor.isEditable() && (
         <>
+          <UploadButton onSelectFile={createImage} />
           <ToolbarButton
             onClick={createHorizontalLine}
             aria-label={intl.formatMessage(messages.createHorizontalLine)}
             icon={require('@tabler/icons/line-dashed.svg')}
           />
-          <UploadButton onSelectFile={createImage} />
         </>
       )}
     </div>