From ef6ea6b617a6b62346a49342522a48cca9f730ae Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Fri, 8 Apr 2022 09:45:49 -0700
Subject: [PATCH] fix: saving block title (#50)

* fix: saving block title

* fix: ben's suggestions
---
 .../EditorHeader/__snapshots__/index.test.jsx.snap  |  4 +++-
 src/editors/components/EditorHeader/hooks.js        |  9 +++------
 src/editors/components/EditorHeader/hooks.test.js   | 13 +++++++------
 src/editors/components/EditorHeader/index.jsx       | 10 ++++++++--
 src/editors/components/EditorHeader/index.test.jsx  |  1 +
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/editors/components/EditorHeader/__snapshots__/index.test.jsx.snap b/src/editors/components/EditorHeader/__snapshots__/index.test.jsx.snap
index 95cb2da79..6bbcaa060 100644
--- a/src/editors/components/EditorHeader/__snapshots__/index.test.jsx.snap
+++ b/src/editors/components/EditorHeader/__snapshots__/index.test.jsx.snap
@@ -7,7 +7,9 @@ exports[` 1`] = `
   <ModalDialog.Header>
     <ActionRow>
       <ModalDialog.Title>
-        <HeaderTitle />
+        <HeaderTitle
+          editorRef="refOfTHEeditTOR"
+        />
       </ModalDialog.Title>
       <ActionRow.Spacer />
       <IconButton
diff --git a/src/editors/components/EditorHeader/hooks.js b/src/editors/components/EditorHeader/hooks.js
index bdb7ac0ce..52e976492 100644
--- a/src/editors/components/EditorHeader/hooks.js
+++ b/src/editors/components/EditorHeader/hooks.js
@@ -25,11 +25,8 @@ export const hooks = {
       localTitle,
     };
   },
-  handleKeyDown: ({ stopEditing, editorRef }) => (e) => {
-    if (e.key === 'Enter') {
-      stopEditing();
-    }
-    if (e.key === 'Tab' && editorRef) {
+  handleKeyDown: ({ editorRef }) => (e) => {
+    if (editorRef && (e.key === 'Tab' || e.key === 'Enter')) {
       e.preventDefault();
       editorRef.current.focus();
     }
@@ -58,6 +55,6 @@ export const localTitleHooks = ({
     handleChange,
 
     inputRef: React.createRef(),
-    handleKeyDown: module.hooks.handleKeyDown({ stopEditing, editorRef }),
+    handleKeyDown: module.hooks.handleKeyDown({ editorRef }),
   };
 };
diff --git a/src/editors/components/EditorHeader/hooks.test.js b/src/editors/components/EditorHeader/hooks.test.js
index e5f98f7fb..eea6902b3 100644
--- a/src/editors/components/EditorHeader/hooks.test.js
+++ b/src/editors/components/EditorHeader/hooks.test.js
@@ -73,13 +73,15 @@ describe('EditorHeader hooks', () => {
         editorRef.current.focus = jest.fn();
         output = module.hooks.handleKeyDown({ stopEditing, editorRef });
       });
-      describe('Enter-key event', () => {
-        it('calls stopEditing', () => {
-          output({ key: 'Enter' });
-          expect(stopEditing).toHaveBeenCalled();
+      describe('enter-key event', () => {
+        it('calls preventDefault on the event, and focuses to the editorRef', () => {
+          const preventDefault = jest.fn();
+          output({ key: 'Enter', preventDefault });
+          expect(preventDefault).toHaveBeenCalled();
+          expect(editorRef.current.focus).toHaveBeenCalled();
         });
       });
-      describe('tab event', () => {
+      describe('tab-key event', () => {
         it('calls preventDefault on the event, and focuses to the editorRef', () => {
           const preventDefault = jest.fn();
           output({ key: 'Tab', preventDefault });
@@ -146,7 +148,6 @@ describe('EditorHeader hooks', () => {
     });
     it('returns handleKeyDown, tied to handleKeyDown hook', () => {
       expect(output.handleKeyDown).toEqual(newHooks.handleKeyDown({
-        stopEditing: values.stopEditing,
         editorRef,
       }));
     });
diff --git a/src/editors/components/EditorHeader/index.jsx b/src/editors/components/EditorHeader/index.jsx
index 64f6c9346..304f7acdf 100644
--- a/src/editors/components/EditorHeader/index.jsx
+++ b/src/editors/components/EditorHeader/index.jsx
@@ -17,11 +17,13 @@ import * as appHooks from '../../hooks';
 import HeaderTitle from './HeaderTitle';
 import messages from './messages';
 
-export const EditorHeader = ({ intl, returnUrl }) => (
+export const EditorHeader = ({ editorRef, intl, returnUrl }) => (
   <div className="editor-header">
     <ModalDialog.Header>
       <ActionRow>
-        <ModalDialog.Title><HeaderTitle /></ModalDialog.Title>
+        <ModalDialog.Title>
+          <HeaderTitle editorRef={editorRef} />
+        </ModalDialog.Title>
         <ActionRow.Spacer />
         <IconButton
           alt={intl.formatMessage(messages.cancelChangesLabel)}
@@ -36,6 +38,10 @@ export const EditorHeader = ({ intl, returnUrl }) => (
   </div>
 );
 EditorHeader.propTypes = {
+  editorRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.any }),
+  ]).isRequired,
   // injected
   intl: intlShape.isRequired,
   // redux
diff --git a/src/editors/components/EditorHeader/index.test.jsx b/src/editors/components/EditorHeader/index.test.jsx
index 2347b04cc..f3451b580 100644
--- a/src/editors/components/EditorHeader/index.test.jsx
+++ b/src/editors/components/EditorHeader/index.test.jsx
@@ -30,6 +30,7 @@ jest.mock('./HeaderTitle', () => 'HeaderTitle');
 
 describe('Editor Header index', () => {
   const props = {
+    editorRef: 'refOfTHEeditTOR',
     intl: { formatMessage },
     returnUrl: 'TeST-ReTurNurL',
   };