中文/English

Marktion is a WYSIWYG Markdown editor based on ProseMirror, dedicated to enhancing the editing experience of Markdown.

See our website marktion.io in action.

• [NEW] ✨ AI integration: Built-in AI conversation interface, supporting AI plugin extensions, invoked at the beginning of a line by pressing Space;

• WYSIWYG editing: Real-time preview of Markdown rendering results, providing an intuitive editing experience, and you can switch between source code mode and WYSIWYG editing mode with Ctrl + /;

• Slash menu and Bubble menu: Quickly inspired by the editor of Notion using /; Dark mode support: Support for turning on or off Dark mode.

• 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 { ReactEditor } from 'marktion';
import 'marktion/dist/style.css';

function Editor() {
  return <ReactEditor content={`# 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 { ReactEditor, ReactEditorRef } from 'marktion';

function App() {
  const editorRef = useRef<ReactEditorRef>(null);

  const onExport = () => {
    const content = editorRef.current?.editor.getContent();
    console.log(content);
  };

  return (
    <>
      <button onClick={onExport}>export</button>
      <ReactEditor ref={editorRef} />
    </>
  );
}

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:

function Editor() {
  const ai = useAI({
    basePath: import.meta.env.VITE_OPENAI_BASE_URL
  });

  return (
    <ReactEditor ref={editorRef} plugins={[ai.plugin]} />
  )
}

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)