From 37f24b4ad662ba877f06c0a688a553684341333a Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Thu, 18 Jan 2024 18:41:19 +0100 Subject: [PATCH 1/2] Fixed errors when hovering image block while editor is uneditable --- .../src/blocks/ImageBlockContent/ImageBlockContent.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts index 7043bae535..16e00fa5f9 100644 --- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts +++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts @@ -235,9 +235,6 @@ export const renderImage = ( if (editor.isEditable) { imageWrapper.appendChild(leftResizeHandle); imageWrapper.appendChild(rightResizeHandle); - } else { - imageWrapper.removeChild(leftResizeHandle); - imageWrapper.removeChild(rightResizeHandle); } }; // Hides the resize handles when the cursor leaves the image, unless the @@ -254,8 +251,10 @@ export const renderImage = ( return; } - imageWrapper.removeChild(leftResizeHandle); - imageWrapper.removeChild(rightResizeHandle); + if (editor.isEditable) { + imageWrapper.removeChild(leftResizeHandle); + imageWrapper.removeChild(rightResizeHandle); + } }; // Sets the resize params, allowing the user to begin resizing the image by From 06d31325be03b21b4cdd282632883ea2b34ee6d7 Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 22 Jan 2024 02:57:43 +0100 Subject: [PATCH 2/2] Small fix --- .../ImageBlockContent/ImageBlockContent.ts | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts index 16e00fa5f9..6fd56d7494 100644 --- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts +++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts @@ -148,6 +148,15 @@ export const renderImage = ( // offset from when the resize began, and which resize handle is being used. const windowMouseMoveHandler = (event: MouseEvent) => { if (!resizeParams) { + if ( + !editor.isEditable && + imageWrapper.contains(leftResizeHandle) && + imageWrapper.contains(rightResizeHandle) + ) { + imageWrapper.removeChild(leftResizeHandle); + imageWrapper.removeChild(rightResizeHandle); + } + return; } @@ -192,13 +201,11 @@ export const renderImage = ( // Stops mouse movements from resizing the image and updates the block's // `width` prop to the new value. const windowMouseUpHandler = (event: MouseEvent) => { - if (!resizeParams) { - return; - } - // Hides the drag handles if the cursor is no longer over the image. if ( - (!event.target || !imageWrapper.contains(event.target as Node)) && + (!event.target || + !imageWrapper.contains(event.target as Node) || + !editor.isEditable) && imageWrapper.contains(leftResizeHandle) && imageWrapper.contains(rightResizeHandle) ) { @@ -206,6 +213,10 @@ export const renderImage = ( imageWrapper.removeChild(rightResizeHandle); } + if (!resizeParams) { + return; + } + resizeParams = undefined; editor.updateBlock(block, { @@ -251,7 +262,11 @@ export const renderImage = ( return; } - if (editor.isEditable) { + if ( + editor.isEditable && + imageWrapper.contains(leftResizeHandle) && + imageWrapper.contains(rightResizeHandle) + ) { imageWrapper.removeChild(leftResizeHandle); imageWrapper.removeChild(rightResizeHandle); }