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

chore(ui): focus editor when wrapper area is captured (#13525)

Browse Source 
* chore(ui): focus editor when wrapper area is captured

* chore: use ref approach for handling editor focus
This commit is contained in:
Sachin Chaurasiya 2023-10-11 21:54:31 +05:30 committed by GitHub
parent 6060c3975d
commit 8d90b54d49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 204 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,12 @@
*/
import { Editor, EditorContent, ReactRenderer, useEditor } from '@tiptap/react';
import { isEmpty, isNil } from 'lodash';
import React, { FC, useEffect, useState } from 'react';
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useState,
} from 'react';
import tippy, { Instance, Props } from 'tippy.js';
import { EDITOR_OPTIONS } from '../../constants/BlockEditor.constants';
import {
@ -27,6 +32,9 @@ import ImageModal, { ImageData } from './ImageModal/ImageModal';
import LinkModal, { LinkData } from './LinkModal/LinkModal';
import LinkPopup from './LinkPopup/LinkPopup';
export interface BlockEditorRef {
onFocus: () => void;
}
export interface BlockEditorProps {
// should be markdown string
content?: string;
@ -35,11 +43,8 @@ export interface BlockEditorProps {
onChange?: (content: string) => void;
}
const BlockEditor: FC<BlockEditorProps> = ({
content = '',
editable = true,
onChange,
}) => {
const BlockEditor = forwardRef<BlockEditorRef, BlockEditorProps>(
({ content = '', editable = true, onChange }, ref) => {
const [isLinkModalOpen, setIsLinkModalOpen] = useState<boolean>(false);
const [isImageModalOpen, setIsImageModalOpen] = useState<boolean>(false);
@ -108,7 +113,9 @@ const BlockEditor: FC<BlockEditorProps> = ({
editor?.chain().selectTextblockEnd().run();
};
const handleLinkPopup = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const handleLinkPopup = (
e: React.MouseEvent<HTMLDivElement, MouseEvent>
) => {
let popup: Instance<Props>[] = [];
let component: ReactRenderer;
const target = e.target as HTMLElement;
@ -166,6 +173,14 @@ const BlockEditor: FC<BlockEditorProps> = ({
handleImageToggle();
};
useImperativeHandle(ref, () => ({
onFocus() {
if (!isNil(editor) && !editor.isFocused) {
editor.commands.focus('end');
}
},
}));
const menus = !isNil(editor) && (
<BubbleMenu editor={editor} toggleLink={handleLinkToggle} />
);
@ -188,7 +203,11 @@ const BlockEditor: FC<BlockEditorProps> = ({
}, [content, editor]);
useEffect(() => {
if (isNil(editor) || editor.isDestroyed || editor.isEditable === editable) {
if (
isNil(editor) ||
editor.isDestroyed ||
editor.isEditable === editable
) {
return;
}
@ -225,6 +244,7 @@ const BlockEditor: FC<BlockEditorProps> = ({
</div>
</>
);
};
}
);
export default BlockEditor;