yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-05 07:03:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): add extra checks for popups in block editor (#13540)

Browse Source 
* chore(ui): add extra checks for popups in block editor

* address comments
This commit is contained in:
Sachin Chaurasiya 2023-10-12 15:23:25 +05:30 committed by GitHub
parent f63881b8b6
commit 40b3048b35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BlockEditor.tsx
View File

@ -121,6 +121,8 @@ const BlockEditor = forwardRef<BlockEditorRef, BlockEditorProps>(
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
const dataType = target.getAttribute('data-type'); const dataType = target.getAttribute('data-type');
const hasPopup = !isEmpty(popup);
if (['mention', 'hashtag'].includes(dataType ?? '')) { if (['mention', 'hashtag'].includes(dataType ?? '')) {
return; return;
} }
@ -133,13 +135,13 @@ const BlockEditor = forwardRef<BlockEditorRef, BlockEditorProps>(
href, href,
handleLinkToggle: () => { handleLinkToggle: () => {
handleLinkToggle(); handleLinkToggle();
if (!isEmpty(popup)) { if (hasPopup) {
popup[0].hide(); popup[0].hide();
} }
}, },
handleUnlink: () => { handleUnlink: () => {
handleUnlink(); handleUnlink();
if (!isEmpty(popup)) { if (hasPopup) {
popup[0].hide(); popup[0].hide();
} }
}, },
@ -157,7 +159,7 @@ const BlockEditor = forwardRef<BlockEditorRef, BlockEditorProps>(
hideOnClick: true, hideOnClick: true,
}); });
} else { } else {
if (!isEmpty(popup)) { if (hasPopup) {
popup[0].hide(); popup[0].hide();
} }
} }

25
openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/hashtag/hashtagSuggestion.ts
View File

@ -12,6 +12,7 @@
*/ */
import { ReactRenderer } from '@tiptap/react'; import { ReactRenderer } from '@tiptap/react';
import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion'; import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
import { isEmpty } from 'lodash';
import tippy, { Instance, Props } from 'tippy.js'; import tippy, { Instance, Props } from 'tippy.js';
import { EntityType } from '../../../../enums/entity.enum'; import { EntityType } from '../../../../enums/entity.enum';
import { SearchIndex } from '../../../../enums/search.enum'; import { SearchIndex } from '../../../../enums/search.enum';
@ -70,7 +71,8 @@ export const hashtagSuggestion = () => ({
render: () => { render: () => {
let component: ReactRenderer; let component: ReactRenderer;
let popup: Instance<Props>[]; let popup: Instance<Props>[] = [];
const hasPopup = !isEmpty(popup);
return { return {
onStart: (props: SuggestionProps) => { onStart: (props: SuggestionProps) => {
@ -101,25 +103,30 @@ export const hashtagSuggestion = () => ({
if (!props.clientRect) { if (!props.clientRect) {
return; return;
} }
if (hasPopup) {
popup[0].setProps({ popup[0].setProps({
getReferenceClientRect: getReferenceClientRect:
props.clientRect as Props['getReferenceClientRect'], props.clientRect as Props['getReferenceClientRect'],
}); });
}
}, },
onKeyDown(props: SuggestionKeyDownProps) { 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(); popup[0].hide();
return true; return true;
} }
return (component.ref as ExtensionRef)?.onKeyDown(props); return (component?.ref as ExtensionRef)?.onKeyDown(props);
}, },
onExit() { onExit() {
if (!popup[0].state.isDestroyed) { if (hasPopup && !popup[0].state.isDestroyed) {
popup[0].destroy(); popup[0].destroy();
} }
}, },

24
openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/mention/mentionSuggestions.ts
View File

@ -12,6 +12,7 @@
*/ */
import { ReactRenderer } from '@tiptap/react'; import { ReactRenderer } from '@tiptap/react';
import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion'; import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
import { isEmpty } from 'lodash';
import tippy, { Instance, Props } from 'tippy.js'; import tippy, { Instance, Props } from 'tippy.js';
import { WILD_CARD_CHAR } from '../../../../constants/char.constants'; import { WILD_CARD_CHAR } from '../../../../constants/char.constants';
import { import {
@ -60,7 +61,8 @@ export const mentionSuggestion = () => ({
render: () => { render: () => {
let component: ReactRenderer; let component: ReactRenderer;
let popup: Instance<Props>[]; let popup: Instance<Props>[] = [];
const hasPopup = !isEmpty(popup);
return { return {
onStart: (props: SuggestionProps) => { onStart: (props: SuggestionProps) => {
@ -92,24 +94,30 @@ export const mentionSuggestion = () => ({
return; return;
} }
popup[0].setProps({ if (hasPopup) {
getReferenceClientRect: popup[0].setProps({
props.clientRect as Props['getReferenceClientRect'], getReferenceClientRect:
}); props.clientRect as Props['getReferenceClientRect'],
});
}
}, },
onKeyDown(props: SuggestionKeyDownProps) { 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(); popup[0].hide();
return true; return true;
} }
return (component.ref as ExtensionRef)?.onKeyDown(props); return (component?.ref as ExtensionRef)?.onKeyDown(props);
}, },
onExit() { onExit() {
if (!popup[0].state.isDestroyed) { if (hasPopup && !popup[0].state.isDestroyed) {
popup[0].destroy(); popup[0].destroy();
} }
}, },

25
openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/slashCommand/renderItems.ts
View File

@ -12,13 +12,15 @@
*/ */
import { ReactRenderer } from '@tiptap/react'; import { ReactRenderer } from '@tiptap/react';
import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion'; import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
import { isEmpty } from 'lodash';
import tippy, { Instance, Props } from 'tippy.js'; import tippy, { Instance, Props } from 'tippy.js';
import { SlashCommandList, SlashCommandRef } from './SlashCommandList'; import { SlashCommandList, SlashCommandRef } from './SlashCommandList';
const renderItems = () => { const renderItems = () => {
let component: ReactRenderer; let component: ReactRenderer;
let popup: Instance<Props>[]; let popup: Instance<Props>[] = [];
let suggestionProps: SuggestionProps; let suggestionProps: SuggestionProps;
const hasPopup = !isEmpty(popup);
return { return {
onStart: (props: SuggestionProps) => { onStart: (props: SuggestionProps) => {
@ -50,14 +52,19 @@ const renderItems = () => {
if (!props.clientRect) { if (!props.clientRect) {
return; return;
} }
if (hasPopup) {
popup[0].setProps({ popup[0].setProps({
getReferenceClientRect: getReferenceClientRect:
props.clientRect as Props['getReferenceClientRect'], props.clientRect as Props['getReferenceClientRect'],
}); });
}
}, },
onKeyDown(props: SuggestionKeyDownProps) { 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(); popup[0].hide();
return true; 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() { onExit() {
if (!popup[0].state.isDestroyed) { if (hasPopup && !popup[0].state.isDestroyed) {
popup[0].destroy(); popup[0].destroy();
} }
}, },