Merge pull request #4762 from thematters/adjust-esc-issue

Adjust esc issue

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 ENABLE_SUSPEND_DISMISS_ON_ESC = 'enableSuspendDismissOnESC'
+export const DISABLE_SUSPEND_DISMISS_ON_ESC = 'disableSuspendDismissOnESC'

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 {
+  DISABLE_SUSPEND_DISMISS_ON_ESC,
+  ENABLE_SUSPEND_DISMISS_ON_ESC,
+  KEYVALUE,
+} 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'
@@ -48,7 +57,15 @@ const Inner: React.FC<
   children,
 }) => {
   const node: React.RefObject<any> | null = useRef(null)
-  const [compositioning, setCompositioning] = useState(false)
+  const [suspendDismissOnESC, setSuspendDismissOnESC] = useState(false)
+
+  useEventListener(ENABLE_SUSPEND_DISMISS_ON_ESC, () => {
+    setSuspendDismissOnESC(true)
+  })
+
+  useEventListener(DISABLE_SUSPEND_DISMISS_ON_ESC, () => {
+    setSuspendDismissOnESC(false)
+  })
 
   const innerClasses = classNames({
     [styles.inner]: true,
@@ -100,7 +117,7 @@ const Inner: React.FC<
       return
     }
 
-    if (!dismissOnESC || compositioning) {
+    if (!dismissOnESC || suspendDismissOnESC) {
       return
     }
 
@@ -131,14 +148,6 @@ const Inner: React.FC<
     handleKeyboardEvent(event)
   })
 
-  useNativeEventListener('compositionstart', () => {
-    setCompositioning(true)
-  })
-
-  useNativeEventListener('compositionend', () => {
-    setCompositioning(false)
-  })
-
   return (
     <div
       {...(testId ? { 'data-test-id': testId } : {})}

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,
+  DISABLE_SUSPEND_DISMISS_ON_ESC,
+  ENABLE_SUSPEND_DISMISS_ON_ESC,
+} 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(ENABLE_SUSPEND_DISMISS_ON_ESC))
+    } else {
+      window.dispatchEvent(new CustomEvent(DISABLE_SUSPEND_DISMISS_ON_ESC))
+    }
   }, [editor, editing])
 
   useEventListener(

src/components/Forms/MomentCommentForm/styles.module.css

@@ -43,6 +43,7 @@
 
     & :global(.ProseMirror),
     & :global(.tiptap) {
+      min-height: 4rem;
       max-height: 5.5rem;
     }
   }