From bbebef5400e68fb9f61d4dd8d1ddf7f36fe977c7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Fri, 31 May 2024 17:50:45 -0400
Subject: [PATCH] Typing Escape after adding a new comment should cancel the
 comment (#10549)

Co-authored-by: Aditya Pandey <aditya@autospace.co>
---
 .../components/lexical/CommentEditor.tsx      | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/replay-next/components/lexical/CommentEditor.tsx b/packages/replay-next/components/lexical/CommentEditor.tsx
index c8615d4dfd7..bcf38603075 100644
--- a/packages/replay-next/components/lexical/CommentEditor.tsx
+++ b/packages/replay-next/components/lexical/CommentEditor.tsx
@@ -12,8 +12,7 @@ import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin";
+import { HistoryPlugin, createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import * as Sentry from "@sentry/react";
@@ -181,17 +180,19 @@ export default function CommentEditor({
   }, [editable, editorRef]);
 
   const onFormCancel = useCallback((_: EditorState) => {
-    const { onCancel } = committedStateRef.current;
+    const { onCancel, onDelete } = committedStateRef.current;
 
-    onCancel();
+    const prevEditorState = backupEditorStateRef.current;
+    if (isEditorStateEmpty(prevEditorState)) {
+      onDelete();
+    } else {
+      onCancel();
+    }
 
     const editor = editorRef.current;
-    if (editor) {
+    if (editor && prevEditorState) {
       editor.update(() => {
-        const editorState = backupEditorStateRef.current;
-        if (editorState) {
-          editor.setEditorState(editorState);
-        }
+        editor.setEditorState(prevEditorState);
       });
     }
   }, []);
@@ -199,8 +200,7 @@ export default function CommentEditor({
   const onFormSubmit = useCallback((editorState: EditorState) => {
     const { onDelete, onSave } = committedStateRef.current;
 
-    const textContent = serialize(editorState);
-    if (textContent.trim() === "") {
+    if (isEditorStateEmpty(editorState)) {
       onDelete();
     } else {
       onSave(editorState.toJSON());
@@ -314,3 +314,7 @@ const LexicalTheme = {
     underlineStrikethrough: styles.LexicalUnderlineStrikethrough,
   },
 };
+
+function isEditorStateEmpty(editorState: EditorState | null): boolean {
+  return !editorState || !serialize(editorState).trim();
+}