Plugins

Plugins extend the editor with custom UI and behavior. Inkwell ships built-in plugins for formatting, snippets, emoji, mentions, completions, slash commands, and attachments, and lets you create your own.

Built-in plugins

• Bubble Menu — floating formatting toolbar shown when text is selected
• Snippets — searchable palette of reusable Markdown blocks
• Emoji — searchable emoji picker triggered by colon shortcodes
• Completions — placeholder completions for suggested text flows
• Slash Commands — chat-style command palette with structured arguments
• Mentions — searchable user picker that inserts a chip marker
• Attachments — paste or drop images to upload and insert

Build your own

See Custom plugins for the InkwellPlugin shape, activation modes, render props, and full examples.

Using multiple plugins

Pass an array to the plugins prop. If you create plugin objects inside a React component, memoize the array and the plugin objects so setup plugins do not clean up and re-run on unrelated renders.

return (
  <InkwellEditor
    content={content}
    onChange={setContent}
    plugins={[snippets, mentions, attachments, myCustomPlugin]}
  />
);