bytedance-flowgram/apps/docs/components/code-preview/index.tsx

/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

import { FC } from 'react';

import { useDark } from '@rspress/core/dist/runtime.js';
import { Sandpack } from '@codesandbox/sandpack-react';

interface CodePreviewProps {
  files: Record<string, string>;
  activeFile?: string;
}

export const CodePreview: FC<CodePreviewProps> = ({ files, activeFile }) => {
  const dark = useDark();
  return (
    <Sandpack
      files={files}
      theme={dark ? 'dark' : 'light'}
      template="react-ts"
      customSetup={{
        dependencies: {
          '@flowgram.ai/free-layout-editor': '0.5.5',
          '@flowgram.ai/free-snap-plugin': '0.5.5',
          '@flowgram.ai/minimap-plugin': '0.5.5',
          'styled-components': '5.3.11',
        },
      }}
      options={{
        editorHeight: 350,
        activeFile,
      }}
    />
  );
};

export const FixedLayoutCodePreview: FC<CodePreviewProps> = ({ files, activeFile }) => {
  const dark = useDark();
  return (
    <Sandpack
      files={files}
      theme={dark ? 'dark' : 'light'}
      template="react-ts"
      customSetup={{
        dependencies: {
          '@flowgram.ai/fixed-layout-editor': '0.1.0-alpha.19',
          // 为了解决semi无法在sandpack使用的问题，单独发了包，将semi打包进@flowgram.ai/fixed-semi-materials中
          '@flowgram.ai/fixed-semi-materials': '0.1.0-alpha.19',
          '@flowgram.ai/minimap-plugin': '0.1.0-alpha.19',
          'styled-components': '5.3.11',
        },
      }}
      options={{
        editorHeight: 350,
        activeFile,
      }}
    />
  );
};