MarkMind Editor

A Notion-style WYSIWYG editor with AI-powered autocompletion built on Tiptap.

Features

• 📝 Rich text editing with Markdown support
• 🤖 AI-powered autocompletion
• 🔍 Slash commands for quick actions
• 💬 Bubble menu for text formatting
• 🖼️ Image uploads and handling
• 📊 Tables support
• 🎨 Customizable UI and themes
• ⚡ React and Next.js compatible

Installation

npm install markmind-editor
# or
yarn add markmind-editor
# or
pnpm add markmind-editor

Basic Usage

import { MarkMindEditor } from 'markmind-editor';

function MyEditor() {
  return (
    <MarkMindEditor
      initialMarkdown="# Hello, world!"
      contentFormat="markdown"
      placeholder="Start typing..."
      onUpdate={({ html, json, markdown }) => {
        console.log('Content updated:', markdown);
      }}
    />
  );
}

AI Autocompletion

To enable AI-powered autocompletion, you need to provide an OpenAI API key:

import { MarkMindEditor } from 'markmind-editor';

function MyEditorWithAI() {
  return (
    <MarkMindEditor
      initialContent="<p>Hello, world!</p>"
      aiOptions={{
        apiKey: 'your-openai-api-key',
        enabled: true,
      }}
    />
  );
}

Advanced Usage

Custom Commands

import { MarkMindEditor } from 'markmind-editor';

function MyEditorWithCustomCommands() {
  const customCommands = [
    {
      title: 'Insert Date',
      description: 'Insert current date',
      command: () => {
        // Implementation will be added by the user
      },
      keywords: ['date', 'time'],
    },
  ];

  return (
    <MarkMindEditor
      initialContent="<p>Hello, world!</p>"
      commands={customCommands}
    />
  );
}

Using Hooks

import { EditorRoot, EditorContent, useMarkMindEditor } from 'markmind-editor';

function MyCustomEditor() {
  const handleUpdate = ({ html, json }) => {
    console.log('Content updated:', html);
  };

  return (
    <EditorRoot>
      <EditorContent
        initialContent="<p>Hello, world!</p>"
        onUpdate={handleUpdate}
      />
      <FormatToolbar />
    </EditorRoot>
  );
}

function FormatToolbar() {
  const { toggleBold, toggleItalic, isBold, isItalic } = useMarkMindEditor();

  return (
    <div className="format-toolbar">
      <button
        onClick={toggleBold}
        className={isBold() ? 'active' : ''}
      >
        Bold
      </button>
      <button
        onClick={toggleItalic}
        className={isItalic() ? 'active' : ''}
      >
        Italic
      </button>
    </div>
  );
}

API Reference

Components

• MarkMindEditor: The main editor component
• EditorRoot: The root component that provides context
• EditorContent: The content area of the editor
• EditorBubbleMenu: A floating menu that appears when text is selected
• EditorFloatingMenu: A floating menu that appears when the cursor is at an empty line
• EditorCommandMenu: A command menu that appears when typing /

Hooks

• useMarkMindEditor: Access the editor instance and methods
• useAICompletion: Use AI completion functionality

License

MIT