blockly 12.2.0-beta.0 → 12.3.0-beta.0

package/core/block.d.ts

@@ -544,7 +544,7 @@ export declare class Block {
      *
      * @yields A generator that can be used to iterate the fields on the block.
      */
-    getFields(): Generator<Field>;
+    getFields(): Generator<Field, undefined, void>;
     /**
      * Return all variables referenced by this block.
      *

package/core/block_svg.d.ts

@@ -361,9 +361,12 @@ export declare class BlockSvg extends Block implements IBoundedElement, IContext
     /**
      * Encode a block for copying.
      *
+     * @param addNextBlocks If true, copy subsequent blocks attached to this one
+     *     as well.
+     *
      * @returns Copy metadata, or null if the block is an insertion marker.
      */
-    toCopyData(): BlockCopyData | null;
+    toCopyData(addNextBlocks?: boolean): BlockCopyData | null;
     /**
      * Updates the colour of the block to match the block's state.
      *

package/core/bubbles/bubble.d.ts

@@ -4,7 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { IBubble } from '../interfaces/i_bubble.js';
+import type { IFocusableNode } from '../interfaces/i_focusable_node.js';
 import type { IFocusableTree } from '../interfaces/i_focusable_tree.js';
+import type { IHasBubble } from '../interfaces/i_has_bubble.js';
 import { ISelectable } from '../interfaces/i_selectable.js';
 import { Coordinate } from '../utils/coordinate.js';
 import { Rect } from '../utils/rect.js';
@@ -15,10 +17,11 @@ import { WorkspaceSvg } from '../workspace_svg.js';
  * bubble, where it has a "tail" that points to the block, and a "head" that
  * displays arbitrary svg elements.
  */
-export declare abstract class Bubble implements IBubble, ISelectable {
+export declare abstract class Bubble implements IBubble, ISelectable, IFocusableNode {
     readonly workspace: WorkspaceSvg;
     protected anchor: Coordinate;
     protected ownerRect?: Rect | undefined;
+    protected owner?: (IHasBubble & IFocusableNode) | undefined;
     /** The width of the border around the bubble. */
     static readonly BORDER_WIDTH = 6;
     /** Double the width of the border around the bubble. */
@@ -72,8 +75,9 @@ export declare abstract class Bubble implements IBubble, ISelectable {
      *     element that's represented by this bubble (as a focusable node). This
      *     element will have its ID overwritten. If not provided, the focusable
      *     element of this node will default to the bubble's SVG root.
+     * @param owner The object responsible for hosting/spawning this bubble.
      */
-    constructor(workspace: WorkspaceSvg, anchor: Coordinate, ownerRect?: Rect | undefined, overriddenFocusableElement?: SVGElement | HTMLElement);
+    constructor(workspace: WorkspaceSvg, anchor: Coordinate, ownerRect?: Rect | undefined, overriddenFocusableElement?: SVGElement | HTMLElement, owner?: (IHasBubble & IFocusableNode) | undefined);
     /** Dispose of this bubble. */
     dispose(): void;
     /**
@@ -107,6 +111,13 @@ export declare abstract class Bubble implements IBubble, ISelectable {
      * is focused.
      */
     private onMouseDown;
+    /**
+     * Handles key events when this bubble is focused. By default, closes the
+     * bubble on Escape.
+     *
+     * @param e The keyboard event to handle.
+     */
+    protected onKeyDown(e: KeyboardEvent): void;
     /** Positions the bubble relative to its anchor. Does not render its tail. */
     protected positionRelativeToAnchor(): void;
     /**
@@ -209,5 +220,9 @@ export declare abstract class Bubble implements IBubble, ISelectable {
     onNodeBlur(): void;
     /** See IFocusableNode.canBeFocused. */
     canBeFocused(): boolean;
+    /**
+     * Returns the object that owns/hosts this bubble, if any.
+     */
+    getOwner(): (IHasBubble & IFocusableNode) | undefined;
 }
 //# sourceMappingURL=bubble.d.ts.map

package/core/bubbles/textinput_bubble.d.ts

@@ -3,6 +3,9 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+import { CommentEditor } from '../comments/comment_editor.js';
+import type { IFocusableNode } from '../interfaces/i_focusable_node.js';
+import type { IHasBubble } from '../interfaces/i_has_bubble.js';
 import { Coordinate } from '../utils/coordinate.js';
 import { Rect } from '../utils/rect.js';
 import { Size } from '../utils/size.js';
@@ -16,10 +19,7 @@ export declare class TextInputBubble extends Bubble {
     readonly workspace: WorkspaceSvg;
     protected anchor: Coordinate;
     protected ownerRect?: Rect | undefined;
-    /** The root of the elements specific to the text element. */
-    private inputRoot;
-    /** The text input area element. */
-    private textArea;
+    protected owner?: (IHasBubble & IFocusableNode) | undefined;
     /** The group containing the lines indicating the bubble is resizable. */
     private resizeGroup;
     /**
@@ -32,27 +32,26 @@ export declare class TextInputBubble extends Bubble {
      * resize group.
      */
     private resizePointerMoveListener;
-    /** Functions listening for changes to the text of this bubble. */
-    private textChangeListeners;
     /** Functions listening for changes to the size of this bubble. */
     private sizeChangeListeners;
     /** Functions listening for changes to the location of this bubble. */
     private locationChangeListeners;
-    /** The text of this bubble. */
-    private text;
     /** The default size of this bubble, including borders. */
     private readonly DEFAULT_SIZE;
     /** The minimum size of this bubble, including borders. */
     private readonly MIN_SIZE;
     private editable;
+    /** View responsible for supporting text editing. */
+    private editor;
     /**
      * @param workspace The workspace this bubble belongs to.
      * @param anchor The anchor location of the thing this bubble is attached to.
      *     The tail of the bubble will point to this location.
      * @param ownerRect An optional rect we don't want the bubble to overlap with
      *     when automatically positioning.
+     * @param owner The object that owns/hosts this bubble.
      */
-    constructor(workspace: WorkspaceSvg, anchor: Coordinate, ownerRect?: Rect | undefined);
+    constructor(workspace: WorkspaceSvg, anchor: Coordinate, ownerRect?: Rect | undefined, owner?: (IHasBubble & IFocusableNode) | undefined);
     /** @returns the text of this bubble. */
     getText(): string;
     /** Sets the text of this bubble. Calls change listeners. */
@@ -67,12 +66,6 @@ export declare class TextInputBubble extends Bubble {
     addSizeChangeListener(listener: () => void): void;
     /** Adds a change listener to be notified when this bubble's location changes. */
     addLocationChangeListener(listener: () => void): void;
-    /** Creates and returns the editable text area for this bubble's editor. */
-    private static createTextArea;
-    /** Creates and returns the UI container element for this bubble's editor. */
-    private createEditor;
-    /** Binds events to the text area element. */
-    private bindTextAreaEvents;
     /** Creates the resize handler elements and binds events to them. */
     private createResizeHandle;
     /**
@@ -95,11 +88,15 @@ export declare class TextInputBubble extends Bubble {
     private onResizePointerUp;
     /** Handles pointer move events on the resize target. */
     private onResizePointerMove;
-    /** Handles a text change event for the text area. Calls event listeners. */
-    private onTextChange;
     /** Handles a size change event for the text area. Calls event listeners. */
     private onSizeChange;
     /** Handles a location change event for the text area. Calls event listeners. */
     private onLocationChange;
+    /**
+     * Returns the text editor component of this bubble.
+     *
+     * @internal
+     */
+    getEditor(): CommentEditor;
 }
 //# sourceMappingURL=textinput_bubble.d.ts.map

package/core/clipboard.d.ts

@@ -9,11 +9,83 @@ import type { ICopyData, ICopyable } from './interfaces/i_copyable.js';
 import { Coordinate } from './utils/coordinate.js';
 import { WorkspaceSvg } from './workspace_svg.js';
 /**
- * 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.
+ */
+export declare function copy<T extends ICopyData>(toCopy: ICopyable<T>, location?: Coordinate): T | null;
+/**
+ * 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 declare function getLastCopiedData(): ICopyable.ICopyData | null;
+/**
+ * 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 declare function setLastCopiedData(copyData: ICopyData): void;
+/**
+ * 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.
  */
-declare function copyInternal<T extends ICopyData>(toCopy: ICopyable<T>): T | null;
+export declare function getLastCopiedWorkspace(): WorkspaceSvg | null;
 /**
- * Paste a pasteable element into the workspace.
+ * 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 declare function setLastCopiedWorkspace(workspace: WorkspaceSvg): void;
+/**
+ * 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 declare function getLastCopiedLocation(): Coordinate | undefined;
+/**
+ * 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 declare function setLastCopiedLocation(location: Coordinate): void;
+/**
+ * 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.
@@ -22,21 +94,10 @@ declare function copyInternal<T extends ICopyData>(toCopy: ICopyable<T>): T | nu
  */
 export declare function paste<T extends ICopyData>(copyData: T, workspace: WorkspaceSvg, coordinate?: Coordinate): 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.
  */
 export declare function paste(): ICopyable<ICopyData> | null;
-/**
- * Private version of duplicate for stubbing in tests.
- */
-declare function duplicateInternal<U extends ICopyData, T extends ICopyable<U> & IHasWorkspace>(toDuplicate: T): T | null;
-interface IHasWorkspace {
-    workspace: WorkspaceSvg;
-}
-export declare const TEST_ONLY: {
-    duplicateInternal: typeof duplicateInternal;
-    copyInternal: typeof copyInternal;
-};
 export { BlockCopyData, BlockPaster, registry };
 //# sourceMappingURL=clipboard.d.ts.map

package/core/comments/collapse_comment_bar_button.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { WorkspaceSvg } from '../workspace_svg.js';
+import { CommentBarButton } from './comment_bar_button.js';
+import type { CommentView } from './comment_view.js';
+/**
+ * Magic string appended to the comment ID to create a unique ID for this button.
+ */
+export declare const COMMENT_COLLAPSE_BAR_BUTTON_FOCUS_IDENTIFIER = "_collapse_bar_button";
+/**
+ * Button that toggles the collapsed state of a comment.
+ */
+export declare class CollapseCommentBarButton extends CommentBarButton {
+    protected readonly id: string;
+    protected readonly workspace: WorkspaceSvg;
+    protected readonly container: SVGGElement;
+    protected readonly commentView: CommentView;
+    /**
+     * Opaque ID used to unbind event handlers during disposal.
+     */
+    private readonly bindId;
+    /**
+     * SVG image displayed on this button.
+     */
+    protected readonly icon: SVGImageElement;
+    /**
+     * Creates a new CollapseCommentBarButton instance.
+     *
+     * @param id The ID of this button's parent comment.
+     * @param workspace The workspace this button's parent comment is displayed on.
+     * @param container An SVG group that this button should be a child of.
+     */
+    constructor(id: string, workspace: WorkspaceSvg, container: SVGGElement, commentView: CommentView);
+    /**
+     * Disposes of this button.
+     */
+    dispose(): void;
+    /**
+     * Adjusts the positioning of this button within its container.
+     */
+    reposition(): void;
+    /**
+     * Toggles the collapsed state of the parent comment.
+     *
+     * @param e The event that triggered this action.
+     */
+    performAction(e?: Event): void;
+}
+//# sourceMappingURL=collapse_comment_bar_button.d.ts.map

package/core/comments/comment_bar_button.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { IFocusableNode } from '../interfaces/i_focusable_node.js';
+import { Rect } from '../utils/rect.js';
+import type { WorkspaceSvg } from '../workspace_svg.js';
+import type { CommentView } from './comment_view.js';
+/**
+ * Button displayed on a comment's top bar.
+ */
+export declare abstract class CommentBarButton implements IFocusableNode {
+    protected readonly id: string;
+    protected readonly workspace: WorkspaceSvg;
+    protected readonly container: SVGGElement;
+    protected readonly commentView: CommentView;
+    /**
+     * SVG image displayed on this button.
+     */
+    protected abstract readonly icon: SVGImageElement;
+    /**
+     * Creates a new CommentBarButton instance.
+     *
+     * @param id The ID of this button's parent comment.
+     * @param workspace The workspace this button's parent comment is on.
+     * @param container An SVG group that this button should be a child of.
+     */
+    constructor(id: string, workspace: WorkspaceSvg, container: SVGGElement, commentView: CommentView);
+    /**
+     * Returns whether or not this button is currently visible.
+     */
+    isVisible(): boolean;
+    /**
+     * Returns the parent comment view of this comment bar button.
+     */
+    getCommentView(): CommentView;
+    /** Adjusts the position of this button within its parent container. */
+    abstract reposition(): void;
+    /** Perform the action this button should take when it is acted on. */
+    abstract performAction(e?: Event): void;
+    /**
+     * Returns the dimensions of this button in workspace coordinates.
+     *
+     * @param includeMargin True to include the margin when calculating the size.
+     * @returns The size of this button.
+     */
+    getSize(includeMargin?: boolean): Rect;
+    /** Returns the margin in workspace coordinates surrounding this button. */
+    getMargin(): number;
+    /** Returns a DOM element representing this button that can receive focus. */
+    getFocusableElement(): SVGImageElement;
+    /** Returns the workspace this button is a child of. */
+    getFocusableTree(): WorkspaceSvg;
+    /** Called when this button's focusable DOM element gains focus. */
+    onNodeFocus(): void;
+    /** Called when this button's focusable DOM element loses focus. */
+    onNodeBlur(): void;
+    /** Returns whether this button can be focused. True if it is visible. */
+    canBeFocused(): boolean;
+}
+//# sourceMappingURL=comment_bar_button.d.ts.map

package/core/comments/comment_view.d.ts

@@ -8,23 +8,24 @@ import { IRenderedElement } from '../interfaces/i_rendered_element.js';
 import { Coordinate } from '../utils/coordinate.js';
 import { Size } from '../utils/size.js';
 import { WorkspaceSvg } from '../workspace_svg.js';
+import { CommentBarButton } from './comment_bar_button.js';
 export declare class CommentView implements IRenderedElement {
     readonly workspace: WorkspaceSvg;
-    private commentId?;
+    readonly commentId: string;
     /** The root group element of the comment view. */
     private svgRoot;
     /**
-     * The svg rect element that we use to create a hightlight around the comment.
+     * The SVG rect element that we use to create a highlight around the comment.
      */
     private highlightRect;
     /** The group containing all of the top bar elements. */
     private topBarGroup;
     /** The rect background for the top bar. */
     private topBarBackground;
-    /** The delete icon that goes in the top bar. */
-    private deleteIcon;
-    /** The foldout icon that goes in the top bar. */
-    private foldoutIcon;
+    /** The delete button that goes in the top bar. */
+    private deleteButton;
+    /** The foldout button that goes in the top bar. */
+    private foldoutButton;
     /** The text element that goes in the top bar. */
     private textPreview;
     /** The actual text node in the text preview. */
@@ -65,7 +66,7 @@ export declare class CommentView implements IRenderedElement {
     private preResizeSize?;
     /** The default size of newly created comments. */
     static defaultCommentSize: Size;
-    constructor(workspace: WorkspaceSvg, commentId?: string | undefined);
+    constructor(workspace: WorkspaceSvg, commentId: string);
     /**
      * Creates the rect we use for highlighting the comment when it's selected.
      */
@@ -112,22 +113,10 @@ export declare class CommentView implements IRenderedElement {
      * The minimum height is based on the height of the top bar.
      */
     private calcMinSize;
-    /** Calculates the margin that should exist around the delete icon. */
-    private calcDeleteMargin;
-    /** Calculates the margin that should exist around the foldout icon. */
-    private calcFoldoutMargin;
     /** Updates the size of the highlight rect to reflect the new size. */
     private updateHighlightRect;
     /** Updates the size of the top bar to reflect the new size. */
     private updateTopBarSize;
-    /**
-     * Updates the position of the delete icon elements to reflect the new size.
-     */
-    private updateDeleteIconPosition;
-    /**
-     * Updates the position of the foldout icon elements to reflect the new size.
-     */
-    private updateFoldoutIconPosition;
     /**
      * Updates the size and position of the text preview elements to reflect the new size.
      */
@@ -170,11 +159,6 @@ export declare class CommentView implements IRenderedElement {
     addOnCollapseListener(listener: (newCollapse: boolean) => void): void;
     /** Removes the given listener from the list of on collapse listeners. */
     removeOnCollapseListener(listener: () => void): void;
-    /**
-     * Toggles the collapsedness of the block when we receive a pointer down
-     * event on the foldout icon.
-     */
-    private onFoldoutDown;
     /** Returns true if the comment is currently editable. */
     isEditable(): boolean;
     /** Sets the editability of the comment. */
@@ -202,7 +186,7 @@ export declare class CommentView implements IRenderedElement {
     /** Truncates the text to fit within the top view. */
     private truncateText;
     /** Brings the workspace comment to the front of its layer. */
-    private bringToFront;
+    bringToFront(): void;
     /**
      * Handles disposing of the comment when we get a pointer down event on the
      * delete icon.
@@ -221,5 +205,9 @@ export declare class CommentView implements IRenderedElement {
     addDisposeListener(listener: () => void): void;
     /** Removes the given listener from the list of disposal listeners. */
     removeDisposeListener(listener: () => void): void;
+    /**
+     * @internal
+     */
+    getCommentBarButtons(): CommentBarButton[];
 }
 //# sourceMappingURL=comment_view.d.ts.map

package/core/comments/delete_comment_bar_button.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import type { WorkspaceSvg } from '../workspace_svg.js';
+import { CommentBarButton } from './comment_bar_button.js';
+import type { CommentView } from './comment_view.js';
+/**
+ * Magic string appended to the comment ID to create a unique ID for this button.
+ */
+export declare const COMMENT_DELETE_BAR_BUTTON_FOCUS_IDENTIFIER = "_delete_bar_button";
+/**
+ * Button that deletes a comment.
+ */
+export declare class DeleteCommentBarButton extends CommentBarButton {
+    protected readonly id: string;
+    protected readonly workspace: WorkspaceSvg;
+    protected readonly container: SVGGElement;
+    protected readonly commentView: CommentView;
+    /**
+     * Opaque ID used to unbind event handlers during disposal.
+     */
+    private readonly bindId;
+    /**
+     * SVG image displayed on this button.
+     */
+    protected readonly icon: SVGImageElement;
+    /**
+     * Creates a new DeleteCommentBarButton instance.
+     *
+     * @param id The ID of this button's parent comment.
+     * @param workspace The workspace this button's parent comment is shown on.
+     * @param container An SVG group that this button should be a child of.
+     */
+    constructor(id: string, workspace: WorkspaceSvg, container: SVGGElement, commentView: CommentView);
+    /**
+     * Disposes of this button.
+     */
+    dispose(): void;
+    /**
+     * Adjusts the positioning of this button within its container.
+     */
+    reposition(): void;
+    /**
+     * Deletes parent comment.
+     *
+     * @param e The event that triggered this action.
+     */
+    performAction(e?: Event): void;
+}
+//# sourceMappingURL=delete_comment_bar_button.d.ts.map

package/core/comments.d.ts

@@ -3,8 +3,11 @@
  * Copyright 2024 Google LLC
  * 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';
 //# sourceMappingURL=comments.d.ts.map

package/core/field_input.d.ts

@@ -48,8 +48,8 @@ export declare abstract class FieldInput<T extends InputTypes> extends Field<str
     protected valueWhenEditorWasOpened_: string | T | null;
     /** Key down event data. */
     private onKeyDownWrapper;
-    /** Key input event data. */
-    private onKeyInputWrapper;
+    /** Input element input event data. */
+    private onInputWrapper;
     /**
      * Whether the field should consider the whole parent block to be its click
      * target.
@@ -204,7 +204,7 @@ export declare abstract class FieldInput<T extends InputTypes> extends Field<str
     /**
      * Handle a change to the editor.
      *
-     * @param _e Keyboard event.
+     * @param _e InputEvent.
      */
     private onHtmlInputChange;
     /**

package/core/icons/comment_icon.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import type { Block } from '../block.js';
-import type { IBubble } from '../interfaces/i_bubble.js';
+import { TextInputBubble } from '../bubbles/textinput_bubble.js';
 import type { IHasBubble } from '../interfaces/i_has_bubble.js';
 import type { ISerializable } from '../interfaces/i_serializable.js';
 import { Coordinate } from '../utils.js';
@@ -34,7 +34,7 @@ export declare class CommentIcon extends Icon implements IHasBubble, ISerializab
     /**
      * The visibility of the bubble for this comment.
      *
-     * This is used to track what the visibile state /should/ be, not necessarily
+     * This is used to track what the visible state /should/ be, not necessarily
      * what it currently /is/. E.g. sometimes this will be true, but the block
      * hasn't been rendered yet, so the bubble will not currently be visible.
      */
@@ -94,7 +94,7 @@ export declare class CommentIcon extends Icon implements IHasBubble, ISerializab
     bubbleIsVisible(): boolean;
     setBubbleVisible(visible: boolean): Promise<void>;
     /** See IHasBubble.getBubble. */
-    getBubble(): IBubble | null;
+    getBubble(): TextInputBubble | null;
     /**
      * Shows the editable text bubble for this comment, and adds change listeners
      * to update the state of this icon in response to changes in the bubble.

package/core/insertion_marker_previewer.d.ts

@@ -6,6 +6,7 @@
 import { BlockSvg } from './block_svg.js';
 import { IConnectionPreviewer } from './interfaces/i_connection_previewer.js';
 import { RenderedConnection } from './rendered_connection.js';
+import * as blocks from './serialization/blocks.js';
 export declare class InsertionMarkerPreviewer implements IConnectionPreviewer {
     private readonly workspace;
     private fadedBlock;
@@ -36,6 +37,16 @@ export declare class InsertionMarkerPreviewer implements IConnectionPreviewer {
     previewConnection(draggedConn: RenderedConnection, staticConn: RenderedConnection): void;
     private shouldUseMarkerPreview;
     private previewMarker;
+    /**
+     * Transforms the given block into a JSON representation used to construct an
+     * insertion marker.
+     *
+     * @param block The block to serialize and use as an insertion marker.
+     * @returns A JSON-formatted string corresponding to a serialized
+     *     representation of the given block suitable for use as an insertion
+     *     marker.
+     */
+    protected serializeBlockToInsertionMarker(block: BlockSvg): blocks.State;
     private createInsertionMarker;
     /**
      * Gets the connection on the marker block that matches the original

package/core/interfaces/i_variable_map.d.ts

@@ -34,7 +34,7 @@ export interface IVariableMap<T extends IVariableModel<IVariableState>> {
      * Creates a new variable with the given name. If ID is not specified, the
      * variable map should create one. Returns the new variable.
      */
-    createVariable(name: string, id?: string, type?: string | null): T;
+    createVariable(name: string, type?: string, id?: string | null): T;
     addVariable(variable: T): void;
     /**
      * Changes the name of the given variable to the name provided and returns the