diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BlockEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BlockEditor.tsx index 622fad33360..f1afc513824 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BlockEditor.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BlockEditor.tsx @@ -121,6 +121,8 @@ const BlockEditor = forwardRef( const target = e.target as HTMLElement; const dataType = target.getAttribute('data-type'); + const hasPopup = !isEmpty(popup); + if (['mention', 'hashtag'].includes(dataType ?? '')) { return; } @@ -133,13 +135,13 @@ const BlockEditor = forwardRef( href, handleLinkToggle: () => { handleLinkToggle(); - if (!isEmpty(popup)) { + if (hasPopup) { popup[0].hide(); } }, handleUnlink: () => { handleUnlink(); - if (!isEmpty(popup)) { + if (hasPopup) { popup[0].hide(); } }, @@ -157,7 +159,7 @@ const BlockEditor = forwardRef( hideOnClick: true, }); } else { - if (!isEmpty(popup)) { + if (hasPopup) { popup[0].hide(); } } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/hashtag/hashtagSuggestion.ts b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/hashtag/hashtagSuggestion.ts index 7ae25839175..07527936e24 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/hashtag/hashtagSuggestion.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/hashtag/hashtagSuggestion.ts @@ -12,6 +12,7 @@ */ import { ReactRenderer } from '@tiptap/react'; import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion'; +import { isEmpty } from 'lodash'; import tippy, { Instance, Props } from 'tippy.js'; import { EntityType } from '../../../../enums/entity.enum'; import { SearchIndex } from '../../../../enums/search.enum'; @@ -70,7 +71,8 @@ export const hashtagSuggestion = () => ({ render: () => { let component: ReactRenderer; - let popup: Instance[]; + let popup: Instance[] = []; + const hasPopup = !isEmpty(popup); return { onStart: (props: SuggestionProps) => { @@ -101,25 +103,30 @@ export const hashtagSuggestion = () => ({ if (!props.clientRect) { return; } - - popup[0].setProps({ - getReferenceClientRect: - props.clientRect as Props['getReferenceClientRect'], - }); + if (hasPopup) { + popup[0].setProps({ + getReferenceClientRect: + props.clientRect as Props['getReferenceClientRect'], + }); + } }, onKeyDown(props: SuggestionKeyDownProps) { - if (props.event.key === 'Escape' && !popup[0].state.isDestroyed) { + if ( + props.event.key === 'Escape' && + hasPopup && + !popup[0].state.isDestroyed + ) { popup[0].hide(); return true; } - return (component.ref as ExtensionRef)?.onKeyDown(props); + return (component?.ref as ExtensionRef)?.onKeyDown(props); }, onExit() { - if (!popup[0].state.isDestroyed) { + if (hasPopup && !popup[0].state.isDestroyed) { popup[0].destroy(); } }, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/mention/mentionSuggestions.ts b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/mention/mentionSuggestions.ts index 46c81b324d2..713cbc12be1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/mention/mentionSuggestions.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/mention/mentionSuggestions.ts @@ -12,6 +12,7 @@ */ import { ReactRenderer } from '@tiptap/react'; import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion'; +import { isEmpty } from 'lodash'; import tippy, { Instance, Props } from 'tippy.js'; import { WILD_CARD_CHAR } from '../../../../constants/char.constants'; import { @@ -60,7 +61,8 @@ export const mentionSuggestion = () => ({ render: () => { let component: ReactRenderer; - let popup: Instance[]; + let popup: Instance[] = []; + const hasPopup = !isEmpty(popup); return { onStart: (props: SuggestionProps) => { @@ -92,24 +94,30 @@ export const mentionSuggestion = () => ({ return; } - popup[0].setProps({ - getReferenceClientRect: - props.clientRect as Props['getReferenceClientRect'], - }); + if (hasPopup) { + popup[0].setProps({ + getReferenceClientRect: + props.clientRect as Props['getReferenceClientRect'], + }); + } }, onKeyDown(props: SuggestionKeyDownProps) { - if (props.event.key === 'Escape' && !popup[0].state.isDestroyed) { + if ( + props.event.key === 'Escape' && + hasPopup && + !popup[0].state.isDestroyed + ) { popup[0].hide(); return true; } - return (component.ref as ExtensionRef)?.onKeyDown(props); + return (component?.ref as ExtensionRef)?.onKeyDown(props); }, onExit() { - if (!popup[0].state.isDestroyed) { + if (hasPopup && !popup[0].state.isDestroyed) { popup[0].destroy(); } }, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/slashCommand/renderItems.ts b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/slashCommand/renderItems.ts index c76370f1719..fafc223fc06 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/slashCommand/renderItems.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/slashCommand/renderItems.ts @@ -12,13 +12,15 @@ */ import { ReactRenderer } from '@tiptap/react'; import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion'; +import { isEmpty } from 'lodash'; import tippy, { Instance, Props } from 'tippy.js'; import { SlashCommandList, SlashCommandRef } from './SlashCommandList'; const renderItems = () => { let component: ReactRenderer; - let popup: Instance[]; + let popup: Instance[] = []; let suggestionProps: SuggestionProps; + const hasPopup = !isEmpty(popup); return { onStart: (props: SuggestionProps) => { @@ -50,14 +52,19 @@ const renderItems = () => { if (!props.clientRect) { return; } - - popup[0].setProps({ - getReferenceClientRect: - props.clientRect as Props['getReferenceClientRect'], - }); + if (hasPopup) { + popup[0].setProps({ + getReferenceClientRect: + props.clientRect as Props['getReferenceClientRect'], + }); + } }, onKeyDown(props: SuggestionKeyDownProps) { - if (props.event.key === 'Escape' && !popup[0].state.isDestroyed) { + if ( + props.event.key === 'Escape' && + hasPopup && + !popup[0].state.isDestroyed + ) { popup[0].hide(); return true; @@ -75,10 +82,10 @@ const renderItems = () => { } } - return (component.ref as SlashCommandRef)?.onKeyDown(props) || false; + return (component?.ref as SlashCommandRef)?.onKeyDown(props) || false; }, onExit() { - if (!popup[0].state.isDestroyed) { + if (hasPopup && !popup[0].state.isDestroyed) { popup[0].destroy(); } },