release: v12.2.0

.github/workflows/keyboard_plugin_test.yml

@@ -0,0 +1,66 @@
+# Workflow for running the keyboard navigation plugin's automated tests.
+
+name: Keyboard Navigation Automated Tests
+
+on:
+  workflow_dispatch:
+  pull_request:
+  push:
+    branches:
+      - develop
+
+permissions:
+  contents: read
+
+jobs:
+  webdriverio_tests:
+    name: WebdriverIO tests
+    timeout-minutes: 10
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, macos-latest]
+
+    steps:
+      - name: Checkout core Blockly
+        uses: actions/checkout@v4
+        with:
+          path: core-blockly
+
+      - name: Checkout keyboard navigation plugin
+        uses: actions/checkout@v4
+        with:
+          repository: 'google/blockly-keyboard-experimentation'
+          ref: 'main'
+          path: blockly-keyboard-experimentation
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: NPM install
+        run: |
+          cd core-blockly
+          npm install
+          cd ..
+          cd blockly-keyboard-experimentation
+          npm install
+          cd ..
+
+      - name: Link latest core develop with plugin
+        run: |
+          cd core-blockly
+          npm run package
+          cd dist
+          npm link
+          cd ../../blockly-keyboard-experimentation
+          npm link blockly
+          cd ..
+
+      - name: Run keyboard navigation plugin tests
+        run: |
+          cd blockly-keyboard-experimentation
+          npm run test

core/block.ts

