Package Exports

markmind-editor
markmind-editor/dist/markmind-editor.es.js
markmind-editor/dist/markmind-editor.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markmind-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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