@blockly/keyboard-navigation NPM

@blockly/keyboard-navigation

A Blockly plugin that adds keyboard navigation to Blockly. This allows users to use the keyboard to navigate the toolbox and the blocks. More information on keyboard navigation can be found on our keyboard navigation documentation page.

Installation

Yarn

yarn add @blockly/keyboard-navigation

npm

npm install @blockly/keyboard-navigation --save

Usage

import * as Blockly from 'blockly';
import {NavigationController} from '@blockly/keyboard-navigation';
// Inject Blockly.
const workspace = Blockly.inject('blocklyDiv', {
  toolbox: toolboxCategories,
});
// Initialize plugin.
const navigationController = new NavigationController();
navigationController.init();
navigationController.addWorkspace(workspace);
// Turns on keyboard navigation.
navigationController.enable(workspace);

API

This plugin exports the following classes:

NavigationController: Class in charge of registering all keyboard shortcuts.
Navigation: This holds all the functions necessary to navigate around Blockly using the keyboard.
FlyoutCursor: Cursor in charge of navigating the flyout.
LineCursor: Alternative cursor that tries to navigate blocks like lines of code.

You should only need to use these if you plan on changing the default functionality.