시작하기

npm install @inkio/editor @inkio/extension react react-dom

import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';

import { useMemo, useState } from 'react';
import { Editor, getDefaultCoreExtensions } from '@inkio/editor';
import { Callout } from '@inkio/extension/callout';
import { HashTag } from '@inkio/extension/hashtag';
import { SlashCommand } from '@inkio/extension/slash-command';
import { WikiLink } from '@inkio/extension/wikilink';
import '@inkio/editor/minimal.css';
import '@inkio/extension/style.css';
 
const tags = ['inkio', 'editor', 'react', 'nextjs'];
 
export function MyEditorPage() {
  const [content, setContent] = useState({
    type: 'doc',
    content: [{ type: 'paragraph' }],
  });
 
  const extensions = useMemo(
    () => [
      ...getDefaultCoreExtensions({
        placeholder: 'Start typing...',
      }),
      Callout,
      HashTag.configure({
        items: ({ query }) =>
          tags
            .filter((tag) => tag.includes(query.toLowerCase()))
            .map((tag) => ({ id: tag, label: `#${tag}` })),
      }),
      SlashCommand,
      WikiLink,
    ],
    [],
  );
 
  return (
    <Editor
      content={content}
      extensions={extensions}
      showBubbleMenu
      showFloatingMenu
      onUpdate={setContent}
    />
  );
}

import { Editor } from '@inkio/editor';
 
// controlled
<Editor content={content} onUpdate={setContent} />
 
// uncontrolled
<Editor initialContent={initialContent} onUpdate={setContent} />