Inline sync plugin

[Saul-Mirone]

• I read the contributing guide
• I agree to follow the code of conduct

Summary

There're lots of bugs caused by consistency between markdown AST and UI.

For example:
#637
#553
#622

The inline-sync-plugin can help to solve this issue. Instead of using inputrules to check user input, this plugin keep sync the prosemirror node between markdown AST for inline nodes (such as paragraph and heading).

How did you test this change?

Manually test and e2e test.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 52efc1a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 2 targets

• nx run-many --target=tsc --all --parallel
• nx run-many --target=build --all --parallel

---

Sent with 💌 from NxCloud.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
milkdown	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 5:08AM (UTC)

[4-1-1]

Seemly , It will broken the editor history.

[Saul-Mirone]

Seemly , It will broken the editor history.

Do you have reproducable steps of videos?

[4-1-1]

Seemly , It will broken the editor history.

Do you have reproducable steps of videos?

#704 like this

[4-1-1]

Could you make the Inline sync plugin as an option. because I have do support abc**de** style .
by override a package name "micromark-util-classify-character"

[Saul-Mirone]

Could you make the Inline sync plugin as an option. because I have do support abc**de** style . by override a package name "micromark-util-classify-character"

I can certiainly make it can be turned off, but in my opinion abc**de** can work as usual.
https://milkdown.dev/online-demo?text=IYIwxgVBAmCmUCgg

[4-1-1]

Could you make the Inline sync plugin as an option. because I have do support abc**de** style . by override a package name "micromark-util-classify-character"

I can certiainly make it can be turned off, but in my opinion abc**de** can work as usual. https://milkdown.dev/online-demo?text=IYIwxgVBAmCmUCgg

sorry , abc**'de**abc**'de**

[Saul-Mirone]

Could you make the Inline sync plugin as an option. because I have do support abc**de** style . by override a package name "micromark-util-classify-character"

I can certiainly make it can be turned off, but in my opinion abc**de** can work as usual. https://milkdown.dev/online-demo?text=IYIwxgVBAmCmUCgg

sorry , abc**'de**abc**'de**

Do you mean you need abd**'de** to render the 'de as a strong mark? I think that's not allowed by markdown and only possible if you make a remark plugin to support that. The previous render behavior of milkdown is a bug.

[4-1-1]

I have done it. but maybe will bring some other bugs,not sure, runs fine right now

[z-950]

Early parsing markdown break plugins that uses remark-directive.
Because remark-directive has no name whitelist. It will throw error Cannot match target parser at the first character after : and then can not input but delete :.
So any plugins that like this is also broken.

example

import { createCmd, createCmdKey } from '@milkdown/core';
import { AtomList, createMark } from '@milkdown/utils';
import directive from 'remark-directive';

export const ModifyColorlulText = createCmdKey<string>('ModifyColorlulText');
const id = 'colorfulText';

const colorfulTextMark = createMark(() => {
    return {
        id,
        schema: () => ({
            attrs: {
                hex: {},
            },
            inclusive: true,
            parseDOM: [
                {
                    tag: 'span',
                    getAttrs: (dom) => {
                        if (!(dom instanceof HTMLElement)) {
                            console.error(new Error('impossible!'));
                            return false;
                        }
                        let { color } = dom.style;
                        if (color === '') return false;
                        color = `#${color
                            .slice(4, -1)
                            .split(', ')
                            .map((v) => parseInt(v).toString(16))
                            .join('')}`;
                        return { hex: color };
                    },
                },
            ],
            toDOM: (mark) => {
                const style = `color:${mark.attrs['hex']};`;
                return ['span', { style }];
            },
            parseMarkdown: {
                match: (node) => node.type === 'textDirective' && node['name'] === 'colorful',
                runner: (state, node, markType) => {
                    state.openMark(markType, { hex: (node['attributes'] as { hex: string }).hex });
                    state.next(node.children);
                    state.closeMark(markType);
                },
            },
            toMarkdown: {
                match: (node) => node.type.name === id,
                runner: (state, mark) => {
                    state.withMark(mark, 'textDirective', undefined, {
                        name: 'colorful',
                        attributes: {
                            hex: mark.attrs['hex'],
                        },
                    });
                },
            },
        }),
        commands: (markType) => [
            createCmd(ModifyColorlulText, (hex = '') => (state, dispatch) => {
                if (!dispatch) return false;

                const { from, to } = state.selection;

                const { tr } = state;

                if (hex === '') {
                    dispatch(tr.removeMark(from, to, markType));
                } else {
                    const colorMark = markType.create({ hex });
                    if (!colorMark) return false;
                    dispatch(tr.addMark(from, to, colorMark));
                }
                return true;
            }),
        ],
        remarkPlugins: () => [directive],
    };
});

// color
export const colorfulText = AtomList.create([colorfulTextMark()]);

Strictly speaking, remark-directive must have name whitelist, because it will match :name as text (also leaf, container) directive. :name is so common to appear in content.

[4-1-1]

@z-950 look at this @ezone-devops/milkdown-plugin-directive-fallback

[z-950]

@4-1-1 It's not a perfect realization of the fallback. I try do this, but it will lost some others directive.
This plugin can't solve nested directives. And some other lost like: :i[lovely] becomes :i.

[z-950]

@4-1-1
The whitelist of remark-directive is the only one solution.
So the current fallback is like this: writing our remark-directive, which means to control the markdown ast result.
Only need change factory-name in micromark-extension-directive imported by remark-directive.

export function factoryName(effects, ok, nok, type) {
  const self = this;

  let nameCache = ''; // {1}

  return start;

  /** @type {State} */
  function start(code) {
    if (asciiAlpha(code)) {
      nameCache = String.fromCharCode(code); // {2}
      effects.enter(type);
      effects.consume(code);
      return name;
    }

    return nok(code);
  }

  /** @type {State} */
  function name(code) {
    if (
      code === codes.dash ||
      code === codes.underscore ||
      asciiAlphanumeric(code)
    ) {
      nameCache += String.fromCharCode(code); // {3}
      effects.consume(code);
      return name;
    }

    effects.exit(type);
    return self.previous === codes.dash || self.previous === codes.underscore || !whitelist.includes(nameCache) //{4}
      ? nok(code)
      : ok(code);
  }
}

[Saul-Mirone]

I've added some options for sync plugin to make the behavior can be controled by users.

[iHaPBoy]

inclusive: false causes the mark to end after one character is entered.

[Saul-Mirone]

It's a trade off to support inline sync. We need to provide custom toggle mark command to fix this.

[iHaPBoy]

@Saul-Mirone Okay, I've created an issue for this. #809