diff --git a/src/examples/images.tsx b/src/examples/images.tsx index 8e218230..af32f684 100644 --- a/src/examples/images.tsx +++ b/src/examples/images.tsx @@ -35,9 +35,7 @@ export const ImageWithNoBackend: Story<{ readOnly: boolean }> = () => { ( diff --git a/src/plugins/image/ImageDialog.tsx b/src/plugins/image/ImageDialog.tsx index 73de3089..b2f0779e 100644 --- a/src/plugins/image/ImageDialog.tsx +++ b/src/plugins/image/ImageDialog.tsx @@ -58,7 +58,9 @@ export const ImageDialog: React.FC = () => { }} className={styles.multiFieldForm} > - {imageUploadHandler !== null && ( + {imageUploadHandler === null ? ( + + ) : (
diff --git a/src/plugins/image/ImageNode.tsx b/src/plugins/image/ImageNode.tsx index 21221f11..73626c5f 100644 --- a/src/plugins/image/ImageNode.tsx +++ b/src/plugins/image/ImageNode.tsx @@ -122,8 +122,8 @@ export class ImageNode extends DecoratorNode { this.__src = src this.__title = title this.__altText = altText - this.__width = width ?? 'inherit' - this.__height = height ?? 'inherit' + this.__width = width ? width : 'inherit' + this.__height = height ? height : 'inherit' } /** @internal */ diff --git a/src/plugins/image/index.ts b/src/plugins/image/index.ts index 5e34cf00..0f587f5b 100644 --- a/src/plugins/image/index.ts +++ b/src/plugins/image/index.ts @@ -221,9 +221,6 @@ export const imageDialogState$ = Cell( DRAGSTART_COMMAND, (event) => { - if (!theUploadHandler) { - return false - } return onDragStart(event) }, COMMAND_PRIORITY_HIGH @@ -231,7 +228,7 @@ export const imageDialogState$ = Cell( DRAGOVER_COMMAND, (event) => { - return onDragover(event) + return onDragover(event, !!theUploadHandler) }, COMMAND_PRIORITY_LOW ), @@ -243,38 +240,44 @@ export const imageDialogState$ = Cell { - let cbPayload = Array.from(event.clipboardData?.items ?? []) - cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits - - if (!cbPayload.length || cbPayload.length === 0) { - return false - } // If no image was present in the collection, bail. - - const imageUploadHandlerValue = r.getValue(imageUploadHandler$)! - - Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()!))) - .then((urls) => { - urls.forEach((url) => { - editor.dispatchCommand(INSERT_IMAGE_COMMAND, { - src: url, - altText: '' - }) - }) - }) - .catch((e: unknown) => { - throw e - }) - return true - }, - COMMAND_PRIORITY_CRITICAL - ) - ] - : []) + editor.registerCommand( + PASTE_COMMAND, + (event: ClipboardEvent) => { + if (!theUploadHandler) { + let fromWeb = Array.from(event.clipboardData?.items ?? []) + fromWeb = fromWeb.filter((i) => i.type.includes('text')) // Strip out the non-image bits + + if (!fromWeb.length || fromWeb.length === 0) { + return true + } // If from file system, eject without calling imageUploadHandler. + return false // If from web, bail. + } + + let cbPayload = Array.from(event.clipboardData?.items ?? []) + cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits + + if (!cbPayload.length || cbPayload.length === 0) { + return false + } // If no image was present in the collection, bail. + + const imageUploadHandlerValue = r.getValue(imageUploadHandler$)! + + Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()!))) + .then((urls) => { + urls.forEach((url) => { + editor.dispatchCommand(INSERT_IMAGE_COMMAND, { + src: url, + altText: '' + }) + }) + }) + .catch((e: unknown) => { + throw e + }) + return true + }, + COMMAND_PRIORITY_CRITICAL + ) ) }) } @@ -395,14 +398,16 @@ function onDragStart(event: DragEvent): boolean { return true } -function onDragover(event: DragEvent): boolean { - // test if the user is dragging a file from the explorer - let cbPayload = Array.from(event.dataTransfer?.items ?? []) - cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits +function onDragover(event: DragEvent, hasUploadHandler: boolean): boolean { + if (hasUploadHandler) { + // test if the user is dragging a file from the explorer + let cbPayload = Array.from(event.dataTransfer?.items ?? []) + cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits - if (cbPayload.length > 0) { - event.preventDefault() - return true + if (cbPayload.length > 0) { + event.preventDefault() + return true + } } // handle moving images