@dxos/react-ui-syntax-highlighter 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/src/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -2,12 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { CSSProperties } 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 { ScrollArea, useThemeContext } from '@dxos/react-ui';
+import { Clipboard, useThemeContext } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/ui-theme';
 
 const zeroWidthSpace = '\u200b';
@@ -17,11 +17,28 @@ const languages = {
   ts: 'typescript',
 };
 
-export type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {
+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.
  *
@@ -30,34 +47,69 @@ export type SyntaxHighlighterProps = NaturalSyntaxHighlighterProps & {
  */
 export const SyntaxHighlighter = composable<HTMLDivElement, SyntaxHighlighterProps>(
   (
-    { children, language = 'text', fallback = zeroWidthSpace, classNames, className, style, ...nativeProps },
+    {
+      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 (
-      <ScrollArea.Root {...composableProps({ classNames, className })} thin ref={forwardedRef}>
-        <ScrollArea.Viewport>
-          {/* NOTE: The div prevents NativeSyntaxHighlighter from managing scrolling. */}
-          <div role='none'>
-            <NativeSyntaxHighlighter
-              language={languages[language as keyof typeof languages] || language}
-              style={(style as { [key: string]: CSSProperties }) ?? (themeMode === 'dark' ? dark : light)}
-              customStyle={{
-                background: 'unset',
-                border: 'none',
-                boxShadow: 'none',
-                padding: 0,
-                margin: 0,
-              }}
-              {...nativeProps}
-            >
-              {/* Non-empty fallback prevents collapse. */}
-              {children || fallback}
-            </NativeSyntaxHighlighter>
+      <div
+        {...composableProps(
+          { classNames, className, role, style },
+          {
+            role: 'none',
+            classNames: copyButton && 'relative group',
+          },
+        )}
+        ref={forwardedRef}
+      >
+        <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>
+
+        {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>
-        </ScrollArea.Viewport>
-      </ScrollArea.Root>
+        )}
+      </div>
     );
   },
 );

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,37 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type ComposableProps } from '@dxos/ui-types';
-import { type CreateReplacerProps } from '@dxos/util';
-type JsonRootProps = PropsWithChildren<{
-    data?: any;
-    replacer?: CreateReplacerProps;
-}>;
-type JsonContentProps = ComposableProps;
-type JsonFilterProps = ComposableProps<{
-    placeholder?: string;
-}>;
-type JsonDataProps = ComposableProps<{
-    data?: any;
-    replacer?: CreateReplacerProps;
-    testId?: string;
-}>;
-export declare const Json: {
-    Root: React.ForwardRefExoticComponent<{
-        data?: any;
-        replacer?: CreateReplacerProps;
-    } & {
-        children?: React.ReactNode | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<JsonContentProps, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
-    Filter: React.ForwardRefExoticComponent<Omit<{
-        placeholder?: string;
-    }, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & React.RefAttributes<HTMLInputElement>>;
-    Data: React.ForwardRefExoticComponent<Omit<JsonDataProps, "className"> & {
-        classNames?: import("@dxos/ui-types").ClassNameValue;
-    } & Pick<React.HTMLAttributes<Element>, "className" | "children" | "role" | "style"> & React.RefAttributes<HTMLDivElement>>;
-};
-export type { JsonRootProps, JsonContentProps, JsonFilterProps, JsonDataProps };
-//# 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":"AAKA,OAAO,KAAK,EAAE,EAEZ,KAAK,iBAAiB,EAMvB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,YAAY,CAAC;AAuCrF,KAAK,aAAa,GAAG,iBAAiB,CAAC;IACrC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC,CAAC;AAuCH,KAAK,gBAAgB,GAAG,eAAe,CAAC;AAmBxC,KAAK,eAAe,GAAG,eAAe,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AA8BH,KAAK,aAAa,GAAG,eAAe,CAAC;IACnC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AA4BH,eAAO,MAAM,IAAI;;eA5HR,GAAG;mBACC,mBAAmB;;;;;;;;sBA4DhB,MAAM;;;;;;;CAoErB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC"}

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

@@ -1,21 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<{
-        data?: any;
-        replacer?: import("@dxos/util").CreateReplacerProps;
-    } & {
-        children?: React.ReactNode | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
-    decorators: import("@storybook/react").Decorator[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-/** Standalone Json.Data — simplest usage. */
-export declare const Default: Story;
-/** Circular reference handling. */
-export declare const Cycle: Story;
-/** Large dataset with replacer. */
-export declare const Filter: 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,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AA4D1B,QAAA,MAAM,IAAI;;;;;;;;;CAIM,CAAC;AAEjB,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,6CAA6C;AAC7C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,mCAAmC;AACnC,eAAO,MAAM,MAAM,EAAE,KAapB,CAAC"}

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

@@ -1,2 +0,0 @@
-export { Json, type JsonRootProps, type JsonContentProps, type JsonFilterProps, type JsonDataProps } 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,OAAO,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC"}

package/src/Json/Json.tsx

@@ -1,190 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { JSONPath } from 'jsonpath-plus';
-import React, {
-  createContext,
-  type PropsWithChildren,
-  forwardRef,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-import { Input } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/ui-theme';
-import { type ComposableProps } from '@dxos/ui-types';
-import { type CreateReplacerProps, createReplacer, safeStringify } from '@dxos/util';
-
-import { SyntaxHighlighter } from '../SyntaxHighlighter';
-
-//
-// Context
-//
-
-type JsonContextType = {
-  data: any;
-  filteredData: any;
-  filterText: string;
-  setFilterText: (text: string) => void;
-  filterError: Error | null;
-  replacer?: CreateReplacerProps;
-};
-
-const JsonContext = createContext<JsonContextType | null>(null);
-
-/** Require Json context (throws if used outside Json.Root). */
-const useJsonContext = (consumerName: string): JsonContextType => {
-  const context = useContext(JsonContext);
-  if (!context) {
-    throw new Error(`\`${consumerName}\` must be used within \`Json.Root\`.`);
-  }
-  return context;
-};
-
-/** Optional Json context (returns null outside Json.Root). */
-const useOptionalJsonContext = (): JsonContextType | null => {
-  return useContext(JsonContext);
-};
-
-//
-// Root
-//
-
-const JSON_ROOT_NAME = 'Json.Root';
-
-type JsonRootProps = PropsWithChildren<{
-  data?: any;
-  replacer?: CreateReplacerProps;
-}>;
-
-/** Headless context provider for Json composite. */
-const JsonRoot = forwardRef<HTMLDivElement, JsonRootProps>(({ children, data, replacer }, _forwardedRef) => {
-  const [filterText, setFilterText] = useState('');
-  const [filteredData, setFilteredData] = useState(data);
-  const [filterError, setFilterError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    if (!filterText.trim().length) {
-      setFilteredData(data);
-      setFilterError(null);
-    } else {
-      try {
-        setFilteredData(JSONPath({ path: filterText, json: data }));
-        setFilterError(null);
-      } catch (err) {
-        setFilteredData(data);
-        setFilterError(err as Error);
-      }
-    }
-  }, [data, filterText]);
-
-  const context = useMemo(
-    () => ({ data, filteredData, filterText, setFilterText, filterError, replacer }),
-    [data, filteredData, filterText, setFilterText, filterError, replacer],
-  );
-
-  return <JsonContext.Provider value={context}>{children}</JsonContext.Provider>;
-});
-
-JsonRoot.displayName = JSON_ROOT_NAME;
-
-//
-// Content
-//
-
-const JSON_CONTENT_NAME = 'Json.Content';
-
-type JsonContentProps = ComposableProps;
-
-/** Layout container for Json composite parts. */
-const JsonContent = composable<HTMLDivElement, JsonContentProps>(({ children, ...props }, forwardedRef) => {
-  return (
-    <div {...composableProps(props, { classNames: 'flex flex-col h-full min-h-0 overflow-hidden' })} ref={forwardedRef}>
-      {children}
-    </div>
-  );
-});
-
-JsonContent.displayName = JSON_CONTENT_NAME;
-
-//
-// Filter
-//
-
-const JSON_FILTER_NAME = 'Json.Filter';
-
-type JsonFilterProps = ComposableProps<{
-  placeholder?: string;
-}>;
-
-/** JSONPath filter input. Must be used within Json.Root. */
-const JsonFilter = forwardRef<HTMLInputElement, JsonFilterProps>(
-  ({ classNames, placeholder = 'JSONPath (e.g., $.graph.nodes)' }, forwardedRef) => {
-    const { filterText, setFilterText, filterError } = useJsonContext(JSON_FILTER_NAME);
-
-    return (
-      <Input.Root validationValence={filterError ? 'error' : 'success'}>
-        <Input.TextInput
-          classNames={['p-1 px-2 font-mono', filterError && 'border-rose-500', classNames]}
-          variant='subdued'
-          value={filterText}
-          placeholder={placeholder}
-          onChange={(event) => setFilterText(event.target.value)}
-          ref={forwardedRef}
-        />
-      </Input.Root>
-    );
-  },
-);
-
-JsonFilter.displayName = JSON_FILTER_NAME;
-
-//
-// Data
-//
-
-const JSON_DATA_NAME = 'Json.Data';
-
-type JsonDataProps = ComposableProps<{
-  data?: any;
-  replacer?: CreateReplacerProps;
-  testId?: string;
-}>;
-
-/** Syntax-highlighted JSON display. Works standalone or within Json.Root. */
-const JsonData = composable<HTMLDivElement, JsonDataProps>(
-  ({ data: dataProp, replacer: replacerProp, testId, ...props }, forwardedRef) => {
-    const context = useOptionalJsonContext();
-    const data = dataProp ?? context?.filteredData;
-    const replacer = replacerProp ?? context?.replacer;
-
-    return (
-      <SyntaxHighlighter
-        {...composableProps(props, { classNames: 'flex-1 min-h-0 w-full py-1 px-2 overflow-y-auto text-sm' })}
-        language='json'
-        data-testid={testId}
-        ref={forwardedRef}
-      >
-        {safeStringify(data, replacer && createReplacer(replacer), 2)}
-      </SyntaxHighlighter>
-    );
-  },
-);
-
-JsonData.displayName = JSON_DATA_NAME;
-
-//
-// Json
-//
-
-export const Json = {
-  Root: JsonRoot,
-  Content: JsonContent,
-  Filter: JsonFilter,
-  Data: JsonData,
-};
-
-export type { JsonRootProps, JsonContentProps, JsonFilterProps, JsonDataProps };

package/src/Json/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export { Json, type JsonRootProps, type JsonContentProps, type JsonFilterProps, type JsonDataProps } from './Json';