Add arrow key and tab/enter table editor navigation

packages/obonode/obojobo-chunks-table/editor-registration.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Transforms, Node, Range, Path, Editor, Element } from 'slate'
+import { Transforms, Node, Range, Editor, Element } from 'slate'
 
 import KeyDownUtil from 'obojobo-document-engine/src/scripts/oboeditor/util/keydown-util'
 //import ClipboardUtil from 'obojobo-document-engine/src/scripts/oboeditor/util/keydown-util'
@@ -41,36 +41,86 @@ const plugins = {
 	// Editable Plugins - These are used by the PageEditor component to augment React functions
 	// They affect individual nodes independently of one another
 	onKeyDown(entry, editor, event) {
+		function moveCursor(direction) {
+			// Getting the cell in which we last clicked on.
+			const [node, row, col] = editor.selection.anchor.path
+
+			let nextPath
+
+			// Calculate next path based on direction given
+			switch (direction) {
+				case 'down':
+					nextPath = [node, row + 1, col]
+					break
+				case 'right':
+					nextPath = [node, row, col + 1]
+					break
+				case 'up':
+					nextPath = [node, row - 1, col]
+					break
+				case 'left':
+					nextPath = [node, row, col - 1]
+					break
+			}
+
+			// If next path is valid, jump to it
+			if (Node.has(editor, nextPath)) {
+				const focus = Editor.start(editor, nextPath)
+				const anchor = Editor.end(editor, nextPath)
+				Transforms.setSelection(editor, {
+					focus,
+					anchor
+				})
+			} else if (direction === 'right' && Node.has(editor, (nextPath = [node, row + 1, 0]))) {
+				// If moving right but already at rightmost cell, move to beginning of the row below
+				const focus = Editor.start(editor, nextPath)
+				const anchor = Editor.end(editor, nextPath)
+				Transforms.setSelection(editor, {
+					focus,
+					anchor
+				})
+			}
+		}
+
 		switch (event.key) {
 			case 'Backspace':
 			case 'Delete':
 				return KeyDownUtil.deleteNodeContents(event, editor, entry, event.key === 'Delete')
 
 			case 'Enter':
+			case 'ArrowDown':
+				event.preventDefault()
+				moveCursor('down')
+				break
+
+			case 'Tab':
+				// If editing text, allow tab navigation to dropdown menu
+				if (Range.isCollapsed(editor.selection)) break
+
+				event.preventDefault()
+				moveCursor('right')
+				break
+
+			case 'ArrowRight':
+				// If editing text, don't move to next cell
+				if (Range.isCollapsed(editor.selection)) break
+
+				event.preventDefault()
+				moveCursor('right')
+				break
+
+			case 'ArrowLeft':
+				// If editing text, don't move to next cell
+				if (Range.isCollapsed(editor.selection)) break
+
+				event.preventDefault()
+				moveCursor('left')
+				break
+
+			case 'ArrowUp':
 				event.preventDefault()
-				if (Range.isCollapsed(editor.selection)) {
-					// Getting the table object.
-					const [tablePath] = Editor.nodes(editor, {
-						mode: 'lowest',
-						match: nodeMatch => Element.isElement(nodeMatch)
-					})
-
-					// Getting the cell in which we last clicked on.
-					const cellPath = tablePath[1]
-
-					// Check if there is a row below this one
-					const siblingPath = Path.next(cellPath.slice(0, -1))
-					if (Node.has(editor, siblingPath)) {
-						// If there is, jump down to the cell
-						// below the current one
-						const focus = Editor.start(editor, siblingPath.concat(cellPath[cellPath.length - 1]))
-						const anchor = Editor.end(editor, siblingPath.concat(cellPath[cellPath.length - 1]))
-						Transforms.setSelection(editor, {
-							focus,
-							anchor
-						})
-					}
-				}
+				moveCursor('up')
+				break
 		}
 	},
 	renderNode(props) {