Mantine 통합

pnpm add @mantine/core @inkio/editor @inkio/extension

// Mantine 스타일 먼저
import '@mantine/core/styles.css';
 
// 그 다음 Inkio 스타일
import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';

import '@mantine/core/styles.css';
import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';
 
import { Card, Container, MantineProvider, Stack, Text, Title } from '@mantine/core';
import { Editor } from '@inkio/editor';
import { getDefaultInkioExtensions } from '@inkio/extension';
import { useMemo } from 'react';
 
export default function MantineEditor({ theme }: { theme?: 'light' | 'dark' }) {
  const extensions = useMemo(
    () => getDefaultInkioExtensions({ placeholder: 'Start typing...' }),
    [],
  );
 
  return (
    <MantineProvider forceColorScheme={theme ?? 'light'}>
      <Container size="lg" py="md">
        <Stack>
          <div>
            <Title order={2}>My Editor</Title>
            <Text c="dimmed" size="sm">
              Mantine + Inkio
            </Text>
          </div>
 
          <Card withBorder shadow="sm" radius="md" p="md">
            <Editor
              extensions={extensions}
              initialContent="<p>Hello from Mantine!</p>"
              showBubbleMenu
              showFloatingMenu
            />
          </Card>
        </Stack>
      </Container>
    </MantineProvider>
  );
}

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