fix: add Quote issue.

Author: jaywcjlove

core/README.md

@@ -7,7 +7,7 @@ react-json-view
 [![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
 [![Coverage Status](https://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
 
-A React component for displaying and editing javascript arrays and JSON objects.
+A React component for displaying and editing javascript arrays and JSON objects. Preview of v1 documentation is available [here](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html).
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-json-view/" target="_blank">

core/src/comps/KeyValues.tsx

@@ -64,11 +64,11 @@ export const KayName = <T extends object>(props: KayNameProps<T>) => {
   return (
     <Fragment>
       <span ref={highlightContainer}>
-        <Quote isNumber={isNumber} />
+        <Quote isNumber={isNumber} data-placement="left" />
         <Key keyName={keyName!} value={value}>
           {keyName}
         </Key>
-        <Quote isNumber={isNumber} />
+        <Quote isNumber={isNumber} data-placement="right" />
       </span>
       <Colon />
     </Fragment>

core/src/comps/ReRender/Symbols.tsx

@@ -2,28 +2,30 @@ import { useSymbolsStore, type SymbolsElement } from '../../store/Symbols';
 import { type TagType } from '../../store/Types';
 import { useExpandsStore } from '../../store/Expands';
 
-export const Quote = (props: { isNumber?: boolean }) => {
+export const Quote = (props: { isNumber?: boolean } & React.HTMLAttributes<HTMLElement>) => {
   const { Quote: Comp = {} } = useSymbolsStore();
-  const { isNumber } = props;
+  const { isNumber, ...other } = props;
   if (isNumber) return null;
   const { as, render, ...reset } = Comp;
   const Elm = as || 'span';
-  const child = render && typeof render === 'function' && render(reset);
+  const elmProps = { ...other, ...reset };
+  const child = render && typeof render === 'function' && render(elmProps);
   if (child) return child;
-  return <Elm {...reset} />;
+  return <Elm {...elmProps} />;
 };
 
 Quote.displayName = 'JVR.Quote';
 
-export const ValueQuote = (props: { isNumber?: boolean }) => {
+export const ValueQuote = (props: { isNumber?: boolean } & React.HTMLAttributes<HTMLElement>) => {
   const { ValueQuote: Comp = {} } = useSymbolsStore();
-  const { isNumber } = props;
+  const { isNumber, ...other } = props;
   if (isNumber) return null;
   const { as, render, ...reset } = Comp;
   const Elm = as || 'span';
-  const child = render && typeof render === 'function' && render(reset);
+  const elmProps = { ...other, ...reset };
+  const child = render && typeof render === 'function' && render(elmProps);
   if (child) return child;
-  return <Elm {...reset} />;
+  return <Elm {...elmProps} />;
 };
 
 ValueQuote.displayName = 'JVR.ValueQuote';

core/src/comps/ReRender/Types.tsx

@@ -78,11 +78,13 @@ export const TypeString: FC<TypeProps> = ({ children = '', expandKey, keyName })
     <Fragment>
       {displayDataTypes && (type || <Comp {...reset} style={style} />)}
       {child || (
-        <Comp {...reset} className="w-rjv-value">
+        <Fragment>
           <ValueQuote />
-          {text}
+          <Comp {...reset} className="w-rjv-value">
+            {text}
+          </Comp>
           <ValueQuote />
-        </Comp>
+        </Fragment>
       )}
       <Copied keyName={keyName} value={children as object} expandKey={expandKey} />
     </Fragment>

core/src/symbol/Quote.test.tsx

@@ -0,0 +1,43 @@
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from '..';
+
+it('renders <JsonView.Quote /> test case', async () => {
+  const demo = {
+    value: 123,
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.Quote data-testid="quote">x</JsonView.Quote>
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const elm = screen.getAllByTestId('quote')[0];
+    expect(elm.tagName).toBe('SPAN');
+    expect(elm.innerHTML).toBe('x');
+  });
+});
+
+it('renders <JsonView.Quote render /> test case', async () => {
+  const demo = {
+    value: 123,
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.Quote
+        data-testid="quote"
+        render={(props) => {
+          expect(props.style).toHaveProperty('color', 'var(--w-rjv-quotes-color, #236a7c)');
+          return <span {...props}>.......</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const elm = screen.getAllByTestId('quote')[0];
+    expect(elm.tagName).toBe('SPAN');
+    expect(elm.className).toBe('w-rjv-quotes');
+    expect(elm.innerHTML).toBe('.......');
+  });
+});

core/src/symbol/ValueQuote.test.tsx

@@ -0,0 +1,43 @@
+import { screen, render, waitFor } from '@testing-library/react';
+import JsonView from '..';
+
+it('renders <JsonView.ValueQuote /> test case', async () => {
+  const demo = {
+    value: '123',
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.ValueQuote data-testid="quote">|</JsonView.ValueQuote>
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const elm = screen.getAllByTestId('quote')[1];
+    expect(elm.tagName).toBe('SPAN');
+    expect(elm.innerHTML).toBe('|');
+  });
+});
+
+it('renders <JsonView.ValueQuote render /> test case', async () => {
+  const demo = {
+    value: '123',
+  };
+  const { container } = render(
+    <JsonView value={demo}>
+      <JsonView.ValueQuote
+        data-testid="quote"
+        render={(props) => {
+          expect(props.style).toHaveProperty('color', 'var(--w-rjv-quotes-string-color, #cb4b16)');
+          return <span {...props}>.......</span>;
+        }}
+      />
+    </JsonView>,
+  );
+  expect(container.firstElementChild).toBeInstanceOf(Element);
+  await waitFor(() => {
+    const elm = screen.getAllByTestId('quote')[0];
+    expect(elm.tagName).toBe('SPAN');
+    expect(elm.className).toBe('w-rjv-quotes');
+    expect(elm.innerHTML).toBe('.......');
+  });
+});