feat: Navigation using arrow keys

src/app/CodeEditor/EditableTarget.ts

@@ -66,6 +66,10 @@ export class EditableTarget {
     }
 
     private CellInputSingle(keyCode: string): void {
+        if (this.ProcessNavigationSingle(keyCode)) {
+            return;
+        }
+
         const oldValue = String.fromCharCode(this.editorSourceCode.Read(this.editableRegion.lt));
 
         const command = keyCode === 'Backspace' ?
@@ -90,6 +94,36 @@ export class EditableTarget {
         }
     }
 
+    private ProcessNavigationSingle(keyCode: string): boolean {
+        const dirMap = [
+            ['ArrowLeft', EditionDirection.Left] as const,
+            ['ArrowUp', EditionDirection.Up] as const,
+            ['ArrowRight', EditionDirection.Right] as const,
+            ['ArrowDown', EditionDirection.Down] as const
+        ];
+
+        const dir = dirMap.find(x => keyCode === x[0]);
+
+        if (dir === undefined) {
+            return false;
+        }
+
+        const prevDir = this.EditionDirection;
+        this.EditionDirection = dir[1];
+
+        const value = String.fromCharCode(this.editorSourceCode.Read(this.editableRegion.lt));
+        this.editCellCommandFactory(
+            this.editableRegion.lt,
+            value,
+            value,
+            this.editionDirection,
+            this.cellMoveNextPostActionFactory().DisableCodeFlowHelper).Apply();
+
+        this.EditionDirection = prevDir;
+
+        return true;
+    }
+
     private CellInputRegion(keyCode: string): void {
         const dimension = this.RegionDimension;
 

src/app/CodeEditorServiceInputReceiver.ts

@@ -21,7 +21,7 @@ export class CodeEditorServiceInputReceiver implements InputReceiver {
     OnInput(e: MyInputEvent): void {
         const keyCode = e.key.charCodeAt(0);
 
-        if (e.key.length === 1 && keyCode >= ' '.charCodeAt(0) && keyCode <= '~'.charCodeAt(0) || e.key === 'Backspace') {
+        if (e.key.length === 1 && keyCode >= ' '.charCodeAt(0) && keyCode <= '~'.charCodeAt(0) || this.IsNavigationEvent(e.key)) {
             if (this.overlay.DebugControls.DebugMode) {
                 this.overlay.Snackbar.ShowInformation('Editing is disabled during the debugging');
             } else if (this.overlay.DebugControls.IsHeatmapShown) {
@@ -36,6 +36,10 @@ export class CodeEditorServiceInputReceiver implements InputReceiver {
         }
     }
 
+    private IsNavigationEvent(keycode: string): boolean {
+        return ['Backspace', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(keycode);
+    }
+
     Focus(): void {
         this.codeEditor.Focus();
     }

src/app/History/Commands/EditCellCommand/PostActions/MoveNextAction.ts

@@ -11,6 +11,8 @@ import { Pointer } from "@/lib/befunge/memory/Memory";
 
 @injectable()
 export class MoveNextAction implements PostAction {
+    private codeFlowHelperEnabled = true;
+
     constructor(@inject(CodeEditorService) private codeEditorService: CodeEditorService) { }
 
     Apply(target: EditCellCommand): void {
@@ -22,6 +24,12 @@ export class MoveNextAction implements PostAction {
         this.codeEditorService.SetEditableCell(this.GetNextEditableCell(target, codeFlowEditDirection));
     }
 
+    get DisableCodeFlowHelper(): this {
+        this.codeFlowHelperEnabled = false;
+
+        return this;
+    }
+
     private GetNextEditableCell(target: EditCellCommand, overriddenDirection: EditionDirection): Pointer {
         const nextEditableCell: Pointer = { ...target.Location };
 
@@ -52,6 +60,10 @@ export class MoveNextAction implements PostAction {
     }
 
     private FollowCodeFlowHelper(target: EditCellCommand): EditionDirection {
+        if (!this.codeFlowHelperEnabled) {
+            return target.EditDirection;
+        }
+
         if (target.NewValue === '<') {
             return EditionDirection.Left;
         } else if (target.NewValue === '^') {