Merge branch 'develop' into feature/PickerTogglerTag-#2008

epam · Mar 22, 2024 · 8105bcb · 8105bcb
2 parents de21b86 + 7bbc5e9
commit 8105bcb
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 30 deletions.
diff --git a/uui-editor/src/plugins/imagePlugin/ImageBlock.tsx b/uui-editor/src/plugins/imagePlugin/ImageBlock.tsx
@@ -1,20 +1,31 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+    useCallback, useEffect, useRef, useState,
+} from 'react';
 import cx from 'classnames';
-import { PlateEditor, PlatePluginComponent, PlateRenderElementProps, Value, findNodePath, getBlockAbove, setElements } from '@udecode/plate-common';
+import {
+    PlateEditor, PlateRenderElementProps, Value, findNodePath, getBlockAbove, setElements,
+} from '@udecode/plate-common';
 import { useFocused, useSelected } from 'slate-react';
-import { Dropdown, FlexRow, Spinner } from '@epam/uui';
+import {
+    Dropdown, FlexRow, Spinner,
+} from '@epam/uui';
 import { ImageElement } from './ImageElement';
 
 import debounce from 'lodash.debounce';
 import invert from 'lodash.invert';
 
 import css from './ImageBlock.module.scss';
 import { ImgToolbar } from './Toolbar';
-import { IImageElement, PlateImgAlign, SlateImgAlign } from './types';
+import {
+    IImageElement, PlateImgAlign, SlateImgAlign,
+} from './types';
 
 interface UpdatingProps { width?: number | string, align?: SlateImgAlign }
 
-const IMAGE_STYLES = { paddingTop: 0, paddingBottom: 0 };
+const IMAGE_STYLES = {
+    paddingTop: 0,
+    paddingBottom: 0,
+};
 const PLATE_TO_SLATE_IMG_ALIGN = {
     left: 'align-left',
     right: 'align-right',
@@ -33,14 +44,20 @@ const getUpdatedElement = (
     ...element,
     data: {
         ...(element.data || {}),
-        imageSize: { width, height: '100%' },
+        imageSize: {
+            width,
+            height: '100%',
+        },
         align,
     },
 });
 
-const debounced = debounce((exec: () => void) => exec(), 100, { leading: true, trailing: false });
+const debounced = debounce((exec: () => void) => exec(), 100, {
+    leading: true,
+    trailing: false,
+});
 
-const isImgElem = (editor?: PlateEditor, element?: IImageElement) => editor && element.type === 'image';
+const isImgElem = (editor?: PlateEditor, element?: IImageElement) => editor && element?.type === 'image';
 
 const useUpdatingElement = ({ element, editor }: { element: IImageElement, editor: PlateEditor }) => {
     const prevNodeWidthRef = useRef(element.width);
@@ -69,22 +86,27 @@ const useUpdatingElement = ({ element, editor }: { element: IImageElement, edito
         }), [element.width]);
 };
 
-export const Image: PlatePluginComponent<PlateRenderElementProps<Value, IImageElement>> = function (props) {
-    const { editor, element, children } = props;
-    const ref = useRef(null);
+export function Image(props: PlateRenderElementProps<Value, IImageElement>): JSX.Element {
+    const {
+        editor, element, children,
+    } = props;
+    const ref = useRef<HTMLDivElement>(null);
     const isFocused = useFocused();
     const isSelected = useSelected();
 
     const [align, setAlign] = useState<PlateImgAlign>(toPlateAlign(element.data?.align) || 'left');
     const [showToolbar, setShowToolbar] = useState(false);
 
     // controls slate element structure
-    useUpdatingElement({ element, editor });
+    useUpdatingElement({
+        element,
+        editor,
+    });
 
     // toolbar
     useEffect(() => {
         const block = getBlockAbove(editor);
-        setShowToolbar(isSelected && isFocused && block?.length && block[0].type === 'image');
+        setShowToolbar(isSelected && isFocused && !!block?.length && block[0].type === 'image');
     }, [isSelected, isFocused]);
 
     const onChangeDropDownValue = useCallback((value: boolean) => () => {
@@ -99,22 +121,18 @@ export const Image: PlatePluginComponent<PlateRenderElementProps<Value, IImageEl
 
     // width
     const setMaxWidth = useCallback(() => {
-        const newWidth = ref?.current?.clientWidth;
+        const newWidth = ref.current?.clientWidth;
         if (newWidth) {
             element.width = newWidth;
             setElements(editor, getUpdatedElement(element, { width: newWidth }));
         }
     }, [editor, element]);
 
     const isFullWidth = useCallback(() => {
-        const clientWidth = ref?.current?.clientWidth;
+        const clientWidth = ref.current?.clientWidth;
         return !clientWidth || (clientWidth === element.width);
     }, [element.width]);
 
-    if (!editor) {
-        return null;
-    }
-
     if (element.type === 'loader') {
         return (
             <>
@@ -158,4 +176,4 @@ export const Image: PlatePluginComponent<PlateRenderElementProps<Value, IImageEl
             placement="top"
         />
     );
-};
+}
diff --git a/uui-editor/src/plugins/imagePlugin/ImageElement.tsx b/uui-editor/src/plugins/imagePlugin/ImageElement.tsx
@@ -8,7 +8,9 @@ import {
     Image,
     useMediaState,
 } from '@udecode/plate-media';
-import { useFocused, useReadOnly, useSelected } from 'slate-react';
+import {
+    useFocused, useReadOnly, useSelected,
+} from 'slate-react';
 import cx from 'classnames';
 import css from './ImageElement.module.scss';
 import { Resizable, ResizeHandle } from '../../implementation/Resizable';
@@ -35,7 +37,7 @@ export function ImageElement({
 
     useMediaState();
 
-    const imageRef = useRef(null);
+    const imageRef = useRef<HTMLImageElement>(null);
 
     const isCaptionEnabled = useMemo(() => {
         const imageWidth = imageRef.current?.width;
@@ -66,10 +68,12 @@ export function ImageElement({
                         minWidth: MIN_IMG_WIDTH,
                     } }
                 >
-                    <ResizeHandle
-                        options={ { direction: 'left' } }
-                        className={ cx(resizeHandleClasses) }
-                    />
+                    {!readOnly && (
+                        <ResizeHandle
+                            options={ { direction: 'left' } }
+                            className={ cx(resizeHandleClasses) }
+                        />
+                    )}
                     <Image
                         { ...nodeProps }
                         className={ cx(
@@ -79,10 +83,12 @@ export function ImageElement({
                         ) }
                         ref={ imageRef }
                     />
-                    <ResizeHandle
-                        options={ { direction: 'right' } }
-                        className={ cx(resizeHandleClasses) }
-                    />
+                    {!readOnly && (
+                        <ResizeHandle
+                            options={ { direction: 'right' } }
+                            className={ cx(resizeHandleClasses) }
+                        />
+                    )}
                 </Resizable>
 
                 {isCaptionEnabled && (