@milkdown/preset-commonmark 6.1.4 → 6.3.0

package/src/node/heading.ts

@@ -1,10 +1,13 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey, editorViewCtx } from '@milkdown/core';
+import { createCmd, createCmdKey, Ctx, editorViewCtx, getPalette, schemaCtx } from '@milkdown/core';
+import { expectDomTypeError } from '@milkdown/exception';
+import { cloneTr } from '@milkdown/prose';
 import { setBlockType } from '@milkdown/prose/commands';
 import { textblockTypeInputRule } from '@milkdown/prose/inputrules';
-import { Node } from '@milkdown/prose/model';
+import { Fragment, Node, NodeType } from '@milkdown/prose/model';
 import { EditorState, Plugin, PluginKey, Transaction } from '@milkdown/prose/state';
-import { createNode, createShortcut } from '@milkdown/utils';
+import { Decoration, DecorationSet } from '@milkdown/prose/view';
+import { createNode, createShortcut, Utils } from '@milkdown/utils';
 
 import { SupportedKeys } from '../supported-keys';
 
@@ -18,11 +21,15 @@ type Keys =
     | SupportedKeys['H3']
     | SupportedKeys['H4']
     | SupportedKeys['H5']
-    | SupportedKeys['H6'];
+    | SupportedKeys['H6']
+    | SupportedKeys['DowngradeHeading'];
 
 export const TurnIntoHeading = createCmdKey<number>('TurnIntoHeading');
+export const DowngradeHeading = createCmdKey('DowngradeHeading');
+
+export const headingIdPluginKey = new PluginKey('MILKDOWN_HEADING_ID');
+export const headingHashPluginKey = new PluginKey('MILKDOWN_HEADING_HASH');
 
-export const headingPluginKey = new PluginKey('MILKDOWN_ID');
 const createId = (node: Node) =>
     node.textContent
         .replace(/[\p{P}\p{S}]/gu, '')
@@ -30,132 +37,272 @@ const createId = (node: Node) =>
         .toLowerCase()
         .trim();
 
