feat: Toolbox-Search add support for preset blocks (#2594)

* feat: Toolbox-Search add support for preset blocks

* Run formater

Author: TannerGabriel

plugins/toolbox-search/src/block_searcher.ts

@@ -10,8 +10,10 @@ import * as Blockly from 'blockly/core';
  * A class that provides methods for indexing and searching blocks.
  */
 export class BlockSearcher {
-  private blockCreationWorkspace = new Blockly.Workspace();
-  private trigramsToBlocks = new Map<string, Set<string>>();
+  private trigramsToBlocks = new Map<
+    string,
+    Set<Blockly.utils.toolbox.BlockInfo>
+  >();
 
   /**
    * Populates the cached map of trigrams to the blocks they correspond to.
@@ -21,17 +23,19 @@ export class BlockSearcher {
    * indexes their types and human-readable text, and cleans up after
    * itself.
    *
-   * @param blockTypes A list of block types to index.
+   * @param blockInfos A list of blocks to index.
    */
-  indexBlocks(blockTypes: string[]) {
+  indexBlocks(blockInfos: Blockly.utils.toolbox.BlockInfo[]) {
     const blockCreationWorkspace = new Blockly.Workspace();
-    blockTypes.forEach((blockType) => {
-      const block = blockCreationWorkspace.newBlock(blockType);
-      this.indexBlockText(blockType.replaceAll('_', ' '), blockType);
+    blockInfos.forEach((blockInfo) => {
+      const type = blockInfo.type;
+      if (!type || type === '') return;
+      const block = blockCreationWorkspace.newBlock(type);
+      this.indexBlockText(type.replaceAll('_', ' '), blockInfo);
       block.inputList.forEach((input) => {
         input.fieldRow.forEach((field) => {
-          this.indexDropdownOption(field, blockType);
-          this.indexBlockText(field.getText(), blockType);
+          this.indexDropdownOption(field, blockInfo);
+          this.indexBlockText(field.getText(), blockInfo);
         });
       });
     });
@@ -41,15 +45,18 @@ export class BlockSearcher {
    * Check if the field is a dropdown, and index every text in the option
    *
    * @param field We need to check the type of field
-   * @param blockType The block type to associate the trigrams with.
+   * @param block The block to associate the trigrams with.
    */
-  private indexDropdownOption(field: Blockly.Field, blockType: string) {
+  private indexDropdownOption(
+    field: Blockly.Field,
+    block: Blockly.utils.toolbox.BlockInfo,
+  ) {
     if (field instanceof Blockly.FieldDropdown) {
       field.getOptions(true).forEach((option) => {
         if (typeof option[0] === 'string') {
-          this.indexBlockText(option[0], blockType);
+          this.indexBlockText(option[0], block);
         } else if ('alt' in option[0]) {
-          this.indexBlockText(option[0].alt, blockType);
+          this.indexBlockText(option[0].alt, block);
         }
       });
     }
@@ -59,13 +66,16 @@ export class BlockSearcher {
    * Filters the available blocks based on the current query string.
    *
    * @param query The text to use to match blocks against.
-   * @returns A list of block types matching the query.
+   * @returns A list of blocks matching the query.
    */
-  blockTypesMatching(query: string): string[] {
+  blockTypesMatching(query: string): Blockly.utils.toolbox.BlockInfo[] {
     return [
       ...this.generateTrigrams(query)
         .map((trigram) => {
-          return this.trigramsToBlocks.get(trigram) ?? new Set<string>();
+          return (
+            this.trigramsToBlocks.get(trigram) ??
+            new Set<Blockly.utils.toolbox.BlockInfo>()
+          );
         })
         .reduce((matches, current) => {
           return this.getIntersection(matches, current);
@@ -76,15 +86,17 @@ export class BlockSearcher {
 
   /**
    * Generates trigrams for the given text and associates them with the given
-   * block type.
+   * block.
    *
    * @param text The text to generate trigrams of.
-   * @param blockType The block type to associate the trigrams with.
+   * @param block The block to associate the trigrams with.
    */
-  private indexBlockText(text: string, blockType: string) {
+  private indexBlockText(text: string, block: Blockly.utils.toolbox.BlockInfo) {
     this.generateTrigrams(text).forEach((trigram) => {
-      const blockSet = this.trigramsToBlocks.get(trigram) ?? new Set<string>();
-      blockSet.add(blockType);
+      const blockSet =
+        this.trigramsToBlocks.get(trigram) ??
+        new Set<Blockly.utils.toolbox.BlockInfo>();
+      blockSet.add(block);
       this.trigramsToBlocks.set(trigram, blockSet);
     });
   }
@@ -115,7 +127,10 @@ export class BlockSearcher {
    * @param b The second set.
    * @returns The intersection of the two sets.
    */
-  private getIntersection(a: Set<string>, b: Set<string>): Set<string> {
+  private getIntersection(
+    a: Set<Blockly.utils.toolbox.BlockInfo>,
+    b: Set<Blockly.utils.toolbox.BlockInfo>,
+  ): Set<Blockly.utils.toolbox.BlockInfo> {
     return new Set([...a].filter((value) => b.has(value)));
   }
 }

plugins/toolbox-search/src/toolbox_search.ts

@@ -113,15 +113,15 @@ export class ToolboxSearchCategory extends Blockly.ToolboxCategory {
    */
   private getAvailableBlocks(
     schema: Blockly.utils.toolbox.ToolboxItemInfo,
-    allBlocks: Set<string>,
+    allBlocks: Set<Blockly.utils.toolbox.BlockInfo>,
   ) {
     if ('contents' in schema) {
       schema.contents.forEach((contents) => {
         this.getAvailableBlocks(contents, allBlocks);
       });
     } else if (schema.kind.toLowerCase() === 'block') {
       if ('type' in schema && schema.type) {
-        allBlocks.add(schema.type);
+        allBlocks.add(schema);
       }
     }
   }
@@ -130,7 +130,7 @@ export class ToolboxSearchCategory extends Blockly.ToolboxCategory {
    * Builds the BlockSearcher index based on the available blocks.
    */
   private initBlockSearcher() {
-    const availableBlocks = new Set<string>();
+    const availableBlocks = new Set<Blockly.utils.toolbox.BlockInfo>();
     this.workspace_.options.languageTree?.contents?.forEach((item) =>
       this.getAvailableBlocks(item, availableBlocks),
     );
@@ -173,12 +173,7 @@ export class ToolboxSearchCategory extends Blockly.ToolboxCategory {
     const query = this.searchField?.value || '';
 
     this.flyoutItems_ = query
-      ? this.blockSearcher.blockTypesMatching(query).map((blockType) => {
-          return {
-            kind: 'block',
-            type: blockType,
-          };
-        })
+      ? this.blockSearcher.blockTypesMatching(query)
       : [];
 
     if (!this.flyoutItems_.length) {

plugins/toolbox-search/test/tests.mocha.js

@@ -17,34 +17,80 @@ suite('Toolbox search', () => {
 suite('BlockSearcher', () => {
   test('indexes the default value of dropdown fields', () => {
     const searcher = new BlockSearcher();
+    const blocks = [
+      {
+        kind: 'block',
+        type: 'lists_sort',
+      },
+      {
+        kind: 'block',
+        type: 'lists_split',
+      },
+    ];
     // Text on these:
     // lists_sort: sort <numeric> <ascending>
     // lists_split: make <list from text> with delimiter ,
-    searcher.indexBlocks(['lists_sort', 'lists_split']);
+    searcher.indexBlocks(blocks);
 
     const numericMatches = searcher.blockTypesMatching('numeric');
-    assert.sameMembers(['lists_sort'], numericMatches);
+    assert.sameMembers(numericMatches, [blocks[0]]);
 
     const listFromTextMatches = searcher.blockTypesMatching('list from text');
-    assert.sameMembers(['lists_split'], listFromTextMatches);
+    assert.sameMembers(listFromTextMatches, [blocks[1]]);
   });
 
   test('is not case-sensitive', () => {
     const searcher = new BlockSearcher();
-    searcher.indexBlocks(['lists_create_with']);
+    const listCreateWithBlock = {
+      kind: 'block',
+      type: 'lists_create_with',
+    };
+    searcher.indexBlocks([listCreateWithBlock]);
 
     const lowercaseMatches = searcher.blockTypesMatching('create list');
-    assert.sameMembers(['lists_create_with'], lowercaseMatches);
+    assert.sameMembers(lowercaseMatches, [listCreateWithBlock]);
 
     const uppercaseMatches = searcher.blockTypesMatching('CREATE LIST');
-    assert.sameMembers(['lists_create_with'], uppercaseMatches);
+    assert.sameMembers(uppercaseMatches, [listCreateWithBlock]);
 
     const ransomNoteMatches = searcher.blockTypesMatching('cReATe LiST');
-    assert.sameMembers(['lists_create_with'], ransomNoteMatches);
+    assert.sameMembers(ransomNoteMatches, [listCreateWithBlock]);
   });
 
   test('returns an empty list when no matches are found', () => {
     const searcher = new BlockSearcher();
     assert.isEmpty(searcher.blockTypesMatching('abc123'));
   });
+
+  test('returns preset blocks', () => {
+    const searcher = new BlockSearcher();
+    const blocks = [
+      {
+        kind: 'block',
+        type: 'text_replace',
+        inputs: {
+          FROM: {
+            shadow: {
+              type: 'text',
+            },
+          },
+          TO: {
+            shadow: {
+              type: 'text',
+            },
+          },
+          TEXT: {
+            shadow: {
+              type: 'text',
+            },
+          },
+        },
+      },
+    ];
+
+    searcher.indexBlocks(blocks);
+
+    const matches = searcher.blockTypesMatching('replace');
+    assert.sameMembers(matches, [blocks[0]]);
+  });
 });