milkdown / milkdown

🍼 Plugin driven WYSIWYG markdown editor framework.

🍼  Milkdown

A plugin-driven WYSIWYG markdown Editor, inspired by Typora, built on top of prosemirror and remark.

The website is designed by Mirone. Powered by Theme Nord and Material Design.

Documentation

For more information, please check our official documentation website.

What's Next

You can check our Milkdown TODO project page to know what's on the plan.

You can also check milestones to know what's being worked on.

Community

Welcome to join our Discord community.

Contributing

Follow our contribution guide to learn how to contribute to milkdown.

Contributor

Special thanks to @Meo for her work in design.

Sponsors

If you like this project, please consider fund me to help the maintenance.

Thanks

Thanks to the following projects and companies for their support to milkdown and the open source community.

           

License

MIT

milkdown's Issues

[Bug] Could not resolve "../../../core/node_modules/@milkdown/exception/src"

 > ./node_modules/@milkdown/utils/lib/prose/atom-helper.js:1:38: error: Could not resolve "../../../core/node_modules/@milkdown/exception/src"
    1 │ import { getAtomFromSchemaFail } from '../../../core/node_modules/@milkdown/exception/src';
      ╵                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Happens on the latest version (4.7.0):

"dependencies": {
  "@milkdown/core": "^4.7.0",
  "@milkdown/preset-commonmark": "^4.7.0",
  "esbuild": "^0.12.16"
}

Repro (with esbuild):

1. Install core and preset-commonmark
2. Import both from a file:

import * as _1 from "@milkdown/core";
import * as _2 from "@milkdown/preset-commonmark";

console.log(_1, _2);

3. Bundle the file with npm run esbuild -- index.js --bundle

[Feature] How to activate the todo items in the list as shown in the demo page?

Is this a separate plug-in?

[Question] Element selector

Hello! Milkdown seems wonderful, I just have one basic question:

In the "Getting Started" code sandbox here where/how is the HTML container element being created or selected? (e.g. something like document.body.appendChild)

I dug into the source code to see if it was related to Editor or Context. I looked at the Vue and React implementation, went over some of the tests, etc. But sadly all my webdev experience has failed me, and I could not find the answer. I'm sure there's something very obvious and simple I'm missing.

Comparison to Typora?

I wonder how this project compares to Typora apart from the looking and the license. Thank you!

Also I'm wondering about math support. Is kAtEx or mATHjAX planned?

[Feature] Add HomeBrew version

How to use it in Vue3

I copied the code Create a Component under the Vue menu in the official document and wrote it in the TSX file. I then introduce the component into the page, but the console reports an Uncaught (in promise) ReferenceError: React is not defined

import { defineComponent } from 'vue';
import { Editor, rootCtx } from '@milkdown/core';
import { VueEditor, useEditor } from '@milkdown/vue';
import { commonmark } from '@milkdown/preset-commonmark';

import '@milkdown/theme-nord/lib/theme.css';
import '@milkdown/preset-commonmark/lib/style.css';

export const MilkdownEditor = defineComponent(() => {
  const editor = useEditor((root) =>
    new Editor()
      .config((ctx) => {
        ctx.set(rootCtx, root);
      })
      .use(commonmark),
  );

  return () => <VueEditor editor={editor} />;
});

<template>
  <MilkdownEditor />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { MilkdownEditor } from '../../components/Edit/MilkDownEditor';


export default defineComponent({
  name: 'EditPage',
  components: { MilkdownEditor }
})
</script>

[Bug] Unexpected popup position with slash command plugin

Describe the bug
I meet some issues when I use slash command plugin with 2 more editors on a page.

1. The popup position floats upon text, that may be related to 2 more editors usage
2. There is an appreciable latency when mouse hover between list options, see attached video. I guess it related to this code:
   , can we use :hover instead?
3. Can we close popup when user press key esc? This might be an accessibility feature request.