-export const heading = createNode<Keys>((utils) => {
-    const id = 'heading';
-
-    return {
-        id,
-        schema: () => ({
-            content: 'inline*',
-            group: 'block',
-            defining: true,
-            attrs: {
-                id: {
-                    default: '',
+const headingIdPlugin = (ctx: Ctx, type: NodeType, getId: (node: Node) => string): Plugin => {
+    let lock = false;
+    const walkThrough = (state: EditorState, callback: (tr: Transaction) => void) => {
+        const tr = state.tr;
+        state.doc.descendants((node, pos) => {
+            if (node.type === type && !lock) {
+                if (node.textContent.trim().length === 0) {
+                    return;
+                }
+                const attrs = node.attrs;
+                const id = getId(node);
+
+                if (attrs['id'] !== id) {
+                    tr.setMeta(headingIdPluginKey, true).setNodeMarkup(pos, undefined, {
+                        ...attrs,
+                        id,
+                    });
+                }
+            }
+        });
+        callback(tr);
+    };
+    return new Plugin({
+        key: headingIdPluginKey,
+        props: {
+            handleDOMEvents: {
+                compositionstart: () => {
+                    lock = true;
+                    return false;
                 },
-                level: {
-                    default: 1,
+                compositionend: () => {
+                    lock = false;
+                    const view = ctx.get(editorViewCtx);
+                    setTimeout(() => {
+                        walkThrough(view.state, (tr) => view.dispatch(tr));
+                    }, 0);
+                    return false;
                 },
             },
-            parseDOM: headingIndex.map((x) => ({
-                tag: `h${x}`,
-                getAttrs: (node) => {
-                    if (!(node instanceof HTMLElement)) {
-                        throw new Error();
+        },
+        appendTransaction: (transactions, _, nextState) => {
+            let tr: Transaction | null = null;
+
+            if (
+                transactions.every((transaction) => !transaction.getMeta(headingIdPluginKey)) &&
+                transactions.some((transaction) => transaction.docChanged)
+            ) {
+                walkThrough(nextState, (t) => {
+                    tr = t;
+                });
+            }
+
+            return tr;
+        },
+        view: (view) => {
+            const doc = view.state.doc;
+            let tr = view.state.tr;
+            doc.descendants((node, pos) => {
+                if (node.type.name === 'heading' && node.attrs['level']) {
+                    if (!node.attrs['id']) {
+                        tr = tr.setNodeMarkup(pos, undefined, {
+                            ...node.attrs,
+                            id: getId(node),
+                        });
                     }
-                    return { level: x, id: node.id };
-                },
-            })),
-            toDOM: (node) => {
-                return [
-                    `h${node.attrs['level']}`,
-                    {
-                        id: node.attrs['id'] || createId(node),
-                        class: utils.getClassName(node.attrs, `heading h${node.attrs['level']}`),
-                    },
-                    0,
-                ];
+                }
+            });
+            view.dispatch(tr);
+            return {};
+        },
+    });
+};
+
+const headingHashPlugin = (ctx: Ctx, type: NodeType, utils: Utils): Plugin => {
+    return new Plugin({
+        key: headingHashPluginKey,
+        state: {
+            init: () => {
+                return DecorationSet.empty;
             },
-            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();
-                },
+            apply: (tr) => {
+                const view = ctx.get(editorViewCtx);
+                if (!view.hasFocus || !view.editable) return DecorationSet.empty;
+
+                const { $from } = tr.selection;
+                const node = $from.node();
+                if (node.type !== type) {
+                    return DecorationSet.empty;
+                }
+
+                const level = node.attrs['level'];
+                const getHashes = (level: number) => {
+                    return Array(level)
+                        .fill(0)
+                        .map((_) => `#`)
+                        .join('');
+                };
+                const widget = document.createElement('span');
+                widget.textContent = getHashes(level);
+                widget.contentEditable = 'false';
+                utils.themeManager.onFlush(() => {
+                    const style = utils.getStyle(({ css }) => {
+                        const palette = getPalette(utils.themeManager);
+                        return css`
+                            margin-right: 4px;
+                            color: ${palette('primary')};
+                        `;
+                    });
+                    if (style) {
+                        widget.className = style;
+                    }
+                });
+
+                const deco = Decoration.widget($from.before() + 1, widget, { side: -1 });
+                return DecorationSet.create(tr.doc, [deco]);
             },
-            toMarkdown: {
-                match: (node) => node.type.name === id,
-                runner: (state, node) => {
-                    state.openNode('heading', undefined, { depth: node.attrs['level'] });
-                    state.next(node.content);
-                    state.closeNode();
+        },
+        props: {
+            handleDOMEvents: {
+                focus: (view) => {
+                    const tr = cloneTr(view.state.tr);
+                    view.dispatch(tr);
+                    return false;
                 },
             },
-        }),
-        inputRules: (type) =>
-            headingIndex.map((x) =>
-                textblockTypeInputRule(new RegExp(`^(#{1,${x}})\\s$`), type, () => ({
-                    level: x,
-                })),
-            ),
-        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),
-            [SupportedKeys.H3]: createShortcut(TurnIntoHeading, 'Mod-Alt-3', 3),
-            [SupportedKeys.H4]: createShortcut(TurnIntoHeading, 'Mod-Alt-4', 4),
-            [SupportedKeys.H5]: createShortcut(TurnIntoHeading, 'Mod-Alt-5', 5),
-            [SupportedKeys.H6]: createShortcut(TurnIntoHeading, 'Mod-Alt-6', 6),
+            decorations(this: Plugin, state) {
+                return this.getState(state);
+            },
         },
-        prosePlugins: (type, ctx) => {
-            let lock = false;
-            const walkThrough = (state: EditorState, callback: (tr: Transaction) => void) => {
-                const tr = state.tr;
-                state.doc.descendants((node, pos) => {
-                    if (node.type === type && !lock) {
-                        if (node.textContent.trim().length === 0) {
-                            return;
-                        }
-                        const attrs = node.attrs;
-                        const id = createId(node);
+    });
+};
 
-                        if (attrs['id'] !== id) {
-                            tr.setMeta(headingPluginKey, true).setNodeMarkup(pos, undefined, {
-                                ...attrs,
-                                id,
-                            });
+export const heading = createNode<Keys, { getId: (node: Node) => string; displayHashtag: boolean }>(
+    (utils, options) => {
+        const id = 'heading';
+
+        const getId = options?.getId ?? createId;
+        const displayHashtag = options?.displayHashtag ?? true;
+
+        return {
+            id,
+            schema: () => ({
+                content: 'inline*',
+                group: 'block',
+                defining: true,
+                attrs: {
+                    id: {
+                        default: '',
+                    },
+                    level: {
+                        default: 1,
+                    },
+                },
+                parseDOM: headingIndex.map((x) => ({
+                    tag: `h${x}`,
+                    getAttrs: (node) => {
+                        if (!(node instanceof HTMLElement)) {
+                            throw expectDomTypeError(node);
                         }
-                    }
-                });
-                callback(tr);
-            };
-            return [
-                new Plugin({
-                    key: headingPluginKey,
-                    props: {
-                        handleDOMEvents: {
-                            compositionstart: () => {
-                                lock = true;
-                                return false;
-                            },
-                            compositionend: () => {
-                                lock = false;
-                                const view = ctx.get(editorViewCtx);
-                                setTimeout(() => {
-                                    walkThrough(view.state, (tr) => view.dispatch(tr));
-                                }, 0);
-                                return false;
-                            },
+                        return { level: x, id: node.id };
+                    },
+                })),
+                toDOM: (node) => {
+                    return [
+                        `h${node.attrs['level']}`,
+                        {
+                            id: node.attrs['id'] || getId(node),
+                            class: utils.getClassName(node.attrs, `heading h${node.attrs['level']}`),
                         },
+                        0,
+                    ];
+                },
+                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();
                     },
-                    appendTransaction: (transactions, _, nextState) => {
-                        let tr: Transaction | null = null;
-
-                        if (
-                            transactions.every((transaction) => !transaction.getMeta(headingPluginKey)) &&
-                            transactions.some((transaction) => transaction.docChanged)
-                        ) {
-                            walkThrough(nextState, (t) => {
-                                tr = t;
+                },
+                toMarkdown: {
+                    match: (node) => node.type.name === id,
+                    runner: (state, node) => {
+                        state.openNode('heading', undefined, { depth: node.attrs['level'] });
+                        const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak';
+                        if (lastIsHardbreak) {
+                            const contentArr: Node[] = [];
+                            node.content.forEach((n, _, i) => {
+                                if (i === node.childCount - 1) {
+                                    return;
+                                }
+                                contentArr.push(n);
                             });
+                            state.next(Fragment.fromArray(contentArr));
+                        } else {
+                            state.next(node.content);
                         }
-
-                        return tr;
+                        state.closeNode();
                     },
+                },
+            }),
+            inputRules: (type, ctx) =>
+                headingIndex.map((x) =>
+                    textblockTypeInputRule(new RegExp(`^(#{1,${x}})\\s$`), type, () => {
+                        const view = ctx.get(editorViewCtx);
+                        const { $from } = view.state.selection;
+                        const node = $from.node();
+                        if (node.type.name === 'heading') {
+                            let level = Number(node.attrs['level']) + Number(x);
+                            if (level > 6) {
+                                level = 6;
+                            }
+                            return {
+                                level,
+                            };
+                        }
+                        return {
+                            level: x,
+                        };
+                    }),
+                ),
+            commands: (type, ctx) => [
+                createCmd(TurnIntoHeading, (level = 1) => {
+                    if (level < 1) {
+                        return setBlockType(level === 0 ? ctx.get(schemaCtx).nodes['paragraph'] || type : type);
+                    }
+                    return setBlockType(level === 0 ? ctx.get(schemaCtx).nodes['paragraph'] || type : type, { level });
                 }),
-            ];
-        },
-    };
-});
+                createCmd(DowngradeHeading, () => {
+                    return (state, dispatch, view) => {
+                        const { $from } = state.selection;
+                        const node = $from.node();
+                        if (node.type !== type || !state.selection.empty || $from.parentOffset !== 0) return false;
+
+                        const level = node.attrs['level'] - 1;
+                        if (!level) {
+                            return setBlockType(ctx.get(schemaCtx).nodes['paragraph'] || type)(state, dispatch, view);
+                        }
+
+                        dispatch?.(
+                            state.tr.setNodeMarkup(state.selection.$from.before(), undefined, {
+                                ...node.attrs,
+                                level,
+                            }),
+                        );
+                        return true;
+                    };
+                }),
+            ],
+            shortcuts: {
+                [SupportedKeys.H1]: createShortcut(TurnIntoHeading, 'Mod-Alt-1', 1),
+                [SupportedKeys.H2]: createShortcut(TurnIntoHeading, 'Mod-Alt-2', 2),
+                [SupportedKeys.H3]: createShortcut(TurnIntoHeading, 'Mod-Alt-3', 3),
+                [SupportedKeys.H4]: createShortcut(TurnIntoHeading, 'Mod-Alt-4', 4),
+                [SupportedKeys.H5]: createShortcut(TurnIntoHeading, 'Mod-Alt-5', 5),
+                [SupportedKeys.H6]: createShortcut(TurnIntoHeading, 'Mod-Alt-6', 6),
+                [SupportedKeys.DowngradeHeading]: createShortcut(DowngradeHeading, ['Backspace', 'Delete']),
+            },
+            prosePlugins: (type, ctx) => {
+                const plugins = [headingIdPlugin(ctx, type, getId)];
+                if (displayHashtag) {
+                    plugins.push(headingHashPlugin(ctx, type, utils));
+                }
+                return plugins;
+            },
+        };
+    },
+);

package/src/node/hr.ts

@@ -40,13 +40,15 @@ export const hr = createNode((utils) => {
         commands: (type, ctx) => [
             createCmd(InsertHr, () => (state, dispatch) => {
                 if (!dispatch) return true;
+
+                const paragraph = ctx.get(schemaCtx).node('paragraph');
                 const { tr, selection } = state;
-                const from = selection.from;
+                const { from } = selection;
                 const node = type.create();
                 if (!node) {
                     return true;
                 }
-                const _tr = tr.replaceSelectionWith(node).insert(from, ctx.get(schemaCtx).node('paragraph'));
+                const _tr = tr.replaceSelectionWith(node).insert(from, paragraph);
                 const sel = Selection.findFrom(_tr.doc.resolve(from), 1, true);
                 if (!sel) {
                     return true;

package/src/node/image.ts

@@ -1,9 +1,10 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { commandsCtx, createCmd, createCmdKey, ThemeImageType, ThemeInputChipType } from '@milkdown/core';
+import { expectDomTypeError } from '@milkdown/exception';
 import { findSelectedNodeOfType } from '@milkdown/prose';
 import { InputRule } from '@milkdown/prose/inputrules';
 import { Plugin, PluginKey } from '@milkdown/prose/state';
-import { EditorView } from '@milkdown/prose/view';
+import { EditorView, NodeView } from '@milkdown/prose/view';
 import { createNode } from '@milkdown/utils';
 
 export const ModifyImage = createCmdKey<string>('ModifyImage');
@@ -41,7 +42,7 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
                     tag: 'img[src]',
                     getAttrs: (dom) => {
                         if (!(dom instanceof HTMLElement)) {
-                            throw new Error();
+                            throw expectDomTypeError(dom);
                         }
                         return {
                             src: dom.getAttribute('src') || '',
@@ -134,7 +135,7 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
             });
 
             if (!renderer) {
-                return {};
+                return {} as NodeView;
             }
 
             const { dom, onUpdate } = renderer;

package/src/node/index.ts

@@ -1,4 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
+import { AtomPlugin } from '@milkdown/utils';
+
 import { blockquote } from './blockquote';
 import { bulletList } from './bullet-list';
 import { codeFence } from './code-fence';
@@ -12,7 +14,7 @@ import { orderedList } from './ordered-list';
 import { paragraph } from './paragraph';
 import { text } from './text';
 
-export const nodes = [
+export const nodes: AtomPlugin[] = [
     doc(),
     paragraph(),
     hardbreak(),

package/src/node/list-item.ts

@@ -1,7 +1,11 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { createCmd, createCmdKey } from '@milkdown/core';
+import { expectDomTypeError } from '@milkdown/exception';
+import { getNodeFromSchema } from '@milkdown/prose';
 import { wrappingInputRule } from '@milkdown/prose/inputrules';
+import { NodeType } from '@milkdown/prose/model';
 import { liftListItem, sinkListItem, splitListItem } from '@milkdown/prose/schema-list';
+import { EditorState, Plugin, PluginKey, Transaction } from '@milkdown/prose/state';
 import { createNode, createShortcut } from '@milkdown/utils';
 
 import { SupportedKeys } from '../supported-keys';
@@ -14,18 +18,103 @@ export const SplitListItem = createCmdKey('SplitListItem');
 export const SinkListItem = createCmdKey('SinkListItem');
 export const LiftListItem = createCmdKey('LiftListItem');
 
+const keepListOrderPluginKey = new PluginKey('MILKDOWN_KEEP_LIST_ORDER');
+
+const createKeepListOrderPlugin = (type: NodeType) => {
+    const walkThrough = (state: EditorState, callback: (tr: Transaction) => void) => {
+        const orderedListType = getNodeFromSchema('ordered_list', state.schema);
+        let tr = state.tr;
+        state.doc.descendants((node, pos, parent, index) => {
+            if (node.type === type && parent?.type === orderedListType) {
+                let changed = false;
+                const attrs = { ...node.attrs };
+                if (node.attrs['listType'] !== 'ordered') {
+                    attrs['listType'] = 'ordered';
+                    changed = true;
+                }
+
+                const prev = parent?.maybeChild(index - 1);
+                if (prev && prev.type === type && prev.attrs['listType'] === 'ordered') {
+                    const label = prev.attrs['label'];
+                    attrs['label'] = `${Number(label.slice(0, -1)) + 1}.`;
+                    changed = true;
+                }
+
+                if (node.attrs['label'] === '•') {
+                    attrs['label'] = `${index + 1}.`;
+                    changed = true;
+                }
+
+                if (changed) {
+                    tr = tr.setNodeMarkup(pos, undefined, attrs);
+                }
+            }
+        });
+        callback(tr);
+    };
+    return new Plugin({
+        key: keepListOrderPluginKey,
+        appendTransaction: (transactions, _oldState, nextState) => {
+            let tr: Transaction | null = null;
+            if (transactions.some((transaction) => transaction.docChanged)) {
+                walkThrough(nextState, (t) => {
+                    tr = t;
+                });
+            }
+
+            return tr;
+        },
+    });
+};
+
 export const listItem = createNode<Keys>((utils) => ({
     id,
     schema: () => ({
         group: 'listItem',
         content: 'paragraph block*',
+        attrs: {
+            label: {
+                default: '•',
+            },
+            listType: {
+                default: 'bullet',
+            },
+        },
         defining: true,
-        parseDOM: [{ tag: 'li' }],
-        toDOM: (node) => ['li', { class: utils.getClassName(node.attrs, 'list-item') }, 0],
+        parseDOM: [
+            {
+                tag: 'li.list-item',
+                getAttrs: (dom) => {
+                    if (!(dom instanceof HTMLElement)) {
+                        throw expectDomTypeError(dom);
+                    }
+                    return {
+                        label: dom.dataset['label'],
+                        listType: dom.dataset['list-type'],
+                    };
+                },
+                contentElement: 'div.list-item_body',
+            },
+            { tag: 'li' },
+        ],
+        toDOM: (node) => {
+            return [
+                'li',
+                {
+                    class: utils.getClassName(node.attrs, 'list-item'),
+                    'data-label': node.attrs['label'],
+                    'data-list-type': node.attrs['listType'],
+                },
+                ['div', { class: utils.getClassName(node.attrs, 'list-item_label') }, node.attrs['label']],
+                ['div', { class: utils.getClassName(node.attrs, 'list-item_body') }, 0],
+            ];
+        },
         parseMarkdown: {
             match: ({ type, checked }) => type === 'listItem' && checked === null,
             runner: (state, node, type) => {
-                state.openNode(type);
+                const label = node['label'] != null ? `${node['label']}.` : '•';
+                const listType = node['label'] != null ? 'ordered' : 'bullet';
+                state.openNode(type, { label, listType });
                 state.next(node.children);
                 state.closeNode();
             },
@@ -50,4 +139,5 @@ export const listItem = createNode<Keys>((utils) => ({
         [SupportedKeys.SinkListItem]: createShortcut(SinkListItem, 'Mod-]'),
         [SupportedKeys.LiftListItem]: createShortcut(LiftListItem, 'Mod-['),
     },
+    prosePlugins: (nodeType) => [createKeepListOrderPlugin(nodeType)],
 }));

package/src/node/ordered-list.ts

@@ -1,5 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { createCmd, createCmdKey } from '@milkdown/core';
+import { expectDomTypeError } from '@milkdown/exception';
 import { wrapIn } from '@milkdown/prose/commands';
 import { wrappingInputRule } from '@milkdown/prose/inputrules';
 import { createNode, createShortcut } from '@milkdown/utils';
@@ -26,7 +27,7 @@ export const orderedList = createNode<Keys>((utils) => ({
                 tag: 'ol',
                 getAttrs: (dom) => {
                     if (!(dom instanceof HTMLElement)) {
-                        throw new Error();
+                        throw expectDomTypeError(dom);
                     }
                     return { order: dom.hasAttribute('start') ? Number(dom.getAttribute('start')) : 1 };
                 },

package/src/node/paragraph.ts

@@ -1,6 +1,7 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { createCmd, createCmdKey } from '@milkdown/core';
 import { setBlockType } from '@milkdown/prose/commands';
+import { Fragment, Node } from '@milkdown/prose/model';
 import { createNode, createShortcut } from '@milkdown/utils';
 
 import { SupportedKeys } from '../supported-keys';
@@ -34,8 +35,17 @@ export const paragraph = createNode<Keys>((utils) => {
                 match: (node) => node.type.name === 'paragraph',
                 runner: (state, node) => {
                     state.openNode('paragraph');
-                    const onlyHardbreak = node.childCount === 1 && node.firstChild?.type.name === 'hardbreak';
-                    if (!onlyHardbreak) {
+                    const lastIsHardbreak = node.childCount >= 1 && node.lastChild?.type.name === 'hardbreak';
+                    if (lastIsHardbreak) {
+                        const contentArr: Node[] = [];
+                        node.content.forEach((n, _, i) => {
+                            if (i === node.childCount - 1) {
+                                return;
+                            }
+                            contentArr.push(n);
+                        });
+                        state.next(Fragment.fromArray(contentArr));
+                    } else {
                         state.next(node.content);
                     }
                     state.closeNode();