A Blockly plugin that adds workspace search support.
npm install @blockly/plugin-workspace-searchA Blockly plugin that adds workspace search support.
``
npm install @blockly/plugin-workspace-search --save
`js
import * as Blockly from 'blockly';
import {WorkspaceSearch} from '@blockly/plugin-workspace-search';
const workspace = Blockly.inject('blocklyDiv');
const workspaceSearch = new WorkspaceSearch(workspace);
workspaceSearch.init();
`
`js`
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.
- 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.
The generated search bar looks like:
`html
[... text input goes here ...]
[... actions div goes here ...]
[... close button goes here ...]
Here are additional CSS classes to style your search bar:
-
: Applies to the outer-most div.
- Default styling:
`css
'.blockly-ws-search {',
'background: white;',
'border: solid lightgrey 0.5px;',
'box-shadow: 0px 10px 20px grey;',
'justify-content: center;',
'padding: 0.25em;',
'position: absolute;',
'z-index: 70;',
'}'
`
- : 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;`)Apache 2.0