fix: saving block title (#50)

* fix: saving block title

* fix: ben's suggestions

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

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 }),
   };
 };

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,
       }));
     });

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

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',
   };