yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-01 13:13:10 +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 dataType = target.getAttribute('data-type');
const hasPopup = !isEmpty(popup);
if (['mention', 'hashtag'].includes(dataType ?? '')) {
return;
}
@ -133,13 +135,13 @@ const BlockEditor = forwardRef<BlockEditorRef, BlockEditorProps>(
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<BlockEditorRef, BlockEditorProps>(
hideOnClick: true,
});
} else {
if (!isEmpty(popup)) {
if (hasPopup) {
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 { 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<Props>[];
let popup: Instance<Props>[] = [];
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();
}
},

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 { 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<Props>[];
let popup: Instance<Props>[] = [];
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();
}
},

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 { 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<Props>[];
let popup: Instance<Props>[] = [];
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();
}
},