feat: Add a method for creating flyout options (#8829)

Author: RoboErikG

core/toolbox/toolbox.ts

@@ -13,7 +13,6 @@
 
 // Unused import preserved for side-effects. Remove if unneeded.
 import {BlockSvg} from '../block_svg.js';
-import type {BlocklyOptions} from '../blockly_options.js';
 import * as browserEvents from '../browser_events.js';
 import * as common from '../common.js';
 import {ComponentManager} from '../component_manager.js';
@@ -33,7 +32,6 @@ import {isSelectableToolboxItem} from '../interfaces/i_selectable_toolbox_item.j
 import type {IStyleable} from '../interfaces/i_styleable.js';
 import type {IToolbox} from '../interfaces/i_toolbox.js';
 import type {IToolboxItem} from '../interfaces/i_toolbox_item.js';
-import {Options} from '../options.js';
 import * as registry from '../registry.js';
 import type {KeyboardShortcut} from '../shortcut_registry.js';
 import * as Touch from '../touch.js';
@@ -325,19 +323,7 @@ export class Toolbox
    */
   protected createFlyout_(): IFlyout {
     const workspace = this.workspace_;
-    // TODO (#4247): Look into adding a makeFlyout method to Blockly Options.
-    const workspaceOptions = new Options({
-      'parentWorkspace': workspace,
-      'rtl': workspace.RTL,
-      'oneBasedIndex': workspace.options.oneBasedIndex,
-      'horizontalLayout': workspace.horizontalLayout,
-      'renderer': workspace.options.renderer,
-      'rendererOverrides': workspace.options.rendererOverrides,
-      'modalInputs': workspace.options.modalInputs,
-      'move': {
-        'scrollbars': true,
-      },
-    } as BlocklyOptions);
+    const workspaceOptions = workspace.copyOptionsForFlyout();
     // Options takes in either 'end' or 'start'. This has already been parsed to
     // be either 0 or 1, so set it after.
     workspaceOptions.toolboxPosition = workspace.options.toolboxPosition;

core/trashcan.ts

@@ -12,7 +12,6 @@
 // Former goog.module ID: Blockly.Trashcan
 
 // Unused import preserved for side-effects. Remove if unneeded.
-import type {BlocklyOptions} from './blockly_options.js';
 import * as browserEvents from './browser_events.js';
 import {ComponentManager} from './component_manager.js';
 import {DeleteArea} from './delete_area.js';
@@ -26,7 +25,6 @@ import type {IDraggable} from './interfaces/i_draggable.js';
 import type {IFlyout} from './interfaces/i_flyout.js';
 import type {IPositionable} from './interfaces/i_positionable.js';
 import type {UiMetrics} from './metrics_manager.js';
-import {Options} from './options.js';
 import * as uiPosition from './positionable_helpers.js';
 import * as registry from './registry.js';
 import type * as blocks from './serialization/blocks.js';
@@ -103,18 +101,7 @@ export class Trashcan
     }
 
     // Create flyout options.
-    const flyoutWorkspaceOptions = new Options({
-      'scrollbars': true,
-      'parentWorkspace': this.workspace,
-      'rtl': this.workspace.RTL,
-      'oneBasedIndex': this.workspace.options.oneBasedIndex,
-      'renderer': this.workspace.options.renderer,
-      'rendererOverrides': this.workspace.options.rendererOverrides,
-      'modalInputs': this.workspace.options.modalInputs,
-      'move': {
-        'scrollbars': true,
-      },
-    } as BlocklyOptions);
+    const flyoutWorkspaceOptions = this.workspace.copyOptionsForFlyout();
     // Create vertical or horizontal flyout.
     if (this.workspace.horizontalLayout) {
       flyoutWorkspaceOptions.toolboxPosition =

core/workspace_svg.ts

@@ -939,25 +939,36 @@ export class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg {
   }
 
   /**
-   * Add a flyout element in an element with the given tag name.
+   * Creates a new set of options from this workspace's options with just the
+   * values that are relevant to a flyout.
    *
-   * @param tagName What type of tag the flyout belongs in.
-   * @returns The element containing the flyout DOM.
-   * @internal
+   * @returns A subset of this workspace's options.
    */
-  addFlyout(tagName: string | Svg<SVGSVGElement> | Svg<SVGGElement>): Element {
-    const workspaceOptions = new Options({
+  copyOptionsForFlyout(): Options {
+    return new Options({
       'parentWorkspace': this,
       'rtl': this.RTL,
       'oneBasedIndex': this.options.oneBasedIndex,
       'horizontalLayout': this.horizontalLayout,
       'renderer': this.options.renderer,
       'rendererOverrides': this.options.rendererOverrides,
+      'plugins': this.options.plugins,
       'modalInputs': this.options.modalInputs,
       'move': {
         'scrollbars': true,
       },
     } as BlocklyOptions);
+  }
+
+  /**
+   * Add a flyout element in an element with the given tag name.
+   *
+   * @param tagName What type of tag the flyout belongs in.
+   * @returns The element containing the flyout DOM.
+   * @internal
+   */
+  addFlyout(tagName: string | Svg<SVGSVGElement> | Svg<SVGGElement>): Element {
+    const workspaceOptions = this.copyOptionsForFlyout();
     workspaceOptions.toolboxPosition = this.options.toolboxPosition;
     if (this.horizontalLayout) {
       const HorizontalFlyout = registry.getClassFromOptions(