Merge remote-tracking branch 'origin/develop' into develop

epam · Nov 14, 2023 · f998753 · f998753
2 parents bb937d4 + fe987f7
commit f998753
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 29 deletions.
diff --git a/changelog.md b/changelog.md
@@ -13,6 +13,7 @@
 [DataTable]: fix checkboxes, now they always pinned to the left column
 [PickerInput]: Disable select all button if options are empty and it has no selection
 [DataTable]: fixed missing `role=table`
+[SlateEditor]: allow writing caption after image insertion
 
 # 5.2.0 - 16.10.2023
 

diff --git a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
     Box,
     PlateElement,
@@ -49,16 +49,17 @@ export function ImageElement({
 
     useMediaState();
 
-    const [currentWidth] = useResizableStore().use.width();
-    const isCaptionEnabled = useMemo(() => {
-        let captionEnabled = false;
-        if (currentWidth && typeof currentWidth === 'number') {
-            captionEnabled = currentWidth >= MIN_CAPTION_WIDTH;
-        }
+    const imageRef = useRef(null);
+    const [currentWidth, setWidth] = useResizableStore().use.width();
 
-        return captionEnabled;
+    const isCaptionEnabled = useMemo(() => {
+        return typeof currentWidth === 'number' && currentWidth >= MIN_CAPTION_WIDTH;
     }, [currentWidth]);
 
+    const imageUpdated = () => {
+        setWidth(imageRef.current.width);
+    };
+
     return (
         <PlateElement className={ cx(className) } { ...props }>
             <figure className={ cx(css.group) } contentEditable={ false }>
@@ -68,46 +69,51 @@ export function ImageElement({
                         renderHandleLeft: (htmlProps) => (
                             <Box
                                 { ...htmlProps }
-                                className={ cx(css.leftHandle, ...resizeHandleClasses) }
+                                className={ cx(
+                                    css.leftHandle,
+                                    ...resizeHandleClasses,
+                                ) }
                             />
                         ),
                         renderHandleRight: (htmlProps) => (
                             <Box
                                 { ...htmlProps }
-                                className={ cx(css.rightHandle, ...resizeHandleClasses) }
+                                className={ cx(
+                                    css.rightHandle,
+                                    ...resizeHandleClasses,
+                                ) }
                             />
                         ),
                         align,
                         readOnly,
                         minWidth: MAX_IMG_WIDTH,
                     } }
                 >
-                    { }
+                    {}
                     <Image
                         { ...nodeProps }
-                        className={
-                            cx(
-                                css.image,
-                                focused && selected && css.selectedImage, // for mobile
-                                nodeProps?.className,
-                            )
-                        }
+                        className={ cx(
+                            css.image,
+                            focused && selected && css.selectedImage, // for mobile
+                            nodeProps?.className,
+                        ) }
+                        ref={ imageRef }
+                        onLoad={ imageUpdated }
                     />
                 </Resizable>
 
-                { isCaptionEnabled
-                    && (
-                        <Caption className={ cx(css.imageCaption, ...aligns) }>
-                            <CaptionTextarea
-                                className={ cx(css.caption) }
-                                placeholder="Write a caption..."
-                                readOnly={ readOnly }
-                            />
-                        </Caption>
-                    )}
+                {isCaptionEnabled && (
+                    <Caption style={ { width: currentWidth } } className={ cx(css.imageCaption, ...aligns) }>
+                        <CaptionTextarea
+                            className={ cx(css.caption) }
+                            placeholder="Write a caption..."
+                            readOnly={ readOnly }
+                        />
+                    </Caption>
+                )}
             </figure>
 
-            { children }
+            {children}
         </PlateElement>
     );
 }