chore: Update to latest versions of Blockly and related packages

package.json

@@ -29,8 +29,8 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "@blockly/continuous-toolbox": "^7.0.0-beta.1",
-    "@blockly/field-colour": "^4.0.2",
-    "blockly": "^12.0.0-beta.1"
+    "@blockly/continuous-toolbox": "^7.0.1",
+    "@blockly/field-colour": "^6.0.1",
+    "blockly": "^12.1.0"
   }
 }

src/checkbox_bubble.ts

@@ -243,6 +243,27 @@ export class CheckboxBubble
     Blockly.browserEvents.unbind(this.clickListener);
   }
 
+  /** See IFocusableNode.getFocusableElement. */
+  getFocusableElement(): HTMLElement | SVGElement {
+    return this.svgRoot;
+  }
+
+  /** See IFocusableNode.getFocusableTree. */
+  getFocusableTree(): Blockly.IFocusableTree {
+    return this.sourceBlock.workspace;
+  }
+
+  /** See IFocusableNode.onNodeFocus. */
+  onNodeFocus(): void {}
+
+  /** See IFocusableNode.onNodeBlur. */
+  onNodeBlur(): void {}
+
+  /** See IFocusableNode.canBeFocused. */
+  canBeFocused(): boolean {
+    return true;
+  }
+
   // These methods are required by the interfaces, but intentionally have no
   // implementation, largely because this bubble's location is fixed relative
   // to its block and is not draggable by the user.

src/fields/scratch_field_variable.ts

