disable image upload whime uploading

editors/demo/src/HHMI/HHMI.js

@@ -12,7 +12,7 @@ const renderImage = file => {
     reader.onload = () => accept(reader.result);
     reader.onerror = () => fail(reader.error);
     // Some extra delay to make the asynchronicity visible
-    setTimeout(() => reader.readAsDataURL(file), 4150);
+    setTimeout(() => reader.readAsDataURL(file), 6150);
   });
 };
 

wax-prosemirror-services/src/ImageService/components/ImageUpload.js

 /* eslint react/prop-types: 0 */
-import React, { useContext, useRef, useMemo } from 'react';
+import React, { useContext, useRef, useMemo, useEffect } from 'react';
 import { WaxContext, DocumentHelpers, MenuButton } from 'wax-prosemirror-core';
 import { TextSelection } from 'prosemirror-state';
 import styled from 'styled-components';
@@ -20,6 +20,10 @@ const ImageUpload = ({ item, fileUpload, view }) => {
     pmViews: { main },
   } = context;
 
+  const isEditable = main.props.editable(editable => {
+    return editable;
+  });
+
   const inputRef = useRef(null);
   const placeholderPlugin = app.PmPlugins.get('imagePlaceHolder');
   const imageServiceConfig = app.config.get('config.ImageService');
@@ -60,12 +64,10 @@ const ImageUpload = ({ item, fileUpload, view }) => {
     insertImage(urls, view, placeholderPlugin);
   }
 
-  let isDisabled = !item.select(activeView);
+  const isDisabled =
+    context.options.uploading || !item.select(activeView) || !isEditable;
 
-  const isEditable = main.props.editable(editable => {
-    return editable;
-  });
-  if (!isEditable) isDisabled = true;
+  useEffect(() => {}, []);
 
   const ImageUploadComponent = useMemo(
     () => (
@@ -73,7 +75,11 @@ const ImageUpload = ({ item, fileUpload, view }) => {
         <label htmlFor="file-upload">
           <MenuButton
             active={false}
-            disabled={isDisabled}
+            disabled={
+              context.options.uploading ||
+              !item.select(activeView) ||
+              !isEditable
+            }
             iconName={item.icon}
             onMouseDown={e => {
               e.preventDefault();
@@ -87,6 +93,7 @@ const ImageUpload = ({ item, fileUpload, view }) => {
             id="file-upload"
             onChange={e => {
               fileUpload(e.target.files[0]);
+              context.setOption({ uploading: true });
               if (inputRef.current) inputRef.current.value = '';
             }}
             ref={inputRef}

wax-prosemirror-services/src/ImageService/fileUpload.js

@@ -51,10 +51,12 @@ export default (view, fileUpload, placeholderPlugin, context) => file => {
           )
           .setMeta(placeholderPlugin, { remove: { id } }),
       );
+      context.setOption({ uploading: false });
     },
     () => {
       // On failure, just clean up the placeholder
       view.dispatch(tr.setMeta(placeholderPlugin, { remove: { id } }));
+      context.setOption({ uploading: false });
     },
   );
 };