中文/English

Marktion is a WYSIWYG Markdown editor based on tiptap. It provides an intuitive way to edit and preview Markdown text, making it easier for users to create visually appealing documents.

See our website marktion.io in action.

• [NEW] ✨ AI Integration: Ready to use AI to assist in writing Markdown? Built-in AI Chat Panel UI, supports AI plugin extensions;

• [NEW] SSR: Supports server-side high-performance rendering."

• WYSIWYG Editing: Real-time preview of Markdown rendering for a more intuitive editing experience.

• Slash Menu & Bubble Menu: Access commonly used formatting options and commands using a slash command menu, inspired by Notion's editor.

• Dark Mode Support: Enable Dark Mode to provide a visually comfortable editing experience in low-light environments.

1. Install dependencies.

npm intall marktion

2. Usage

import { Marktion } from 'marktion';
import 'marktion/dist/style.css';

function Editor() {
  return <Marktion darkMode={isDarkMode} markdown={`# Hello World`} />;
}

3. Example

Have a look at the examples to see marktion.io in action.

Consult tiptap's documentation to find more APIs.

Example usage:

import { MarktionRef, Marktion } from 'marktion';

function App() {
  const marktionRef = useRef<MarktionRef>(null);

  const onExport = () => {
    const content = marktionRef.current?.getMarkdown();
    console.log(content);
  };

  return (
    <>
      <button onClick={onExport}>export</button>
      <Marktion ref={marktionRef} />
    </>
  );
}

The AI Plugin is based on Vercel AI. Before you start, you need to create an AI router. Please refer to the documentation for more information: Getting Started.

Example usage:

AIPlugin({
  openai: {
    basePath: 'https://api.openai.com/v1',
    apiKey: 'KEY'
  }
})

Thank you for considering contributing to Marktion! If you would like to contribute, please follow these steps:

1. Fork the repository to your GitHub account.

2. Clone the forked repository to your local machine.

git clone https://github.com/yourusername/marktion.git
cd marktion

3. Install dependencies.

pnpm i

4. Make changes and test your modifications.

5. Commit your changes.

6. Create a pull request.

Go to the original repository and click on "New Pull Request". Fill in the necessary details and describe the changes you made.

We will review your pull request as soon as possible. Thank you for your contribution!

This project is licensed under the MIT License. See the LICENSE file for more details.

If you have any questions, suggestions, or issues, feel free to reach out to us through the following channels:

• Email: [email protected]
• Issue Tracker: Project Issues (Please specify the issue type in the issue title)