@blockly/plugin-workspace-search Built on Blockly

A Blockly plugin that adds workspace search support.

Installation

npm install @blockly/plugin-workspace-search --save

Usage

ES6 Imports

import * as Blockly from 'blockly';
import { WorkspaceSearch } from '@blockly/plugin-workspace-search';

const workspace = Blockly.inject('blocklyDiv');
const workspaceSearch = new WorkspaceSearch(workspace);

workspaceSearch.init();

Script Tag

<script src="./node_modules/@blockly/plugin-workspace-search/dist/index.js"></script>

To open workspace search use either command + f or control + f. To close the search bar hit escape or the ‘x’ in the top right corner.

API

  • init: Initializes the workspace search bar.
  • dispose: Disposes of workspace search.
  • open: Opens the search bar.
  • close: Closes the search bar.
  • previous: Selects the previous block.
  • next: Selects the next block.
  • setSearchPlaceholder: Sets the placeholder text for the search bar text input.
  • addActionBtn: Add a button to the action div. This must be called after the init function has been called.
  • clearBlocks: Clears the selection group and current block.
  • searchAndHighlight: Searches the workspace for the current search term and highlights matching blocks.

Styling

The generated search bar looks like:

<div class="ws-search'>
  <div class="ws-search-container'>
    <div class="ws-search-content'>
      <div class="ws-search-input'>
        [... text input goes here ...]
      </div>
      [... actions div goes here ...]
    </div>
    [... close button goes here ...]
  </div>
</div>

Here are additional CSS classes to style your search bar:

  • blockly-ws-search: Applies to the outer-most div.
    • Default styling:
      '.blockly-ws-search {',
        'background: white;',
        'border: solid lightgrey .5px;',
        'box-shadow: 0px 10px 20px grey;',
        'justify-content: center;',
        'padding: .25em;',
        'position: absolute;',
        'z-index: 70;',
      '}'
      
  • blockly-ws-search-container: Applies to the search container.
  • blockly-ws-search-content: Applies to the search content.
  • blockly-ws-search-input: Applies to the input wrapper. (Default: border: none;)
  • blockly-ws-search-actions: Applies to the action div.
  • blockly-ws-search-current: Highlights the provided block as the “current selection”. (Default: fill: grey;)
  • blockly-ws-search-highlight: Adds highlight to the provided blocks. (Default: fill: black;)

License

Apache 2.0