[Blockly] Add workspace search (#1723)

This adds the Blockly workspace-search plugin that allows to search within the current workspace via Cmd/Ctrl + F.
A small search box is opened in the upper right corner and search result blocks are hightlighted grey/black.

Also-by: Florian Hotze <florianh_dev@icloud.com>
Signed-off-by: Stefan Höhn <mail@stefanhoehn.com>

bundles/org.openhab.ui/web/package.json

@@ -63,6 +63,7 @@
   "dependencies": {
     "@blockly/field-slider": "^4.0.3",
     "@blockly/plugin-cross-tab-copy-paste": "^2.0.4",
+    "@blockly/plugin-workspace-search": "^6.0.7",
     "@blockly/theme-dark": "^4.0.1",
     "@blockly/zoom-to-fit": "^3.0.3",
     "@jsep-plugin/arrow": "^1.0.5",

bundles/org.openhab.ui/web/src/pages/settings/rules/script/blockly-editor.vue

@@ -1019,10 +1019,16 @@
       stroke inherit
 .blocklyDropDownDiv
   z-index 9000
+.blockly-ws-search
+  background var(--blockly-ws-search-bg-color)
+  border-color var(--blockly-ws-search-border-color)
+  box-shadow none
+  color var(--blockly-ws-search-text-color)
 </style>
 
 <script>
 import Blockly from 'blockly'
+import { WorkspaceSearch } from '@blockly/plugin-workspace-search'
 import { javascriptGenerator } from 'blockly/javascript'
 import DarkTheme from '@blockly/theme-dark'
 import { CrossTabCopyPaste } from '@blockly/plugin-cross-tab-copy-paste'
@@ -1061,6 +1067,15 @@ export default {
       this.initBlockly(this.blockLibraries)
     }
   },
+  computed: {
+    cssVars () {
+      return {
+        '--blockly-ws-search-bg-color': this.$f7.data.themeOptions.dark === 'dark' ? '#1e1e1e' : 'white',
+        '--blockly-ws-search-border-color': this.$f7.data.themeOptions.dark === 'dark' ? 'lightgrey' : 'grey',
+        '--blockly-ws-search-text-color': this.$f7.data.themeOptions.dark === 'dark' ? 'white' : 'black'
+      }
+    }
+  },
   mounted () {
     this.load()
   },
@@ -1130,6 +1145,8 @@ export default {
           },
         trashcan: false
       })
+      const workspaceSearch = new WorkspaceSearch(this.workspace)
+      workspaceSearch.init()
 
       Blockly.HSV_SATURATION = 0.45 // default
       Blockly.HSV_VALUE = 0.65 // a little bit more contract for the different colors