@@ -94,24 +94,25 @@ export class ScratchFieldVariable extends Blockly.FieldVariable {
    * @returns Array of variable names.
    */
   static dropdownCreate(this: ScratchFieldVariable): Blockly.MenuOption[] {
-    const options = super.dropdownCreate();
+    let options = super.dropdownCreate();
     const type = this.getDefaultType();
     if (type === Constants.BROADCAST_MESSAGE_VARIABLE_TYPE) {
       options.splice(-2, 2, [
         ScratchMsgs.translate("NEW_BROADCAST_MESSAGE"),
         Constants.NEW_BROADCAST_MESSAGE_ID,
       ]);
     } else if (type === Constants.LIST_VARIABLE_TYPE) {
-      for (const option of options) {
+      options = options.map((option) => {
         if (option[1] === Blockly.RENAME_VARIABLE_ID) {
-          option[0] = ScratchMsgs.translate("RENAME_LIST");
+          return [ScratchMsgs.translate("RENAME_LIST"), option[1]];
         } else if (option[1] === Blockly.DELETE_VARIABLE_ID) {
-          option[0] = ScratchMsgs.translate("DELETE_LIST").replace(
-            "%1",
-            this.getText()
-          );
+          return [
+            ScratchMsgs.translate("DELETE_LIST").replace("%1", this.getText()),
+            option[1],
+          ];
         }
-      }
+        return option;
+      });
     }
 
     return options;

src/flyout_checkbox_icon.ts

@@ -10,11 +10,15 @@ import { CheckboxBubble } from "./checkbox_bubble";
 /**
  * Invisible icon that exists solely to host the corresponding checkbox bubble.
  */
-export class FlyoutCheckboxIcon implements Blockly.IIcon, Blockly.IHasBubble {
+export class FlyoutCheckboxIcon
+  extends Blockly.icons.Icon
+  implements Blockly.IHasBubble
+{
   private checkboxBubble: CheckboxBubble;
   private type = new Blockly.icons.IconType("checkbox");
 
-  constructor(private sourceBlock: Blockly.BlockSvg) {
+  constructor(protected override sourceBlock: Blockly.BlockSvg) {
+    super(sourceBlock);
     if (this.sourceBlock.workspace.isFlyout) {
       this.checkboxBubble = new CheckboxBubble(this.sourceBlock);
     }
@@ -24,19 +28,11 @@ export class FlyoutCheckboxIcon implements Blockly.IIcon, Blockly.IHasBubble {
     return this.type;
   }
 
-  getWeight(): number {
-    return -1;
-  }
-
   getSize(): Blockly.utils.Size {
     // Awful hack to cancel out the default padding added to icons.
     return new Blockly.utils.Size(-8, 0);
   }
 
-  isShownWhenCollapsed(): boolean {
-    return false;
-  }
-
   isClickableInFlyout(): boolean {
     return false;
   }
@@ -55,25 +51,23 @@ export class FlyoutCheckboxIcon implements Blockly.IIcon, Blockly.IHasBubble {
 
   dispose() {
     this.checkboxBubble?.dispose();
+    super.dispose();
   }
 
   // These methods are required by the interfaces, but intentionally have no
   // implementation, largely because this icon has no visual representation.
-  applyColour() {}
-
-  hideForInsertionMarker() {}
-
-  updateEditable() {}
-
-  updateCollapsed() {}
-
-  setOffsetInBlock() {}
-
-  onClick() {}
 
   async setBubbleVisible(visible: boolean) {}
 
   initView(pointerDownListener: (e: PointerEvent) => void) {}
+
+  canBeFocused() {
+    return false;
+  }
+
+  getBubble() {
+    return this.checkboxBubble;
+  }
 }
 
 Blockly.registry.register(

src/scratch_comment_bubble.js → src/scratch_comment_bubble.ts

@@ -11,8 +11,17 @@ import * as Blockly from "blockly/core";
  * @implements {IBubble}
  * @implements {ISelectable}
  */
-export class ScratchCommentBubble extends Blockly.comments.CommentView {
-  constructor(sourceBlock) {
+export class ScratchCommentBubble
+  extends Blockly.comments.CommentView
+  implements Blockly.IBubble, Blockly.ISelectable
+{
+  id: string;
+  private sourceBlock: Blockly.BlockSvg;
+  private anchor?: Blockly.utils.Coordinate;
+  private anchorChain?: SVGLineElement;
+  private dragStartLocation?: Blockly.utils.Coordinate;
+
+  constructor(sourceBlock: Blockly.BlockSvg) {
     super(sourceBlock.workspace);
     this.sourceBlock = sourceBlock;
     this.disposing = false;
@@ -34,27 +43,29 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
       this.getSvgRoot(),
       "wheel",
       this,
-      (e) => {
+      (e: WheelEvent) => {
         e.stopPropagation();
       }
     );
   }
 
-  setDeleteStyle(enable) {}
+  setDeleteStyle(enable: boolean) {}
   showContextMenu() {}
-  setDragging(start) {}
+  setDragging(start: boolean) {}
   select() {}
   unselect() {}
 
   isMovable() {
     return true;
   }
 
-  moveDuringDrag(newLocation) {
+  moveDuringDrag(newLocation: Blockly.utils.Coordinate) {
     this.moveTo(newLocation);
   }
 
-  moveTo(xOrCoordinate, y) {
+  moveTo(xOrCoordinate: number, y: number): void;
+  moveTo(xOrCoordinate: Blockly.utils.Coordinate): void;
+  moveTo(xOrCoordinate: Blockly.utils.Coordinate | number, y?: number) {
     const destination =
       xOrCoordinate instanceof Blockly.utils.Coordinate
         ? xOrCoordinate
@@ -63,22 +74,22 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     this.redrawAnchorChain();
   }
 
-  startGesture(e) {
+  startGesture(e: PointerEvent) {
     const gesture = this.workspace.getGesture(e);
     if (gesture) {
-      gesture.handleCommentStart(e, this);
+      gesture.handleBubbleStart(e, this);
       Blockly.common.setSelected(this);
     }
   }
 
-  startDrag(event) {
+  startDrag(event: PointerEvent) {
     this.dragStartLocation = this.getRelativeToSurfaceXY();
     this.workspace.setResizesEnabled(false);
     this.workspace.getLayerManager()?.moveToDragLayer(this);
     Blockly.utils.dom.addClass(this.getSvgRoot(), "blocklyDragging");
   }
 
-  drag(newLocation, event) {
+  drag(newLocation: Blockly.utils.Coordinate, event: Event) {
     this.moveTo(newLocation);
   }
 
@@ -101,7 +112,7 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     this.moveTo(this.dragStartLocation);
   }
 
-  setAnchorLocation(newAnchor) {
+  setAnchorLocation(newAnchor: Blockly.utils.Coordinate) {
     const oldAnchor = this.anchor;
     const alreadyAnchored = !!this.anchor;
     this.anchor = newAnchor;
@@ -139,8 +150,8 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     if (!this.anchorChain) return;
 
     const location = this.getRelativeToSurfaceXY();
-    this.anchorChain.setAttribute("x1", this.anchor.x - location.x);
-    this.anchorChain.setAttribute("y1", this.anchor.y - location.y);
+    this.anchorChain.setAttribute("x1", `${this.anchor.x - location.x}`);
+    this.anchorChain.setAttribute("y1", `${this.anchor.y - location.y}`);
   }
 
   getId() {
@@ -166,4 +177,20 @@ export class ScratchCommentBubble extends Blockly.comments.CommentView {
     }
     super.dispose();
   }
+
+  getFocusableElement() {
+    return this.getSvgRoot();
+  }
+
+  getFocusableTree() {
+    return this.workspace;
+  }
+
+  onNodeFocus() {}
+
+  onNodeBlur() {}
+
+  canBeFocused() {
+    return true;
+  }
 }

src/scratch_comment_icon.ts

@@ -5,7 +5,7 @@
  */
 
 import * as Blockly from "blockly/core";
-import { ScratchCommentBubble } from "./scratch_comment_bubble.js";
+import { ScratchCommentBubble } from "./scratch_comment_bubble";
 
 interface CommentState {
   text: string;
@@ -196,11 +196,19 @@ export class ScratchCommentIcon
     this.commentBubble.setCollapsed(!visible);
   }
 
+  getBubble() {
+    return this.commentBubble;
+  }
+
   dispose() {
     this.commentBubble.dispose();
     super.dispose();
   }
 
+  canBeFocused() {
+    return false;
+  }
+
   /**
    * Fires a block comment create event corresponding to this icon's comment.
    */

src/status_indicator_label_flyout_inflater.ts

@@ -22,15 +22,15 @@ class StatusIndicatorLabelFlyoutInflater extends Blockly.LabelFlyoutInflater {
    */
   load(
     state: Blockly.utils.toolbox.LabelInfo,
-    flyoutWorkspace: Blockly.WorkspaceSvg
+    flyout: Blockly.IFlyout
   ): Blockly.FlyoutItem {
     const label = new StatusIndicatorLabel(
-      flyoutWorkspace,
-      flyoutWorkspace.targetWorkspace,
+      flyout.getWorkspace(),
+      flyout.targetWorkspace,
       state
     );
     label.show();
-    return new Blockly.FlyoutItem(label, STATUS_INDICATOR_LABEL_TYPE, true);
+    return new Blockly.FlyoutItem(label, STATUS_INDICATOR_LABEL_TYPE);
   }
 }