Mantine 통합

pnpm add @mantine/core @inkio/editor react react-dom

import '@mantine/core/styles.css';
import '@inkio/editor/minimal.css';
import './inkio-mantine.css';

.inkio {
  --inkio-font-family: var(--mantine-font-family);
  --inkio-font-mono: var(--mantine-font-family-monospace);
 
  --inkio-radius-xs: var(--mantine-radius-xs);
  --inkio-radius-sm: var(--mantine-radius-sm);
  --inkio-radius: var(--mantine-radius-default);
  --inkio-radius-md: var(--mantine-radius-md);
  --inkio-radius-lg: var(--mantine-radius-lg);
 
  --inkio-shadow: var(--mantine-shadow-xs);
  --inkio-shadow-lg: var(--mantine-shadow-md);
  --inkio-shadow-xl: var(--mantine-shadow-xl);
  --inkio-dark-shadow: var(--mantine-shadow-xs);
  --inkio-dark-shadow-lg: var(--mantine-shadow-md);
  --inkio-dark-shadow-xl: var(--mantine-shadow-xl);
 
  --inkio-primary: var(--mantine-primary-color-filled);
  --inkio-primary-hover: var(--mantine-primary-color-filled-hover);
  --inkio-primary-bg: var(--mantine-primary-color-light);
  --inkio-text-on-primary: var(--mantine-primary-color-contrast);
  --inkio-border-focus: var(--mantine-primary-color-filled);
  --inkio-dark-primary-hover: var(--mantine-primary-color-filled-hover);
  --inkio-dark-primary-bg: var(--mantine-primary-color-light);
  --inkio-dark-text-on-primary: var(--mantine-primary-color-contrast);
  --inkio-dark-border-focus: var(--mantine-primary-color-filled);
 
  --inkio-bg: var(--mantine-color-body);
  --inkio-bg-muted: var(--mantine-color-default-hover);
  --inkio-text: var(--mantine-color-text);
  --inkio-text-heading: var(--mantine-color-bright);
  --inkio-text-muted: var(--mantine-color-dimmed);
  --inkio-border: var(--mantine-color-default-border);
  --inkio-danger: var(--mantine-color-error);
  --inkio-dark-bg: var(--mantine-color-body);
  --inkio-dark-bg-muted: var(--mantine-color-default-hover);
  --inkio-dark-text: var(--mantine-color-text);
  --inkio-dark-text-heading: var(--mantine-color-bright);
  --inkio-dark-text-muted: var(--mantine-color-dimmed);
  --inkio-dark-border: var(--mantine-color-default-border);
  --inkio-dark-danger: var(--mantine-color-error);
 
  --inkio-layer-overlay: var(--mantine-z-index-popover);
  --inkio-layer-suggestion: var(--mantine-z-index-popover);
  --inkio-layer-popover: var(--mantine-z-index-popover);
  --inkio-layer-modal: var(--mantine-z-index-overlay);
  --inkio-layer-modal-backdrop: calc(var(--mantine-z-index-overlay) + 1);
  --inkio-layer-modal-content: calc(var(--mantine-z-index-overlay) + 2);
}

import { useComputedColorScheme } from '@mantine/core';
import { Editor } from '@inkio/editor';
 
export function MyEditor() {
  const scheme = useComputedColorScheme('light');
  return <Editor theme={scheme} />;
}

.inkio {
  --inkio-mention-bg: var(--mantine-primary-color-light);
  --inkio-mention-text: var(--mantine-primary-color-light-color);
  --inkio-dark-mention-bg: var(--mantine-primary-color-light);
  --inkio-dark-mention-text: var(--mantine-primary-color-light-color);
}