fix: improve mobile view compatiblity

devrsi0n · Apr 17, 2024 · 252b210 · 252b210
1 parent d8f23ac
commit 252b210
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/ui/src/blocks/rich-text-editor/main-button/main-button.tsx b/packages/ui/src/blocks/rich-text-editor/main-button/main-button.tsx
@@ -2,11 +2,12 @@ import type { ICheckToxicText, RTEValue } from '@chirpy-dev/types';
 import { getTextFromRteValue } from '@chirpy-dev/utils';
 import * as React from 'react';
 
-import { Button, ButtonProps } from '../../../components/button';
+import { ButtonProps } from '../../../components/button';
 import { IconLoader, IconSend } from '../../../components/icons';
 import { useCurrentUser } from '../../../contexts/current-user-context';
 import { useNotificationContext } from '../../../contexts/notification-context';
 import { useAsync } from '../../../hooks/use-async';
+import { useEventListener } from '../../../hooks/use-event-listener';
 import { SignInButton } from '../../sign-in-button';
 import { AskNotificationPermissionPopover } from './ask-notification-permission-popover';
 import { ToxicTextPopover } from './toxic-text-popover';
@@ -71,13 +72,17 @@ export function MainButton({
       <span>Post</span>
     </>
   );
+  useEventListener(
+    'keydown',
+    (e) => {
+      if (isReply && e.key === 'Escape') {
+        onClickDismiss?.();
+      }
+    },
+    window,
+  );
   return (
     <div className="flex flex-row justify-end space-x-2">
-      {isReply && (
-        <Button variant="text" size="sm" onClick={onClickDismiss}>
-          Cancel
-        </Button>
-      )}
       {isSignIn ? (
         !supportNotification || didRegister || didDeny || askNextTime ? (
           <ToxicTextPopover

diff --git a/packages/ui/src/blocks/rich-text-editor/rich-text-editor.tsx b/packages/ui/src/blocks/rich-text-editor/rich-text-editor.tsx
@@ -51,7 +51,7 @@ export function RichTextEditor(props: IRichTextEditorProps): JSX.Element {
         },
       }),
       Placeholder.configure({
-        placeholder,
+        placeholder: `${placeholder}${isReply ? ' Esc to close' : ' '}`,
         emptyEditorClass: 'rtePlaceholder',
       }),
       Image.configure({