feat: Use FocusManager for navigation & state management

src/actions/arrow_navigation.ts

@@ -8,6 +8,7 @@ import {ASTNode, ShortcutRegistry, utils as BlocklyUtils} from 'blockly/core';
 
 import type {Field, Toolbox, WorkspaceSvg} from 'blockly/core';
 
+import * as Blockly from 'blockly/core';
 import * as Constants from '../constants';
 import type {Navigation} from '../navigation';
 
@@ -53,6 +54,7 @@ export class ArrowNavigation {
       shortcut: ShortcutRegistry.KeyboardShortcut,
     ): boolean => {
       const toolbox = workspace.getToolbox() as Toolbox;
+      const flyout = workspace.getFlyout();
       let isHandled = false;
       switch (this.navigation.getState(workspace)) {
         case Constants.STATE.WORKSPACE:
@@ -67,12 +69,11 @@ export class ArrowNavigation {
           }
           return isHandled;
         case Constants.STATE.TOOLBOX:
-          isHandled =
-            toolbox && typeof toolbox.onShortcut === 'function'
-              ? toolbox.onShortcut(shortcut)
-              : false;
-          if (!isHandled) {
-            this.navigation.focusFlyout(workspace);
+          // @ts-expect-error private method
+          isHandled = toolbox && toolbox.selectChild();
+          if (!isHandled && flyout) {
+            Blockly.getFocusManager().focusTree(flyout.getWorkspace());
+            this.navigation.defaultFlyoutCursorIfNeeded(workspace);
           }
           return true;
         default:
@@ -100,12 +101,13 @@ export class ArrowNavigation {
           }
           return isHandled;
         case Constants.STATE.FLYOUT:
-          this.navigation.focusToolbox(workspace);
+          if (toolbox) {
+            Blockly.getFocusManager().focusTree(toolbox);
+          }
           return true;
         case Constants.STATE.TOOLBOX:
-          return toolbox && typeof toolbox.onShortcut === 'function'
-            ? toolbox.onShortcut(shortcut)
-            : false;
+          // @ts-expect-error private method
+          return toolbox && toolbox.selectParent();
         default:
           return false;
       }
@@ -173,9 +175,24 @@ export class ArrowNavigation {
               }
               return isHandled;
             case Constants.STATE.TOOLBOX:
-              return toolbox && typeof toolbox.onShortcut === 'function'
-                ? toolbox.onShortcut(shortcut)
-                : false;
+              if (toolbox) {
+                if (!toolbox.getSelectedItem()) {
+                  const firstItem =
+                    toolbox
+                      .getToolboxItems()
+                      .find((item) => item.isSelectable()) ?? null;
+                  toolbox.setSelectedItem(firstItem);
+                  isHandled = true;
+                } else {
+                  // @ts-expect-error private method
+                  isHandled = toolbox.selectNext();
+                }
+                const selectedItem = toolbox.getSelectedItem();
+                if (selectedItem) {
+                  Blockly.getFocusManager().focusNode(selectedItem);
+                }
+              }
+              return isHandled;
             default:
               return false;
           }
@@ -221,9 +238,15 @@ export class ArrowNavigation {
               }
               return isHandled;
             case Constants.STATE.TOOLBOX:
-              return toolbox && typeof toolbox.onShortcut === 'function'
-                ? toolbox.onShortcut(shortcut)
-                : false;
+              if (toolbox) {
+                // @ts-expect-error private method
+                isHandled = toolbox.selectPrevious();
+                const selectedItem = toolbox.getSelectedItem();
+                if (selectedItem) {
+                  Blockly.getFocusManager().focusNode(selectedItem);
+                }
+              }
+              return isHandled;
             default:
               return false;
           }

src/actions/clipboard.ts

@@ -13,6 +13,7 @@ import {
   clipboard,
   ICopyData,
   LineCursor,
+  getFocusManager,
 } from 'blockly';
 import * as Constants from '../constants';
 import type {BlockSvg, WorkspaceSvg} from 'blockly';
