@milkdown/preset-commonmark 6.2.0 → 6.3.2

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 base = parent?.maybeChild(0);
+                if (base && base.type === type && base.attrs['listType'] === 'ordered') {
+                    const label = base.attrs['label'];
+                    attrs['label'] = `${Number(label.slice(0, -1)) + index}.`;
+                    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';
+import { getInlineNodesCursorPlugin } from './inline-nodes-cursor';
 
 export const commonmarkPlugins = [
     createPlugin(() => ({
-        prosePlugins: () => [inlineNodesCursorPlugin],
-        remarkPlugins: () => [links, filterHTMLPlugin],
+        prosePlugins: () => [getInlineNodesCursorPlugin()],
+        remarkPlugins: () => [links, filterHTMLPlugin, addOrderInList],
     }))(),
 ];

package/src/plugin/inline-nodes-cursor.ts

@@ -8,59 +8,87 @@ const inlineNodesCursorPluginKey = new PluginKey('MILKDOWN_INLINE_NODES_CURSOR')
  * This plugin is to solve the chrome 98 bug:
  * https://discuss.prosemirror.net/t/cursor-jumps-at-the-end-of-line-when-it-betweens-two-inline-nodes/4641
  */
-export const inlineNodesCursorPlugin: Plugin = new Plugin({
-    key: inlineNodesCursorPluginKey,
-    state: {
-        init() {
-            return false;
-        },
-        apply(tr) {
-            if (!tr.selection.empty) {
+export const getInlineNodesCursorPlugin = (): Plugin => {
+    let lock = false;
+    const inlineNodesCursorPlugin: Plugin = new Plugin({
+        key: inlineNodesCursorPluginKey,
+        state: {
+            init() {
                 return false;
-            }
-            const pos = tr.selection.$from;
-            const left = pos.nodeBefore;
-            const right = pos.nodeAfter;
-            if (left && right && left.isInline && !left.isText && right.isInline && !right.isText) {
-                return true;
-            }
-
-            return false;
-        },
-    },
-    props: {
-        handleDOMEvents: {
-            beforeinput: (view, e) => {
-                const active = inlineNodesCursorPlugin.getState(view.state);
-                if (active && e instanceof InputEvent) {
-                    const from = view.state.selection.from;
-                    e.preventDefault();
-                    view.dispatch(view.state.tr.insertText(e.data || '', from));
-
+            },
+            apply(tr) {
+                if (!tr.selection.empty) {
+                    return false;
+                }
+                const pos = tr.selection.$from;
+                const left = pos.nodeBefore;
+                const right = pos.nodeAfter;
+                if (left && right && left.isInline && !left.isText && right.isInline && !right.isText) {
                     return true;
                 }
 
                 return false;
             },
         },
-        decorations(state) {
-            const active = inlineNodesCursorPlugin.getState(state);
-            if (active) {
-                const pos = state.selection.$from;
-                const position = pos.pos;
-                const left = document.createElement('span');
-                const leftDec = Decoration.widget(position, left, {
-                    side: -1,
-                });
-                const right = document.createElement('span');
-                const rightDec = Decoration.widget(position, right);
-                setTimeout(() => {
-                    left.contentEditable = 'true';
-                    right.contentEditable = 'true';
-                });
-                return DecorationSet.create(state.doc, [leftDec, rightDec]);
-            }
-            return DecorationSet.empty;
+        props: {
+            handleDOMEvents: {
+                compositionend: (view, e) => {
+                    if (lock) {
+                        lock = false;
+                        requestAnimationFrame(() => {
+                            const active = inlineNodesCursorPlugin.getState(view.state);
+                            if (active) {
+                                const from = view.state.selection.from;
+                                e.preventDefault();
+                                view.dispatch(view.state.tr.insertText(e.data || '', from));
+                            }
+                        });
+
+                        return true;
+                    }
+                    return false;
+                },
+                compositionstart: (view) => {
+                    const active = inlineNodesCursorPlugin.getState(view.state);
+                    if (active) {
+                        lock = true;
+                    }
+                    return false;
+                },
+                beforeinput: (view, e) => {
+                    const active = inlineNodesCursorPlugin.getState(view.state);
+                    if (active && e instanceof InputEvent && e.data && !lock) {
+                        const from = view.state.selection.from;
+                        e.preventDefault();
+                        view.dispatch(view.state.tr.insertText(e.data || '', from));
+
+                        return true;
+                    }
+
+                    return false;
+                },
+            },
+            decorations(state) {
+                const active = inlineNodesCursorPlugin.getState(state);
+                if (active) {
+                    const pos = state.selection.$from;
+                    const position = pos.pos;
+                    const left = document.createElement('span');
+                    const leftDec = Decoration.widget(position, left, {
+                        side: -1,
+                    });
+                    const right = document.createElement('span');
+                    const rightDec = Decoration.widget(position, right);
+                    setTimeout(() => {
+                        left.contentEditable = 'true';
+                        right.contentEditable = 'true';
+                    });
+                    return DecorationSet.create(state.doc, [leftDec, rightDec]);
+                }
+                return DecorationSet.empty;
+            },
         },
-    },
-});
+    });
+
+    return inlineNodesCursorPlugin;
+};

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',