feat(dialog): correct height of editor and badge dialogs

src/components/Dialog/Content/index.tsx

@@ -10,6 +10,7 @@ interface DialogContentProps {
   noSpacingTop?: boolean
   noSpacingBottom?: boolean
   noMaxHeight?: boolean
+  className?: string
 }
 
 const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & {
@@ -21,6 +22,7 @@ const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & {
   noSpacingBottom,
   noMaxHeight,
   fixedHeight,
+  className,
   children,
 }) => {
   const contentClasses = classNames({
@@ -31,6 +33,7 @@ const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & {
     [styles.noSpacingTop]: !!noSpacingTop,
     [styles.noSpacingBottom]: !!noSpacingBottom,
     [styles.noMaxHeight]: !!noMaxHeight,
+    [className || '']: !!className,
   })
 
   return (

src/components/Dialog/Content/styles.module.css

@@ -29,16 +29,14 @@
 }
 
 /* FIXME: can be removed if editor is only used in single page instead of being used in dialog, use vvh to exclude visual keyboard */
-:global(body.editor-focused) {
-  & .content {
-    max-height: calc(var(--vvh) * 100 - 4.25rem);
+:global(.dialog-editor).content {
+  max-height: calc(var(--vvh) * 100 - 4.25rem);
 
-    &.fixedHeight {
-      height: calc(var(--vvh) * 100 - 4.25rem);
+  &.fixedHeight {
+    height: calc(var(--vvh) * 100 - 4.25rem);
 
-      /* inner height - visual keyboard height */
-      margin-bottom: calc(var(--ivh) * 100 - var(--vvh) * 100);
-    }
+    /* inner height - visual keyboard height */
+    margin-bottom: calc(var(--ivh) * 100 - var(--vvh) * 100);
   }
 }
 

src/components/Dialog/index.tsx

@@ -22,7 +22,6 @@ import styles from './styles.module.css'
 export type DialogProps = {
   isOpen: boolean | undefined
   onDismiss: () => void
-  onRest?: () => void
 
   scrollable?: boolean
   testId?: string
@@ -37,8 +36,7 @@ export type BaseDialogProps = {
 const BaseAnimatedDilaog: React.ComponentType<
   React.PropsWithChildren<DialogProps & BaseDialogProps>
 > = (props) => {
-  const { isOpen, mounted, setMounted, onRest, scrollable, bypassScrollLock } =
-    props
+  const { isOpen, mounted, setMounted, scrollable, bypassScrollLock } = props
   const initialFocusRef = useRef<any>(null)
 
   // Fade In/ Fade Out
@@ -53,10 +51,6 @@ const BaseAnimatedDilaog: React.ComponentType<
       if (isFadedOut) {
         setMounted(false)
       }
-
-      if (onRest) {
-        onRest()
-      }
     },
   }))
 
@@ -101,8 +95,7 @@ const BaseAnimatedDilaog: React.ComponentType<
 const BaseSimpleDialog: React.ComponentType<
   React.PropsWithChildren<DialogProps & BaseDialogProps>
 > = (props) => {
-  const { isOpen, mounted, setMounted, onRest, bypassScrollLock, scrollable } =
-    props
+  const { isOpen, mounted, setMounted, bypassScrollLock, scrollable } = props
   const initialFocusRef = useRef<any>(null)
 
   useEffect(() => {
@@ -111,10 +104,6 @@ const BaseSimpleDialog: React.ComponentType<
     }
 
     setMounted(false)
-
-    if (onRest) {
-      onRest()
-    }
   }, [isOpen])
 
   const dialogOverlayClasses = classNames({

src/components/Dialogs/CommentFormBetaDialog/CommentForm/index.tsx

@@ -237,7 +237,7 @@ const CommentForm: React.FC<CommentFormProps> = ({
         }
       />
 
-      <Dialog.Content fixedHeight>
+      <Dialog.Content fixedHeight className="dialog-editor">
         {context && <section className={styles.context}>{context}</section>}
 
         <form

src/components/Dialogs/CommentFormBetaDialog/index.tsx

@@ -16,26 +16,13 @@ const BaseCommentFormBetaDialog = ({
   const { show, openDialog, closeDialog } = useDialogSwitch(true)
   const ref: React.RefObject<HTMLDivElement> | null = useRef(null)
 
-  // FIXME: editor can't be focused with dialog on Android devices
-  const focusEditor = () => {
-    if (!show) {
-      return
-    }
-
-    const $editor = ref.current?.querySelector('.ProseMirror') as HTMLElement
-    if ($editor) {
-      $editor.focus()
-    }
-  }
-
   return (
     <div ref={ref}>
       {children && children({ openDialog })}
 
       <Dialog
         isOpen={show}
         onDismiss={closeDialog}
-        onRest={focusEditor}
         testId={TEST_ID.DIALOG_COMMENT_FORM}
       >
         <CommentForm {...props} closeDialog={closeDialog} />

src/components/Dialogs/CommentFormDialog/index.tsx

@@ -16,26 +16,13 @@ const BaseCommentFormDialog = ({
   const { show, openDialog, closeDialog } = useDialogSwitch(true)
   const ref: React.RefObject<HTMLDivElement> | null = useRef(null)
 
-  // FIXME: editor can't be focused with dialog on Android devices
-  const focusEditor = () => {
-    if (!show) {
-      return
-    }
-
-    const $editor = ref.current?.querySelector('.ProseMirror') as HTMLElement
-    if ($editor) {
-      $editor.focus()
-    }
-  }
-
   return (
     <div ref={ref}>
       {children && children({ openDialog })}
 
       <Dialog
         isOpen={show}
         onDismiss={closeDialog}
-        onRest={focusEditor}
         testId={TEST_ID.DIALOG_COMMENT_FORM}
       >
         <CommentForm {...props} closeDialog={closeDialog} />

src/components/Editor/Article/index.tsx

@@ -3,11 +3,7 @@ import { EditorContent, useArticleEdtor } from '@matters/matters-editor'
 import { useIntl } from 'react-intl'
 import { useDebouncedCallback } from 'use-debounce'
 
-import {
-  BYPASS_SCROLL_LOCK,
-  ENBABLE_SCROLL_LOCK,
-  INPUT_DEBOUNCE,
-} from '~/common/enums'
+import { INPUT_DEBOUNCE } from '~/common/enums'
 import { EditorDraftFragment } from '~/gql/graphql'
 
 import { BubbleMenu } from './BubbleMenu'
@@ -60,17 +56,6 @@ export const ArticleEditor: React.FC<ArticleEditorProps> = ({
       const content = editor.getHTML()
       debouncedUpdate({ content })
     },
-    // FIXME: toggle body class and scroll lock when editor is focused
-    // can be removed if editor is only used in single page
-    // instead of being used in dialog
-    onFocus: () => {
-      document.body.classList.add('editor-focused')
-      window.dispatchEvent(new CustomEvent(BYPASS_SCROLL_LOCK))
-    },
-    onBlur: () => {
-      document.body.classList.remove('editor-focused')
-      window.dispatchEvent(new CustomEvent(ENBABLE_SCROLL_LOCK))
-    },
     mentionSuggestion: makeMentionSuggestion({ client }),
     extensions: [
       FigureEmbedLinkInput,

src/components/Editor/Comment/index.tsx

@@ -44,15 +44,13 @@ const CommentEditor: React.FC<Props> = ({
       const content = editor.getHTML()
       update({ content })
     },
-    // FIXME: toggle body class and scroll lock when editor is focused
+    // FIXME: toggle scroll lock when editor is focused
     // can be removed if editor is only used in single page
     // instead of being used in dialog
     onFocus: () => {
-      document.body.classList.add('editor-focused')
       window.dispatchEvent(new CustomEvent(BYPASS_SCROLL_LOCK))
     },
-    onBlur: () => {
-      document.body.classList.remove('editor-focused')
+    onDestroy: () => {
       window.dispatchEvent(new CustomEvent(ENBABLE_SCROLL_LOCK))
     },
     mentionSuggestion: makeMentionSuggestion({ client }),

src/views/User/UserProfile/BadgeNomadDialog/Content.tsx

@@ -5,14 +5,7 @@ import { ReactComponent as Nomad1Background } from '@/public/static/images/badge
 import { ReactComponent as Nomad2Background } from '@/public/static/images/badge-nomad2-background.svg'
 import { ReactComponent as Nomad3Background } from '@/public/static/images/badge-nomad3-background.svg'
 import { ReactComponent as Nomad4Background } from '@/public/static/images/badge-nomad4-background.svg'
-import { BREAKPOINTS } from '~/common/enums'
-import {
-  Button,
-  CopyToClipboard,
-  Dialog,
-  Icon,
-  useMediaQuery,
-} from '~/components'
+import { Button, CopyToClipboard, Dialog, Icon } from '~/components'
 
 import styles from './styles.module.css'
 
@@ -31,8 +24,6 @@ const BadgeNomadDialogContent = ({
   isNested,
   goBack,
 }: BadgeNomadDialogContentProps) => {
-  const isSmUp = useMediaQuery(`(min-width: ${BREAKPOINTS.MD}px)`)
-
   return (
     <>
       {isNested && goBack && (
@@ -50,7 +41,7 @@ const BadgeNomadDialogContent = ({
         />
       )}
 
-      <Dialog.Content fixedHeight={!isSmUp} noMaxHeight>
+      <Dialog.Content>
         <section className={styles.container}>
           <section className={styles.badgeIcon}>
             {nomadBadgeLevel === 4 ? (

src/views/User/UserProfile/BadgesDialog/index.tsx

@@ -2,14 +2,7 @@ import { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { ReactComponent as IconTimes } from '@/public/static/icons/24px/times.svg'
-import { BREAKPOINTS } from '~/common/enums'
-import {
-  Button,
-  Dialog,
-  Icon,
-  useDialogSwitch,
-  useMediaQuery,
-} from '~/components'
+import { Button, Dialog, Icon, useDialogSwitch } from '~/components'
 
 import BadgeNomadDialogContent from '../BadgeNomadDialog/Content'
 import { Badges, BadgesOptions } from '../Badges'
@@ -40,7 +33,6 @@ export const BaseBadgesDialog = ({
   const [step, setStep] = useState<Step>(initStep)
   const isInBadgesStep = step === 'badges'
   const isInNomadStep = step === 'nomad'
-  const isSmUp = useMediaQuery(`(min-width: ${BREAKPOINTS.MD}px)`)
 
   const openStepDialog = (step?: Step) => {
     if (step) {
@@ -75,7 +67,7 @@ export const BaseBadgesDialog = ({
                 </Button>
               }
             />
-            <Dialog.Content fixedHeight={!isSmUp}>
+            <Dialog.Content>
               <Badges
                 isInDialog
                 hasNomadBadge={hasNomadBadge}