@milkdown/preset-commonmark 6.3.1 → 6.3.2

package/src/node/code-fence.ts

@@ -69,7 +69,11 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                         if (!(dom instanceof HTMLElement)) {
                             throw expectDomTypeError(dom);
                         }
-                        const textNode = schema.text(dom.querySelector('pre')?.textContent ?? '');
+                        const text = dom.querySelector('pre')?.textContent ?? '';
+                        if (!text) {
+                            return Fragment.empty;
+                        }
+                        const textNode = schema.text(text);
                         return Fragment.from(textNode);
                     },
                 },

package/src/node/list-item.ts

@@ -33,10 +33,10 @@ const createKeepListOrderPlugin = (type: NodeType) => {
                     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}.`;
+                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;
                 }
 

package/src/plugin/index.ts

@@ -4,11 +4,11 @@ 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],
+        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;
+};