@dxos/react-ui-syntax-highlighter 0.8.4-main.ead640a → 0.8.4-main.ef1bc66f44

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-syntax-highlighter",
-  "version": "0.8.4-main.ead640a",
+  "version": "0.8.4-main.ef1bc66f44",
   "description": "A syntax highlighter wrapper.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -25,29 +29,29 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
     "jsonpath": "^1.1.1",
-    "react-syntax-highlighter": "^15.6.1"
+    "react-syntax-highlighter": "^15.6.1",
+    "@dxos/util": "0.8.4-main.ef1bc66f44"
   },
   "devDependencies": {
     "@types/jsonpath": "^0.2.4",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.ead640a",
-    "@dxos/storybook-utils": "0.8.4-main.ead640a",
-    "@dxos/util": "0.8.4-main.ead640a",
-    "@dxos/react-ui": "0.8.4-main.ead640a",
-    "@dxos/react-ui-theme": "0.8.4-main.ead640a"
+    "@dxos/random": "0.8.4-main.ef1bc66f44",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/storybook-utils": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44",
+    "@dxos/util": "0.8.4-main.ef1bc66f44"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.ead640a",
-    "@dxos/react-ui-theme": "0.8.4-main.ead640a"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
   },
   "publishConfig": {
     "access": "public"

package/src/Json/Json.stories.tsx

@@ -3,6 +3,7 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
@@ -55,7 +56,7 @@ const createData = ({ depth = 2, children = 3 } = {}): any => {
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/Json',
   component: Json,
-  decorators: [withTheme, withLayout({ container: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof Json>;
 
 export default meta;
@@ -91,3 +92,15 @@ export const Large: Story = {
     },
   },
 };
+
+const cycle: any = {
+  a: 1,
+  b: [],
+};
+
+cycle.b.push(cycle);
+
+// NOTE: Storybook args cannot be circular.
+export const Cycle: Story = {
+  render: () => <Json data={cycle} />,
+};

package/src/Json/Json.tsx

@@ -4,14 +4,13 @@
 
 // TODO(burdon): Use to jsonpath-plus.
 import jp from 'jsonpath';
-import React, { useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 
 import { Input, type ThemedClassName } from '@dxos/react-ui';
+import { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';
 
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 
-const defaultClassNames = '!m-0 grow overflow-y-auto text-sm';
-
 export type JsonProps = ThemedClassName<{
   data?: any;
   filter?: boolean;
@@ -19,112 +18,63 @@ export type JsonProps = ThemedClassName<{
   testId?: string;
 }>;
 
-export const Json = ({ filter, ...params }: JsonProps) => {
-  if (filter) {
-    return <JsonFilter {...params} />;
+export const Json = forwardRef<HTMLDivElement, JsonProps>((props, forwardedRef) => {
+  if (props.filter) {
+    return <JsonFilter {...props} />;
   }
 
-  const { classNames, data, replacer, testId } = params;
+  const { classNames, data, replacer, testId } = props;
   return (
-    <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
-      {JSON.stringify(data, replacer && createReplacer(replacer), 2)}
+    <SyntaxHighlighter
+      language='json'
+      classNames={['is-full overflow-y-auto text-sm', classNames]}
+      data-testid={testId}
+      ref={forwardedRef}
+    >
+      {safeStringify(data, replacer && createReplacer(replacer), 2)}
     </SyntaxHighlighter>
   );
-};
-
-export const JsonFilter = ({ classNames, data: initialData, replacer, testId }: JsonProps) => {
-  const [data, setData] = useState(initialData);
-  const [text, setText] = useState('');
-  const [error, setError] = useState<Error | null>(null);
-  useEffect(() => {
-    if (!initialData || !text.trim().length) {
-      setData(initialData);
-    } else {
-      try {
-        setData(jp.query(initialData, text));
-        setError(null);
-      } catch (err) {
-        setData(initialData);
-        setError(err as Error);
-      }
-    }
-  }, [initialData, text]); // TODO(burdon): Need structural diff.
-
-  return (
-    <div className='flex flex-col grow overflow-hidden'>
-      <Input.Root validationValence={error ? 'error' : 'success'}>
-        <Input.TextInput
-          classNames={['p-1 px-2 font-mono', error && 'border-red-500']}
-          variant='subdued'
-          value={text}
-          onChange={(event) => setText(event.target.value)}
-          placeholder='JSONPath (e.g., $.graph.nodes)'
-        />
-      </Input.Root>
-      <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
-        {JSON.stringify(data, replacer && createReplacer(replacer), 2)}
-      </SyntaxHighlighter>
-    </div>
-  );
-};
-
-export type CreateReplacerProps = {
-  omit?: string[];
-  parse?: string[];
-  maxDepth?: number;
-  maxArrayLen?: number;
-  maxStringLen?: number;
-};
+});
 
-export type JsonReplacer = (this: any, key: string, value: any) => any;
+export const JsonFilter = forwardRef<HTMLDivElement, JsonProps>(
+  ({ classNames, data: initialData, replacer, testId }, forwardedRef) => {
+    const [data, setData] = useState(initialData);
+    const [text, setText] = useState('');
+    const [error, setError] = useState<Error | null>(null);
 
-export const createReplacer = ({
-  omit,
-  parse,
-  maxDepth,
-  maxArrayLen,
-  maxStringLen,
-}: CreateReplacerProps): JsonReplacer => {
-  let currentDepth = 0;
-  const depthMap = new WeakMap<object, number>();
-
-  return function (this: any, key: string, value: any) {
-    // Track depth.
-    if (key === '') {
-      currentDepth = 0;
-    } else if (this && typeof this === 'object') {
-      const parentDepth = depthMap.get(this) ?? 0;
-      currentDepth = parentDepth + 1;
-    }
-
-    // Store depth for this object.
-    if (value && typeof value === 'object') {
-      depthMap.set(value, currentDepth);
-
-      // Check max depth.
-      if (maxDepth != null && currentDepth >= maxDepth) {
-        return Array.isArray(value) ? `[{ length: ${value.length} }]` : `{ keys: ${Object.keys(value).length} }`;
-      }
-    }
-
-    // Apply other filters.
-    if (omit?.includes(key)) {
-      return undefined;
-    }
-    if (parse?.includes(key) && typeof value === 'string') {
-      try {
-        return JSON.parse(value);
-      } catch {
-        return value;
+    useEffect(() => {
+      if (!initialData || !text.trim().length) {
+        setData(initialData);
+      } else {
+        try {
+          setData(jp.query(initialData, text));
+          setError(null);
+        } catch (err) {
+          setData(initialData);
+          setError(err as Error);
+        }
       }
-    }
-    if (maxArrayLen != null && Array.isArray(value) && value.length > maxArrayLen) {
-      return `[length: ${value.length}]`;
-    }
-    if (maxStringLen != null && typeof value === 'string' && value.length > maxStringLen) {
-      return value.slice(0, maxStringLen) + '...';
-    }
-
-    return value;
-  };
-};
+    }, [initialData, text]); // TODO(burdon): Need structural diff.
+
+    return (
+      <div className='flex flex-col bs-full overflow-hidden' ref={forwardedRef}>
+        <Input.Root validationValence={error ? 'error' : 'success'}>
+          <Input.TextInput
+            classNames={['p-1 pli-2 font-mono', error && 'border-rose-500']}
+            variant='subdued'
+            value={text}
+            placeholder='JSONPath (e.g., $.graph.nodes)'
+            onChange={(event) => setText(event.target.value)}
+          />
+        </Input.Root>
+        <SyntaxHighlighter
+          language='json'
+          classNames={['is-full overflow-y-auto text-sm', classNames]}
+          data-testid={testId}
+        >
+          {safeStringify(data, replacer && createReplacer(replacer), 2)}
+        </SyntaxHighlighter>
+      </div>
+    );
+  },
+);

package/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx

@@ -12,7 +12,7 @@ import { SyntaxHighlighter } from './SyntaxHighlighter';
 const meta = {
   title: 'ui/react-ui-syntax-highlighter/SyntaxHighlighter',
   component: SyntaxHighlighter,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof SyntaxHighlighter>;
 
 export default meta;

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -8,7 +8,7 @@ import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-asy
 import { coldarkDark as dark, coldarkCold as light } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 const zeroWidthSpace = '\u200b';
 
@@ -36,9 +36,9 @@ export const SyntaxHighlighter = ({
   const { themeMode } = useThemeContext();
 
   return (
-    <div className={mx('flex is-full p-1 overflow-hidden text-baseText', classNames)}>
+    <div className={mx('flex is-full p-1 overflow-hidden', classNames)}>
       <NativeSyntaxHighlighter
-        className='is-full overflow-auto scrollbar-thin'
+        className='!m-0 is-full overflow-auto scrollbar-thin'
         language={languages[language as keyof typeof languages] || language}
         style={themeMode === 'dark' ? dark : light}
         customStyle={{