To Reproduce
https://user-images.githubusercontent.com/7880675/130977704-8f7a8a04-3bb5-490a-9d04-8bfd35aa7867.mp4

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] mac
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] 92

VSCode Integration

I would love to use this project in my code editor

When using Dynamic loading of NextJS, getting error RangeError: Schema is missing its top node type ('doc')

Describe the bug
In order to avoid rendering Milkdown editor on server in NextJs app, I am using dynamic loading provided by NextJs. With this the milkdown editor is loaded and rendered only in client.

But when I am passing valid markdown content to the component it is giving below error in console.
RangeError: Schema is missing its top node type ('doc')

Also the default content is not rendering.

For Milkdown editor I am referencing the code from below
MilkdownEditor.tsx

I have removed all plugins except for following:

• Clipboard
• History
• listener

To Reproduce
Steps to reproduce the behavior:

1. Create a NEXTJs application using create-next-app
2. Simply render a page with MilkdownEditor as one of the component in the page hierarchy.
3. Referenced below code for MilkdownEditor
   MilkdownEditor.tsx
4. Use below code to dynamically load the above editor

import dynamic from "next/dynamic";
const DynamicComponent = dynamic(() => import("./components/MarkdownEditor"), {
  ssr: false,
});

6. On server I convert the markdown to html and display in a custom component.
7. On client I use the markdown in state passed from server as input to MilkdownEditor.
8. Now do SSR rendering with getServerSideProps by passing any random markdown text.

Expected behavior
It should ideally render the content in the editor. But it is quite possible that I am doing something wrong with config or maybe this use case altogether is wrong.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• iOS
• chrome

Additional context
I initially thought since props is set on server so may be content is not available when rendering on client. But console.logging the same shows the markdown content in browser console. Sorry if the details are too much or wrong use case. But some inputs on this can help me better understand Milkdown and use the same. My prosemirror knowledge is also not very good. But what I could understand that from schema the root node type of doc is missing. But not sure If milkdown is doing the schema initialization by default.

[Bug] Bundle size is too big

Describe the bug
The bundle size of @milkdown/core is too big.

We can reduce a huge bundle size by lib import with lodash-es.

To Reproduce
https://bundlephobia.com/package/@milkdown/[email protected]

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):
N/A

Additional context
N/A

[Bug] Not using theme-nord throws "Context not found"

Repro

Sandbox

1. Create an editor with preset-commonmark (or fork the example sandbox in Getting Started)
2. Update the dependencies
3. Comment out .use(nord)

Was also able to reproduce locally with esbuild.

Expected behavior

The editor constructs just fine without a theme.

Actual Behavior

Throws this error:

