Search highlighting in node docs + other improvements

src/common/util.ts

@@ -282,3 +282,5 @@ export const getInputValue = <T extends NonNullable<InputValue>>(
 
 export const isAutoInput = (input: Input): boolean =>
     input.kind === 'generic' && input.optional && !input.hasHandle;
+
+export const escapeRegExp = (string: string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

src/renderer/components/NodeDocumentation/DropDownOptions.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { InputOption } from '../../../common/common-types';
 import { TypeTag } from '../TypeTag';
+import { SupportHighlighting } from './HighlightContainer';
 
 interface DropDownOptionProps {
     option: InputOption;
@@ -14,7 +15,7 @@ const DropDownOption = memo(({ option }: DropDownOptionProps) => {
             mt="-0.2rem"
             verticalAlign="middle"
         >
-            {option.option}
+            <SupportHighlighting>{option.option}</SupportHighlighting>
         </TypeTag>
     );
 });

src/renderer/components/NodeDocumentation/HighlightContainer.tsx

@@ -0,0 +1,95 @@
+import { Text, useColorModeValue } from '@chakra-ui/react';
+import React, { ReactNode, memo, useMemo } from 'react';
+import { createContext, useContext } from 'use-context-selector';
+import { useMemoObject } from '../../hooks/useMemo';
+
+// eslint-disable-next-line react-memo/require-memo
+export const NoHighlighting = ({ children }: React.PropsWithChildren<unknown>) => {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{children}</>;
+};
+
+const HighlightedText = memo(({ text, regex }: { text: string; regex: RegExp }) => {
+    const parts = text.split(regex);
+
+    const bgColor = useColorModeValue('yellow.300', 'yellow.700');
+
+    const highlightedParts = parts.map((part, index) =>
+        index % 2 === 1 ? (
+            <Text
+                as="span"
+                backgroundColor={bgColor}
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                userSelect="text"
+            >
+                {part}
+            </Text>
+        ) : (
+            part
+        )
+    );
+
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{highlightedParts}</>;
+});
+
+const recursiveHighlight = (children: ReactNode, regex: RegExp): ReactNode => {
+    const result = React.Children.map(children, (child) => {
+        if (typeof child === 'string') {
+            return (
+                <HighlightedText
+                    key={child}
+                    regex={regex}
+                    text={child}
+                />
+            );
+        }
+
+        if (React.isValidElement(child)) {
+            if (child.type === NoHighlighting) {
+                return child;
+            }
+
+            const props = child.props as unknown;
+            if (props && typeof props === 'object' && 'children' in props) {
+                const highlightedChildren = recursiveHighlight(props.children as ReactNode, regex);
+                return React.cloneElement(child, { children: highlightedChildren } as never);
+            }
+        }
+
+        return child;
+    });
+    if (Array.isArray(result) && result.length === 1) {
+        return result[0];
+    }
+    return result;
+};
+
+interface HighlightContextState {
+    regex?: RegExp;
+}
+const HighlightContext = createContext<HighlightContextState>({});
+
+export const SupportHighlighting = memo(({ children }: React.PropsWithChildren<unknown>) => {
+    const { regex } = useContext(HighlightContext);
+
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{regex ? recursiveHighlight(children, regex) : children}</>;
+});
+
+interface HighlightContainerProps {
+    search: RegExp | undefined;
+}
+export const HighlightContainer = memo(
+    ({ children, search }: React.PropsWithChildren<HighlightContainerProps>) => {
+        const regex = useMemo(() => search && new RegExp(`(${search.source})`, 'gi'), [search]);
+        const value = useMemoObject<HighlightContextState>({ regex });
+
+        return (
+            <HighlightContext.Provider value={value}>
+                <SupportHighlighting>{children}</SupportHighlighting>
+            </HighlightContext.Provider>
+        );
+    }
+);