From 2ca5d68fc8f65678fb76af2f6b46400a64fbeffd Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 21 Aug 2024 16:43:07 +0800 Subject: [PATCH 1/3] fix(Dialog): Add event listeners for opening and closing edit dialog in Inner component ref: PR-2408-2-53 --- src/common/enums/events.ts | 2 ++ src/components/Dialog/Inner/index.tsx | 24 ++++++++++++++++--- .../Dialogs/MomentDetailDialog/Content.tsx | 12 +++++++++- 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/common/enums/events.ts b/src/common/enums/events.ts index 81c341ab88..7fb8a455ec 100644 --- a/src/common/enums/events.ts +++ b/src/common/enums/events.ts @@ -76,3 +76,5 @@ export enum UNIVERSAL_AUTH_TRIGGER { * Broadcast channel */ export const CHANNEL_VERIFIED_EMAIL = 'channel-verified-email' +export const OPEN_DIALOG_EDIT_ELEMENT = 'open-dialog-edit-element' +export const CLOSE_DIALOG_EDIT_ELEMENT = 'close-dialog-edit-element' diff --git a/src/components/Dialog/Inner/index.tsx b/src/components/Dialog/Inner/index.tsx index bd47c42bbc..091f01f487 100644 --- a/src/components/Dialog/Inner/index.tsx +++ b/src/components/Dialog/Inner/index.tsx @@ -4,9 +4,18 @@ import classNames from 'classnames' import _get from 'lodash/get' import { useRef, useState } from 'react' -import { KEYVALUE } from '~/common/enums' +import { + CLOSE_DIALOG_EDIT_ELEMENT, + KEYVALUE, + OPEN_DIALOG_EDIT_ELEMENT, +} from '~/common/enums' import { capitalizeFirstLetter, dom } from '~/common/utils' -import { Media, useNativeEventListener, useOutsideClick } from '~/components' +import { + Media, + useEventListener, + useNativeEventListener, + useOutsideClick, +} from '~/components' import Handle from '../Handle' import styles from './styles.module.css' @@ -49,6 +58,15 @@ const Inner: React.FC< }) => { const node: React.RefObject | null = useRef(null) const [compositioning, setCompositioning] = useState(false) + const [editing, setEditing] = useState(false) + + useEventListener(OPEN_DIALOG_EDIT_ELEMENT, () => { + setEditing(true) + }) + + useEventListener(CLOSE_DIALOG_EDIT_ELEMENT, () => { + setEditing(false) + }) const innerClasses = classNames({ [styles.inner]: true, @@ -100,7 +118,7 @@ const Inner: React.FC< return } - if (!dismissOnESC || compositioning) { + if (!dismissOnESC || compositioning || editing) { return } diff --git a/src/components/Dialogs/MomentDetailDialog/Content.tsx b/src/components/Dialogs/MomentDetailDialog/Content.tsx index 51e7f74662..075cd66051 100644 --- a/src/components/Dialogs/MomentDetailDialog/Content.tsx +++ b/src/components/Dialogs/MomentDetailDialog/Content.tsx @@ -3,7 +3,11 @@ import { Editor } from '@matters/matters-editor' import classNames from 'classnames' import { useEffect, useState } from 'react' -import { ADD_MOMENT_COMMENT_MENTION } from '~/common/enums' +import { + ADD_MOMENT_COMMENT_MENTION, + CLOSE_DIALOG_EDIT_ELEMENT, + OPEN_DIALOG_EDIT_ELEMENT, +} from '~/common/enums' import { makeMentionElement, toPath } from '~/common/utils' import { MomentDigestDetail, @@ -48,6 +52,12 @@ const MomentDetailDialogContent = ({ if (editor && editing) { editor.commands.focus('end') } + + if (editing) { + window.dispatchEvent(new CustomEvent(OPEN_DIALOG_EDIT_ELEMENT)) + } else { + window.dispatchEvent(new CustomEvent(CLOSE_DIALOG_EDIT_ELEMENT)) + } }, [editor, editing]) useEventListener( From 932d3f38f51efad33b0b9dd4c760612cb64d3e2a Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 21 Aug 2024 17:02:14 +0800 Subject: [PATCH 2/3] fix(MomentCommentForm): add min height ref: PR-2408-2-59 --- src/components/Forms/MomentCommentForm/styles.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Forms/MomentCommentForm/styles.module.css b/src/components/Forms/MomentCommentForm/styles.module.css index 1f5ed447b5..e27fe83875 100644 --- a/src/components/Forms/MomentCommentForm/styles.module.css +++ b/src/components/Forms/MomentCommentForm/styles.module.css @@ -43,6 +43,7 @@ & :global(.ProseMirror), & :global(.tiptap) { + min-height: 4rem; max-height: 5.5rem; } } From 36103db65dd8a1f279921b27c7e63ed491be3592 Mon Sep 17 00:00:00 2001 From: bluecloud <96812901+pitb2022@users.noreply.github.com> Date: Wed, 21 Aug 2024 18:12:22 +0800 Subject: [PATCH 3/3] chore: Update event names in enums and components --- src/common/enums/events.ts | 4 +-- src/components/Dialog/Inner/index.tsx | 25 ++++++------------- .../Dialogs/MomentDetailDialog/Content.tsx | 8 +++--- 3 files changed, 14 insertions(+), 23 deletions(-) diff --git a/src/common/enums/events.ts b/src/common/enums/events.ts index 7fb8a455ec..70017901b7 100644 --- a/src/common/enums/events.ts +++ b/src/common/enums/events.ts @@ -76,5 +76,5 @@ export enum UNIVERSAL_AUTH_TRIGGER { * Broadcast channel */ export const CHANNEL_VERIFIED_EMAIL = 'channel-verified-email' -export const OPEN_DIALOG_EDIT_ELEMENT = 'open-dialog-edit-element' -export const CLOSE_DIALOG_EDIT_ELEMENT = 'close-dialog-edit-element' +export const ENABLE_SUSPEND_DISMISS_ON_ESC = 'enableSuspendDismissOnESC' +export const DISABLE_SUSPEND_DISMISS_ON_ESC = 'disableSuspendDismissOnESC' diff --git a/src/components/Dialog/Inner/index.tsx b/src/components/Dialog/Inner/index.tsx index 091f01f487..8bd1b9f330 100644 --- a/src/components/Dialog/Inner/index.tsx +++ b/src/components/Dialog/Inner/index.tsx @@ -5,9 +5,9 @@ import _get from 'lodash/get' import { useRef, useState } from 'react' import { - CLOSE_DIALOG_EDIT_ELEMENT, + DISABLE_SUSPEND_DISMISS_ON_ESC, + ENABLE_SUSPEND_DISMISS_ON_ESC, KEYVALUE, - OPEN_DIALOG_EDIT_ELEMENT, } from '~/common/enums' import { capitalizeFirstLetter, dom } from '~/common/utils' import { @@ -57,15 +57,14 @@ const Inner: React.FC< children, }) => { const node: React.RefObject | null = useRef(null) - const [compositioning, setCompositioning] = useState(false) - const [editing, setEditing] = useState(false) + const [suspendDismissOnESC, setSuspendDismissOnESC] = useState(false) - useEventListener(OPEN_DIALOG_EDIT_ELEMENT, () => { - setEditing(true) + useEventListener(ENABLE_SUSPEND_DISMISS_ON_ESC, () => { + setSuspendDismissOnESC(true) }) - useEventListener(CLOSE_DIALOG_EDIT_ELEMENT, () => { - setEditing(false) + useEventListener(DISABLE_SUSPEND_DISMISS_ON_ESC, () => { + setSuspendDismissOnESC(false) }) const innerClasses = classNames({ @@ -118,7 +117,7 @@ const Inner: React.FC< return } - if (!dismissOnESC || compositioning || editing) { + if (!dismissOnESC || suspendDismissOnESC) { return } @@ -149,14 +148,6 @@ const Inner: React.FC< handleKeyboardEvent(event) }) - useNativeEventListener('compositionstart', () => { - setCompositioning(true) - }) - - useNativeEventListener('compositionend', () => { - setCompositioning(false) - }) - return (