refactor: CodeBlock migration

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Block/BlockRenderer.tsx

@@ -67,16 +67,16 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
         </div>
       );
 
-    // case 'code':
-    //   return (
-    //     <div {...blockProps}>
-    //       <CodeBlock
-    //         code={block.code.rich_text[0].text.content}
-    //         language={block.code.language}
-    //         caption={block.code.caption?.[0]?.plain_text}
-    //       />
-    //     </div>
-    //   );
+    case 'code':
+      return (
+        <div {...blockProps}>
+          <CodeBlock
+            code={block.code.rich_text[0].text.content}
+            language={block.code.language}
+            caption={block.code.caption?.[0]?.plain_text}
+          />
+        </div>
+      );
 
     // case 'image':
     //   return (

packages/notion-to-jsx/src/components/Renderer/components/Code/CodeBlock.tsx

@@ -1,17 +1,15 @@
 import React, { useMemo } from 'react';
+import { RichTextItem } from '../../../../types';
+import { codeBlock } from './styles.css';
 import Prism, { Grammar } from 'prismjs';
+import { MemoizedRichText } from '../MemoizedComponents';
+
 import 'prismjs/themes/prism.css';
 import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-tsx';
 
-import { MemoizedRichText } from '../MemoizedComponents';
-import { CodeBlockWrapper } from './styles';
-import { RichTextItem } from '../../../../types';
-import { Caption } from '../Media';
-
-// Ensure Prism is available in the browser environment
 if (typeof window !== 'undefined') {
   window.Prism = Prism;
 }
@@ -31,11 +29,13 @@ const CodeBlock: React.FC<Props> = ({ code, language, caption }) => {
 
   return (
     <>
-      <CodeBlockWrapper dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+      <pre className={codeBlock}>
+        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
+      </pre>
       {caption && (
-        <Caption>
+        <figcaption>
           <MemoizedRichText richTexts={caption} />
-        </Caption>
+        </figcaption>
       )}
     </>
   );

packages/notion-to-jsx/src/components/Renderer/components/Code/index.ts

@@ -1,2 +1 @@
 export { default as CodeBlock } from './CodeBlock';
-export * from './styles';

packages/notion-to-jsx/src/components/Renderer/components/Code/styles.css.ts

@@ -0,0 +1,69 @@
+import { style, globalStyle } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
+
+export const codeBlock = style({
+  backgroundColor: vars.colors.code.background,
+  color: vars.colors.code.text,
+  padding: vars.spacing.md,
+  borderRadius: vars.borderRadius.md,
+  overflow: 'auto',
+  fontFamily: vars.typography.fontFamily.code,
+  fontSize: '0.85em',
+  lineHeight: vars.typography.lineHeight.relaxed,
+  margin: `${vars.spacing.sm} 0`,
+});
+
+globalStyle(`${codeBlock} code`, {
+  fontFamily: 'inherit',
+});
+
+globalStyle(
+  `${codeBlock} .token.comment, ${codeBlock} .token.prolog, ${codeBlock} .token.doctype, ${codeBlock} .token.cdata`,
+  {
+    color: '#666666',
+    fontStyle: 'italic',
+  }
+);
+
+globalStyle(`${codeBlock} .token.punctuation`, {
+  color: '#999999',
+});
+
+globalStyle(
+  `${codeBlock} .token.property, ${codeBlock} .token.tag, ${codeBlock} .token.boolean, ${codeBlock} .token.number, ${codeBlock} .token.constant, ${codeBlock} .token.symbol`,
+  {
+    color: '#905',
+  }
+);
+
+globalStyle(
+  `${codeBlock} .token.selector, ${codeBlock} .token.attr-name, ${codeBlock} .token.string, ${codeBlock} .token.char, ${codeBlock} .token.builtin`,
+  {
+    color: '#690',
+  }
+);
+
+globalStyle(
+  `${codeBlock} .token.operator, ${codeBlock} .token.entity, ${codeBlock} .token.url, ${codeBlock} .language-css .token.string, ${codeBlock} .style .token.string`,
+  {
+    color: '#9a6e3a',
+  }
+);
+
+globalStyle(
+  `${codeBlock} .token.atrule, ${codeBlock} .token.attr-value, ${codeBlock} .token.keyword`,
+  {
+    color: '#07a',
+  }
+);
+
+globalStyle(`${codeBlock} .token.function, ${codeBlock} .token.class-name`, {
+  color: '#dd4a68',
+});
+
+globalStyle(
+  `${codeBlock} .token.regex, ${codeBlock} .token.important, ${codeBlock} .token.variable`,
+  {
+    color: '#e90',
+  }
+);

packages/notion-to-jsx/src/components/Renderer/components/Code/styles.ts

@@ -8,6 +8,6 @@ export default defineConfig({
   splitting: false,
   sourcemap: true,
   clean: true,
-  external: ['react', 'react-dom', 'styled-components'],
+  external: ['react', 'react-dom', 'styled-components', 'prismjs'],
   esbuildPlugins: [vanillaExtractPlugin()],
 });