@hanzo/ui 4.5.3 → 4.6.0

package/primitives/markdown-preview.tsx

@@ -0,0 +1,609 @@
+import { Primitive } from '@radix-ui/react-primitive';
+import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
+import { Element } from 'hast';
+
+import React, {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  createContext,
+  type ElementType,
+  type FC,
+  memo,
+  type ReactNode,
+  useContext,
+  useMemo,
+} from 'react';
+import ReactMarkdown, { Options } from 'react-markdown';
+import {
+  PrismAsyncLight,
+  type SyntaxHighlighterProps as SHP,
+} from 'react-syntax-highlighter';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
+import { default as github } from 'react-syntax-highlighter/dist/esm/styles/hljs/github';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import {
+  memoCompareNodes,
+  memoizeMarkdownComponents,
+} from '../helpers/memoization';
+import { cn } from '../src/utils';
+import { CopyToClipboardIcon } from './copy-to-clipboard-icon';
+
+import { MermaidDiagram } from './mermaid';
+
+export type CodeHeaderProps = {
+  node?: Element | undefined;
+  language: string | undefined;
+  code: string;
+};
+
+export const CodeHeader: FC<CodeHeaderProps> = ({ language, code }) => {
+  return (
+    <div className="code-header-root bg-bg-darker text-text-default flex items-center justify-between gap-4 rounded-t-lg px-4 py-1">
+      <span className="code-header-language text-text-secondary text-xs font-medium lowercase">
+        {language}
+      </span>
+      <CopyToClipboardIcon
+        className={cn(
+          'text-text-secondary h-7 w-7 bg-transparent hover:bg-gray-900 [&>svg]:h-3 [&>svg]:w-3',
+        )}
+        string={code}
+      />
+    </div>
+  );
+};
+
+const makeMakeSyntaxHighlighter =
+  (SyntaxHighlighter: ComponentType<SHP>) =>
+  (config: Omit<SHP, 'language' | 'children'>) => {
+    const PrismSyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
+      components: { Pre, Code },
+      language,
+      code,
+    }) => {
+      return (
+        <SyntaxHighlighter
+          CodeTag={Code as any}
+          PreTag={Pre as any}
+          {...config}
+          language={language}
+        >
+          {code}
+        </SyntaxHighlighter>
+      );
+    };
+
+    PrismSyntaxHighlighter.displayName = 'PrismSyntaxHighlighter';
+
+    return PrismSyntaxHighlighter;
+  };
+
+// register languages you want to support
+PrismAsyncLight.registerLanguage('js', tsx);
+PrismAsyncLight.registerLanguage('jsx', tsx);
+PrismAsyncLight.registerLanguage('ts', tsx);
+PrismAsyncLight.registerLanguage('tsx', tsx);
+PrismAsyncLight.registerLanguage('python', python);
+
+export const makePrismAsyncLightSyntaxHighlighter =
+  makeMakeSyntaxHighlighter(PrismAsyncLight);
+
+export const SyntaxHighlighterBase = makePrismAsyncLightSyntaxHighlighter({
+  style: github,
+  customStyle: {
+    margin: 0,
+    width: '100%',
+    background: 'var(--color-bg-darker)',
+    padding: '1.5rem 1rem',
+    fontSize: '0.875em',
+  },
+});
+
+export const defaultComponents = memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => (
+    <h1
+      className={cn(
+        'mt-[1em] mb-[0.7em] scroll-m-20 text-[1.375rem] font-bold last:mb-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h2: ({ className, ...props }) => (
+    <h2
+      className={cn(
+        'text-em-xl mt-[0.8em] mb-[0.4em] scroll-m-20 font-semibold first:mt-0 last:mb-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }) => (
+    <h3
+      className={cn(
+        'text-em-lg mt-[1em] mb-[0.5em] scroll-m-20 font-semibold first:mt-0 last:mb-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }) => (
+    <h4
+      className={cn(
+        'text-em-base mt-[1em] mb-[0.5em] scroll-m-20 font-semibold first:mt-0 last:mb-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }) => (
+    <h5
+      className={cn(
+        'text-em-base mt-[1em] mb-[0.5em] font-semibold first:mt-0 last:mb-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  h6: ({ className, ...props }) => (
+    <h6
+      className={cn(
+        'text-em-base mt-[1em] mb-[0.5em] font-semibold first:mt-0 last:mb-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }) => (
+    <p
+      className={cn('text-em-base my-[0.5em] first:mt-0 last:mb-0', className)}
+      {...props}
+    />
+  ),
+  a: ({ className, ...props }) => (
+    <a
+      className={cn(
+        'font-medium text-blue-400 underline underline-offset-4',
+        className,
+      )}
+      target="_blank"
+      {...props}
+    />
+  ),
+  blockquote: ({ className, ...props }) => (
+    <blockquote
+      className={cn('border-l-2 pl-6 italic', className)}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }) => (
+    <ul
+      className={cn(
+        'text-em-base my-[1em] ml-6 list-disc [&>li]:mt-2',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  ol: ({ className, ...props }) => (
+    <ol
+      className={cn(
+        'text-em-base my-[1em] ml-6 list-decimal [&>li]:mt-[0.5em]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  hr: ({ className, ...props }) => (
+    <hr
+      className={cn('border-divider my-[2.25em] border-b', className)}
+      {...props}
+    />
+  ),
+  table: ({ className, ...props }) => (
+    <div className="my-[1.5em] size-full overflow-x-auto">
+      <table className="w-full border-collapse border-spacing-0" {...props} />
+    </div>
+  ),
+  thead: ({ className, ...props }) => (
+    <thead className={cn('[&>tr]:border-none', className)} {...props} />
+  ),
+  th: ({ className, ...props }) => (
+    <th
+      className={cn(
+        'text-em-sm px-[1em] py-[0.875em] text-left font-semibold first:rounded-tl-lg last:rounded-tr-lg [&[align=center]]:text-center [&[align=right]]:text-right',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }) => (
+    <td
+      className={cn(
+        'text-em-sm border-divider border-b px-[1em] py-[0.875em] text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  tr: ({ className, ...props }) => (
+    <tr
+      className={cn(
+        'm-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  sup: ({ className, ...props }) => (
+    <sup
+      className={cn('[&>a]:text-em-xs [&>a]:no-underline', className)}
+      {...props}
+    />
+  ),
+  pre: ({ className, ...props }) => (
+    <pre
+      className={cn(
+        'bg-bg-darker text-text-default overflow-x-auto rounded-b-lg !px-[1em] !py-[0.5em]',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return (
+      <code
+        className={cn(
+          !isCodeBlock &&
+            'bg-bg-darker text-em-sm border-divider rounded-sm p-[0.25em] font-semibold',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+  CodeHeader,
+  SyntaxHighlighter: SyntaxHighlighterBase,
+});
+
+export type PreComponent = ComponentType<
+  ComponentPropsWithoutRef<'pre'> & { node?: Element | undefined }
+>;
+export type CodeComponent = ComponentType<
+  ComponentPropsWithoutRef<'code'> & { node?: Element | undefined }
+>;
+
+export const PreContext = createContext<Omit<
+  ComponentPropsWithoutRef<PreComponent>,
+  'children'
+> | null>(null);
+
+export const IsRunningContext = createContext<boolean | undefined>(undefined);
+
+export const useIsMarkdownCodeBlock = () => {
+  return useContext(PreContext) !== null;
+};
+
+export const useIsRunning = () => {
+  return useContext(IsRunningContext);
+};
+
+export const PreOverride: PreComponent = ({ children, ...rest }) => {
+  return <PreContext.Provider value={rest}>{children}</PreContext.Provider>;
+};
+
+export const DefaultPre: PreComponent = ({
+  className,
+  ...rest
+}: ComponentPropsWithoutRef<'pre'>) => <pre className={className} {...rest} />;
+
+export const DefaultCode: CodeComponent = ({
+  className,
+  ...rest
+}: ComponentPropsWithoutRef<'code'>) => (
+  <code className={className} {...rest} />
+);
+
+export const DefaultCodeBlockContent: ComponentType<{
+  node: Element | undefined;
+  components: { Pre: PreComponent; Code: CodeComponent };
+  code: string | ReactNode | undefined;
+}> = ({ node, components: { Pre, Code }, code }) => (
+  <Pre>
+    <Code node={node}>{code}</Code>
+  </Pre>
+);
+
+export const DefaultCodeHeader: ComponentType<CodeHeaderProps> = () => null;
+
+type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
+
+export type MarkdownTextPrimitiveProps = Omit<
+  Options,
+  'components' | 'children'
+> & {
+  containerProps?: Omit<PrimitiveDivProps, 'children' | 'asChild'> | undefined;
+  containerComponent?: ElementType;
+  componentsByLanguage?:
+    | Record<
+        string,
+        {
+          CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+          SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
+        }
+      >
+    | undefined;
+  components?:
+    | (NonNullable<Options['components']> & {
+        SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps> | undefined;
+        CodeHeader?: ComponentType<CodeHeaderProps> | undefined;
+      })
+    | undefined;
+  content: string;
+  ref?: React.RefObject<HTMLDivElement>;
+};
+
+export type CodeOverrideProps = ComponentPropsWithoutRef<CodeComponent> & {
+  components: {
+    Pre: PreComponent;
+    Code: CodeComponent;
+    CodeHeader: ComponentType<CodeHeaderProps>;
+    SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
+  };
+  componentsByLanguage?:
+    | Record<
+        string,
+        {
+          CodeHeader?: ComponentType<CodeHeaderProps>;
+          SyntaxHighlighter?: ComponentType<SyntaxHighlighterProps>;
+        }
+      >
+    | undefined;
+};
+
+export type SyntaxHighlighterProps = {
+  components: {
+    Pre: PreComponent;
+    Code: CodeComponent;
+  };
+  language: string;
+  code: string;
+  isRunning?: boolean;
+};
+
+export type CodeBlockProps = {
+  node: Element | undefined;
+  language: string;
+  code: string;
+  components: {
+    Pre: PreComponent;
+    Code: CodeComponent;
+    CodeHeader: ComponentType<CodeHeaderProps>;
+    SyntaxHighlighter: ComponentType<SyntaxHighlighterProps>;
+  };
+  isRunning?: boolean;
+};
+
+export const DefaultCodeBlock: FC<CodeBlockProps> = ({
+  node,
+  components: { Pre, Code, SyntaxHighlighter, CodeHeader },
+  language,
+  code,
+  isRunning,
+}) => {
+  const components = useMemo(() => ({ Pre, Code }), [Pre, Code]);
+
+  const SH = !!language ? SyntaxHighlighter : DefaultCodeBlockContent;
+
+  return (
+    <>
+      <CodeHeader node={node} language={language} code={code} />
+      <SH
+        node={node}
+        components={components}
+        language={language ?? 'unknown'}
+        code={code}
+        isRunning={isRunning}
+      />
+    </>
+  );
+};
+
+export const withDefaultProps =
+  <TProps extends { className?: string | undefined }>({
+    className,
+    ...defaultProps
+  }: Partial<TProps>) =>
+  ({ className: classNameProp, ...props }: TProps) => {
+    return {
+      className: cn(className, classNameProp),
+      ...defaultProps,
+      ...props,
+    } as TProps;
+  };
+
+const CodeBlockOverride: FC<CodeOverrideProps> = ({
+  node,
+  components: {
+    Pre,
+    Code,
+    SyntaxHighlighter: FallbackSyntaxHighlighter,
+    CodeHeader: FallbackCodeHeader,
+  },
+  componentsByLanguage = {},
+  children,
+  ...codeProps
+}) => {
+  const preProps = useContext(PreContext)!;
+  const isRunning = useIsRunning();
+  const getPreProps = withDefaultProps<any>(preProps);
+  const WrappedPre: PreComponent = useCallbackRef((props) => (
+    <Pre {...getPreProps(props)} />
+  ));
+
+  const getCodeProps = withDefaultProps<any>(codeProps);
+  const WrappedCode: CodeComponent = useCallbackRef((props) => (
+    <Code {...getCodeProps(props)} />
+  ));
+
+  const language = /language-(\w+)/.exec(codeProps.className || '')?.[1] ?? '';
+
+  // if the code content is not string (due to rehype plugins), return a default code block
+  if (typeof children !== 'string') {
+    return (
+      <DefaultCodeBlockContent
+        code={children}
+        components={{ Pre: WrappedPre, Code: WrappedCode }}
+        node={node}
+      />
+    );
+  }
+
+  const SyntaxHighlighter: ComponentType<SyntaxHighlighterProps> =
+    componentsByLanguage[language]?.SyntaxHighlighter ??
+    FallbackSyntaxHighlighter;
+
+  const CodeHeader: ComponentType<CodeHeaderProps> =
+    componentsByLanguage[language]?.CodeHeader ?? FallbackCodeHeader;
+
+  return (
+    <DefaultCodeBlock
+      node={node}
+      components={{
+        Pre: WrappedPre,
+        Code: WrappedCode,
+        SyntaxHighlighter,
+        CodeHeader,
+      }}
+      language={language || 'unknown'}
+      code={children}
+      isRunning={isRunning}
+    />
+  );
+};
+
+export const CodeOverrideBase: FC<CodeOverrideProps> = ({
+  node,
+  components,
+  componentsByLanguage,
+  ...props
+}) => {
+  const isCodeBlock = useContext(PreContext) !== null;
+  if (!isCodeBlock) return <components.Code {...props} />;
+  return (
+    <CodeBlockOverride
+      components={components}
+      componentsByLanguage={componentsByLanguage}
+      node={node}
+      {...props}
+    />
+  );
+};
+
+export const CodeOverride = memo(CodeOverrideBase, (prev, next) => {
+  const isEqual =
+    prev.components === next.components &&
+    prev.componentsByLanguage === next.componentsByLanguage &&
+    memoCompareNodes(prev, next);
+  return isEqual;
+});
+
+export const MarkdownTextPrimitive = ({
+  components: userComponents,
+  className,
+  containerProps,
+  containerComponent: Container = 'div',
+  content,
+  componentsByLanguage,
+  ref,
+  isRunning,
+  ...rest
+}: MarkdownTextPrimitiveProps & { isRunning?: boolean }) => {
+  const {
+    pre = DefaultPre,
+    code = DefaultCode,
+    SyntaxHighlighter = DefaultCodeBlockContent,
+    CodeHeader = DefaultCodeHeader,
+  } = userComponents ?? {};
+
+  const useCodeOverrideComponents = useMemo(() => {
+    return {
+      Pre: pre,
+      Code: code,
+      SyntaxHighlighter,
+      CodeHeader,
+    };
+  }, [pre, code, SyntaxHighlighter, CodeHeader]);
+  const CodeComponent = useCallbackRef((props) => (
+    <CodeOverride
+      components={useCodeOverrideComponents}
+      componentsByLanguage={componentsByLanguage}
+      {...props}
+    />
+  ));
+
+  const components: Options['components'] = useMemo(() => {
+    const { pre, code, SyntaxHighlighter, CodeHeader, ...componentsRest } =
+      userComponents ?? {};
+    return {
+      ...componentsRest,
+      pre: PreOverride,
+      code: CodeComponent,
+    };
+  }, [CodeComponent, userComponents]);
+
+  return (
+    <Container
+      // data-status={status.type}
+      {...containerProps}
+      className={cn(className, containerProps?.className)}
+      ref={ref}
+    >
+      <IsRunningContext.Provider value={isRunning}>
+        <ReactMarkdown components={components} {...rest}>
+          {content}
+        </ReactMarkdown>
+      </IsRunningContext.Provider>
+    </Container>
+  );
+};
+
+MarkdownTextPrimitive.displayName = 'MarkdownTextPrimitive';
+
+export type MakeMarkdownTextProps = MarkdownTextPrimitiveProps & {
+  isRunning?: boolean;
+};
+
+export const MarkdownTextBase = ({
+  className,
+  isRunning,
+  components: userComponents,
+  ...rest
+}: MakeMarkdownTextProps) => {
+  return (
+    <MarkdownTextPrimitive
+      components={defaultComponents}
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+      className={cn(isRunning && 'md-running', className)}
+      isRunning={isRunning}
+      componentsByLanguage={{
+        mermaid: {
+          SyntaxHighlighter: MermaidDiagram,
+        },
+      }}
+      {...rest}
+    />
+  );
+};
+export const MarkdownText = memo(
+  MarkdownTextBase,
+  (prev, next) =>
+    prev.content === next.content &&
+    prev.isRunning === next.isRunning &&
+    prev.className === next.className,
+);