allow to resize image

Author: ThieryMichel

packages/ra-input-rich-text/src/RichTextInput.tsx

@@ -192,6 +192,10 @@ export const DefaultEditorOptions: Partial<EditorOptions> = {
         }),
         Image.configure({
             inline: true,
+            resize: {
+                enabled: true,
+                alwaysPreserveAspectRatio: true,
+            },
         }),
         TextStyle, // Required by Color
         Color,
@@ -248,6 +252,73 @@ const Root = styled('div', {
                     marginBottom: 0,
                 },
             },
+            '& [data-resize-handle]': {
+                position: 'absolute',
+                background: 'rgba(0, 0, 0, 0.5)',
+                border: '1px solid rgba(255, 255, 255, 0.8)',
+                borderRadius: 2,
+                zIndex: 10,
+                '&:hover': {
+                    background: 'rgba(0, 0, 0, 0.8)',
+                },
+                /* Corner handles */
+                "&[data-resize-handle='top-left'], &[data-resize-handle='top-right'], &[data-resize-handle='bottom-left'], &[data-resize-handle='bottom-right']":
+                    {
+                        width: 8,
+                        height: 8,
+                    },
+                "&[data-resize-handle='top-left']": {
+                    top: -4,
+                    left: -4,
+                    cursor: 'nwse-resize',
+                },
+                "&[data-resize-handle='top-right']": {
+                    top: -4,
+                    right: -4,
+                    cursor: 'nesw-resize',
+                },
+                "&[data-resize-handle='bottom-left']": {
+                    bottom: -4,
+                    left: -4,
+                    cursor: 'nesw-resize',
+                },
+                "&[data-resize-handle='bottom-right']": {
+                    bottom: -4,
+                    right: -4,
+                    cursor: 'nwse-resize',
+                },
+                /* Edge handles */
+                "&[data-resize-handle='top'], &[data-resize-handle='bottom']": {
+                    height: 6,
+                    left: 8,
+                    right: 8,
+                },
+                "&[data-resize-handle='top']": {
+                    top: -3,
+                    cursor: 'ns-resize',
+                },
+                "&[data-resize-handle='bottom']": {
+                    bottom: -3,
+                    cursor: 'ns-resize',
+                },
+                "&[data-resize-handle='left'], &[data-resize-handle='right']": {
+                    width: 6,
+                    top: 8,
+                    bottom: 8,
+                },
+                "&[data-resize-handle='left']": {
+                    left: -3,
+                    cursor: 'ew-resize',
+                },
+                "&[data-resize-handle='right']": {
+                    right: -3,
+                    cursor: 'ew-resize',
+                },
+            },
+            "& [data-resize-state='true'] [data-resize-wrapper]": {
+                outline: '1px solid rgba(0, 0, 0, 0.25)',
+                borderRadius: '0.125rem',
+            },
         },
     },
 }));