Markdown editor for freedom!
Tags: javascript, typescript, markdown, writing
Published: 2021-12-22 05:53:36

## Long Live Markdown

The content editor is a very important function for the authoring platform. A powerful editor allows creators to focus on creation. And one of the best ways to please programmer creators is to support Markdown writing, because most programmers use Markdown to write articles.

Markdown, as a programmer’s love for writing, has many advantages:

- Typesetting is achieved through grammar, no need to click to manually set the style
- Quickly implement complex content, such as: code blocks, hyperlinks, formulas, etc.
- Give creators more time to focus on content

However, the same has some disadvantages:

- There is a certain learning threshold, not very friendly to non-programmers
- Looking at the original document is like looking at the "code", the preview effect requires tool or editor support

Is there a way to keep the convenience brought by Markdown while lowering the barriers to entry? Most old players will blurt out: Typora.
![typora](https://github.com/HelloGitHub-Team/Article/blob/master/contents/JavaScript/milkdown/img/2.gif?raw=true)

Typora is great, however, it isn't free anymore. And because of that it is not open source, if you want to implement a similar Markdown editor in your own project, you need to find another solution.

## Introducing Milkdown

[Milkdown](https://milkdown.dev/) is a WYSIWYG (what you see is what you get) editor.
It's an open source project that integrates Markdown editor, components, and plugins.

> Github repo: https://github.com/Saul-Mirone/milkdown

![principle](https://www.meo.cool/_next/image?url=%2FMilkdown%2F3-Principle_of_MIlkdown.png&w=1920&q=75)

It has all the functions you want, and the functions you don't need can also be reduced by deleting plugins. The design idea of the plugin allows you to customize the Markdown editor most suitable for you in several minutes!

*   📝 **WYSIWYG Markdown** - Write markdown in an elegant way
*   🎨 **Themable** - Theme can be shared and used with npm packages
*   🎮 **Hackable** - Support your awesome idea by plugin
*   🦾 **Reliable** - Built on top of [prosemirror](https://prosemirror.net/) and [remark](https://github.com/remarkjs/remark)
*   ⚡ **Slash & Tooltip** - Write fast for everyone
*   🧮 **Math** - LaTeX math equations support
*   📊 **Table** - Table support with fluent ui
*   📰 **Diagram** - Diagram support with [mermaid](https://mermaid-js.github.io/mermaid/#/)
*   🍻 **Collaborate** - Shared editing support with [yjs](https://docs.yjs.dev/)
*   💾 **Clipboard** - Support copy and paste markdown
*   👍 **Emoji** - Support emoji shortcut and picker

## Get Started

We provide two ways for you to try it out:

* [Online editor](https://milkdown.dev/#/online-demo)
* [VSCode extension](https://marketplace.visualstudio.com/items?itemName=mirone.milkdown)

## Show Case

### Table Editing

![table editing](https://github.com/HelloGitHub-Team/Article/raw/master/contents/JavaScript/milkdown/img/6.gif)

### Copy and Paste as Markdown

![copy and past as Markdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuyhvt96v9qm394jgsam.gif)

### Collaborative Editing

![collaborative editing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9khxjzv2655zs3wlznwn.gif)

### Two Way Binding

![two way binding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/waqe04cx4oqh3c51jopc.gif)

### Drag and Drop

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fay00r4i2r0gfzyjkn50.gif)

## Build You Own Editor

First you need to create a new project, here I recommend you to use [vite](https://vitejs.dev/).

```bash
npm init vite@latest my-milkdown-app -- --template vanilla
```

The core of Milkdown and various plugins are independent NPM packages, which can be installed directly through NPM.

```bash
npm i @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord
```

Then you can create your own milkdown editor:

```javascript
import { Editor } from '@milkdown/core';
import { nord } from '@milkdown/theme-nord';
import { commonmark } from '@milkdown/preset-commonmark';

Editor
  .make()
  .use(nord)
  .use(commonmark)
  .create();
```

{% codesandbox milkdown-vanilla-setup-8xobc %}

Plugin is the first class member of Milkdown, it is essentially a plugin loader, and all functions are provided through plugins. A table is a plugin, a theme is a plugin, and even a simple line of text is also a plugin.

At present, the official has provided many plug-ins to ensure that they can be used out of the box. Only some plugins are listed below:

| name                                                                                           | description                                                            |
| :--------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
| [@milkdown/preset-commonmark](https://www.npmjs.com/package/@milkdown/preset-commonmark)       | Add [commonmark](https://commonmark.org/) syntax support               |
| [@milkdown/preset-gfm](https://www.npmjs.com/package/@milkdown/preset-gfm)                     | Add [gfm](https://github.github.com/gfm/) syntax support               |
| [@milkdown/plugin-history](https://www.npmjs.com/package/@milkdown/plugin-history)             | Add undo & redo support                                                |
| [@milkdown/plugin-clipboard](https://www.npmjs.com/package/@milkdown/plugin-clipboard)         | Add markdown copy & paste support                                      |
| [@milkdown/plugin-cursor](https://www.npmjs.com/package/@milkdown/plugin-cursor)               | Add drop & gap cursor                                                  |
| [@milkdown/plugin-listener](https://www.npmjs.com/package/@milkdown/plugin-listener)           | Add listener support                                                   |
| [@milkdown/plugin-collaborative](https://www.npmjs.com/package/@milkdown/plugin-collaborative) | Add collaborative editing support                                      |
| [@milkdown/plugin-table](https://www.npmjs.com/package/@milkdown/plugin-table)                 | Add table syntax support (already included in gfm)                     |
| [@milkdown/plugin-prism](https://www.npmjs.com/package/@milkdown/plugin-prism)                 | Add [prism](https://prismjs.com/) support for code block highlight     |
| [@milkdown/plugin-math](https://www.npmjs.com/package/@milkdown/plugin-math)                   | Add [LaTeX](https://en.wikipedia.org/wiki/LaTeX) support for math      |
| [@milkdown/plugin-tooltip](https://www.npmjs.com/package/@milkdown/plugin-tooltip)             | Add selected tooltip for text                                          |
| [@milkdown/plugin-slash](https://www.npmjs.com/package/@milkdown/plugin-slash)                 | Add slash commands support                                             |
| [@milkdown/plugin-emoji](https://www.npmjs.com/package/@milkdown/plugin-emoji)                 | Add emoji support                                                      |
| [@milkdown/plugin-diagram](https://www.npmjs.com/package/@milkdown/plugin-diagram)             | Add [mermaid](https://mermaid-js.github.io/mermaid/#/) diagram support |
| [@milkdown/plugin-indent](https://www.npmjs.com/package/@milkdown/plugin-indent)               | Add tab indent support                                                 |
| [@milkdown/plugin-upload](https://www.npmjs.com/package/@milkdown/plugin-upload)               | Add drop and upload support                                            |

You can also create your own plugin following this guide:
> [Writing Syntax Plugins](https://milkdown.dev/#/writing-syntax-plugins)

## Conclusion

Before starting this project, I tried various Markdown editors, but I didn't find one that was particularly satisfactory. Because they are all closed source, and the functions are provided by the developers, some functions are too bloated, and some are too simple. In this case, I simply made a Markdown editor that can be easily customized and can be easily used by non-programmers, and I have the Milkdown that everyone sees.

I hope that the open source Milkdown will give users more freedom of choice and break the "monopoly" of the Markdown editor. Open source is not easy. If Milkdown is helpful to you, please give it a star✨.

https://github.com/Saul-Mirone/milkdown