@milkdown/preset-commonmark 6.2.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/preset-commonmark",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -17,8 +17,8 @@
     "commonmark"
   ],
   "devDependencies": {
-    "@milkdown/core": "6.2.0",
-    "@milkdown/prose": "6.2.0",
+    "@milkdown/core": "6.3.0",
+    "@milkdown/prose": "6.3.0",
     "@types/unist": "^2.0.6"
   },
   "peerDependencies": {
@@ -26,9 +26,11 @@
     "@milkdown/prose": "^6.0.1"
   },
   "dependencies": {
-    "@milkdown/utils": "6.2.0",
+    "@milkdown/utils": "6.3.0",
+    "@milkdown/exception": "6.3.0",
+    "unist-util-visit": "^4.0.0",
     "remark-inline-links": "^6.0.0",
-    "tslib": "^2.3.1"
+    "tslib": "^2.4.0"
   },
   "nx": {
     "targets": {

package/src/mark/link.ts

@@ -1,5 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { commandsCtx, createCmd, createCmdKey, schemaCtx, ThemeInputChipType } from '@milkdown/core';
+import { expectDomTypeError, missingRootElement } from '@milkdown/exception';
 import { calculateTextPosition } from '@milkdown/prose';
 import { toggleMark } from '@milkdown/prose/commands';
 import { InputRule } from '@milkdown/prose/inputrules';
@@ -33,7 +34,7 @@ export const link = createMark<string, LinkOptions>((utils, options) => {
                     tag: 'a[href]',
                     getAttrs: (dom) => {
                         if (!(dom instanceof HTMLElement)) {
-                            throw new Error();
+                            throw expectDomTypeError(dom);
                         }
                         return { href: dom.getAttribute('href'), title: dom.getAttribute('title') };
                     },
@@ -132,7 +133,7 @@ export const link = createMark<string, LinkOptions>((utils, options) => {
                                 calculateTextPosition(view, input, (start, end, target, parent) => {
                                     const $editor = view.dom.parentElement;
                                     if (!$editor) {
-                                        throw new Error();
+                                        throw missingRootElement();
                                     }
 
                                     const selectionWidth = end.left - start.left;

package/src/node/code-fence.ts

@@ -1,5 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
 import { createCmd, createCmdKey, editorViewCtx, ThemeCodeFenceType } from '@milkdown/core';
+import { expectDomTypeError } from '@milkdown/exception';
 import { setBlockType } from '@milkdown/prose/commands';
 import { textblockTypeInputRule } from '@milkdown/prose/inputrules';
 import { Fragment } from '@milkdown/prose/model';
@@ -60,13 +61,13 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                     preserveWhitespace: 'full',
                     getAttrs: (dom) => {
                         if (!(dom instanceof HTMLElement)) {
-                            throw new Error('Parse DOM error.');
+                            throw expectDomTypeError(dom);
                         }
                         return { language: dom.querySelector('pre')?.dataset['language'] };
                     },
                     getContent: (dom, schema) => {
                         if (!(dom instanceof HTMLElement)) {
-                            throw new Error('Parse DOM error.');
+                            throw expectDomTypeError(dom);
                         }
                         const textNode = schema.text(dom.querySelector('pre')?.textContent ?? '');
                         return Fragment.from(textNode);
@@ -77,7 +78,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                     preserveWhitespace: 'full',
                     getAttrs: (dom) => {
                         if (!(dom instanceof HTMLElement)) {
-                            throw new Error('Parse DOM error.');
+                            throw expectDomTypeError(dom);
                         }
                         return { language: dom.dataset['language'] };
                     },

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 { Fragment, 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,14 @@ 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 headingPluginKey = new PluginKey('MILKDOWN_ID');
+export const headingIdPluginKey = new PluginKey('MILKDOWN_HEADING_ID');
+export const headingHashPluginKey = new PluginKey('MILKDOWN_HEADING_HASH');
 
 const createId = (node: Node) =>
     node.textContent
@@ -31,162 +37,272 @@ const createId = (node: Node) =>
         .toLowerCase()
         .trim();
 
-export const heading = createNode<Keys, { getId: (node: Node) => string }>((utils, options) => {
-    const id = 'heading';
+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);
 
-    const getId = options?.getId ?? createId;
-
-    return {
-        id,
-        schema: () => ({
-            content: 'inline*',
-            group: 'block',
-            defining: true,
-            attrs: {
-                id: {
-                    default: '',
+                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'] || 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();
-                },
+                }
+            });
+            view.dispatch(tr);
+            return {};
+        },
+    });
+};
+
+const headingHashPlugin = (ctx: Ctx, type: NodeType, utils: Utils): Plugin => {
+    return new Plugin({
+        key: headingHashPluginKey,
+        state: {
+            init: () => {
+                return DecorationSet.empty;
             },
-            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);
+            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;
                     }
-                    state.closeNode();
+                });
+
+                const deco = Decoration.widget($from.before() + 1, widget, { side: -1 });
+                return DecorationSet.create(tr.doc, [deco]);
+            },
+        },
+        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 = getId(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();
                     },
-                    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),
-                                    });
-                                }
+                },
+            }),
+            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;
                             }
-                        });
-                        view.dispatch(tr);
-                        return {};
-                    },
+                            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/image.ts

@@ -1,5 +1,6 @@
 /* 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';
@@ -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') || '',