DEV Community

Cover image for Markdown editor for freedom!
Mirone
Mirone

Posted on

Markdown editor for freedom!

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

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 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

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 and remark
  • Slash & Tooltip - Write fast for everyone
  • 🧮 Math - LaTeX math equations support
  • 📊 Table - Table support with fluent ui
  • 📰 Diagram - Diagram support with mermaid
  • 🍻 Collaborate - Shared editing support with yjs
  • 💾 Clipboard - Support copy and paste markdown
  • 👍 Emoji - Support emoji shortcut and picker

Get Started

We provide two ways for you to try it out:

Show Case

Table Editing

table editing

Copy and Paste as Markdown

copy and past as Markdown

Collaborative Editing

collaborative editing

Two Way Binding

two way binding

Drag and Drop

Image description

Build You Own Editor

First you need to create a new project, here I recommend you to use vite.

npm init vite@latest my-milkdown-app -- --template vanilla
Enter fullscreen mode Exit fullscreen mode

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

npm i @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord
Enter fullscreen mode Exit fullscreen mode

Then you can create your own milkdown editor:

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

Editor
  .make()
  .use(nord)
  .use(commonmark)
  .create();
Enter fullscreen mode Exit fullscreen mode

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 Add commonmark syntax support
@milkdown/preset-gfm Add gfm syntax support
@milkdown/plugin-history Add undo & redo support
@milkdown/plugin-clipboard Add markdown copy & paste support
@milkdown/plugin-cursor Add drop & gap cursor
@milkdown/plugin-listener Add listener support
@milkdown/plugin-collaborative Add collaborative editing support
@milkdown/plugin-table Add table syntax support (already included in gfm)
@milkdown/plugin-prism Add prism support for code block highlight
@milkdown/plugin-math Add LaTeX support for math
@milkdown/plugin-tooltip Add selected tooltip for text
@milkdown/plugin-slash Add slash commands support
@milkdown/plugin-emoji Add emoji support
@milkdown/plugin-diagram Add mermaid diagram support
@milkdown/plugin-indent Add tab indent support
@milkdown/plugin-upload Add drop and upload support

You can also create your own plugin following this guide:

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

Discussion (4)

Collapse
zhouyujie1984 profile image
Oliver Zhou

非常好的项目,粗看下来,技术选型,架构设计,代码风格都很不错,正好手头上有个项目,用起来后面给到反馈。

Collapse
iacons profile image
Iacovos Constantinou

That's brilliant really nice work!

Collapse
terryz profile image
Terry Zeng

Nice work!Might use this plugin in a future project.

Collapse
zhuangzhuang198 profile image
壮壮

大佬牛逼.