@milkdown/preset-commonmark 5.3.4 → 5.5.0

package/src/mark/link.ts

@@ -3,8 +3,8 @@ 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>();
+export const ToggleLink = createCmdKey<string>('ToggleLink');
+export const ModifyLink = createCmdKey<string>('ModifyLink');
 const id = 'link';
 export const link = createMark((utils) => {
     const style = utils.getStyle((themeTool, { css }) => {
@@ -44,8 +44,8 @@ export const link = createMark((utils) => {
             parseMarkdown: {
                 match: (node) => node.type === 'link',
                 runner: (state, node, markType) => {
-                    const url = node.url as string;
-                    const title = node.title as string;
+                    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);
@@ -55,8 +55,8 @@ export const link = createMark((utils) => {
                 match: (mark) => mark.type.name === id,
                 runner: (state, mark) => {
                     state.withMark(mark, 'link', undefined, {
-                        title: mark.attrs.title,
-                        url: mark.attrs.href,
+                        title: mark.attrs['title'],
+                        url: mark.attrs['href'],
                     });
                 },
             },

package/src/mark/strong.ts

@@ -7,7 +7,7 @@ import { SupportedKeys } from '../supported-keys';
 
 type Keys = SupportedKeys['Bold'];
 const id = 'strong';
-export const ToggleBold = createCmdKey();
+export const ToggleBold = createCmdKey('ToggleBold');
 export const strong = createMark<Keys>((utils) => {
     const style = utils.getStyle(
         (_, { css }) =>

package/src/node/blockquote.ts

@@ -9,7 +9,7 @@ type Keys = SupportedKeys['Blockquote'];
 
 const id = 'blockquote';
 
-export const WrapInBlockquote = createCmdKey();
+export const WrapInBlockquote = createCmdKey('WrapInBlockquote');
 
 export const blockquote = createNode<Keys>((utils) => {
     const style = utils.getStyle(

package/src/node/bullet-list.ts

@@ -7,7 +7,7 @@ import { SupportedKeys } from '../supported-keys';
 
 type Keys = SupportedKeys['BulletList'];
 
-export const WrapInBulletList = createCmdKey();
+export const WrapInBulletList = createCmdKey('WrapInBulletList');
 
 export const bulletList = createNode<Keys>((utils) => {
     const id = 'bullet_list';

package/src/node/code-fence.ts

@@ -29,7 +29,7 @@ const languageOptions = [
 export const backtickInputRegex = /^```(?<language>[a-z]*)?[\s\n]$/;
 export const tildeInputRegex = /^~~~(?<language>[a-z]*)?[\s\n]$/;
 
-export const TurnIntoCodeFence = createCmdKey();
+export const TurnIntoCodeFence = createCmdKey('TurnIntoCodeFence');
 
 const id = 'fence';
 export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, options) => {
@@ -136,6 +136,9 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
             pre {
                 font-family: ${font.code};
                 margin: 0 1.2rem !important;
+                white-space: pre;
+                overflow: auto;
+                ${scrollbar('x')};
             }
         `;
     });
@@ -164,7 +167,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                         if (!(dom instanceof HTMLElement)) {
                             throw new Error('Parse DOM error.');
                         }
-                        return { language: dom.dataset.language };
+                        return { language: dom.dataset['language'] };
                     },
                 },
             ],
@@ -172,7 +175,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 return [
                     'pre',
                     {
-                        'data-language': node.attrs.language,
+                        'data-language': node.attrs['language'],
                         class: utils.getClassName(node.attrs, 'code-fence', style),
                     },
                     ['code', { spellCheck: 'false' }, 0],
@@ -181,8 +184,8 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
             parseMarkdown: {
                 match: ({ type }) => type === 'code',
                 runner: (state, node, type) => {
-                    const language = node.lang as string;
-                    const value = node.value as string;
+                    const language = node['lang'] as string;
+                    const value = node['value'] as string;
                     state.openNode(type, { language });
                     if (value) {
                         state.addText(value);
@@ -194,7 +197,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 match: (node) => node.type.name === id,
                 runner: (state, node) => {
                     state.addNode('code', undefined, node.content.firstChild?.text || '', {
-                        lang: node.attrs.language,
+                        lang: node.attrs['language'],
                     });
                 },
             },
@@ -244,7 +247,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 view.dispatch(
                     tr.setNodeMarkup(getPos(), undefined, {
                         fold: true,
-                        language: el.dataset.value,
+                        language: el.dataset['value'],
                     }),
                 );
             });
@@ -258,19 +261,19 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 view.dispatch(
                     tr.setNodeMarkup(getPos(), undefined, {
                         fold: false,
-                        language: container.dataset.language,
+                        language: container.dataset['language'],
                     }),
                 );
             });
             document.addEventListener('mousedown', () => {
-                if (!view.editable || select.dataset.fold === 'true') return;
+                if (!view.editable || select.dataset['fold'] === 'true') return;
 
                 const { tr } = view.state;
 
                 view.dispatch(
                     tr.setNodeMarkup(getPos(), undefined, {
                         fold: true,
-                        language: container.dataset.language,
+                        language: container.dataset['language'],
                     }),
                 );
             });
@@ -295,9 +298,9 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
 
             container.append(selectWrapper, pre);
             container.setAttribute('class', utils.getClassName(node.attrs, 'code-fence', style));
-            container.setAttribute('data-language', node.attrs.language);
-            value.innerText = node.attrs.language || '--';
-            select.setAttribute('data-fold', node.attrs.fold ? 'true' : 'false');
+            container.setAttribute('data-language', node.attrs['language']);
+            value.innerText = node.attrs['language'] || '--';
+            select.setAttribute('data-fold', node.attrs['fold'] ? 'true' : 'false');
 
             return {
                 dom: container,
@@ -305,10 +308,10 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 update: (updatedNode) => {
                     if (updatedNode.type.name !== id) return false;
 
-                    const lang = updatedNode.attrs.language;
-                    container.dataset.language = lang;
+                    const lang = updatedNode.attrs['language'];
+                    container.dataset['language'] = lang;
                     value.innerText = lang || '--';
-                    select.setAttribute('data-fold', updatedNode.attrs.fold ? 'true' : 'false');
+                    select.setAttribute('data-fold', updatedNode.attrs['fold'] ? 'true' : 'false');
 
                     return true;
                 },

package/src/node/hardbreak.ts

@@ -7,7 +7,7 @@ import { SupportedKeys } from '../supported-keys';
 
 type Keys = SupportedKeys['HardBreak'];
 
-export const InsertHardbreak = createCmdKey();
+export const InsertHardbreak = createCmdKey('InsertHardbreak');
 
 export const hardbreak = createNode<Keys>((utils) => {
     return {
@@ -42,10 +42,11 @@ export const hardbreak = createNode<Keys>((utils) => {
         },
         prosePlugins: (type) => [
             new Plugin({
-                key: new PluginKey('hardbreak-marks'),
+                key: new PluginKey('MILKDOWN_PLUGIN_HARDBREAK_MARKS'),
                 appendTransaction: (trs, _oldState, newState) => {
                     if (!trs.length) return;
                     const [tr] = trs;
+                    if (!tr) return;
 
                     const [step] = tr.steps;
 

package/src/node/heading.ts

@@ -1,6 +1,14 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey } from '@milkdown/core';
-import { Plugin, PluginKey, setBlockType, textblockTypeInputRule } from '@milkdown/prose';
+import { createCmd, createCmdKey, editorViewCtx } from '@milkdown/core';
+import {
+    EditorState,
+    Node,
+    Plugin,
+    PluginKey,
+    setBlockType,
+    textblockTypeInputRule,
+    Transaction,
+} from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
 
 import { SupportedKeys } from '../supported-keys';
@@ -17,7 +25,7 @@ type Keys =
     | SupportedKeys['H5']
     | SupportedKeys['H6'];
 
-export const TurnIntoHeading = createCmdKey<number>();
+export const TurnIntoHeading = createCmdKey<number>('TurnIntoHeading');
 
 export const headingPluginKey = new PluginKey('MILKDOWN_PLUGIN_ID');
 
@@ -85,10 +93,14 @@ export const heading = createNode<Keys>((utils) => {
             })),
             toDOM: (node) => {
                 return [
-                    `h${node.attrs.level}`,
+                    `h${node.attrs['level']}`,
                     {
-                        id: node.attrs.id || node.textContent.split(' ').join('-').toLocaleLowerCase(),
-                        class: utils.getClassName(node.attrs, `heading h${node.attrs.level}`, style(node.attrs.level)),
+                        id: node.attrs['id'] || node.textContent.split(' ').join('-').toLocaleLowerCase(),
+                        class: utils.getClassName(
+                            node.attrs,
+                            `heading h${node.attrs['level']}`,
+                            style(node.attrs['level']),
+                        ),
                     },
                     0,
                 ];
@@ -96,7 +108,7 @@ export const heading = createNode<Keys>((utils) => {
             parseMarkdown: {
                 match: ({ type }) => type === id,
                 runner: (state, node, type) => {
-                    const depth = node.depth as number;
+                    const depth = node['depth'] as number;
                     state.openNode(type, { level: depth });
                     state.next(node.children);
                     state.closeNode();
@@ -105,7 +117,7 @@ export const heading = createNode<Keys>((utils) => {
             toMarkdown: {
                 match: (node) => node.type.name === id,
                 runner: (state, node) => {
-                    state.openNode('heading', undefined, { depth: node.attrs.level });
+                    state.openNode('heading', undefined, { depth: node.attrs['level'] });
                     state.next(node.content);
                     state.closeNode();
                 },
@@ -126,28 +138,69 @@ export const heading = createNode<Keys>((utils) => {
             [SupportedKeys.H5]: createShortcut(TurnIntoHeading, 'Mod-Alt-5', 5),
             [SupportedKeys.H6]: createShortcut(TurnIntoHeading, 'Mod-Alt-6', 6),
         },
-        prosePlugins: (type) => [
-            new Plugin({
-                key: headingPluginKey,
-                appendTransaction: (transactions, _, nextState) => {
-                    const tr = nextState.tr;
-                    let modified = false;
-                    if (transactions.some((transaction) => transaction.docChanged)) {
-                        nextState.doc.descendants((node, pos) => {
-                            if (node.type === type) {
-                                const attrs = node.attrs;
-                                tr.setNodeMarkup(pos, undefined, {
-                                    ...attrs,
-                                    id: node.textContent.split(' ').join('-').toLocaleLowerCase(),
-                                });
-                                modified = true;
-                            }
-                        });
+        prosePlugins: (type, ctx) => {
+            let lock = false;
+            const createId = (node: Node) => {
+                return node.textContent
+                    .replace(/[\p{P}\p{S}]/gu, '')
+                    .replace(/\s/g, '')
+                    .trim();
+            };
+            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,
+                            });
+                        }
                     }
+                });
+                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;
+                            },
+                        },
+                    },
+                    appendTransaction: (transactions, _, nextState) => {
+                        let tr: Transaction | null = null;
 
-                    return modified ? tr : null;
-                },
-            }),
-        ],
+                        if (
+                            transactions.every((transaction) => !transaction.getMeta(headingPluginKey)) &&
+                            transactions.some((transaction) => transaction.docChanged)
+                        ) {
+                            walkThrough(nextState, (t) => {
+                                tr = t;
+                            });
+                        }
+
+                        return tr;
+                    },
+                }),
+            ];
+        },
     };
 });

package/src/node/hr.ts

@@ -4,7 +4,7 @@ import { InputRule, Selection } from '@milkdown/prose';
 import { createNode } from '@milkdown/utils';
 
 const id = 'hr';
-export const InsertHr = createCmdKey<string>();
+export const InsertHr = createCmdKey<string>('InsertHr');
 export const hr = createNode((utils) => {
     const style = utils.getStyle(
         (themeTool, { css }) => css`

package/src/node/image.ts

@@ -4,8 +4,8 @@ import type { Icon } from '@milkdown/design-system';
 import { findSelectedNodeOfType, InputRule } from '@milkdown/prose';
 import { createNode } from '@milkdown/utils';
 
-export const ModifyImage = createCmdKey<string>();
-export const InsertImage = createCmdKey<string>();
+export const ModifyImage = createCmdKey<string>('ModifyImage');
+export const InsertImage = createCmdKey<string>('InsertImage');
 const id = 'image';
 export type ImageOptions = {
     isBlock: boolean;
@@ -180,8 +180,8 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
                         class: utils.getClassName(
                             node.attrs,
                             id,
-                            node.attrs.failed ? 'failed' : '',
-                            node.attrs.loading ? 'loading' : '',
+                            node.attrs['failed'] ? 'failed' : '',
+                            node.attrs['loading'] ? 'loading' : '',
                             style,
                         ),
                     },
@@ -190,9 +190,9 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
             parseMarkdown: {
                 match: ({ type }) => type === id,
                 runner: (state, node, type) => {
-                    const url = node.url as string;
-                    const alt = node.alt as string;
-                    const title = node.title as string;
+                    const url = node['url'] as string;
+                    const alt = node['alt'] as string;
+                    const title = node['title'] as string;
                     state.addNode(type, {
                         src: url,
                         alt,
@@ -204,9 +204,9 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
                 match: (node) => node.type.name === id,
                 runner: (state, node) => {
                     state.addNode('image', undefined, undefined, {
-                        title: node.attrs.title,
-                        url: node.attrs.src,
-                        alt: node.attrs.alt,
+                        title: node.attrs['title'],
+                        url: node.attrs['src'],
+                        alt: node.attrs['alt'],
                     });
                 },
             },

package/src/node/list-item.ts

@@ -9,9 +9,9 @@ type Keys = SupportedKeys['SinkListItem'] | SupportedKeys['LiftListItem'] | Supp
 
 const id = 'list_item';
 
-export const SplitListItem = createCmdKey();
-export const SinkListItem = createCmdKey();
-export const LiftListItem = createCmdKey();
+export const SplitListItem = createCmdKey('SplitListItem');
+export const SinkListItem = createCmdKey('SinkListItem');
+export const LiftListItem = createCmdKey('LiftListItem');
 
 export const listItem = createNode<Keys>((utils) => {
     const style = utils.getStyle(

package/src/node/ordered-list.ts

@@ -7,7 +7,7 @@ import { SupportedKeys } from '../supported-keys';
 
 type Keys = SupportedKeys['OrderedList'];
 
-export const WrapInOrderedList = createCmdKey();
+export const WrapInOrderedList = createCmdKey('WrapInOrderedList');
 
 const id = 'ordered_list';
 export const orderedList = createNode<Keys>((utils) => ({
@@ -34,7 +34,7 @@ export const orderedList = createNode<Keys>((utils) => ({
         toDOM: (node) => [
             'ol',
             {
-                ...(node.attrs.order === 1 ? {} : node.attrs.order),
+                ...(node.attrs['order'] === 1 ? {} : node.attrs['order']),
                 class: utils.getClassName(node.attrs, 'ordered-list'),
             },
             0,
@@ -59,7 +59,7 @@ export const orderedList = createNode<Keys>((utils) => ({
             /^(\d+)\.\s$/,
             nodeType,
             (match) => ({ order: Number(match[1]) }),
-            (match, node) => node.childCount + node.attrs.order === Number(match[1]),
+            (match, node) => node.childCount + node.attrs['order'] === Number(match[1]),
         ),
     ],
     commands: (nodeType) => [createCmd(WrapInOrderedList, () => wrapIn(nodeType))],

package/src/node/paragraph.ts

@@ -7,7 +7,7 @@ import { SupportedKeys } from '../supported-keys';
 
 type Keys = SupportedKeys['Text'];
 
-export const TurnIntoText = createCmdKey();
+export const TurnIntoText = createCmdKey('TurnIntoText');
 
 const id = 'paragraph';
 export const paragraph = createNode<Keys>((utils) => {
@@ -33,7 +33,7 @@ export const paragraph = createNode<Keys>((utils) => {
                     if (node.children) {
                         state.next(node.children);
                     } else {
-                        state.addText(node.value as string);
+                        state.addText(node['value'] as string);
                     }
                     state.closeNode();
                 },

package/src/node/text.ts

@@ -8,7 +8,7 @@ export const text = createNode(() => ({
         parseMarkdown: {
             match: ({ type }) => type === 'text',
             runner: (state, node) => {
-                state.addText(node.value as string);
+                state.addText(node['value'] as string);
             },
         },
         toMarkdown: {

package/src/plugin/filter-html.ts

@@ -11,10 +11,16 @@ function flatMapWithDepth(ast: Node, fn: (node: Node, index: number, parent: Nod
         if (isParent(node)) {
             const out = [];
             for (let i = 0, n = node.children.length; i < n; i++) {
-                const xs = transform(node.children[i], i, node);
-                if (xs) {
-                    for (let j = 0, m = xs.length; j < m; j++) {
-                        out.push(xs[j]);
+                const nthChild = node.children[i];
+                if (nthChild) {
+                    const xs = transform(nthChild, i, node);
+                    if (xs) {
+                        for (let j = 0, m = xs.length; j < m; j++) {
+                            const item = xs[j];
+                            if (item) {
+                                out.push(item);
+                            }
+                        }
                     }
                 }
             }