From 3ea6f9c1b3fb61c784b428b08798e341b42607f7 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 1 Sep 2023 17:19:22 +0300
Subject: [PATCH] disable image upload whime uploading
---
editors/demo/src/HHMI/HHMI.js | 2 +-
.../ImageService/components/ImageUpload.js | 21 ++++++++++++-------
.../src/ImageService/fileUpload.js | 2 ++
3 files changed, 17 insertions(+), 8 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 35f9e0746..1b9ce865f 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/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);
});
};
diff --git a/wax-prosemirror-services/src/ImageService/components/ImageUpload.js b/wax-prosemirror-services/src/ImageService/components/ImageUpload.js
index 2dd3a1d32..1be9b56fb 100644
--- a/wax-prosemirror-services/src/ImageService/components/ImageUpload.js
+++ b/wax-prosemirror-services/src/ImageService/components/ImageUpload.js
@@ -1,5 +1,5 @@
/* 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}
diff --git a/wax-prosemirror-services/src/ImageService/fileUpload.js b/wax-prosemirror-services/src/ImageService/fileUpload.js
index b5fd0716b..3275e45bd 100644
--- a/wax-prosemirror-services/src/ImageService/fileUpload.js
+++ b/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 });
},
);
};
--
GitLab