Added Search for Toolbox and Continuous Toolbox integrated

package.json

@@ -11,6 +11,8 @@
     "test": "jest"
   },
   "dependencies": {
+    "@blockly/continuous-toolbox": "^5.0.8",
+    "@blockly/toolbox-search": "^1.2.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.15",

src/components/BlockCategories/Logic.jsx

@@ -1,6 +1,7 @@
 // LogicCategory.jsx
 export const Logic = `
-  <category name="Logic" cssclass="logicCategory">
+  <category name="Logic" categorystyle="logic_category">
+
     <block type="controls_if"></block>
   </category>
 `;

src/components/BlockCategories/Loops.jsx

@@ -1,6 +1,6 @@
 // LoopsCategory.jsx
 export const Loops= `
-  <category name="Loops" colour="#5C81A6" categorystyle="loop_category">
+  <category name="Loops" categorystyle="loop_category">
     <block type="controls_repeat_ext">
       <value name="TIMES">
         <shadow type="math_number">

src/components/BlockCategories/Math.jsx

@@ -1,6 +1,6 @@
 // MathCategory.jsx
 export const Math = `
-  <category name="Math" colour="#5C81A6" categorystyle="math_category">
+  <category name="Math" categorystyle="math_category">
     <block type="math_number"></block>
     <block type="math_arithmetic"></block>
     <block type="math_random_int">

src/components/BlockCategories/Motion.jsx

@@ -1,5 +1,5 @@
 export const MoveSpriteBlock = `
-  <category name="Motion" colour="#5C81A6" categorystyle="math_category">
+  <category name="Motion" categorystyle="math_category">
     <block type="move_sprite_10px"></block>
   </category>
 `;

src/components/BlockCategories/Search.jsx

@@ -0,0 +1,9 @@
+// SearchCategory.jsx
+import "@blockly/toolbox-search";
+
+export const Search = `
+  <search name="Search">
+  </search>
+`;
+
+

src/components/BlockCategories/Text.jsx

@@ -1,6 +1,6 @@
 // TextCategory.jsx
 export const Text = `
-  <category name="Text" colour="#5C81A6" categorystyle="text_category">
+  <category name="Text" categorystyle="text_category">
     <block type="text"></block>
     <block type="text_print"></block>
   </category>

src/components/BlocklyComponent.jsx

@@ -5,6 +5,7 @@ import { Logic } from './BlockCategories/Logic';
 import { Loops } from './BlockCategories/Loops';
 import { Math } from './BlockCategories/Math';
 import { Text } from './BlockCategories/Text';
+import { Search } from './BlockCategories/Search';
 import initializeBlockly from './InitializeBlockly';  // import the function
 
 const BlocklyComponent = () => {
@@ -21,6 +22,7 @@ const BlocklyComponent = () => {
           ${Loops}
           ${Math}
           ${Text}
+          ${Search}
         </xml>
       `;
       initializeBlockly(toolboxXml);  // Initialize Blockly using the separate function

src/components/Functions/Autcomplete.js

@@ -0,0 +1,37 @@
+// Autocomplete function using datalist
+export function InitializeAutocomplete(inp, arr) {
+
+  // Create a datalist element
+  var dataList = document.createElement("datalist");
+  dataList.id = inp.id + "autocomplete-datalist";
+  document.body.appendChild(dataList);
+
+  // Add options to the datalist
+  arr.forEach(function (option) {
+    var optionElement = document.createElement("option");
+    optionElement.value = option;
+    dataList.appendChild(optionElement);
+  });
+
+  // Set the datalist attribute on the input
+  inp.setAttribute("list", dataList.id);  
+  inp.addEventListener("input", function (e) {
+    var val = this.value.trim().toLowerCase();
+
+    // Filter options based on the input value
+    var filteredOptions = arr.filter(function (option) {
+      return option.toLowerCase().includes(val);
+    });
+    // Remove existing options from datalist
+    dataList.innerHTML = "";
+    // Add filtered options to datalist
+    filteredOptions.forEach(function (option) {
+      var optionElement = document.createElement("option");
+      optionElement.value = option;
+      dataList.appendChild(optionElement);
+    });
+  });
+}
+
+// Add options to the datalist for the autocomplete function to use
+export const autocompleteArray = ["if", "do", "repeat", "while", "for", "else", "function"];

src/components/InitializeBlockly.jsx

@@ -1,9 +1,22 @@
 import Blockly from "blockly/core";
 import "blockly/blocks";
+import {
+  ContinuousToolbox,
+  ContinuousFlyout,
+  ContinuousMetrics,
+} from '@blockly/continuous-toolbox';
+import { InitializeAutocomplete, autocompleteArray} from "./Functions/Autcomplete";
 
 const InitializeBlockly = (toolboxXml) => {
   const workspace = Blockly.inject("blocklyDiv", {
+    plugins: {
+      'toolbox': ContinuousToolbox,
+      'flyoutsVerticalToolbox': ContinuousFlyout,
+      'metricsManager': ContinuousMetrics,
+    },
     toolbox: toolboxXml,
+    renderer: "zelos",
+    theme: "zelos",
     zoom: {
       controls: false, // Disable default controls
       wheel: true,
@@ -38,6 +51,13 @@ const InitializeBlockly = (toolboxXml) => {
   blocklyDiv.appendChild(customResetButton.button);
   blocklyDiv.appendChild(customZoomOutButton.button);
 
+  // Select the Search input
+  const toolboxSearchInput = document.querySelector('.blocklyToolboxContents input[type="search"]');
+  toolboxSearchInput.classList.add("autocomplete-input"); // Add a class for styling if needed
+
+  // Call the autocomplete function with the selected input and array of words
+  InitializeAutocomplete(toolboxSearchInput, autocompleteArray);
+
   return workspace;
 };
 

src/index.css

@@ -22,4 +22,72 @@ body {
   margin: 5px 0;          /* Space between categories */
   border-radius: 5px;     /* Optional rounded corners */
   padding: 5px;           /* Some padding */
+}
+
+
+.blocklyToolboxDiv{
+  padding: 0;
+  overflow-x: hidden;
+  width: 18vw;
+  max-width: 160px;
+  min-width: 110px;
+
+}
+
+.blocklyTreeRow {
+  border: 2px solid #463434;  /* Add border */
+  margin: 5px 0;          /* Space between categories */
+  border-radius: 15px;     /* Optional rounded corners */
+  padding: 5px;           /* Some padding */
+  height: 3;
+}
+
+.blocklyToolboxContents{
+  /* justify-content: center; */
+  border: 0.1px solid #8a8888;  /* Add border */
+  background-color: #ece8e8;
+
+
+}
+
+.blocklyTreeRowContentContainer{
+  height: 10%;
+}
+
+.autocomplete-input {
+  /* Add more styles as needed */
+  position: relative;
+  border: 2px solid #463434; /* Border color */
+  border-radius: 15px; /* Rounded corners */
+  padding: 8px; /* Padding inside the input */
+  outline: none; /* Remove the default focus border */
+  transition: border-color 0.3s; /* Smooth transition for border color */
+  width: 107%;
+  /* Add box shadow for a subtle lift effect */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  text-align: left;
+  top:-7px;
+  margin-bottom: -15px;
+  /* height: ; */
+  /*left: 2px;*/
+  right:10px;
+  height:30px;
+}
+
+.autocomplete-input:focus {
+  border-color: #2980b9;
+}
+
+.categoryBubble{
+  /* display: none; */
+  position: relative;
+  margin-top: -26px;
+  margin-left: -0px;
+  margin-bottom: -2.5px;
+  top :21px;
+  border-radius: 13px 0px 0px 13px;
+  height: 20px;
+  border: none;
+  height: 28px;
+  padding: 0;
 }