Consider taking inspiration from tiptap

[LifeIsStrange]

Hi,
I think Milkdown is a great/promising project and that WYSIWYG editors have a huge market potential as show Notion.
There is at least one open source predecessor to Milkdown called https://github.com/ueberdosis/tiptap that is also based on prosemirror.
It would be nice to

1. clarify the current differences between the two projects
2. take inspirations (both technical and feature wise) bidirectionally.

[Saul-Mirone]

Hi, Tiptap is a good project and I learnt a lot from them. However, there are many differences between tiptap and milkdown.

1. Milkdown is Markdown based, which means for every state in milkdown, there is a equal markdown. Eventhough tiptap can use markdown shortcusts, it cannot get a markdown output and input, check it here: not an option: markdown
2. Milkdown provides both headless mode and design system, which means you can build and share theme for milkdown. But tiptap only supports headless mode.

There are also many differences in API and architecture, such as timers and contexts. But, the above two points are deciding which one you should use.

[echarles]

@Saul-Mirone Maybe something I am seeing in Tiptap and I don't find back in Milkdown is the event system as described on https://tiptap.dev/api/events

Could you share your thoughts on that: maybe interesting in the future? not needed as Milkdown has something else for that?... ?

[Saul-Mirone]

It's just some syntax sugar for prosemirror ability, you can use prosemirror API to get the same functionalities. It's also easy to provide them as a plugin such as milkdown-event-plugin, for example, the listener plugin.

[echarles]

IMHO such an milkdown-event-plugin would be a nice addition to Milkdown, even if indeed it would be just some sugar. But a lot of people don't drink their coffee without sugar...

I can give a try to contribute this, but as newbie to both prosemirror and milkdown APIs, it would be very helpful that you sketch out the steps to take to implement that (which methods in which packages...)

[Saul-Mirone]

Yeah, I agree that this plugin would be very useful. Let me consider the best way to organize them.

[Saul-Mirone]

Track on:
#231

[Saul-Mirone]

Since milkdown@5.3.2, listener plugin supports more events:

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

Editor.make()
    .config((ctx) => {
        ctx.get(listenerCtx)
            .beforeMount((ctx) => {
                // before the editor mounts
            })
            .mounted((ctx) => {
                // after the editor mounts
            })
            .updated((ctx, doc, prevDoc) => {
                // when editor state updates
            })
            .markdownUpdated((ctx, markdown, prevMarkdown) => {
                // when markdown updates
            })
            .blur((ctx) => {
                // when editor loses focus
            })
            .focus((ctx) => {
                // when focus editor
            })
            .destroy((ctx) => {
                // when editor is being destroyed
            });
    })
    .use(nord)
    .use(commonmark)
    .use(listener)
    .create();