feat: export useHighlight hook.

Author: jaywcjlove

core/README.md

@@ -452,8 +452,9 @@ export default function Demo() {
 ## Editor JSON
 
 ```tsx mdx:preview
-import React from 'react';
+import React, { useRef } from 'react';
 import JsonViewEditor from '@uiw/react-json-view/editor';
+import { type SemicolonProps, useHighlight } from '@uiw/react-json-view';
 
 const object = {
   string: 'Lorem ipsum dolor sit amet',
@@ -472,12 +473,14 @@ const object = {
   nestedArray: [ [1, 2], [3, 4], { a: 1} ],
 }
 
-const ObjectKey = ({ value, keyName, parentName, parentValue, ...reset }) => {
+const ObjectKey: SemicolonProps['render'] = ({ value, keyName, parentName, ...props }) => {
+  const $edit = useRef<HTMLSpanElement & HTMLModElement>(null);
+  useHighlight({ value, highlightUpdates: true, highlightContainer: $edit });
   if (keyName === 'integer' && typeof value === 'number' && value > 40) {
-    return <del {...reset} />
+    return <del {...props} ref={$edit} />;
   }
-  return <span {...reset} />
-};
+  return <span {...props} ref={$edit} />;
+}
 
 export default function Demo() {
   return (

core/src/index.tsx

@@ -10,6 +10,7 @@ import type { CountInfoExtraProps } from './editor/countInfoExtra';
 
 export * from './node';
 export * from './value';
+export * from './semicolon';
 
 export interface CountInfoProps {
   count: number;

www/src/example/default.tsx

@@ -1,5 +1,5 @@
-import { Fragment, useState, useEffect } from 'react';
-import JsonView, { JsonViewProps } from '@uiw/react-json-view';
+import { Fragment, useState, useEffect, useRef } from 'react';
+import JsonView, { JsonViewProps, useHighlight, SemicolonProps } from '@uiw/react-json-view';
 import { styled } from 'styled-components';
 import { lightTheme } from '@uiw/react-json-view/light';
 import { darkTheme } from '@uiw/react-json-view/dark';
@@ -16,7 +16,7 @@ function aPlusB(a: number, b: number) {
 }
 const example = {
   avatar,
-  string: 'Lorem ipsum dolor sit amet',
+  string: 'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet',
   integer: 42,
   float: 114.514,
   // @ts-ignore
@@ -54,6 +54,15 @@ const Options = styled.div`
   grid-template-columns: 50% 60%;
 `;
 
+const ObjectKey: SemicolonProps['render'] = ({ value, keyName, parentName, ...props }) => {
+  const $edit = useRef<HTMLSpanElement & HTMLModElement>(null);
+  useHighlight({ value, highlightUpdates: true, highlightContainer: $edit });
+  if (keyName === 'integer' && typeof value === 'number' && value > 40) {
+    return <del {...props} ref={$edit} />;
+  }
+  return <span {...props} ref={$edit} />;
+};
+
 export function Example() {
   const [indentWidth, setIndentWidth] = useState(15);
   const [theme, setTheme] = useState<React.CSSProperties>(lightTheme as React.CSSProperties);
@@ -91,12 +100,7 @@ export function Example() {
         style={{ ...theme, padding: 6, borderRadius: 6 }}
         collapsed={collapsed}
         components={{
-          objectKey: ({ value, keyName, parentName, ...props }) => {
-            if (keyName === 'integer' && typeof value === 'number' && value > 40) {
-              return <del {...props} />;
-            }
-            return <span {...props} />;
-          },
+          objectKey: ObjectKey,
         }}
       />
       <Options>