Inline Sync Plugin

In the previous versions of milkdown, the user input is handled by prosemirror input rule. For example, if user type *strong text*, the user will get a piece of text decorated by strong style. However, there're two major limitation of input rule:

1. Inputrule can only match texts before user's cursor, if user doesn't type text in such a sequence, but type two * symbol and insert text between them, the input rule won't work.

2. Inputrule is to match the user input by a regexp, the markdown syntax rules are much more complicated than that. So, users may type some texts that match the inputrule but not really match the markdown syntax rule, for example, in commonmark, asd**'ef** shoudn't have any bold texts, but asd **'ef** and asd**ef** should have bold texts.

The inline sync plugin is designed to solve this problem. When users type something, the plugin will transform the line (for better performance) to real markdown AST by serializer and render the AST to dom by parser, thus the input texts can be displayed correctly.

The inline sync plugin is part of @milkdown/preset-commonmark so you don't need to use it yourself. It will be enabled by default.

Config

You can configure the behavior of inline sync plugin to adapt for some special cases:

editor.config((ctx) => {
    ctx.update(inlineSyncConfigCtx, (prevCfg) => ({
        ...prevCfg,
        // your config here.
    }))
});

The possible properties are:

shouldSyncNode

A function to control whether the inline sync plugin should sync for the user change. You can inspect the current prosemirror node and the future prosemirror node (which will replace the current one) to decide whether to skip this sync action.

movePlaceholder

The inline sync plugin will insert a special charater that stands for the current user's cursor, this function is used to control whether we need to move the user's cursor to a right position. For example:

This is a *|*test*** line.

We use | to stand for the user cursor. If user type a * now and the cursor will be between two *, however, the ***test*** should be a word decorated by inline and bold style. So, the cursor should move to ***|test***, if it stays at **|*test***, we'll get wrong content.

placeholderConfig

Use to decide which character the plugin will use to insert as placeholder. You should use a character that the user would never insert it themselves.

Default value:

placeholderConfig: {
    hole: '∅',
    punctuation: '⁂',
    char: '∴',
}

globalNodes

In markdown, sometimes the parser and serializer needs some additional context for some nodes. For example, if user type Test[^1], the parser will search for footnote definition for [^1], if there is a definition, a footnote reference node will be generated, otherwise it will be a normal text node. So, we need to add footnote_definition in globalNodes list to tell the inline sync plugin it needs to collect this kind of nodes when sync.

Paste Code from VS Code

This feature needs @milkdown/plugin-clipboard.

Now we add support for copy code in VS Code and paste it as a code block directly in milkdown.

Drag and Scroll

The feature needs @milkdown/plugin-block

Drag the block will scroll the editor when cursor near the edge of the editor.

rootDOMCtx

rootDOMCtx is a slice that stores the root dom element of current editor.

remarkStringifyOptionsCtx

remarkStringifyOptionsCtx is a slice that stores the config for remark stringify

This is designed to make user can configure the remark stringify behaviors.

For example:

editor.config((ctx) => {
    ctx.update(remarkStringify, (cfg) => ({
        ...cfg,
        bullet: '+',
    });
});