확장

import { Editor, getDefaultCoreExtensions } from '@inkio/editor';
import { BlockHandle } from '@inkio/extension/block-handle';
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'];
 
const extensions = [
  ...getDefaultCoreExtensions({
    placeholder: 'Start typing...',
  }),
  Callout,
  HashTag.configure({
    items: ({ query }) =>
      tags
        .filter((tag) => tag.includes(query.toLowerCase()))
        .map((tag) => ({ id: tag, label: `#${tag}` })),
  }),
  SlashCommand,
  WikiLink,
  BlockHandle,
];
 
export function Page() {
  return <Editor initialContent="" extensions={extensions} />;
}

import { BlockHandle } from '@inkio/extension/block-handle';
 
const customBlockHandle = BlockHandle.configure({
  locale: 'en-US',
  messages: {
    extensions: {
      blockHandle: {
        duplicate: 'Clone',
      },
    },
  },
  icons: {
    duplicate: <span>+</span>,
  },
});

<CommentPanel
  editor={editor}
  threads={threads}
  locale="en-US"
  messages={{
    extensions: {
      commentPanel: {
        resolve: 'Done',
      },
    },
  }}
  onReply={onReply}
  onResolve={onResolve}
  onDelete={onDelete}
/>

<ImageEditorModal
  isOpen={open}
  imageSrc={src}
  locale="en-US,en;q=0.8"
  messages={{
    extensions: {
      imageEditor: {
        save: 'Apply',
      },
    },
  }}
  onSave={handleSave}
  onClose={handleClose}
/>