Files

ydy0615 d9ab341223 Add documentation for using Milkdown with various frameworks

- Created a new document for using components in Milkdown.
- Added a guide for using plugins in Milkdown, including toggling plugins programmatically and listing official plugins.
- Introduced a recipe for integrating Milkdown with Angular, including installation steps and component creation.
- Added a recipe for using Milkdown with Next.js, detailing installation and component setup.
- Created a guide for integrating Milkdown with NuxtJS, including installation and component creation.
- Added a comprehensive guide for using Milkdown with React, covering both Crepe and core Milkdown usage.
- Introduced a recipe for SolidJS integration with Milkdown, including installation and component creation.
- Added a guide for using Milkdown with Svelte, detailing installation and component setup.
- Created a comprehensive guide for integrating Milkdown with Vue, covering both Crepe and core Milkdown usage.
- Added a recipe for using Milkdown with Vue2, including installation and component creation.

2026-01-17 14:18:08 +08:00

3.6 KiB

Raw Permalink Blame History

Using Plugins

All features in milkdown are provided by plugin. Such as syntax, components, etc. Now we can try more plugins:

import { Editor } from "@milkdown/kit/core";
import { slash } from "@milkdown/kit/plugin/slash";
import { tooltip } from "@milkdown/kit/plugin/tooltip";
import { commonmark } from "@milkdown/kit/preset/commonmark";

Editor.make().use(commonmark).use(tooltip).use(slash).create();

Toggling Plugins

You can also toggle plugins programmatically:

import { Editor } from "@milkdown/kit/core";
import { someMilkdownPlugin } from "some-milkdown-plugin";

const editor = await Editor.config(configForPlugin)
  .use(someMilkdownPlugin)
  .create();

// remove plugin
await editor.remove(someMilkdownPlugin);

// remove config
editor.removeConfig(configForPlugin);

// add another plugin
editor.use(anotherMilkdownPlugin);

// Recreate the editor to apply changes.
await editor.create();

Official Plugins

Milkdown provides the following official plugins:

Plugins provided by `@milkdown/kit`:

🙋‍♀️Why not all plugins are available in @milkdown/kit?

@milkdown/kit is a collection of plugins that are commonly used in the editor. If you want to use a plugin that is not in @milkdown/kit, you can install it separately. The plugins in @milkdown/kit are also stable and well-tested.

Package Name	Description
@milkdown/kit/preset/commonmark	Add commonmark syntax support.
@milkdown/kit/preset/gfm	Add gfm syntax support.
@milkdown/kit/plugin/history	Add undo & redo support.
@milkdown/kit/plugin/clipboard	Add markdown copy & paste support.
@milkdown/kit/plugin/cursor	Add drop & gap cursor.
@milkdown/kit/plugin/listener	Add listener support.
@milkdown/kit/plugin/indent	Add tab indent support.
@milkdown/kit/plugin/upload	Add drop and upload support.
@milkdown/kit/plugin/block	Add a drag handle for every block node.
@milkdown/kit/plugin/tooltip	Add universal tooltip support.
@milkdown/kit/plugin/slash	Add universal slash commands support.

Other Plugins:

@milkdown/plugin-collab

Add collaborative editing support, powered by yjs.
@milkdown/plugin-prism

Add prism support for code block highlight.
@milkdown/plugin-emoji

Add emoji shortcut support (something like :+1:), and use twemoji to display emoji.

Community plugins

Check out awesome-milkdown to find community plugins. You can also submit a PR to list your plugins there.

3.6 KiB Raw Permalink Blame History