@@ -791,6 +791,7 @@ export class Block {
   isDeletable(): boolean {
     return (
       this.deletable &&
+      !this.isInFlyout &&
       !this.shadow &&
       !this.isDeadOrDying() &&
       !this.workspace.isReadOnly()
@@ -824,6 +825,7 @@ export class Block {
   isMovable(): boolean {
     return (
       this.movable &&
+      !this.isInFlyout &&
       !this.shadow &&
       !this.isDeadOrDying() &&
       !this.workspace.isReadOnly()

core/block_svg.ts

@@ -299,8 +299,19 @@ export class BlockSvg
     }
 
     const oldXY = this.getRelativeToSurfaceXY();
+    const focusedNode = getFocusManager().getFocusedNode();
+    const restoreFocus = this.getSvgRoot().contains(
+      focusedNode?.getFocusableElement() ?? null,
+    );
     if (newParent) {
       (newParent as BlockSvg).getSvgRoot().appendChild(svgRoot);
+      // appendChild() clears focus state, so re-focus the previously focused
+      // node in case it was this block and would otherwise lose its focus. Once
+      // Element.moveBefore() has better browser support, it should be used
+      // instead.
+      if (restoreFocus && focusedNode) {
+        getFocusManager().focusNode(focusedNode);
+      }
     } else if (oldParent) {
       // If we are losing a parent, we want to move our DOM element to the
       // root of the workspace.  Try to insert it before any top-level
@@ -319,6 +330,13 @@ export class BlockSvg
         canvas.insertBefore(svgRoot, draggingBlockElement);
       } else {
         canvas.appendChild(svgRoot);
+        // appendChild() clears focus state, so re-focus the previously focused
+        // node in case it was this block and would otherwise lose its focus. Once
+        // Element.moveBefore() has better browser support, it should be used
+        // instead.
+        if (restoreFocus && focusedNode) {
+          getFocusManager().focusNode(focusedNode);
+        }
       }
       this.translate(oldXY.x, oldXY.y);
     }
@@ -849,10 +867,30 @@ export class BlockSvg
     Tooltip.dispose();
     ContextMenu.hide();
 
-    // If this block was focused, focus its parent or workspace instead.
+    // If this block (or a descendant) was focused, focus its parent or
+    // workspace instead.
     const focusManager = getFocusManager();
-    if (focusManager.getFocusedNode() === this) {
-      const parent = this.getParent();
+    if (
+      this.getSvgRoot().contains(
+        focusManager.getFocusedNode()?.getFocusableElement() ?? null,
+      )
+    ) {
+      let parent: BlockSvg | undefined | null = this.getParent();
+      if (!parent) {
+        // In some cases, blocks are disconnected from their parents before
+        // being deleted. Attempt to infer if there was a parent by checking
+        // for a connection within a radius of 0. Even if this wasn't a parent,
+        // it must be adjacent to this block and so is as good an option as any
+        // to focus after deleting.
+        const connection = this.outputConnection ?? this.previousConnection;
+        if (connection) {
+          const targetConnection = connection.closest(
+            0,
+            new Coordinate(0, 0),
+          ).connection;
+          parent = targetConnection?.getSourceBlock();
+        }
+      }
       if (parent) {
         focusManager.focusNode(parent);
       } else {
@@ -1721,6 +1759,11 @@ export class BlockSvg
     this.dragStrategy = dragStrategy;
   }
 
+  /** Returns whether this block is copyable or not. */
+  isCopyable(): boolean {
+    return this.isOwnDeletable() && this.isOwnMovable();
+  }
+
   /** Returns whether this block is movable or not. */
   override isMovable(): boolean {
     return this.dragStrategy.isMovable();

core/bubbles/mini_workspace_bubble.ts

@@ -153,7 +153,11 @@ export class MiniWorkspaceBubble extends Bubble {
    * are dealt with by resizing the workspace to show them.
    */
   private bumpBlocksIntoBounds() {
-    if (this.miniWorkspace.isDragging()) return;
+    if (
+      this.miniWorkspace.isDragging() &&
+      !this.miniWorkspace.keyboardMoveInProgress
+    )
+      return;
 
     const MARGIN = 20;
 
@@ -185,7 +189,15 @@ export class MiniWorkspaceBubble extends Bubble {
    * mini workspace.
    */
   private updateBubbleSize() {
-    if (this.miniWorkspace.isDragging()) return;
+    if (
+      this.miniWorkspace.isDragging() &&
+      !this.miniWorkspace.keyboardMoveInProgress
+    )
+      return;
+
+    // Disable autolayout if a keyboard move is in progress to prevent the
+    // mutator bubble from jumping around.
+    this.autoLayout &&= !this.miniWorkspace.keyboardMoveInProgress;
 
     const currSize = this.getSize();
     const newSize = this.calculateWorkspaceSize();

core/bubbles/textinput_bubble.ts

@@ -173,6 +173,11 @@ export class TextInputBubble extends Bubble {
     browserEvents.conditionalBind(textArea, 'wheel', this, (e: Event) => {
       e.stopPropagation();
     });
+    // Don't let the pointerdown event get to the workspace.
+    browserEvents.conditionalBind(textArea, 'pointerdown', this, (e: Event) => {
+      e.stopPropagation();
+      touch.clearTouchIdentifier();
+    });
 
     browserEvents.conditionalBind(textArea, 'change', this, this.onTextChange);
   }

core/clipboard.ts

@@ -9,6 +9,7 @@
 import {BlockCopyData, BlockPaster} from './clipboard/block_paster.js';
 import * as registry from './clipboard/registry.js';
 import type {ICopyData, ICopyable} from './interfaces/i_copyable.js';
+import {isSelectable} from './interfaces/i_selectable.js';
 import * as globalRegistry from './registry.js';
 import {Coordinate} from './utils/coordinate.js';
 import {WorkspaceSvg} from './workspace_svg.js';
@@ -18,18 +19,119 @@ let stashedCopyData: ICopyData | null = null;
 
 let stashedWorkspace: WorkspaceSvg | null = null;
 
+let stashedCoordinates: Coordinate | undefined = undefined;
+
 /**
- * Private version of copy for stubbing in tests.
+ * Copy a copyable item, and record its data and the workspace it was
+ * copied from.
+ *
+ * This function does not perform any checks to ensure the copy
+ * should be allowed, e.g. to ensure the block is deletable. Such
+ * checks should be done before calling this function.
+ *
+ * Note that if the copyable item is not an `ISelectable` or its
+ * `workspace` property is not a `WorkspaceSvg`, the copy will be
+ * successful, but there will be no saved workspace data. This will
+ * impact the ability to paste the data unless you explictily pass
+ * a workspace into the paste method.
+ *
+ * @param toCopy item to copy.
+ * @param location location to save as a potential paste location.
+ * @returns the copied data if copy was successful, otherwise null.
  */
-function copyInternal<T extends ICopyData>(toCopy: ICopyable<T>): T | null {
+export function copy<T extends ICopyData>(
+  toCopy: ICopyable<T>,
+  location?: Coordinate,
+): T | null {
   const data = toCopy.toCopyData();
   stashedCopyData = data;
-  stashedWorkspace = (toCopy as any).workspace ?? null;
+  if (isSelectable(toCopy) && toCopy.workspace instanceof WorkspaceSvg) {
+    stashedWorkspace = toCopy.workspace;
+  } else {
+    stashedWorkspace = null;
+  }
+
+  stashedCoordinates = location;
   return data;
 }
 
 /**
- * Paste a pasteable element into the workspace.
+ * Gets the copy data for the last item copied. This is useful if you
+ * are implementing custom copy/paste behavior. If you want the default
+ * behavior, just use the copy and paste methods directly.
+ *
+ * @returns copy data for the last item copied, or null if none set.
+ */
+export function getLastCopiedData() {
+  return stashedCopyData;
+}
+
+/**
+ * Sets the last copied item. You should call this method if you implement
+ * custom copy behavior, so that other callers are working with the correct
+ * data. This method is called automatically if you use the built-in copy
+ * method.
+ *
+ * @param copyData copy data for the last item copied.
+ */
+export function setLastCopiedData(copyData: ICopyData) {
+  stashedCopyData = copyData;
+}
+
+/**
+ * Gets the workspace that was last copied from. This is useful if you
+ * are implementing custom copy/paste behavior and want to paste on the
+ * same workspace that was copied from. If you want the default behavior,
+ * just use the copy and paste methods directly.
+ *
+ * @returns workspace that was last copied from, or null if none set.
+ */
+export function getLastCopiedWorkspace() {
+  return stashedWorkspace;
+}
+
+/**
+ * Sets the workspace that was last copied from. You should call this method
+ * if you implement custom copy behavior, so that other callers are working
+ * with the correct data. This method is called automatically if you use the
+ * built-in copy method.
+ *
+ * @param workspace workspace that was last copied from.
+ */
+export function setLastCopiedWorkspace(workspace: WorkspaceSvg) {
+  stashedWorkspace = workspace;
+}
+
+/**
+ * Gets the location that was last copied from. This is useful if you
+ * are implementing custom copy/paste behavior. If you want the
+ * default behavior, just use the copy and paste methods directly.
+ *
+ * @returns last saved location, or null if none set.
+ */
+export function getLastCopiedLocation() {
+  return stashedCoordinates;
+}
+
+/**
+ * Sets the location that was last copied from. You should call this method
+ * if you implement custom copy behavior, so that other callers are working
+ * with the correct data. This method is called automatically if you use the
+ * built-in copy method.
+ *
+ * @param location last saved location, which can be used to paste at.
+ */
+export function setLastCopiedLocation(location: Coordinate) {
+  stashedCoordinates = location;
+}
+
+/**
+ * Paste a pasteable element into the given workspace.
+ *
+ * This function does not perform any checks to ensure the paste
+ * is allowed, e.g. that the workspace is rendered or the block
+ * is pasteable. Such checks should be done before calling this
+ * function.
  *
  * @param copyData The data to paste into the workspace.
  * @param workspace The workspace to paste the data into.
@@ -43,7 +145,7 @@ export function paste<T extends ICopyData>(
 ): ICopyable<T> | null;
 
 /**
- * Pastes the last copied ICopyable into the workspace.
+ * Pastes the last copied ICopyable into the last copied-from workspace.
  *
  * @returns the pasted thing if the paste was successful, null otherwise.
  */
@@ -65,7 +167,7 @@ export function paste<T extends ICopyData>(
 ): ICopyable<ICopyData> | null {
   if (!copyData || !workspace) {
     if (!stashedCopyData || !stashedWorkspace) return null;
-    return pasteFromData(stashedCopyData, stashedWorkspace);
+    return pasteFromData(stashedCopyData, stashedWorkspace, stashedCoordinates);
   }
   return pasteFromData(copyData, workspace, coordinate);
 }
@@ -85,31 +187,11 @@ function pasteFromData<T extends ICopyData>(
 ): ICopyable<T> | null {
   workspace = workspace.isMutator
     ? workspace
-    : (workspace.getRootWorkspace() ?? workspace);
+    : // Use the parent workspace if it exists (e.g. for pasting into flyouts)
+      (workspace.options.parentWorkspace ?? workspace);
   return (globalRegistry
     .getObject(globalRegistry.Type.PASTER, copyData.paster, false)
     ?.paste(copyData, workspace, coordinate) ?? null) as ICopyable<T> | null;
 }
 
-/**
- * Private version of duplicate for stubbing in tests.
- */
-function duplicateInternal<
-  U extends ICopyData,
-  T extends ICopyable<U> & IHasWorkspace,
->(toDuplicate: T): T | null {
-  const data = toDuplicate.toCopyData();
-  if (!data) return null;
-  return paste(data, toDuplicate.workspace) as T;
-}
-
-interface IHasWorkspace {
-  workspace: WorkspaceSvg;
-}
-
-export const TEST_ONLY = {
-  duplicateInternal,
-  copyInternal,
-};
-
 export {BlockCopyData, BlockPaster, registry};

core/comments.ts

@@ -4,6 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export {CollapseCommentBarButton} from './comments/collapse_comment_bar_button.js';
+export {CommentBarButton} from './comments/comment_bar_button.js';
+export {CommentEditor} from './comments/comment_editor.js';
 export {CommentView} from './comments/comment_view.js';
+export {DeleteCommentBarButton} from './comments/delete_comment_bar_button.js';
 export {RenderedWorkspaceComment} from './comments/rendered_workspace_comment.js';
 export {WorkspaceComment} from './comments/workspace_comment.js';