@@ -281,7 +282,7 @@ export class Clipboard {
     const copied = !!this.copyData;
     if (copied) {
       if (navigationState === Constants.STATE.FLYOUT) {
-        this.navigation.focusWorkspace(workspace);
+        getFocusManager().focusTree(workspace);
       }
       showCopiedHint(workspace);
     }
@@ -375,10 +376,10 @@ export class Clipboard {
       ? workspace
       : this.copyWorkspace;
 
-    const targetNode = this.navigation.getStationaryNode(pasteWorkspace);
-    // If we're pasting in the flyout it still targets the workspace. Focus first
-    // so ensure correct selection handling.
-    this.navigation.focusWorkspace(workspace);
+    const targetNode = this.navigation.getFocusedASTNode(pasteWorkspace);
+    // If we're pasting in the flyout it still targets the workspace. Focus
+    // first as to ensure correct selection handling.
+    getFocusManager().focusTree(workspace);
 
     Events.setGroup(true);
     const block = clipboard.paste(this.copyData, pasteWorkspace) as BlockSvg;

src/actions/enter.ts

@@ -9,14 +9,12 @@ import {
   Events,
   ShortcutRegistry,
   utils as BlocklyUtils,
-} from 'blockly/core';
-
-import type {
   Block,
   BlockSvg,
   Field,
   FlyoutButton,
   WorkspaceSvg,
+  getFocusManager,
 } from 'blockly/core';
 
 import * as Constants from '../constants';
@@ -134,7 +132,7 @@ export class EnterAction {
       Events.setGroup(true);
     }
 
-    const stationaryNode = this.navigation.getStationaryNode(workspace);
+    const stationaryNode = this.navigation.getFocusedASTNode(workspace);
     const newBlock = this.createNewBlock(workspace);
     if (!newBlock) return;
     const insertStartPoint = stationaryNode
@@ -146,7 +144,7 @@ export class EnterAction {
 
     workspace.setResizesEnabled(true);
 
-    this.navigation.focusWorkspace(workspace);
+    getFocusManager().focusTree(workspace);
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     workspace.getCursor()?.setCurNode(ASTNode.createBlockNode(newBlock)!);
     this.mover.startMove(workspace, newBlock, insertStartPoint);

src/actions/exit.ts

@@ -4,7 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {ShortcutRegistry, utils as BlocklyUtils} from 'blockly/core';
+import {
+  ShortcutRegistry,
+  utils as BlocklyUtils,
+  getFocusManager,
+  Gesture,
+} from 'blockly/core';
 
 import * as Constants from '../constants';
 import type {Navigation} from '../navigation';
@@ -29,7 +34,10 @@ export class ExitAction {
         switch (this.navigation.getState(workspace)) {
           case Constants.STATE.FLYOUT:
           case Constants.STATE.TOOLBOX:
-            this.navigation.focusWorkspace(workspace);
+            getFocusManager().focusTree(workspace);
+            if (!Gesture.inProgress()) {
+              workspace.hideChaff();
+            }
             return true;
           default:
             return false;

src/actions/mover.ts

@@ -15,6 +15,7 @@ import {
   ASTNode,
   Connection,
   dragging,
+  getFocusManager,
   registry,
   utils,
   WorkspaceSvg,
@@ -132,6 +133,9 @@ export class Mover {
     // Begin drag.
     dragger.onDragStart(info.fakePointerEvent('pointerdown'));
     info.updateTotalDelta();
+    // In case the block is detached, ensure that it still retains focus
+    // (otherwise dragging will break).
+    getFocusManager().focusNode(block);
     return true;
   }
 
@@ -159,6 +163,8 @@ export class Mover {
     this.moves.delete(workspace);
     // Delay scroll until after block has finished moving.
     setTimeout(() => this.scrollCurrentBlockIntoView(workspace), 0);
+    // If the block gets reattached, ensure it retains focus.
+    getFocusManager().focusNode(info.block);
     return true;
   }
 
@@ -205,6 +211,8 @@ export class Mover {
     this.moves.delete(workspace);
     // Delay scroll until after block has finished moving.
     setTimeout(() => this.scrollCurrentBlockIntoView(workspace), 0);
+    // If the block gets reattached, ensure it retains focus.
+    getFocusManager().focusNode(info.block);
     return true;
   }