From b6d80979ddaa932d4b59901d52d7b258acbb81af Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Tue, 1 Nov 2022 15:48:58 +0200
Subject: [PATCH] [QRF-288] Hide non-movable image resize handles for left- or
 right-aligned images

---
 .../EditorBlock/ResizableEditorBlock.tsx      | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/slate-editor/src/components/EditorBlock/ResizableEditorBlock.tsx b/packages/slate-editor/src/components/EditorBlock/ResizableEditorBlock.tsx
index cfcafab7d..7037bc66d 100644
--- a/packages/slate-editor/src/components/EditorBlock/ResizableEditorBlock.tsx
+++ b/packages/slate-editor/src/components/EditorBlock/ResizableEditorBlock.tsx
@@ -101,24 +101,28 @@ export const ResizableEditorBlock = forwardRef<HTMLDivElement, Props>((props, re
                 {renderInjectionPoint(renderReadOnlyFrame ?? renderEditableFrame, props)}
                 {resizable && (
                     <div contentEditable={false}>
-                        <ResizeButton
-                            offsetParent={blockElement ?? undefined}
-                            show={props.isSelected || props.isHovered}
-                            onDrag={handleResizeEvent}
-                            onStart={handleResizingStarted}
-                            onStop={handleResizingFinished}
-                            className={classNames(styles.ResizeButton, styles.left)}
-                            position="left"
-                        />
-                        <ResizeButton
-                            offsetParent={blockElement ?? undefined}
-                            show={props.isSelected || props.isHovered}
-                            onDrag={handleResizeEvent}
-                            onStart={handleResizingStarted}
-                            onStop={handleResizingFinished}
-                            className={classNames(styles.ResizeButton, styles.right)}
-                            position="right"
-                        />
+                        {align !== 'left' && (
+                            <ResizeButton
+                                offsetParent={blockElement ?? undefined}
+                                show={props.isSelected || props.isHovered}
+                                onDrag={handleResizeEvent}
+                                onStart={handleResizingStarted}
+                                onStop={handleResizingFinished}
+                                className={classNames(styles.ResizeButton, styles.left)}
+                                position="left"
+                            />
+                        )}
+                        {align !== 'right' && (
+                            <ResizeButton
+                                offsetParent={blockElement ?? undefined}
+                                show={props.isSelected || props.isHovered}
+                                onDrag={handleResizeEvent}
+                                onStart={handleResizingStarted}
+                                onStop={handleResizingFinished}
+                                className={classNames(styles.ResizeButton, styles.right)}
+                                position="right"
+                            />
+                        )}
                     </div>
                 )}
             </>