feat: Allow passing HTML elements to display in toasts.

Author: gonfunko

src/html_toast.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly/core';
+
+/**
+ * Configuration options for toasts.
+ */
+interface HtmlToastOptions extends Blockly.ToastOptions {
+  element?: HTMLElement;
+}
+
+/**
+ * Custom toast implementation that supports HTML elements in toast messages.
+ */
+class HtmlToast extends Blockly.Toast {
+  /**
+   * Creates the body of the toast for display.
+   *
+   * @param workspace The workspace the toast will be displayed on.
+   * @param options Configuration options for toast appearance/behavior.
+   * @returns The body for the toast.
+   */
+  protected static override createDom(
+    workspace: Blockly.WorkspaceSvg,
+    options: Blockly.ToastOptions,
+  ) {
+    const dom = super.createDom(workspace, options);
+    const contents = dom.querySelector('div');
+    if (
+      contents &&
+      'element' in options &&
+      options.element instanceof HTMLElement
+    ) {
+      contents.innerHTML = '';
+      contents.appendChild(options.element);
+    }
+    return dom;
+  }
+}
+
+/**
+ * Registers HtmlToast as the default toast implementation for Blockly. */
+export function registerHtmlToast() {
+  Blockly.dialog.setToast(HtmlToast.show.bind(HtmlToast));
+}

src/index.ts

@@ -7,6 +7,7 @@
 import * as Blockly from 'blockly/core';
 import {NavigationController} from './navigation_controller';
 import {enableBlocksOnDrag} from './disabled_blocks';
+import {registerHtmlToast} from './html_toast';
 
 /** Plugin for keyboard navigation. */
 export class KeyboardNavigation {
@@ -82,6 +83,8 @@ export class KeyboardNavigation {
     });
     workspace.getSvgGroup().appendChild(this.workspaceFocusRing);
     this.resizeWorkspaceRings();
+
+    registerHtmlToast();
   }
 
   private resizeWorkspaceRings() {