Move highlighter to flipper-plugin

Summary: This stack moves the DataInspector component to flipper-plugin. The first diffs will move some utility abstractions to turn this into smaller steps

Reviewed By: passy

Differential Revision: D27591890

fbshipit-source-id: d0285ca31b6c9b334000dd15c722b9bda7638d73

desktop/app/src/index.tsx

@@ -103,7 +103,7 @@ export {
   default as DataDescription,
   DataDescriptionType,
 } from './ui/components/data-inspector/DataDescription';
-export {HighlightManager} from './ui/components/Highlight';
+export {_HighlightManager as HighlightManager} from 'flipper-plugin';
 export {default as Tabs} from './ui/components/Tabs';
 export {default as Tab} from './ui/components/Tab';
 export {default as Input} from './ui/components/Input';

desktop/app/src/ui/components/data-inspector/DataDescription.tsx

@@ -17,7 +17,7 @@ import {colors} from '../colors';
 import Input from '../Input';
 import React, {KeyboardEvent} from 'react';
 import Glyph from '../Glyph';
-import {HighlightContext} from '../Highlight';
+import {_HighlightContext} from 'flipper-plugin';
 import Select from '../Select';
 import TimelineDataDescription from './TimelineDataDescription';
 
@@ -575,8 +575,8 @@ class DataDescriptionContainer extends PureComponent<{
   editable: boolean;
   commit: (opts: DescriptionCommitOptions) => void;
 }> {
-  static contextType = HighlightContext; // Replace with useHighlighter
+  static contextType = _HighlightContext; // Replace with useHighlighter
-  context!: React.ContextType<typeof HighlightContext>;
+  context!: React.ContextType<typeof _HighlightContext>;
 
   onChangeCheckbox = (e: React.ChangeEvent<HTMLInputElement>) => {
     this.props.commit({

desktop/app/src/ui/components/data-inspector/DataInspector.tsx

@@ -21,7 +21,10 @@ import {colors} from '../colors';
 import {clipboard} from 'electron';
 import React from 'react';
 import {TooltipOptions} from '../TooltipProvider';
-import {useHighlighter, HighlightManager} from '../Highlight';
+import {
+  _useHighlighter as useHighlighter,
+  _HighlightManager,
+} from 'flipper-plugin';
 
 export {DataValueExtractor} from './DataPreview';
 
@@ -142,7 +145,7 @@ type DataInspectorProps = {
   onRenderName?: (
     path: Array<string>,
     name: string,
-    highlighter: HighlightManager,
+    highlighter: _HighlightManager,
   ) => React.ReactElement;
   /**
    * Render callback that can be used to customize the rendering of object values.

desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx

@@ -12,7 +12,7 @@ import {PureComponent} from 'react';
 import DataInspector from './DataInspector';
 import React from 'react';
 import {DataValueExtractor} from './DataPreview';
-import {HighlightProvider, HighlightManager} from '../Highlight';
+import {_HighlightProvider, _HighlightManager} from 'flipper-plugin';
 
 export type ManagedDataInspectorProps = {
   /**
@@ -47,7 +47,7 @@ export type ManagedDataInspectorProps = {
   onRenderName?: (
     path: Array<string>,
     name: string,
-    highlighter: HighlightManager,
+    highlighter: _HighlightManager,
   ) => React.ReactElement;
   /**
    * Render callback that can be used to customize the rendering of object values.
@@ -173,7 +173,7 @@ export default class ManagedDataInspector extends PureComponent<
 
   render() {
     return (
-      <HighlightProvider text={this.props.filter}>
+      <_HighlightProvider text={this.props.filter}>
         <DataInspector
           data={this.props.data}
           diff={this.props.diff}
@@ -191,7 +191,7 @@ export default class ManagedDataInspector extends PureComponent<
           depth={0}
           parentAncestry={EMPTY_ARRAY}
         />
-      </HighlightProvider>
+      </_HighlightProvider>
     );
   }
 }

desktop/app/src/ui/components/data-inspector/__tests__/DataInspector.node.tsx

@@ -124,7 +124,7 @@ test('can filter for data', async () => {
     <span>
       "j
       <span
-        class="css-i709sw-Highlighted ep1h60f0"
+        class="css-zr1u3c-Highlighted eiud9hg0"
       >
         son
       </span>

desktop/app/src/ui/index.tsx

@@ -180,4 +180,3 @@ export {default as AlternatingRows} from './components/AlternatingRows';
 export {Layout} from 'flipper-plugin';
 
 export {default as Scrollable} from './components/Scrollable';
-export * from './components/Highlight';

desktop/flipper-plugin/src/index.ts

@@ -85,6 +85,13 @@ export {createDataSource, DataSource} from './state/DataSource';
 export {DataTable, DataTableColumn} from './ui/data-table/DataTable';
 export {DataTableManager} from './ui/data-table/DataTableManager';
 
+export {
+  HighlightContext as _HighlightContext,
+  HighlightProvider as _HighlightProvider,
+  HighlightManager as _HighlightManager,
+  useHighlighter as _useHighlighter,
+} from './ui/Highlight';
+
 export {
   Interactive as _Interactive,
   InteractiveProps as _InteractiveProps,

desktop/flipper-plugin/src/ui/Highlight.tsx

@@ -8,20 +8,19 @@
  */
 
 import styled from '@emotion/styled';
-import {colors} from './colors';
 import React, {
   useEffect,
   memo,
   useState,
   useRef,
-  useMemo,
   createContext,
   useContext,
 } from 'react';
 import {debounce} from 'lodash';
+import {theme} from './theme';
 
 const Highlighted = styled.span({
-  backgroundColor: colors.lemon,
+  backgroundColor: theme.textColorActive,
 });
 
 export interface HighlightManager {
@@ -108,11 +107,11 @@ export function HighlightProvider({
   text: string | undefined;
   children: React.ReactElement;
 }) {
-  const highlightManager = useMemo(() => createHighlightManager(text), []);
+  const [highlightManager] = useState(() => createHighlightManager(text));
 
   useEffect(() => {
     highlightManager.setFilter(text);
-  }, [text]);
+  }, [text, highlightManager]);
 
   return (
     <HighlightContext.Provider value={highlightManager}>