fix: upgrade keyboard navigation to use new clipboard API (google#1844)

* fix: upgrade keyboard navigation to use new clipboard API

* chore: reorganize test suites

* chore: fixup delete tests

* chore: work on fixing copy tests

* chore: finish fixing up copy tests

* chore: fix cut and paste tests

* chore: delete paste suite

* chore: delete unnecessary test helpers

* chore: fixup other tests

* chore: document why we're stubbing cancelAnimationFrame and add it to teardown

plugins/keyboard-navigation/package.json

@@ -41,15 +41,15 @@
   "devDependencies": {
     "@blockly/dev-scripts": "^2.0.1",
     "@blockly/dev-tools": "^7.0.3",
-    "blockly": "^10.0.0",
+    "blockly": "^10.2.0-beta.0",
     "chai": "^4.2.0",
     "jsdom": "^16.4.0",
     "jsdom-global": "^3.0.2",
     "mocha": "^7.1.0",
     "sinon": "^9.0.1"
   },
   "peerDependencies": {
-    "blockly": "^10.0.0"
+    "blockly": "^10.2.0-beta.0"
   },
   "publishConfig": {
     "access": "public",

plugins/keyboard-navigation/src/navigation.js

@@ -1111,16 +1111,22 @@ export class Navigation {
   }
 
   /**
-   * Pastes the coped block to the marked location.
+   * Pastes the copied block to the marked location.
+   * @param {Blockly.BlockCopyData} copyData The data
+   *     to paste into the workspace.
+   * @param {Blockly.WorkspaceSvg} workspace The workspace to paste the data
+   *     into.
    * @returns {boolean} True if the paste was sucessful, false otherwise.
    * @package
    */
-  paste() {
+  paste(copyData, workspace) {
     let isHandled = false;
     Blockly.Events.setGroup(true);
-    const block = Blockly.clipboard.paste();
+    const block = /** @type {Blockly.BlockSvg} */ (
+      Blockly.clipboard.paste(copyData, workspace)
+    );
     if (block) {
-      isHandled = this.insertPastedBlock(block.workspace, block);
+      isHandled = this.insertPastedBlock(workspace, block);
     }
     Blockly.Events.setGroup(false);
     return isHandled;

plugins/keyboard-navigation/src/navigation_controller.js

@@ -21,6 +21,12 @@ import {Navigation} from './navigation';
  * Class for registering shortcuts for keyboard navigation.
  */
 export class NavigationController {
+  /** Data copied by the copy or cut keyboard shortcuts. */
+  copyData = null;
+
+  /** The workspace a copy or cut keyboard shortcut happened in. */
+  copyWorkspace = null;
+
   /**
    * Constructor used for registering shortcuts.
    * This will register any default shortcuts for keyboard navigation.
@@ -715,9 +721,12 @@ export class NavigationController {
         return false;
       },
       callback: (workspace) => {
-        const sourceBlock = workspace.getCursor().getCurNode().getSourceBlock();
+        const sourceBlock =/** @type {Blockly.BlockSvg} */ (
+          workspace.getCursor().getCurNode().getSourceBlock());
         workspace.hideChaff();
-        Blockly.clipboard.copy(sourceBlock);
+        this.copyData = sourceBlock.toCopyData();
+        this.copyWorkspace = sourceBlock.workspace;
+        return !!this.copyData;
       },
     };
 
@@ -752,7 +761,8 @@ export class NavigationController {
             !workspace.options.readOnly && !Blockly.Gesture.inProgress();
       },
       callback: () => {
-        return this.navigation.paste();
+        if (!this.copyData || !this.copyWorkspace) return false;
+        return this.navigation.paste(this.copyData, this.copyWorkspace);
       },
     };
 
@@ -797,8 +807,10 @@ export class NavigationController {
         return false;
       },
       callback: (workspace) => {
-        const sourceBlock = workspace.getCursor().getCurNode().getSourceBlock();
-        Blockly.clipboard.copy(sourceBlock);
+        const sourceBlock =/** @type {Blockly.BlockSvg} */ (
+          workspace.getCursor().getCurNode().getSourceBlock());
+        this.copyData = sourceBlock.toCopyData();
+        this.copyWorkspace = sourceBlock.workspace;
         this.navigation.moveCursorOnBlockDelete(workspace, sourceBlock);
         sourceBlock.checkAndDelete();
         return true;

plugins/keyboard-navigation/test/navigation_modify_test.mocha.js

@@ -73,6 +73,11 @@ suite('Insert/Modify', function() {
   setup(function() {
     this.jsdomCleanup =
         require('jsdom-global')('<!DOCTYPE html><div id="blocklyDiv"></div>');
+    // We are running these tests in node even thought they require a rendered
+    // workspace, which doesn't exactly work. The rendering system expects
+    // cancelAnimationFrame to be defined so we need to define it.
+    window.cancelAnimationFrame = function() {};
+
     // NOTE: block positions chosen such that they aren't unintentionally
     // bumped out of bounds during tests.
     const xmlText = `<xml xmlns="https://developers.google.com/blockly/xml">
@@ -116,6 +121,7 @@ suite('Insert/Modify', function() {
     delete Blockly.Blocks['stack_block'];
     delete Blockly.Blocks['row_block'];
     delete Blockly.Blocks['statement_block'];
+    window.cancelAnimationFrame = undefined;
     this.jsdomCleanup();
   });
 

plugins/keyboard-navigation/test/navigation_test.mocha.js

@@ -23,13 +23,18 @@ suite('Navigation', function() {
   setup(function() {
     this.jsdomCleanup =
         require('jsdom-global')('<!DOCTYPE html><div id="blocklyDiv"></div>');
+    // We are running these tests in node even thought they require a rendered
+    // workspace, which doesn't exactly work. The rendering system expects
+    // cancelAnimationFrame to be defined so we need to define it.
+    window.cancelAnimationFrame = function() {};
     this.controller = new NavigationController();
     this.controller.init();
     this.navigation = this.controller.navigation;
   });
 
   teardown(function() {
     this.controller.dispose();
+    window.cancelAnimationFrame = undefined;
     this.jsdomCleanup();
   });