From 252b210dd281435bd34b11664e553934f70a52bc Mon Sep 17 00:00:00 2001
From: Qing <7880675+devrsi0n@users.noreply.github.com>
Date: Wed, 17 Apr 2024 13:43:58 +0800
Subject: [PATCH] fix: improve mobile view compatiblity

---
 .../main-button/main-button.tsx                 | 17 +++++++++++------
 .../rich-text-editor/rich-text-editor.tsx       |  2 +-
 2 files changed, 12 insertions(+), 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
index 55b59a2ae..786010910 100644
--- 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
index f7aa7c432..3c73f8dca 100644
--- 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({