@dxos/react-ui-syntax-highlighter 0.8.4-main.dedc0f3 → 0.8.4-main.e00bdcdb52

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -2,61 +2,116 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { Children } from 'react';
 import { type SyntaxHighlighterProps as NaturalSyntaxHighlighterProps } from 'react-syntax-highlighter';
 import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-async-light';
 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 { Clipboard, useThemeContext } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 const zeroWidthSpace = '\u200b';
 
-export type SyntaxHighlighterProps = ThemedClassName<
-  NaturalSyntaxHighlighterProps & {
-    fallback?: string;
-  }
->;
+const languages = {
+  js: 'javascript',
+  ts: 'typescript',
+};
+
+export type SyntaxHighlighterProps = Pick<
+  NaturalSyntaxHighlighterProps,
+  | 'language'
+  | 'renderer'
+  | 'showLineNumbers'
+  | 'showInlineLineNumbers'
+  | 'startingLineNumber'
+  | 'wrapLines'
+  | 'wrapLongLines'
+  | 'PreTag'
+> & {
+  themeStyle?: NaturalSyntaxHighlighterProps['style'];
+  fallback?: string;
+  copyButton?: boolean;
+};
 
 /**
+ * Inline, non-scrolling wrapper around `react-syntax-highlighter`.
+ *
+ * Use directly for small snippets (e.g. inside markdown code blocks).
+ * For scrollable panels, compose with `Syntax.Viewport`.
+ *
  * NOTE: Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
  * The lightweight version will load specific language parsers asynchronously.
  *
  * https://github.com/react-syntax-highlighter/react-syntax-highlighter
  * https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
  */
