@milkdown/preset-commonmark 4.14.2 → 5.1.1

package/src/mark/em.ts

@@ -11,30 +11,30 @@ const id = 'em';
 
 export const ToggleItalic = createCmdKey();
 
-export const em = createMark<Keys>((_, utils) => ({
+export const em = createMark<Keys>((utils) => ({
     id,
-    schema: {
+    schema: () => ({
         parseDOM: [
             { tag: 'i' },
             { tag: 'em' },
             { style: 'font-style', getAttrs: (value) => (value === 'italic') as false },
         ],
         toDOM: (mark) => ['em', { class: utils.getClassName(mark.attrs, id) }],
-    },
-    parser: {
-        match: (node) => node.type === 'emphasis',
-        runner: (state, node, markType) => {
-            state.openMark(markType);
-            state.next(node.children);
-            state.closeMark(markType);
+        parseMarkdown: {
+            match: (node) => node.type === 'emphasis',
+            runner: (state, node, markType) => {
+                state.openMark(markType);
+                state.next(node.children);
+                state.closeMark(markType);
+            },
         },
-    },
-    serializer: {
-        match: (mark) => mark.type.name === id,
-        runner: (state, mark) => {
-            state.withMark(mark, 'emphasis');
+        toMarkdown: {
+            match: (mark) => mark.type.name === id,
+            runner: (state, mark) => {
+                state.withMark(mark, 'emphasis');
+            },
         },
-    },
+    }),
     inputRules: (markType) => [
         markRule(/(?:^|[^_])(_([^_]+)_)$/, markType),
         markRule(/(?:^|[^*])(\*([^*]+)\*)$/, markType),

package/src/mark/link.ts

@@ -1,13 +1,13 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
-import { createCmd, createCmdKey } from '@milkdown/core';
+import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core';
 import { InputRule, Node as ProseNode, TextSelection, toggleMark } from '@milkdown/prose';
 import { createMark } from '@milkdown/utils';
 
 export const ToggleLink = createCmdKey<string>();
 export const ModifyLink = createCmdKey<string>();
 const id = 'link';
-export const link = createMark((_, utils) => {
+export const link = createMark((utils) => {
     const style = utils.getStyle((themeTool) => {
         const lineColor = themeTool.palette('line');
 
@@ -24,7 +24,7 @@ export const link = createMark((_, utils) => {
     });
     return {
         id,
-        schema: {
+        schema: () => ({
             attrs: {
                 href: {},
                 title: { default: null },
@@ -42,26 +42,26 @@ export const link = createMark((_, utils) => {
                 },
             ],
             toDOM: (mark) => ['a', { ...mark.attrs, class: utils.getClassName(mark.attrs, id, style) }],
-        },
-        parser: {
-            match: (node) => node.type === 'link',
-            runner: (state, node, markType) => {
-                const url = node.url as string;
-                const title = node.title as string;
-                state.openMark(markType, { href: url, title });
-                state.next(node.children);
-                state.closeMark(markType);
+            parseMarkdown: {
+                match: (node) => node.type === 'link',
+                runner: (state, node, markType) => {
+                    const url = node.url as string;
+                    const title = node.title as string;
+                    state.openMark(markType, { href: url, title });
+                    state.next(node.children);
+                    state.closeMark(markType);
+                },
             },
-        },
-        serializer: {
-            match: (mark) => mark.type.name === id,
-            runner: (state, mark) => {
-                state.withMark(mark, 'link', undefined, {
-                    title: mark.attrs.title,
-                    url: mark.attrs.href,
-                });
+            toMarkdown: {
+                match: (mark) => mark.type.name === id,
+                runner: (state, mark) => {
+                    state.withMark(mark, 'link', undefined, {
+                        title: mark.attrs.title,
+                        url: mark.attrs.href,
+                    });
+                },
             },
-        },
+        }),
         commands: (markType) => [
             createCmd(ToggleLink, (href = '') => toggleMark(markType, { href })),
             createCmd(ModifyLink, (href = '') => (state, dispatch) => {
@@ -100,13 +100,13 @@ export const link = createMark((_, utils) => {
                 return true;
             }),
         ],
-        inputRules: (markType, schema) => [
+        inputRules: (markType, ctx) => [
             new InputRule(/\[(?<text>.*?)]\((?<href>.*?)(?=“|\))"?(?<title>[^"]+)?"?\)/, (state, match, start, end) => {
                 const [okay, text = '', href, title] = match;
                 const { tr } = state;
                 if (okay) {
                     const content = text || 'link';
-                    tr.replaceWith(start, end, schema.text(content)).addMark(
+                    tr.replaceWith(start, end, ctx.get(schemaCtx).text(content)).addMark(
                         start,
                         content.length + start,
                         markType.create({ title, href }),

package/src/mark/strong.ts

@@ -9,7 +9,7 @@ import { SupportedKeys } from '../supported-keys';
 type Keys = SupportedKeys['Bold'];
 const id = 'strong';
 export const ToggleBold = createCmdKey();
-export const strong = createMark<Keys>((_, utils) => {
+export const strong = createMark<Keys>((utils) => {
     const style = utils.getStyle(
         () =>
             css`
@@ -18,28 +18,28 @@ export const strong = createMark<Keys>((_, utils) => {
     );
     return {
         id,
-        schema: {
+        schema: () => ({
             parseDOM: [
                 { tag: 'b' },
                 { tag: 'strong' },
                 { style: 'font-style', getAttrs: (value) => (value === 'bold') as false },
             ],
             toDOM: (mark) => ['strong', { class: utils.getClassName(mark.attrs, id, style) }],
-        },
-        parser: {
-            match: (node) => node.type === 'strong',
-            runner: (state, node, markType) => {
-                state.openMark(markType);
-                state.next(node.children);
-                state.closeMark(markType);
+            parseMarkdown: {
+                match: (node) => node.type === 'strong',
+                runner: (state, node, markType) => {
+                    state.openMark(markType);
+                    state.next(node.children);
+                    state.closeMark(markType);
+                },
             },
-        },
-        serializer: {
-            match: (mark) => mark.type.name === id,
-            runner: (state, mark) => {
-                state.withMark(mark, 'strong');
+            toMarkdown: {
+                match: (mark) => mark.type.name === id,
+                runner: (state, mark) => {
+                    state.withMark(mark, 'strong');
+                },
             },
-        },
+        }),
         inputRules: (markType) => [
             markRule(/(?:__)([^_]+)(?:__)$/, markType),
             markRule(/(?:\*\*)([^*]+)(?:\*\*)$/, markType),

package/src/node/blockquote.ts

@@ -12,7 +12,7 @@ const id = 'blockquote';
 
 export const WrapInBlockquote = createCmdKey();
 
-export const blockquote = createNode<Keys>((_, utils) => {
+export const blockquote = createNode<Keys>((utils) => {
     const style = utils.getStyle(
         (themeTool) =>
             css`
@@ -28,25 +28,25 @@ export const blockquote = createNode<Keys>((_, utils) => {
 
     return {
         id,
-        schema: {
+        schema: () => ({
             content: 'block+',
             group: 'block',
             defining: true,
             parseDOM: [{ tag: 'blockquote' }],
             toDOM: (node) => ['blockquote', { class: utils.getClassName(node.attrs, id, style) }, 0],
-        },
-        parser: {
-            match: ({ type }) => type === id,
-            runner: (state, node, type) => {
-                state.openNode(type).next(node.children).closeNode();
+            parseMarkdown: {
+                match: ({ type }) => type === id,
+                runner: (state, node, type) => {
+                    state.openNode(type).next(node.children).closeNode();
+                },
             },
-        },
-        serializer: {
-            match: (node) => node.type.name === id,
-            runner: (state, node) => {
-                state.openNode('blockquote').next(node.content).closeNode();
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state, node) => {
+                    state.openNode('blockquote').next(node.content).closeNode();
+                },
             },
-        },
+        }),
         inputRules: (nodeType) => [wrappingInputRule(/^\s*>\s$/, nodeType)],
         commands: (nodeType) => [createCmd(WrapInBlockquote, () => wrapIn(nodeType))],
         shortcuts: {

package/src/node/bullet-list.ts

@@ -9,30 +9,30 @@ type Keys = SupportedKeys['BulletList'];
 
 export const WrapInBulletList = createCmdKey();
 
-const id = 'bullet_list';
-export const bulletList = createNode<Keys>((_, utils) => {
+export const bulletList = createNode<Keys>((utils) => {
+    const id = 'bullet_list';
     return {
         id,
-        schema: {
+        schema: () => ({
             content: 'listItem+',
             group: 'block',
             parseDOM: [{ tag: 'ul' }],
             toDOM: (node) => {
                 return ['ul', { class: utils.getClassName(node.attrs, 'bullet-list') }, 0];
             },
-        },
-        parser: {
-            match: ({ type, ordered }) => type === 'list' && !ordered,
-            runner: (state, node, type) => {
-                state.openNode(type).next(node.children).closeNode();
+            parseMarkdown: {
+                match: ({ type, ordered }) => type === 'list' && !ordered,
+                runner: (state, node, type) => {
+                    state.openNode(type).next(node.children).closeNode();
+                },
             },
-        },
-        serializer: {
-            match: (node) => node.type.name === id,
-            runner: (state, node) => {
-                state.openNode('list', undefined, { ordered: false }).next(node.content).closeNode();
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state, node) => {
+                    state.openNode('list', undefined, { ordered: false }).next(node.content).closeNode();
+                },
             },
-        },
+        }),
         inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
         commands: (nodeType) => [createCmd(WrapInBulletList, () => wrapIn(nodeType))],
         shortcuts: {

package/src/node/code-fence.ts

@@ -32,7 +32,7 @@ const inputRegex = /^```(?<language>[a-z]*)? $/;
 export const TurnIntoCodeFence = createCmdKey();
 
 const id = 'fence';
-export const codeFence = createNode<Keys, { languageList?: string[] }>((options, utils) => {
+export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, options) => {
     const style = utils.getStyle(({ palette, mixin, size, font }) => {
         const { shadow, scrollbar, border } = mixin;
         const { lineWidth, radius } = size;
@@ -148,7 +148,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((options,
 
     return {
         id,
-        schema: {
+        schema: () => ({
             content: 'text*',
             group: 'block',
             marks: '',
@@ -184,23 +184,25 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((options,
                     ['pre', ['code', { spellCheck: 'false' }, 0]],
                 ];
             },
-        },
-        parser: {
-            match: ({ type }) => type === 'code',
-            runner: (state, node, type) => {
-                const language = node.lang as string;
-                const value = node.value as string;
-                state.openNode(type, { language });
-                state.addText(value);
-                state.closeNode();
+            parseMarkdown: {
+                match: ({ type }) => type === 'code',
+                runner: (state, node, type) => {
+                    const language = node.lang as string;
+                    const value = node.value as string;
+                    state.openNode(type, { language });
+                    state.addText(value);
+                    state.closeNode();
+                },
             },
-        },
-        serializer: {
-            match: (node) => node.type.name === id,
-            runner: (state, node) => {
-                state.addNode('code', undefined, node.content.firstChild?.text || '', { lang: node.attrs.language });
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state, node) => {
+                    state.addNode('code', undefined, node.content.firstChild?.text || '', {
+                        lang: node.attrs.language,
+                    });
+                },
             },
-        },
+        }),
         inputRules: (nodeType) => [
             textblockTypeInputRule(inputRegex, nodeType, ([ok, language]) => {
                 if (!ok) return;
@@ -211,7 +213,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((options,
         shortcuts: {
             [SupportedKeys.CodeFence]: createShortcut(TurnIntoCodeFence, 'Mod-Alt-c'),
         },
-        view: (node, view, getPos) => {
+        view: (ctx) => (node, view, getPos) => {
             const container = document.createElement('div');
             const selectWrapper = document.createElement('div');
             const select = document.createElement('ul');
@@ -222,7 +224,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((options,
             valueWrapper.className = 'code-fence_value';
             const value = document.createElement('span');
             valueWrapper.appendChild(value);
-            valueWrapper.appendChild(utils.ctx.get(themeToolCtx).slots.icon('downArrow'));
+            valueWrapper.appendChild(ctx.get(themeToolCtx).slots.icon('downArrow'));
 
             select.className = 'code-fence_select';
             select.addEventListener('mousedown', (e) => {

package/src/node/doc.ts

@@ -1,22 +1,24 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { createNode } from '@milkdown/utils';
 
-export const doc = createNode(() => ({
-    id: 'doc',
-    schema: {
-        content: 'block+',
-    },
-    parser: {
-        match: ({ type }) => type === 'root',
-        runner: (state, node, type) => {
-            state.injectRoot(node, type);
-        },
-    },
-    serializer: {
-        match: (node) => node.type.name === 'doc',
-        runner: (state, node) => {
-            state.openNode('root');
-            state.next(node.content);
-        },
-    },
-}));
+export const doc = createNode(() => {
+    return {
+        id: 'doc',
+        schema: () => ({
+            content: 'block+',
+            parseMarkdown: {
+                match: ({ type }) => type === 'root',
+                runner: (state, node, type) => {
+                    state.injectRoot(node, type);
+                },
+            },
+            toMarkdown: {
+                match: (node) => node.type.name === 'doc',
+                runner: (state, node) => {
+                    state.openNode('root');
+                    state.next(node.content);
+                },
+            },
+        }),
+    };
+});

package/src/node/hardbreak.ts

@@ -1,43 +1,59 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { createCmd, createCmdKey } from '@milkdown/core';
+import { Plugin, ReplaceStep, Slice } from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
 
 import { SupportedKeys } from '../supported-keys';
 
 type Keys = SupportedKeys['HardBreak'];
 
-const id = 'hardbreak';
-
 export const InsertHardbreak = createCmdKey();
 
-export const hardbreak = createNode<Keys>((_, utils) => ({
-    id,
-    schema: {
-        inline: true,
-        group: 'inline',
-        selectable: false,
-        parseDOM: [{ tag: 'br' }],
-        toDOM: (node) => ['br', { class: utils.getClassName(node.attrs, id) }],
-    },
-    parser: {
-        match: ({ type }) => type === 'break',
-        runner: (state, _, type) => {
-            state.addNode(type);
-        },
-    },
-    serializer: {
-        match: (node) => node.type.name === id,
-        runner: (state) => {
-            state.addNode('break');
-        },
-    },
-    commands: (nodeType) => [
-        createCmd(InsertHardbreak, () => (state, dispatch) => {
-            dispatch?.(state.tr.replaceSelectionWith(nodeType.create()).scrollIntoView());
-            return true;
+export const hardbreak = createNode<Keys>((utils) => {
+    return {
+        id: 'hardbreak',
+        schema: () => ({
+            inline: true,
+            group: 'inline',
+            selectable: false,
+            parseDOM: [{ tag: 'br' }],
+            toDOM: (node) => ['br', { class: utils.getClassName(node.attrs, 'hardbreak') }],
+            parseMarkdown: {
+                match: ({ type }) => type === 'break',
+                runner: (state, _, type) => {
+                    state.addNode(type);
+                },
+            },
+            toMarkdown: {
+                match: (node) => node.type.name === 'hardbreak',
+                runner: (state) => {
+                    state.addNode('break');
+                },
+            },
         }),
-    ],
-    shortcuts: {
-        [SupportedKeys.HardBreak]: createShortcut(InsertHardbreak, 'Shift-Enter'),
-    },
-}));
+        commands: (type) => [
+            createCmd(InsertHardbreak, () => (state, dispatch) => {
+                dispatch?.(state.tr.setMeta('hardbreak', true).replaceSelectionWith(type.create()).scrollIntoView());
+                return true;
+            }),
+        ],
+        shortcuts: {
+            [SupportedKeys.HardBreak]: createShortcut(InsertHardbreak, 'Shift-Enter'),
+        },
+        prosePlugins: (type) => [
+            new Plugin({
+                appendTransaction: (trs, _oldState, newState) => {
+                    if (!trs.length) return;
+                    const [tr] = trs;
+                    if (!tr.getMeta('hardbreak')) return;
+                    const [step] = tr.steps;
+                    if (!(step instanceof ReplaceStep)) {
+                        return;
+                    }
+                    const { from } = step as unknown as { slice: Slice; from: number; to: number };
+                    return newState.tr.setNodeMarkup(from, type, undefined, []);
+                },
+            }),
+        ],
+    };
+});

package/src/node/heading.ts

@@ -20,7 +20,7 @@ type Keys =
 
 export const TurnIntoHeading = createCmdKey<number>();
 
-export const heading = createNode<Keys>((options, utils) => {
+export const heading = createNode<Keys>((utils, options) => {
     const id = 'heading';
     const headingMap: Record<number, string> = {
         1: css`
@@ -48,7 +48,7 @@ export const heading = createNode<Keys>((options, utils) => {
 
     return {
         id,
-        schema: {
+        schema: () => ({
             content: 'inline*',
             group: 'block',
             attrs: {
@@ -69,31 +69,31 @@ export const heading = createNode<Keys>((options, utils) => {
                     0,
                 ];
             },
-        },
-        parser: {
-            match: ({ type }) => type === id,
-            runner: (state, node, type) => {
-                const depth = node.depth as number;
-                state.openNode(type, { level: depth });
-                state.next(node.children);
-                state.closeNode();
+            parseMarkdown: {
+                match: ({ type }) => type === id,
+                runner: (state, node, type) => {
+                    const depth = node.depth as number;
+                    state.openNode(type, { level: depth });
+                    state.next(node.children);
+                    state.closeNode();
+                },
             },
-        },
-        serializer: {
-            match: (node) => node.type.name === id,
-            runner: (state, node) => {
-                state.openNode('heading', undefined, { depth: node.attrs.level });
-                state.next(node.content);
-                state.closeNode();
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state, node) => {
+                    state.openNode('heading', undefined, { depth: node.attrs.level });
+                    state.next(node.content);
+                    state.closeNode();
+                },
             },
-        },
-        inputRules: (nodeType) =>
+        }),
+        inputRules: (type) =>
             headingIndex.map((x) =>
-                textblockTypeInputRule(new RegExp(`^(#{1,${x}})\\s$`), nodeType, () => ({
+                textblockTypeInputRule(new RegExp(`^(#{1,${x}})\\s$`), type, () => ({
                     level: x,
                 })),
             ),
-        commands: (nodeType) => [createCmd(TurnIntoHeading, (level = 1) => setBlockType(nodeType, { level }))],
+        commands: (type) => [createCmd(TurnIntoHeading, (level = 1) => setBlockType(type, { level }))],
         shortcuts: {
             [SupportedKeys.H1]: createShortcut(TurnIntoHeading, 'Mod-Alt-1', 1),
             [SupportedKeys.H2]: createShortcut(TurnIntoHeading, 'Mod-Alt-2', 2),

package/src/node/hr.ts

@@ -1,12 +1,12 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { css } from '@emotion/css';
-import { createCmd, createCmdKey } from '@milkdown/core';
+import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core';
 import { InputRule, Selection } from '@milkdown/prose';
 import { createNode } from '@milkdown/utils';
 
 const id = 'hr';
 export const InsertHr = createCmdKey<string>();
-export const hr = createNode((_, utils) => {
+export const hr = createNode((utils) => {
     const style = utils.getStyle(
         (themeTool) => css`
             height: ${themeTool.size.lineWidth};
@@ -16,44 +16,44 @@ export const hr = createNode((_, utils) => {
     );
     return {
         id,
-        schema: {
+        schema: () => ({
             group: 'block',
             parseDOM: [{ tag: 'hr' }],
             toDOM: (node) => ['hr', { class: utils.getClassName(node.attrs, id, style) }],
-        },
-        parser: {
-            match: ({ type }) => type === 'thematicBreak',
-            runner: (state, _, type) => {
-                state.addNode(type);
+            parseMarkdown: {
+                match: ({ type }) => type === 'thematicBreak',
+                runner: (state, _, type) => {
+                    state.addNode(type);
+                },
             },
-        },
-        serializer: {
-            match: (node) => node.type.name === id,
-            runner: (state) => {
-                state.addNode('thematicBreak');
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state) => {
+                    state.addNode('thematicBreak');
+                },
             },
-        },
-        inputRules: (nodeType) => [
+        }),
+        inputRules: (type) => [
             new InputRule(/^(?:---|___\s|\*\*\*\s)$/, (state, match, start, end) => {
                 const { tr } = state;
 
                 if (match[0]) {
-                    tr.replaceWith(start, end, nodeType.create({}));
+                    tr.replaceWith(start - 1, end, type.create());
                 }
 
                 return tr;
             }),
         ],
-        commands: (nodeType, schema) => [
+        commands: (type, ctx) => [
             createCmd(InsertHr, () => (state, dispatch) => {
                 if (!dispatch) return true;
                 const { tr, selection } = state;
                 const from = selection.from;
-                const node = nodeType.create();
+                const node = type.create();
                 if (!node) {
                     return true;
                 }
-                const _tr = tr.replaceSelectionWith(node).insert(from, schema.node('paragraph'));
+                const _tr = tr.replaceSelectionWith(node).insert(from, ctx.get(schemaCtx).node('paragraph'));
                 const sel = Selection.findFrom(_tr.doc.resolve(from), 1, true);
                 if (!sel) {
                     return true;