Radix UI 통합

pnpm add @radix-ui/themes @inkio/editor @inkio/extension

// Radix 스타일 먼저
import '@radix-ui/themes/styles.css';
 
// 그 다음 Inkio 스타일
import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';

import '@radix-ui/themes/styles.css';
import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';
 
import { Box, Card, Container, Heading, Text, Theme } from '@radix-ui/themes';
import { Editor } from '@inkio/editor';
import { getDefaultInkioExtensions } from '@inkio/extension';
import { useMemo } from 'react';
 
export default function RadixEditor({ theme }: { theme?: 'light' | 'dark' }) {
  const extensions = useMemo(
    () => getDefaultInkioExtensions({ placeholder: 'Start typing...' }),
    [],
  );
 
  return (
    <Theme appearance={theme ?? 'light'} accentColor="blue" grayColor="slate" radius="medium">
      <Container size="3" p="6">
        <Box mb="4">
          <Heading size="6">My Editor</Heading>
          <Text size="2" color="gray">
            Radix Themes + Inkio
          </Text>
        </Box>
 
        <Card size="3">
          <Editor
            extensions={extensions}
            initialContent="<p>Hello from Radix!</p>"
            showBubbleMenu
            showFloatingMenu
          />
        </Card>
      </Container>
    </Theme>
  );
}

useEffect(() => {
  document.documentElement.classList.toggle('dark', theme === 'dark');
}, [theme]);