Permanent search bar

Summary: Out of the box the library search has some issues. when search matches it steals focus from the input. Eventually we want to customise the rendering of the tree items anyway so this lays the foundation for taht

Reviewed By: antonk52

Differential Revision: D41336524

fbshipit-source-id: 194f67023edd0675cd9bd8d6134260439c6b2785

docs/extending/flipper-plugin.mdx

@@ -889,6 +889,29 @@ const [showWhitespace, setShowWhitespace] = useLocalStorageState(
 Layout elements can be used to organize the screen layout.
 See the [Style Guide](style-guide.mdx) for more details.
 
+### HighlightContext
+
+### HighlightProvider
+
+React context provider for Highlight context. All wrapped componets can access context or use the useHighligher helper. Example
+```typescript jsx
+<HighlightProvider
+  text={searchTerm}
+  highlightColor={theme.searchHighlightBackground.yellow}>
+  <HighlightedText text='Lorem itsum'/>
+</HighlightProvider>
+````
+
+### useHighlighter
+
+Hook to be used inside a Highlight context to render text with highlighting applied. Example
+```typescript jsx
+function HighlightedText(props: {text: string}) {
+  const highlightManager: HighlightManager = useHighlighter();
+  return <span>{highlightManager.render(props.text)}</span>;
+}
+```
+
 ### DataTable
 
 ### DataFormatter