From 4b1468cfd8f49a0ccc34505fb5eff0a4dab59c1f Mon Sep 17 00:00:00 2001 From: Cao Mingjun Date: Sat, 25 Nov 2023 07:39:20 +0000 Subject: [PATCH] Web: support pasting images to PublishDialog --- web/src/components/Messaging.jsx | 25 ++++++++++++++++--------- web/src/components/PublishDialog.jsx | 8 ++++++++ 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/web/src/components/Messaging.jsx b/web/src/components/Messaging.jsx index a53b99f1..f3610fd0 100644 --- a/web/src/components/Messaging.jsx +++ b/web/src/components/Messaging.jsx @@ -26,6 +26,16 @@ const Messaging = (props) => { setAttachFile(null); }; + const getPastedImage = (ev) => { + const { items } = ev.clipboardData; + for (let i = 0; i < items.length; i += 1) { + if (items[i].type.indexOf("image") !== -1) { + return items[i].getAsFile(); + } + } + return null; + }; + return ( <> {subscription && ( @@ -35,6 +45,7 @@ const Messaging = (props) => { onMessageChange={setMessage} onFilePasted={setAttachFile} onOpenDialogClick={handleOpenDialogClick} + getPastedImage={getPastedImage} /> )} { topic={subscription?.topic ?? ""} message={message} attachFile={attachFile} + getPastedImage={getPastedImage} onClose={handleDialogClose} onDragEnter={() => props.onDialogOpenModeChange((prev) => prev || PublishDialog.OPEN_MODE_DRAG)} // Only update if not already open onResetOpenMode={() => props.onDialogOpenModeChange(PublishDialog.OPEN_MODE_DEFAULT)} @@ -67,15 +79,10 @@ const MessageBar = (props) => { }; const handlePaste = (ev) => { - const clipboardData = ev.clipboardData || window.clipboardData; - const { items } = clipboardData; - for (let i = 0; i < items.length; i += 1) { - if (items[i].type.indexOf("image") !== -1) { - const blob = items[i].getAsFile(); - props.onFilePasted(blob); - props.onOpenDialogClick(); - break; - } + const blob = props.getPastedImage(ev); + if (blob) { + props.onFilePasted(blob); + props.onOpenDialogClick(); } }; diff --git a/web/src/components/PublishDialog.jsx b/web/src/components/PublishDialog.jsx index b7994da8..912810b3 100644 --- a/web/src/components/PublishDialog.jsx +++ b/web/src/components/PublishDialog.jsx @@ -241,6 +241,13 @@ const PublishDialog = (props) => { } }, [props.attachFile]); + const handlePaste = (ev) => { + const blob = props.getPastedImage(ev); + if (blob) { + updateAttachFile(blob); + } + }; + const handleAttachFileChanged = async (ev) => { await updateAttachFile(ev.target.files[0]); }; @@ -363,6 +370,7 @@ const PublishDialog = (props) => { inputProps={{ "aria-label": t("publish_dialog_message_label"), }} + onPaste={handlePaste} />