@milkdown/preset-commonmark 6.2.0 → 6.3.0

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/plugin/add-order-in-list.ts

@@ -0,0 +1,19 @@
+/* Copyright 2021, Milkdown by Mirone. */
+import { Node } from 'unist';
+import { Parent, visit } from 'unist-util-visit';
+
+export const addOrderInList = () => {
+    function transformer(ast: Node) {
+        visit(ast, 'list', (node: Parent & { ordered?: boolean; start?: number }) => {
+            if (node.ordered) {
+                const start = node.start ?? 1;
+                node.children.forEach((child, index) => {
+                    (child as Node & { label: number }).label = index + start;
+                });
+                return;
+            }
+        });
+    }
+
+    return transformer;
+};

package/src/plugin/index.ts

@@ -2,12 +2,13 @@
 import { createPlugin } from '@milkdown/utils';
 import links from 'remark-inline-links';
 
+import { addOrderInList } from './add-order-in-list';
 import { filterHTMLPlugin } from './filter-html';
 import { inlineNodesCursorPlugin } from './inline-nodes-cursor';
 
 export const commonmarkPlugins = [
     createPlugin(() => ({
         prosePlugins: () => [inlineNodesCursorPlugin],
-        remarkPlugins: () => [links, filterHTMLPlugin],
+        remarkPlugins: () => [links, filterHTMLPlugin, addOrderInList],
     }))(),
 ];

package/src/supported-keys.ts

@@ -11,6 +11,7 @@ export const SupportedKeys = {
     H4: 'H4',
     H5: 'H5',
     H6: 'H6',
+    DowngradeHeading: 'DowngradeHeading',
     Text: 'Text',
     CodeInline: 'CodeInline',
     Em: 'Em',