@milkdown/preset-commonmark 4.14.2 → 5.1.1

package/src/node/image.ts

@@ -16,7 +16,7 @@ export type ImageOptions = {
         failed: string;
     };
 };
-export const image = createNode<string, ImageOptions>((options, utils) => {
+export const image = createNode<string, ImageOptions>((utils, options) => {
     const placeholder = {
         loading: 'Loading...',
         empty: 'Add an Image',
@@ -123,8 +123,8 @@ export const image = createNode<string, ImageOptions>((options, utils) => {
     );
 
     return {
-        id,
-        schema: {
+        id: 'image',
+        schema: () => ({
             inline: true,
             group: 'inline',
             draggable: true,
@@ -173,35 +173,35 @@ export const image = createNode<string, ImageOptions>((options, utils) => {
                     },
                 ];
             },
-        },
-        parser: {
-            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;
-                state.addNode(type, {
-                    src: url,
-                    alt,
-                    title,
-                });
+            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;
+                    state.addNode(type, {
+                        src: url,
+                        alt,
+                        title,
+                    });
+                },
             },
-        },
-        serializer: {
-            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,
-                });
+            toMarkdown: {
+                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,
+                    });
+                },
             },
-        },
-        commands: (nodeType) => [
+        }),
+        commands: (type) => [
             createCmd(InsertImage, (src = '') => (state, dispatch) => {
                 if (!dispatch) return true;
                 const { tr } = state;
-                const node = nodeType.create({ src });
+                const node = type.create({ src });
                 if (!node) {
                     return true;
                 }
@@ -210,7 +210,7 @@ export const image = createNode<string, ImageOptions>((options, utils) => {
                 return true;
             }),
             createCmd(ModifyImage, (src = '') => (state, dispatch) => {
-                const node = findSelectedNodeOfType(state.selection, nodeType);
+                const node = findSelectedNodeOfType(state.selection, type);
                 if (!node) return false;
 
                 const { tr } = state;
@@ -221,23 +221,23 @@ export const image = createNode<string, ImageOptions>((options, utils) => {
                 return true;
             }),
         ],
-        inputRules: (nodeType) => [
+        inputRules: (type) => [
             new InputRule(
                 /!\[(?<alt>.*?)]\((?<filename>.*?)\s*(?="|\))"?(?<title>[^"]+)?"?\)/,
                 (state, match, start, end) => {
                     const [okay, alt, src = '', title] = match;
                     const { tr } = state;
                     if (okay) {
-                        tr.replaceWith(start, end, nodeType.create({ src, alt, title }));
+                        tr.replaceWith(start, end, type.create({ src, alt, title }));
                     }
 
                     return tr;
                 },
             ),
         ],
-        view: (node, view, getPos) => {
+        view: (ctx) => (node, view, getPos) => {
             const nodeType = node.type;
-            const createIcon = utils.ctx.get(themeToolCtx).slots.icon;
+            const createIcon = ctx.get(themeToolCtx).slots.icon;
             const container = document.createElement('span');
             container.className = utils.getClassName(node.attrs, id, containerStyle);
             container.contentEditable = 'false';

package/src/node/list-item.ts

@@ -15,7 +15,7 @@ export const SplitListItem = createCmdKey();
 export const SinkListItem = createCmdKey();
 export const LiftListItem = createCmdKey();
 
-export const listItem = createNode<Keys>((_, utils) => {
+export const listItem = createNode<Keys>((utils) => {
     const style = utils.getStyle(
         (themeTool) =>
             css`
@@ -35,29 +35,29 @@ export const listItem = createNode<Keys>((_, utils) => {
 
     return {
         id,
-        schema: {
+        schema: () => ({
             group: 'listItem',
             content: 'paragraph block*',
             defining: true,
             parseDOM: [{ tag: 'li' }],
             toDOM: (node) => ['li', { class: utils.getClassName(node.attrs, 'list-item', style) }, 0],
-        },
-        parser: {
-            match: ({ type, checked }) => type === 'listItem' && checked === null,
-            runner: (state, node, type) => {
-                state.openNode(type);
-                state.next(node.children);
-                state.closeNode();
+            parseMarkdown: {
+                match: ({ type, checked }) => type === 'listItem' && checked === null,
+                runner: (state, node, type) => {
+                    state.openNode(type);
+                    state.next(node.children);
+                    state.closeNode();
+                },
             },
-        },
-        serializer: {
-            match: (node) => node.type.name === id,
-            runner: (state, node) => {
-                state.openNode('listItem');
-                state.next(node.content);
-                state.closeNode();
+            toMarkdown: {
+                match: (node) => node.type.name === id,
+                runner: (state, node) => {
+                    state.openNode('listItem');
+                    state.next(node.content);
+                    state.closeNode();
+                },
             },
-        },
+        }),
         inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
         commands: (nodeType) => [
             createCmd(SplitListItem, () => splitListItem(nodeType)),

package/src/node/ordered-list.ts

@@ -10,9 +10,9 @@ type Keys = SupportedKeys['OrderedList'];
 export const WrapInOrderedList = createCmdKey();
 
 const id = 'ordered_list';
-export const orderedList = createNode<Keys>((_, utils) => ({
+export const orderedList = createNode<Keys>((utils) => ({
     id,
-    schema: {
+    schema: () => ({
         content: 'listItem+',
         group: 'block',
         attrs: {
@@ -39,21 +39,21 @@ export const orderedList = createNode<Keys>((_, utils) => ({
             },
             0,
         ],
-    },
-    parser: {
-        match: ({ type, ordered }) => type === 'list' && !!ordered,
-        runner: (state, node, type) => {
-            state.openNode(type).next(node.children).closeNode();
+        parseMarkdown: {
+            match: ({ type, ordered }) => type === 'list' && !!ordered,
+            runner: (state, node, type) => {
+                state.openNode(type).next(node.children).closeNode();
+            },
         },
-    },
-    serializer: {
-        match: (node) => node.type.name === id,
-        runner: (state, node) => {
-            state.openNode('list', undefined, { ordered: true, start: 1 });
-            state.next(node.content);
-            state.closeNode();
+        toMarkdown: {
+            match: (node) => node.type.name === id,
+            runner: (state, node) => {
+                state.openNode('list', undefined, { ordered: true, start: 1 });
+                state.next(node.content);
+                state.closeNode();
+            },
         },
-    },
+    }),
     inputRules: (nodeType) => [
         wrappingInputRule(
             /^(\d+)\.\s$/,

package/src/node/paragraph.ts

@@ -11,7 +11,7 @@ type Keys = SupportedKeys['Text'];
 export const TurnIntoText = createCmdKey();
 
 const id = 'paragraph';
-export const paragraph = createNode<Keys>((options, utils) => {
+export const paragraph = createNode<Keys>((utils, options) => {
     const style = options?.headless
         ? null
         : css`
@@ -22,32 +22,32 @@ export const paragraph = createNode<Keys>((options, utils) => {
 
     return {
         id,
-        schema: {
+        schema: () => ({
             content: 'inline*',
             group: 'block',
             parseDOM: [{ tag: 'p' }],
             toDOM: (node) => ['p', { class: utils.getClassName(node.attrs, id, style) }, 0],
-        },
-        parser: {
-            match: (node) => node.type === 'paragraph',
-            runner: (state, node, type) => {
-                state.openNode(type);
-                if (node.children) {
-                    state.next(node.children);
-                } else {
-                    state.addText(node.value as string);
-                }
-                state.closeNode();
+            parseMarkdown: {
+                match: (node) => node.type === 'paragraph',
+                runner: (state, node, type) => {
+                    state.openNode(type);
+                    if (node.children) {
+                        state.next(node.children);
+                    } else {
+                        state.addText(node.value as string);
+                    }
+                    state.closeNode();
+                },
             },
-        },
-        serializer: {
-            match: (node) => node.type.name === 'paragraph',
-            runner: (state, node) => {
-                state.openNode('paragraph');
-                state.next(node.content);
-                state.closeNode();
+            toMarkdown: {
+                match: (node) => node.type.name === 'paragraph',
+                runner: (state, node) => {
+                    state.openNode('paragraph');
+                    state.next(node.content);
+                    state.closeNode();
+                },
             },
-        },
+        }),
         commands: (nodeType) => [createCmd(TurnIntoText, () => setBlockType(nodeType))],
         shortcuts: {
             [SupportedKeys.Text]: createShortcut(TurnIntoText, 'Mod-Alt-0'),

package/src/node/text.ts

@@ -3,19 +3,19 @@ import { createNode } from '@milkdown/utils';
 
 export const text = createNode(() => ({
     id: 'text',
-    schema: {
+    schema: () => ({
         group: 'inline',
-    },
-    parser: {
-        match: ({ type }) => type === 'text',
-        runner: (state, node) => {
-            state.addText(node.value as string);
+        parseMarkdown: {
+            match: ({ type }) => type === 'text',
+            runner: (state, node) => {
+                state.addText(node.value as string);
+            },
         },
-    },
-    serializer: {
-        match: (node) => node.type.name === 'text',
-        runner: (state, node) => {
-            state.addNode('text', undefined, node.text as string);
+        toMarkdown: {
+            match: (node) => node.type.name === 'text',
+            runner: (state, node) => {
+                state.addNode('text', undefined, node.text as string);
+            },
         },
-    },
+    }),
 }));

package/src/plugin/index.ts

@@ -1,7 +1,11 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { remarkPluginFactory } from '@milkdown/core';
+import { createPlugin } from '@milkdown/utils';
 import links from 'remark-inline-links';
 
 import { filterHTMLPlugin } from './filter-html';
 
-export const commonmarkPlugins = [remarkPluginFactory([links, filterHTMLPlugin])];
+export const commonmarkPlugins = [
+    createPlugin(() => ({
+        remarkPlugins: () => [links, filterHTMLPlugin],
+    }))(),
+];