From 4d48952085aef30c288ea60386d5c53eef7e178a Mon Sep 17 00:00:00 2001
From: Dzmitry Tamashevich <diaamnj@mail.ru>
Date: Sat, 11 Nov 2023 12:36:34 +0300
Subject: [PATCH 1/3] allow caption after inserting image

---
 .../src/plugins/imagePlugin/ImageElement.tsx  | 66 +++++++++++--------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
index 77f1a28d9a..23cbfb3832 100644
--- 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,19 @@ 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;
+    console.log('currentWidth', currentWidth);
+    const isCaptionEnabled = useMemo(() => {
+        console.log('currentWidth', currentWidth);
+        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,13 +71,19 @@ 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,
@@ -82,32 +91,31 @@ export function ImageElement({
                         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>
     );
 }

From 458343e91e3998dad3a661e167d4afae4ed69787 Mon Sep 17 00:00:00 2001
From: Dzmitry Tamashevich <diaamnj@mail.ru>
Date: Sat, 11 Nov 2023 12:40:34 +0300
Subject: [PATCH 2/3] update changelog

---
 changelog.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/changelog.md b/changelog.md
index d2a82fc922..74d822bafb 100644
--- 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`
+[PlateEditor]: allow writing caption after image insertion
 
 # 5.2.0 - 16.10.2023
 

From 0c32a93a25adbfdb6b2464158956fdb3ee962e10 Mon Sep 17 00:00:00 2001
From: Dzmitry Tamashevich <diaamnj@mail.ru>
Date: Mon, 13 Nov 2023 18:49:07 +0300
Subject: [PATCH 3/3] update by comments

---
 changelog.md                                        | 2 +-
 uui-editor/src/plugins/imagePlugin/ImageElement.tsx | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/changelog.md b/changelog.md
index 74d822bafb..5005f1e481 100644
--- a/changelog.md
+++ b/changelog.md
@@ -13,7 +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`
-[PlateEditor]: allow writing caption after image insertion
+[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
index 23cbfb3832..8aa1215563 100644
--- a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
+++ b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
@@ -52,9 +52,7 @@ export function ImageElement({
     const imageRef = useRef(null);
     const [currentWidth, setWidth] = useResizableStore().use.width();
 
-    console.log('currentWidth', currentWidth);
     const isCaptionEnabled = useMemo(() => {
-        console.log('currentWidth', currentWidth);
         return typeof currentWidth === 'number' && currentWidth >= MIN_CAPTION_WIDTH;
     }, [currentWidth]);