DOC-1820: Updated Search index to add more content and better use of search feature.

Author: LewisAtTiny

modules/ROOT/examples/live-demos/custom-toolbar-menu-button-search/index.js

@@ -2,52 +2,39 @@ tinymce.init({
   selector: 'textarea#custom-toolbar-menu-button-search',
   height: 500,
   toolbar: 'mybutton',
-
+  toolbar: 'searchMenuButton',
   setup: (editor) => {
-    /* Menu items are recreated when the menu is closed and opened, so we need
-       a variable to store the toggle menu item state. */
     let toggleState = false;
-
-    /* example, adding a toolbar menu button */
-    editor.ui.registry.addMenuButton('mybutton', {
-      text: 'My searchable button',
-      search: {
-        placeholder: 'Type...'
-      },
+    editor.ui.registry.addMenuButton('searchMenuButton', {
+      text: 'Searchable Menu',
+      search: { placeholder: 'Search items...' },
       fetch: (callback, fetchContext) => {
-        if (fetchContext.pattern.length > 0) {
-          callback([
-            {
-              type: 'menuitem',
-              text: `You searched for: "${fetchContext.pattern}"`,
-              onAction: () => editor.insertContent(`<strong>Inserted selected search result</strong>`)
-            }
-          ]);
-        } else {
-          const items = [
-            {
-              type: 'menuitem',
-              text: 'Menu item 1',
-              onAction: () => editor.insertContent('&nbsp;<em>You clicked menu item 1!</em>')
-            },
-            {
-              type: 'togglemenuitem',
-              text: 'Toggle menu item',
-              onAction: () => {
-                toggleState = !toggleState;
-                editor.insertContent('&nbsp;<em>You toggled a menuitem ' + (toggleState ? 'on' : 'off') + '</em>');
-              },
-              onSetup: (api) => {
+        // Define a list of all menu items
+        const allItems = [
+          { type: 'menuitem', text: 'Apple', onAction: () => editor.insertContent('Apple') },
+          { type: 'menuitem', text: 'Banana', onAction: () => editor.insertContent('Banana') },
+          { type: 'togglemenuitem', text: 'Cherry', onAction: () => { 
+		  		toggleState = !toggleState;
+		  		editor.insertContent('Cherry') 
+		  	
+			},
+			    onSetup: (api) => {
                 api.setActive(toggleState);
                 return () => {};
               }
-            }
-          ];
-          callback(items);
-        }
+		  }
+        ];
+
+        // Use the `pattern` to filter items
+        const filteredItems = allItems.filter(item =>
+          item.text.toLowerCase().includes(fetchContext.pattern.toLowerCase())
+        );
+
+        // Pass the filtered list to the callback
+        callback(filteredItems);
       }
     });
-
   },
+
   content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
 });