From 09107478cd135613de21e2dc8cc16bfd07b11e8d Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Wed, 14 May 2025 21:01:15 +0530
Subject: [PATCH] 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)
---
 .../BlockEditor/BarMenu/BarMenu.tsx           | 27 ++++++++++++++++---
 .../EntityAttachmentProvider.test.tsx         |  4 ++-
 .../EntityAttachmentProvider.tsx              |  9 +++++--
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/BarMenu.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/BarMenu.tsx
index 8856d521294..9770db0108e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/BarMenu.tsx
+++ b/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'),
       },
       {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.test.tsx
index a4b93fecc0b..1dcd56b2361 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.test.tsx
+++ b/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}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.tsx
index 88f27c6ff21..4d836fb8c1b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntityDescription/EntityAttachmentProvider/EntityAttachmentProvider.tsx
+++ b/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'));
     }