-export const SyntaxHighlighter = ({
-  classNames,
-  children,
-  language = 'text',
-  fallback = zeroWidthSpace,
-  ...props
-}: SyntaxHighlighterProps) => {
-  const { themeMode } = useThemeContext();
-
-  return (
-    <div className={mx('is-full p-1 overflow-hidden font-thin text-baseText', classNames)}>
-      <NativeSyntaxHighlighter
-        className='is-full overflow-auto scrollbar-thin'
-        language={languages[language as keyof typeof languages] || language}
-        style={themeMode === 'dark' ? dark : light}
-        customStyle={{
-          background: 'unset',
-          border: 'none',
-          boxShadow: 'none',
-          padding: 0,
-          margin: 0,
-        }}
-        {...props}
+export const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(
+  (
+    {
+      classNames,
+      className,
+      children,
+      role,
+      style,
+      themeStyle,
+      language = 'text',
+      fallback = zeroWidthSpace,
+      copyButton,
+      ...nativeProps
+    },
+    forwardedRef,
+  ) => {
+    const { themeMode } = useThemeContext();
+    const source = Children.toArray(children).join('') || fallback;
+
+    const hasCustomTheme = themeStyle && typeof themeStyle === 'object' && Object.keys(themeStyle).length > 0;
+    const prismTheme = hasCustomTheme ? themeStyle : themeMode === 'dark' ? dark : light;
+
+    return (
+      <div
+        {...composableProps(
+          { classNames, className, role, style },
+          {
+            role: 'none',
+            classNames: copyButton && 'relative group',
+          },
+        )}
+        ref={forwardedRef}
       >
-        {/* Non-empty fallback prevents collapse. */}
-        {children || fallback}
-      </NativeSyntaxHighlighter>
-    </div>
-  );
-};
+        <NativeSyntaxHighlighter
+          language={languages[language as keyof typeof languages] || language}
+          style={prismTheme}
+          customStyle={{
+            background: 'unset',
+            border: 'none',
+            boxShadow: 'none',
+            padding: 0,
+            margin: 0,
+          }}
+          {...nativeProps}
+        >
+          {/* Non-empty fallback prevents collapse. */}
+          {source}
+        </NativeSyntaxHighlighter>
 
-const languages = {
-  js: 'javascript',
-  ts: 'typescript',
-};
+        {copyButton && (
+          <div
+            role='none'
+            className='pointer-events-none absolute top-1 right-1 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100'
+          >
+            <Clipboard.Provider>
+              <Clipboard.IconButton
+                value={source}
+                variant='ghost'
+                size={4}
+                classNames='pointer-events-auto aspect-square rounded-sm'
+              />
+            </Clipboard.Provider>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+SyntaxHighlighter.displayName = 'SyntaxHighlighter';

package/src/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './Json';
+export * from './JsonHighlighter';
+export * from './Syntax';
 export * from './SyntaxHighlighter';

package/dist/types/src/Json/Json.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-export type JsonProps = ThemedClassName<{
-    data?: any;
-    filter?: boolean;
-    replacer?: CreateReplacerProps;
-    testId?: string;
-}>;
-export declare const Json: ({ filter, ...params }: JsonProps) => React.JSX.Element;
-export declare const JsonFilter: ({ classNames, data: initialData, replacer, testId }: JsonProps) => React.JSX.Element;
-export type CreateReplacerProps = {
-    omit?: string[];
-    parse?: string[];
-    maxDepth?: number;
-    maxArrayLen?: number;
-    maxStringLen?: number;
-};
-export type JsonReplacer = (this: any, key: string, value: any) => any;
-export declare const createReplacer: ({ omit, parse, maxDepth, maxArrayLen, maxStringLen, }: CreateReplacerProps) => JsonReplacer;
-//# sourceMappingURL=Json.d.ts.map

package/dist/types/src/Json/Json.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Json.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAS,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAM7D,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IACtC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI,GAAI,uBAAuB,SAAS,sBAWpD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,qDAAqD,SAAS,sBAkCxF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;AAEvE,eAAO,MAAM,cAAc,GAAI,uDAM5B,mBAAmB,KAAG,YA2CxB,CAAC"}

package/dist/types/src/Json/Json.stories.d.ts

@@ -1,14 +0,0 @@
-import '@dxos-theme';
-import { type StoryObj } from '@storybook/react-vite';
-import { Json } from './Json';
-declare const meta: {
-    title: string;
-    component: ({ filter, ...params }: import("./Json").JsonProps) => import("react").JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default meta;
-type Story = StoryObj<typeof Json>;
-export declare const Default: Story;
-export declare const Filter: Story;
-export declare const Large: Story;
-//# sourceMappingURL=Json.stories.d.ts.map

package/dist/types/src/Json/Json.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Json.stories.d.ts","sourceRoot":"","sources":["../../../../src/Json/Json.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKjE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA6C9B,QAAA,MAAM,IAAI;;;;CAImB,CAAC;AAE9B,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAWnB,CAAC"}

package/dist/types/src/Json/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Json';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/Json/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Json/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/src/Json/Json.stories.tsx

@@ -1,95 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-
-import { faker } from '@dxos/random';
-import { ColumnContainer, withLayout, withTheme } from '@dxos/storybook-utils';
-
-import { Json } from './Json';
-
-faker.seed(0);
-
-const createNode = () => {
-  const data: Record<string, any> = {};
-  const keys = [...Array(faker.number.int({ min: 1, max: 5 }))].map(() => faker.lorem.word());
-  keys.forEach((key) => {
-    switch (faker.helpers.arrayElement(['object', 'string', 'number', 'boolean', 'null'])) {
-      case 'object':
-        data[key] = createNode();
-        break;
-      case 'string':
-        data[key] = faker.lorem.word();
-        break;
-      case 'number':
-        data[key] = faker.number.int();
-        break;
-      case 'boolean':
-        data[key] = faker.datatype.boolean();
-        break;
-      case 'null':
-        data[key] = null;
-        break;
-    }
-  });
-
-  return data;
-};
-
-const createData = ({ depth = 2, children = 3 } = {}): any => {
-  const createChildren = (root: any, d = 0) => {
-    if (d < depth) {
-      const num = faker.number.int({ min: 1, max: Math.round(Math.log(depth + 1 - d) * children) });
-      root.children = [...new Array(num)].map(() => {
-        return createChildren(createNode(), d + 1);
-      });
-    }
-
-    return root;
-  };
-
-  return createChildren(createNode());
-};
-
-const meta = {
-  title: 'ui/react-ui-syntax-highlighter/Json',
-  component: Json,
-  decorators: [withTheme, withLayout({ fullscreen: true, Container: ColumnContainer })],
-} satisfies Meta<typeof Json>;
-
-export default meta;
-
-type Story = StoryObj<typeof Json>;
-
-const data = createData();
-
-export const Default: Story = {
-  args: {
-    classNames: 'text-sm',
-    data,
-  },
-};
-
-export const Filter: Story = {
-  args: {
-    classNames: 'text-sm',
-    filter: true,
-    data,
-  },
-};
-
-export const Large: Story = {
-  args: {
-    classNames: 'text-sm',
-    filter: true,
-    data: createData({ depth: 5 }),
-    replacer: {
-      maxDepth: 3,
-      maxArrayLen: 10,
-      maxStringLen: 10,
-    },
-  },
-};

package/src/Json/Json.tsx

@@ -1,130 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-// TODO(burdon): Use to jsonpath-plus.
-import jp from 'jsonpath';
-import React, { useEffect, useState } from 'react';
-
-import { Input, type ThemedClassName } from '@dxos/react-ui';
-
-import { SyntaxHighlighter } from '../SyntaxHighlighter';
-
-const defaultClassNames = '!m-0 grow overflow-y-auto';
-
-export type JsonProps = ThemedClassName<{
-  data?: any;
-  filter?: boolean;
-  replacer?: CreateReplacerProps;
-  testId?: string;
-}>;
-
-export const Json = ({ filter, ...params }: JsonProps) => {
-  if (filter) {
-    return <JsonFilter {...params} />;
-  }
-
-  const { classNames, data, replacer, testId } = params;
-  return (
-    <SyntaxHighlighter language='json' classNames={[defaultClassNames, classNames]} data-testid={testId}>
-      {JSON.stringify(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 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;
-      }
-    }
-    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;
-  };
-};