From 4e091a60b353dea6188970e0a015aa848598c785 Mon Sep 17 00:00:00 2001
From: freedomlang <blackywkl@gmail.com>
Date: Sun, 17 Mar 2019 21:52:01 +0800
Subject: [PATCH 1/3] feat(atomic-block): Add navigation feature for up/down
 arrow

---
 packages/atomic-block/src/index.js | 44 ++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/atomic-block/src/index.js b/packages/atomic-block/src/index.js
index 3d48b8d..018750d 100644
--- a/packages/atomic-block/src/index.js
+++ b/packages/atomic-block/src/index.js
@@ -84,6 +84,8 @@ class AtomicBlockPlugin extends Component<Props> {
       blockRendererFn: this.blockRendererFn,
       handleReturn: this.handleReturn,
       handleKeyCommand: this.handleKeyCommand,
+      onUpArrow: this.onUpArrow,
+      onDownArrow: this.onDownArrow,
     })
   }
 
@@ -205,6 +207,48 @@ class AtomicBlockPlugin extends Component<Props> {
     return constants.NOT_HANDLED
   }
 
+  onDownArrow = event => {
+    const { editorState, setEditorState } = this.props
+    // TODO edgecase: if one block is selected and the user wants to expand the selection using the shift key
+
+    // Don't manually overwrite in case the shift key is used to avoid breaking
+    // native behaviour that works anyway.
+    if (event.shiftKey) {
+      return constants.NOT_HANDLED
+    }
+
+    // Covering the case to select the after block with arrow down
+    const selectionKey = editorState.getSelection().getAnchorKey()
+    const afterBlock = editorState
+      .getCurrentContent()
+      .getBlockAfter(selectionKey)
+    if (afterBlock) {
+      setSelection(editorState, setEditorState, afterBlock)
+      return constants.HANDLED
+    }
+  }
+
+  onUpArrow = event => {
+    const { editorState, setEditorState } = this.props
+    // TODO edgecase: if one block is selected and the user wants to expand the selection using the shift key
+
+    // Don't manually overwrite in case the shift key is used to avoid breaking
+    // native behaviour that works anyway.
+    if (event.shiftKey) {
+      return constants.NOT_HANDLED
+    }
+
+    // Covering the case to select the before block with arrow up
+    const selectionKey = editorState.getSelection().getAnchorKey()
+    const beforeBlock = editorState
+      .getCurrentContent()
+      .getBlockBefore(selectionKey)
+    if (beforeBlock) {
+      setSelection(editorState, setEditorState, beforeBlock)
+      return constants.HANDLED
+    }
+  }
+
   blockRendererFn = block => {
     const { type, children, editorState } = this.props
 

From d412a7b51466861036e1c2183b2cc4990ed13e50 Mon Sep 17 00:00:00 2001
From: freedomlang <blackywkl@gmail.com>
Date: Mon, 15 Apr 2019 20:02:01 +0800
Subject: [PATCH 2/3] Fix undefined error for read-only

---
 packages/atomic-block/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/atomic-block/src/index.js b/packages/atomic-block/src/index.js
index 018750d..c8e9634 100644
--- a/packages/atomic-block/src/index.js
+++ b/packages/atomic-block/src/index.js
@@ -23,7 +23,7 @@ const _BlockChildren = ({
     readOnly !== true
 
   if (readOnly) {
-    return props.children({ ...props, isFocused })
+    return children({ ...props, isFocused })
   } else {
     return (
       <AtomicBlock onClick={() => focusBlock(blockKey)}>

From da68efc56823e5b7892cd5abb9dc09fdb1c53c3e Mon Sep 17 00:00:00 2001
From: freedomlang <blackywkl@gmail.com>
Date: Tue, 16 Apr 2019 22:51:16 +0800
Subject: [PATCH 3/3] Add flowtype

---
 packages/atomic-block/src/index.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/atomic-block/src/index.js b/packages/atomic-block/src/index.js
index c8e9634..02c8085 100644
--- a/packages/atomic-block/src/index.js
+++ b/packages/atomic-block/src/index.js
@@ -43,7 +43,7 @@ type Props = PluginProps & {
 // Set selection of editor to next/previous block
 const setSelection = (
   editorState: EditorState,
-  setEditorState: EditorState,
+  setEditorState: () => void,
   newActiveBlock: ContentBlock
 ): void => {
   // TODO verify that always a key-0-0 exists
@@ -93,7 +93,7 @@ class AtomicBlockPlugin extends Component<Props> {
     this.unregister()
   }
 
-  handleKeyCommand = (command, editorState) => {
+  handleKeyCommand = (command: string, editorState: EditorState) => {
     const { setEditorState } = this.props
 
     let contentState = editorState.getCurrentContent()
@@ -191,7 +191,10 @@ class AtomicBlockPlugin extends Component<Props> {
     )
   }
 
-  handleReturn = (event, editorState) => {
+  handleReturn = (
+    event: SyntheticKeyboardEvent<>,
+    editorState: EditorState
+  ) => {
     const { setEditorState } = this.props
     const selection = editorState.getSelection()
 
@@ -207,7 +210,7 @@ class AtomicBlockPlugin extends Component<Props> {
     return constants.NOT_HANDLED
   }
 
-  onDownArrow = event => {
+  onDownArrow = (event: SyntheticKeyboardEvent<>) => {
     const { editorState, setEditorState } = this.props
     // TODO edgecase: if one block is selected and the user wants to expand the selection using the shift key
 
@@ -228,7 +231,7 @@ class AtomicBlockPlugin extends Component<Props> {
     }
   }
 
-  onUpArrow = event => {
+  onUpArrow = (event: SyntheticKeyboardEvent<>) => {
     const { editorState, setEditorState } = this.props
     // TODO edgecase: if one block is selected and the user wants to expand the selection using the shift key
 
@@ -249,7 +252,7 @@ class AtomicBlockPlugin extends Component<Props> {
     }
   }
 
-  blockRendererFn = block => {
+  blockRendererFn = (block: ContentBlock) => {
     const { type, children, editorState } = this.props
 
     const content = editorState.getCurrentContent()