feat(image): move selection to the image title on toolbar item click (#725)

Author: kseniya57

src/bundle/toolbar/custom/ToolbarImagePopup.tsx

@@ -19,7 +19,7 @@ export type ToolbarImagePopuProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
     onSuccessUpload?: (res: BatchUploadResult) => void;
     hide: () => void;
     anchorElement: HTMLElement | null;
-} & Pick<ImageFormProps, 'onSubmit'>;
+} & Pick<ImageFormProps, 'onSubmit' | 'imageTitle'>;
 
 export const ToolbarImagePopup: React.FC<ToolbarImagePopuProps> = ({
     className,
@@ -30,6 +30,7 @@ export const ToolbarImagePopup: React.FC<ToolbarImagePopuProps> = ({
     onClick,
     uploadImages,
     onSuccessUpload,
+    imageTitle,
 }) => {
     const toaster = useToaster();
     const [loading, showLoading, hideLoading] = useBooleanState(false);
@@ -79,6 +80,7 @@ export const ToolbarImagePopup: React.FC<ToolbarImagePopuProps> = ({
                     onClick?.('addImage');
                 }}
                 loading={loading}
+                imageTitle={imageTitle}
             />
         </Popup>
     );

src/bundle/toolbar/markup/MToolbarImagePopup.tsx

@@ -1,3 +1,5 @@
+import {useMemo} from 'react';
+
 import isNumber from 'is-number';
 
 import {IMG_MAX_HEIGHT, type ImageItem, getImageDimensions, insertImages} from '../../../markup';
@@ -26,8 +28,16 @@ export const MToolbarImagePopup: React.FC<MToolbarImagePopupProps> = ({
 }) => {
     const {uploadHandler, needToSetDimensionsForUploadedImages} = useMarkupToolbarContext();
 
+    const selectedString = useMemo(() => {
+        const {from, to} = editor.cm.state.selection.main;
+        return editor.cm.state.doc.sliceString(from, to);
+        // we need to calculate the selection only once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <ToolbarImagePopup
+            imageTitle={selectedString}
             hide={hide}
             anchorElement={anchorElement}
             focus={focus}

src/forms/ImageForm.tsx

@@ -35,6 +35,7 @@ export type ImageFormProps = ClassNameProps & {
     onCancel(): void;
     onAttach?: (files: File[]) => void;
     loading?: boolean;
+    imageTitle?: string;
 };
 
 export const ImageForm: React.FC<ImageFormProps> = ({
@@ -44,12 +45,13 @@ export const ImageForm: React.FC<ImageFormProps> = ({
     onSubmit,
     onAttach,
     loading,
+    imageTitle: providedName,
 }) => {
     const [tabId, setTabId] = useState<string>(() =>
         isFunction(onAttach) ? ImageTabId.Attach : ImageTabId.Link,
     );
     const [url, setUrl] = useState('');
-    const [name, setName] = useState('');
+    const [name, setName] = useState(providedName ?? '');
     const [alt, setAlt] = useState('');
     const [width, setWidth] = useState<number | undefined>();
     const [height, setHeight] = useState<number | undefined>();