minisola / marktion

Marktion is the AI Powered Markdown Editor

Home Page:https://marktion.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

中文/English

Introducing Marktion

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.

Features

  • [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.

Installation and Usage

  1. Install dependencies.
npm intall marktion
  1. Usage
import { Marktion } from 'marktion';
import 'marktion/dist/style.css';

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

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

API

MarktionProps

Property Description Type Default
markdown The initial Markdown content for the editor. string -
darkmode Enable or disable Dark Mode in the editor. boolean false
onUploadImage Callback function for uploading images. (file: File, editor: Editor) => Promise<url> -

Consult tiptap's documentation to find more APIs.

MarktionRef

Property Description Type Default
getMarkdown A callback function that returns the current Markdown content of the editor. () => string -
editor tiptap editor instance, read more. Editor -

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} />
    </>
  );
}

Plugins

AI Plugin

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'
  }
})

Contributing

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
  1. Install dependencies.
pnpm i
  1. Make changes and test your modifications.

  2. Commit your changes.

  3. 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!

License

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

Contact

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

  • Email: whistleryz@gmail.com
  • Issue Tracker: Project Issues (Please specify the issue type in the issue title)

About

Marktion is the AI Powered Markdown Editor

https://marktion.io

License:MIT License


Languages

Language:TypeScript 78.9%Language:CSS 18.0%Language:JavaScript 2.9%Language:Shell 0.2%