From 6b4c7e68d119879efc514965cc99c4f55ab9cb29 Mon Sep 17 00:00:00 2001
From: Aleh Makaranka <29537473+cpoftea@users.noreply.github.com>
Date: Thu, 21 Nov 2024 18:50:55 +0400
Subject: [PATCH] Force rerender on image load to recalculate caption
 visibility

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

diff --git a/changelog.md b/changelog.md
index d21a8f5fbb..3e731be9b9 100644
--- a/changelog.md
+++ b/changelog.md
@@ -4,6 +4,7 @@
 
 **What's Fixed**
 * [PickerInput]: fixed unnecessary api calls on body open with `minCharsToSearch` prop and search in body.
+* [RTE]: fixed image caption not being visible when RTE initially in readonly mode
 
 # 5.11.0 - 15.11.2024
 
diff --git a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
index 1d2978b768..c4e2010595 100644
--- a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
+++ b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
@@ -15,6 +15,7 @@ import { Resizable, ResizeHandle } from '../../implementation/Resizable';
 import { PlateImgAlign, TImageElement } from './types';
 import { Caption, CaptionTextarea } from '@udecode/plate-caption';
 import { ResizableProvider } from '@udecode/plate-resizable';
+import { useForceUpdate } from '@epam/uui-core';
 
 interface ImageElementProps extends PlateElementProps<Value, TImageElement> {
     align?: PlateImgAlign;
@@ -28,6 +29,7 @@ export const ImageElement = withHOC(ResizableProvider, ({
     align,
     ...props
 }: ImageElementProps) => {
+    const forceUpdate = useForceUpdate();
     const { children, nodeProps } = props;
 
     const focused = useFocused();
@@ -80,6 +82,7 @@ export const ImageElement = withHOC(ResizableProvider, ({
                             visible && css.selectedImage, // for mobile
                             nodeProps?.className,
                         ) }
+                        onLoad={() => forceUpdate()}
                     />
                     {!readOnly && (
                         <ResizeHandle