Uncaught (in promise) Error: Context not found, do you forget to inject it?
    at contextNotFound (index.js:8)
    at Object.getCtx (container.js:12)
    at Object.get (editor.js:17)
    at eval (base-node.js:17)
    at eval (node-factory.js:8)
    at eval (editor.js:56)
    at Array.map (<anonymous>)
    at Editor.eval (editor.js:55)
    at Generator.next (<anonymous>)
    at eval (tslib.es6.js:102)
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:84)
    at Editor.create (editor.js:53)
    at $csb$eval (index.ts? [sm]:7)
    at Y (eval.js:31)
    at re.evaluate (transpiled-module.js:709)
    at Oe.evaluateTranspiledModule (manager.js:334)
    at c (transpiled-module.js:693)
    at loadResources (index.html:3)
    at $csb$eval (index.html:9)
    at Y (eval.js:31)
    at re.evaluate (transpiled-module.js:709)
    at Oe.evaluateTranspiledModule (manager.js:334)
    at Oe.evaluateModule (manager.js:305)
    at compile.ts:724
    at c (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.t.<computed> [as next] (runtime.js:97)
    at r (asyncToGenerator.js:3)
    at u (asyncToGenerator.js:25)

Tab should move cursor to next column inside table element

I am making a suggestion to make the Tab key move cursor to next column inside table element.

Love this editor BTW!

Add Readme

Can we add support of rendering some inline HTML tags?

I am sorry if the requested feature is already there (please guide if it is). But the thing is, I like to give headings in this manner ↓

Heading
—

Yea ↑ that little em dash is a lot useful but that is only possible with # Heading<br>— and I guess milkdown is not supporting that. Of course, then it might conflict with the WYSIWYG property, but if we can, we should.

I loved the WYSIWYG style. I needed like that. Thanks for an amazing work!

keyboard-friendly and more compact fenced code blocks

It would be nice if I could just type ```js and tab or enter to start a JavaScript code block. I think if it showed a dropdown with the language, that used the text after ```, and by default showed "Insert plain text code block" and you could type Tab or Enter to complete that, it would be almost as convenient as being able to get that just by typing ```.

Showing the file format dropdown also takes up space and adds some visual noise. I think it might be better if it showed a palette when you left-click on the margin of the code block, which on desktop the user could detect by seeing the cursor change betwen an I-beam and an arrow. On mobile perhaps triple dots which could be shown or hidden would do the trick.

Finally, the ability to add a title would be useful. Docusaurus supports this by adding it to the opening code fence like ```ts title="mod.ts".

[Feature] Plain HTML/JS support

I really love the design and everything about the editor, but I don't use React or Vue in any of my projects.
Is there any plan or way to just implement it via a script tag into an existing framework independent project?

Thanks in advance and best regards,
Louis

[Feature] Other languages in code-blocks

Is your feature request related to a problem? Please describe.
I want to render mermaid graphs and do http queries in the code-block sections

Describe the solution you'd like
I'm not sure how much is possible, but a generic killer feature would be to support other languages inside the code-blocks.
Example support for mermaid-extensios, like https://shd101wyy.github.io/markdown-preview-enhanced/#/diagrams?id=mermaid, or even a rest client like https://marketplace.visualstudio.com/items?itemName=humao.rest-client. The latter have it's own http language.

I think many extensions does it like this, they add their own language. Would it be possible to embed them somehow?

Describe alternatives you've considered
There are many plugins that extends markdown. So it feels like the only alternative here is to not use milkdown :(

I wasnt sure where to put this issue, in this repo or the milkdown-vscode. Please let me now if I should move it.

Necessary properties, toJSON, fromJSON, toHTML, fromHTML, editable

Programally set editor's content

[Feature] Is there way to show Toolbar like one in Notion or Evernote

Is your feature request related to a problem? Please describe.
Is there a plugin or something to enable Toolbar for styling? I couldn't find anything from the docs.

Like this:

code-fence bugs

1、when Shift-Enter leave code-fence node，other nodes dont work properly
2、tab key in code-fence

[Bug] Some bugs on vscode

Describe the bug

• The select box in the code box cannot be clicked if not set.
• The cursor jump interval is too short, it is difficult to switch after a part is written.
• Sometimes the cursor jumps suddenly when typing characters in a box.

To Reproduce

Expected behavior

Screenshots

Additional context

[Feature] Image / File Uploads

Is your feature request related to a problem? Please describe.
To use the editor in a wiki related context, it would be useful for users to upload their images directly and not having to upload them somewhere else and then paste the link. This could happen via drag and drop as well as separate browse for file button next to the url entry.

Describe the solution you'd like
Most markdown editors solve this by adding an image upload handler, that returns an url to the uploaded File and then automatically ads an image or Link (for files) into the markdown code.

Describe alternatives you've considered
Adding an upload button outside of the markdown editor and then somehow add an image with code

I want to contribute to the project, but there are some packages pnpm that can't be installed when I run the project.

I don't know if it's my network problem. I can't find many packages about taobao.org.

like this.

change defaultValue programmatically

Is your feature request related to a problem? Please describe.
I'm use Rect impl: https://milkdown.dev/#/react and needs to set value to ReactEditor component programmatically ( after set defaultValue)

Describe the solution you'd like

const MilkdownEditor: React.FC = () => {
  const [isContentLoaded, setContentLoaded] = useState<boolean>(false);

const editor = useEditor(
      (root) => {
        return new Editor()
            .config((ctx) => {
                ctx.set(rootCtx, root);
                ctx.set(defaultValueCtx, "Default value");
            })
            .use(commonmark)
            .use(clipboard)
            .use(listener)
            .use(history);
      },
      [],
  );

useEffect(() => {
    // someting like this miss me
    editor.ctx.set(value,"valueChanged")
},[isContentLoaded])

  return <ReactEditor editor={editor} />;
};

export default MilkdownEditor;

Removing space when writing on Firefox 89.0.2 Mac

Found an issue using FireFox and milkdown. When typing in a paragraph it will remove spaces from what I am typing, but it works fine in a header.

Errors trying to use with Vite & Vue 3

Hi,

I tried to implement Milkdown in my project as is suggested in the docs, but I am getting errors. For example, if I use import { Editor } from '@milkdown/core

It will throw: Error: ENOENT: no such file or directory 'node_modules/@milkdown/core/src/index.ts'.

If I replace that with import { Editor } from '@milkdown/core/lib/editor'; then it works.

Same thing happens for other imports, like @milkdown/preset-commonmark.

I am using vite (2.3.3) with typescript and vue (3.0.11).

Built-in align mark

Editing a link

Love the project, was thinking of coding something like this myself.

After a brief test it seems that you need to rewrite the whole link in order to edit it ?

What's the plan on this ?

Nested lists

Is there any plans to add support for nested list items in the editor?

Milkdown supports the rendering of such lists;

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
        * ABC
        * DFG
4. Fourth item

But when creating a news lists I do not find a way to create more than the first level. So the list above is only possible to create like this.

1. First item
2. Second item
3. Third item
4. Indented item
5. Indented item
6. ABC
7. DFG
8. Fourth item

[Feature] Use tab key to switch cell in table

Is your feature request related to a problem? Please describe.
So I try this awesome project, but still have some problem, when I try to insert a table in the document, I can't use tab key jump to another cell, it's always jump to the top of the document.

Describe the solution you'd like
use tab key to switch cell, just like typora.

left-click to follow url

It looks like from a UX standpoint it would work fine to be able to left-click and follow a URL. If you select text it shows both the formatting bar on the top and the URL bar on the bottom. If it just showed the URL bar when you left-click, I don't think that would get in the way of selecting. I think it would need to disappear when typing, until it gets clicked again.

A way to open a link with the keyboard would be handy.

Vue 2 support

As there is a bunch of projects using vue 2 and it's a long journey to migrate to vue 3, it would be nice to support vue 2, as it's tiring to include both vue 2 and vue 3 instance in one project, and I think it's not elegant to use vanilla javascript in vue 2 project.

Is Vite supported?

I use milkdown in Vue3 + Vite project, but it seems doesn't work normally, is milkdown support vite ?

[Feature] Add support for HTML tag in markdown string.

Is your feature request related to a problem? Please describe.
Currently a lot of people use html tag in their markdown files.

Describe the solution you'd like
Add a HTML node.

Ref:
Milkdown/vscode#1

[Bug] plugin-slash remind to use material icons

Describe the bug

@milkdown/plugin-slash README should add instructions for introducing font icons, such as

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" />

Add language selector for code fence

Add view property for Nodes and Marks

Originally posted by @xiadd in https://github.com/Saul-Mirone/milkdown/discussions/11#discussioncomment-602891

[Bug] ”RangeError: Position -11 out of range“ in @milkdown/plugin-slash

Describe the bug
After the page is loaded for the first time, the toolbar will pop up when no slash is entered, and an error will be reported when an item is clicked.

To Reproduce
codesandbox demo

1. Go to the demo page
2. Click on an item
3. See ”RangeError: Position -11 out of range“

Expected behavior
Do not display the toolbar when no slash is entered

Screenshots

[Feature] Preview panels on the math equations being edited

It might be a deadly useful feature if there could be preview panels on the math equations being edited, just like Typora.

Idea - remove current line formatting with "esc"

Awesome project! I just miss one thing I also haven't seen with other such editors so far - an easy way to exit/remove the current line style. "Esc" key could remove the styling from the current line and place the cursor on the start of it.

Would be even more useful where multiple "sticky" styles are stacked:

> some text
## some other|

To exit from this style, normally you'd have to erase current line, then press Enter twice to exit the > style.

Going further, selecting multiple lines could remove the formatting from all the selected lines. This would make it easy to add/remove block styles.

Add basic theme

[Bug] math plugin is breaking

Describe the bug
As soon as I add the math plugin the editor can only add math entries and nothing else.

To Reproduce
https://codesandbox.io/s/old-shadow-k4now?file=/src/App.tsx

[Feature]Add angular support

Is your feature request related to a problem? Please describe.
Milkdown can support react and vue, but it can not support angular yet.

Describe the solution you'd like
Add angular support.

[Feature] Is it possible to embed it in a QWebEngineView

Hi,

I want to introduce a powerful WYSIWYG Markdown editor into my project VNote. VNote has a Chrome kernel for its read mode. Will it be possible to embed it into VNote? I think if it is simple and browser-friendly, we could do this.

Thanks!

[Bug] 不支持超链接语法

Describe the bug
不支持超链接语法[]()

To Reproduce
直接输入[百度](https://www.baidu.com\)不解析

Expected behavior
能正确解析超链接

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• Version 4.10.0

[Bug] Tab key changes focus instead of inserting `\t`

Describe the bug
Tab key changes focus in the editor and the code-fences.
It seems only in the math block will Tab insert \t.

To Reproduce
Just press Tab in the online demo (https://milkdown.dev/#/online-demo)

Expected behavior
Insert \t in the editor and the code-fences as in the math block.

Desktop (please complete the following information):

• OS: Win10
• Browser chrome

Milkdown

[Feature] Add backtick symbol support

Is your feature request related to a problem? Please describe.
I can't use backtick symbol in editor, must edit original markdown code or use tooltip button to add block.

It seems that no theme found in editor, when using gfm

Describe the bug
adding gfm results in error

It seems that no theme found in editor,

But nord was added, so there is a theme.

To Reproduce

<template>
    <vue-editor :editor="editor"/>
</template>

<script lang="ts">
import {defineComponent, PropType, ref} from "vue";
import {defaultValueCtx, Editor, rootCtx} from "@milkdown/core";
import {VueEditor, useEditor} from "@milkdown/vue";
import {nord} from "@milkdown/theme-nord";
import {commonmark} from "@milkdown/preset-commonmark";
import {tooltip} from "@milkdown/plugin-tooltip";
import {slash} from "@milkdown/plugin-slash";
import {gfm} from "@milkdown/preset-gfm";
import {listener, listenerCtx} from "@milkdown/plugin-listener";
import {history} from "@milkdown/plugin-history";

export default defineComponent({
    name: "markdownEditor",
    components: {VueEditor},
    props: {
        modelValue: {
            type: [String, null] as PropType<string>,
            default: null,
            required: true
        },
    setup(props) {

        const editor = useEditor((root) =>
            Editor.make()
                .config((ctx) => {
                    ctx.set(rootCtx, root);
                    ctx.set(defaultValueCtx, props.modelValue);
                    ctx.set(listenerCtx, {
                        markdown: [(get) => console.log(get())]
                    });
                })
                .use(nord)
                .use(slash)
                .use(tooltip)
                .use(listener)
                .use(history)
                .use(gfm)
        );
        return {
            editor
        };
    });

Expected behavior
To add gfm features to the editor

Desktop (please complete the following information):

• OS: Arch Linux
• Browser: Firefox
• Version 92

[Bug] Error on freshly created CRA React app

Describe the bug
Getting the following error on a freshly created React app of CRA. I have followed the instruction given in the Getting Started section along with the component given there: