DOC-1820: Updated headings and explanation of new content

Author: LewisAtTiny

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

@@ -13,16 +13,15 @@ tinymce.init({
         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 () => {};
-              }
-		  }
+          { type: 'togglemenuitem', text: 'ToggleableMenu', onAction: () => { 
+            toggleState = !toggleState;
+            editor.insertContent('ToggleableMenu'); 
+            },
+            onSetup: (api) => {
+              api.setActive(toggleState);
+              return () => {};
+            },
+          },
         ];
 
         // Use the `pattern` to filter items

modules/ROOT/pages/custom-menu-toolbar-button.adoc

@@ -37,7 +37,7 @@ include::partial$misc/admon-requires-6.4v.adoc[]
 |setIcon |`+(icon: string) => void+` |Sets the icon of the button.
 |===
 
-== Menu button example and explanation without search
+== Menu button example and explanation without search enabled
 
 The following is a simple toolbar menu button example:
 
@@ -48,7 +48,7 @@ This example configures a toolbar menu button labeled `+My Button+` that opens a
 The `+fetch+` function retrieves an array of menu items and passes it to the callback, which renders them in the dropdown menu. This enables asynchronous menu generation. 
 
 [[searchable-menu-buttons]]
-== Searchable menu buttons
+== Fetch with Searchable menu buttons 
 
 include::partial$misc/admon-requires-6.2v.adoc[]
 
@@ -69,8 +69,8 @@ The following is a simple toolbar menu button example, where searching has been
 
 liveDemo::custom-toolbar-menu-button-search[tab="js"]
 
-This example configures a toolbar menu button with the label `+My searchable button+` that opens the specified menu when clicked. The menu will contain a search input field because `+search+` is not `+false+`. The input field's https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder[placeholder attribute] will be `+Type...+`.
+This example configures a toolbar menu button with the label `+Searchable Menu+` that opens the specified menu when clicked. The menu will contain a search input field because `+search+` is not `+false+`. The `+fetch+` function is called with a `+pattern+` being "Search items...". The `+fetchContext+` is set to the `+pattern+` and as `+pattern+` is updated the menu will update. When searching the `+pattern+` is filtered and when the pattern doesn't meet the menuitems the search closes.
 
-Initially, when the menu opens, the search input field will be empty, and the `+fetch+` function is called with an empty `+pattern+` for its `+fetchContext+`. In that situation, `+fetch+` passes back an array of two items to be rendered in the drop-down menu. When the user types in the input field, `+fetch+` will be called again, except this time, the `+pattern+` property in `+fetchContext+` will reflect the value typed in the input field. For illustration purposes, this example then passes back an item that contains this pattern inside the item's text. In a more real-life example, the `+pattern+` could be used to filter which of the items are passed to the callback.
+The input field's https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder[placeholder attribute] will be `+Type...+`.
 
 include::partial$misc/onSetup.adoc[]