Fix: Resolve multiple image insertion issues and ensure proper inline error messaging (#21193)

* Fix: Resolve multiple image insertion issues and ensure proper inline error messaging

* fixed failing unit test

(cherry picked from commit 9b96bf89d7de2b1af21b1acbf75ddd00308b05a6)

openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/BarMenu.tsx

@@ -84,10 +84,27 @@ const BarMenu: FC<BarMenuProps> = ({ editor, onLinkToggle }) => {
       {
         name: 'image',
         icon: ImageIcon,
-        command: () =>
+        command: () => {
+          const { state } = editor.view;
+          const { selection } = state;
+
+          // Get the current position
+          const pos = selection.$anchor.pos;
+
+          // Create a new selection at the current position
+          editor.commands.setTextSelection(pos);
+
+          // Insert a new line if we're at the end of a block
+          if (
+            selection.$anchor.parentOffset ===
+            selection.$anchor.parent.content.size
+          ) {
+            editor.commands.insertContent('\n');
+          }
+
+          // Now add the image
           editor
             .chain()
-            .focus()
             .setFile({
               url: '',
               fileName: '',
@@ -96,7 +113,11 @@ const BarMenu: FC<BarMenuProps> = ({ editor, onLinkToggle }) => {
               type: FileType.IMAGE,
               isImage: true,
             })
-            .run(),
+            .run();
+
+          // Move cursor after the image
+          editor.commands.setTextSelection(pos + 1);
+        },
         isActive: () => editor.isActive('image'),
       },
       {

openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.test.tsx

@@ -287,7 +287,9 @@ describe('EntityAttachmentProvider', () => {
   it('handles upload error with string error', async () => {
     const mockFile = new File([''], 'test.jpg', { type: 'image/jpeg' });
     const errorMessage = 'Upload failed';
-    mockOnImageUpload.mockRejectedValue(errorMessage);
+    mockOnImageUpload.mockRejectedValue({
+      response: { data: { message: errorMessage } },
+    });
 
     render(
       <EntityAttachmentProvider entityType={EntityType.TABLE}>

openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.tsx

@@ -12,7 +12,7 @@
  */
 import { EditorView } from '@tiptap/pm/view';
 import { AxiosError } from 'axios';
-import { isString, noop } from 'lodash';
+import { isString, isUndefined, noop } from 'lodash';
 import React, { createContext, ReactNode, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { EntityType } from '../../../../enums/entity.enum';
@@ -162,6 +162,9 @@ export const EntityAttachmentProvider = ({
       currentTr.replaceWith(tempNodePos, tempNodePos + 1, finalNode);
       view.dispatch(currentTr);
     } catch (error) {
+      const errorMessage = (error as AxiosError<{ message: string }>).response
+        ?.data?.message;
+
       // Get the current state for error handling
       const currentState = view.state;
       const currentTr = currentState.tr;
@@ -182,7 +185,9 @@ export const EntityAttachmentProvider = ({
 
       showInlineAlert
         ? setErrorMessage(
-            isString(error) ? error : t('label.failed-to-upload-file')
+            !isUndefined(errorMessage) && isString(errorMessage)
+              ? errorMessage
+              : t('label.failed-to-upload-file')
           )
         : showErrorToast(error as AxiosError, t('label.failed-to-upload-file'));
     }