@milkdown/preset-commonmark 5.4.1 → 6.0.0-next.1

package/lib/node/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/node/image.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,yCAAsC,CAAC;AAC/D,eAAO,MAAM,WAAW,yCAAsC,CAAC;AAE/D,oBAAY,YAAY,GAAG;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE;QACH,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACL,CAAC;AAGF,eAAO,MAAM,KAAK;;;;EAiMhB,CAAC"}

package/lib/{src/node → node}/index.d.ts

@@ -1,6 +1,6 @@
-export declare const nodes: ((import("@milkdown/utils/lib/src/types").Metadata<import("@milkdown/utils/lib/src/types").GetPlugin<"CodeFence", {
+export declare const nodes: ((import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<"CodeFence", {
     languageList?: string[] | undefined;
-}>> & import("@milkdown/core").MilkdownPlugin) | (import("@milkdown/utils/lib/src/types").Metadata<import("@milkdown/utils/lib/src/types").GetPlugin<string, import("./image").ImageOptions>> & import("@milkdown/core").MilkdownPlugin))[];
+}>> & import("@milkdown/core").MilkdownPlugin) | (import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, import("./image").ImageOptions>> & import("@milkdown/core").MilkdownPlugin))[];
 export * from './blockquote';
 export * from './bullet-list';
 export * from './code-fence';

package/lib/node/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/node/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,KAAK;;mOAajB,CAAC;AAEF,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC"}

package/lib/{src/node → node}/list-item.d.ts

@@ -3,7 +3,7 @@ declare type Keys = SupportedKeys['SinkListItem'] | SupportedKeys['LiftListItem'
 export declare const SplitListItem: import("@milkdown/core").CmdKey<undefined>;
 export declare const SinkListItem: import("@milkdown/core").CmdKey<undefined>;
 export declare const LiftListItem: import("@milkdown/core").CmdKey<undefined>;
-export declare const listItem: import("@milkdown/utils/lib/src/types").WithExtend<Keys, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const listItem: import("@milkdown/utils/lib/types").WithExtend<Keys, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
     id: string;
     schema: (ctx: import("@milkdown/core").Ctx) => import("@milkdown/core").NodeSchema;
     view?: ((ctx: import("@milkdown/core").Ctx) => import("@milkdown/prose").NodeViewFactory) | undefined;

package/lib/node/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["../../src/node/list-item.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,aAAK,IAAI,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG,aAAa,CAAC,cAAc,CAAC,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;AAI1G,eAAO,MAAM,aAAa,4CAAgC,CAAC;AAC3D,eAAO,MAAM,YAAY,4CAA+B,CAAC;AACzD,eAAO,MAAM,YAAY,4CAA+B,CAAC;AAEzD,eAAO,MAAM,QAAQ;;;;EAoClB,CAAC"}

package/lib/{src/node → node}/ordered-list.d.ts

@@ -1,5 +1,5 @@
 export declare const WrapInOrderedList: import("@milkdown/core").CmdKey<undefined>;
-export declare const orderedList: import("@milkdown/utils/lib/src/types").WithExtend<"OrderedList", import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const orderedList: import("@milkdown/utils/lib/types").WithExtend<"OrderedList", import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
     id: string;
     schema: (ctx: import("@milkdown/core").Ctx) => import("@milkdown/core").NodeSchema;
     view?: ((ctx: import("@milkdown/core").Ctx) => import("@milkdown/prose").NodeViewFactory) | undefined;

package/lib/node/ordered-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ordered-list.d.ts","sourceRoot":"","sources":["../../src/node/ordered-list.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB,4CAAoC,CAAC;AAGnE,eAAO,MAAM,WAAW;;;;EAwDrB,CAAC"}

package/lib/{src/node → node}/paragraph.d.ts

@@ -1,5 +1,5 @@
 export declare const TurnIntoText: import("@milkdown/core").CmdKey<undefined>;
-export declare const paragraph: import("@milkdown/utils/lib/src/types").WithExtend<"Text", import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const paragraph: import("@milkdown/utils/lib/types").WithExtend<"Text", import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
     id: string;
     schema: (ctx: import("@milkdown/core").Ctx) => import("@milkdown/core").NodeSchema;
     view?: ((ctx: import("@milkdown/core").Ctx) => import("@milkdown/prose").NodeViewFactory) | undefined;

package/lib/node/paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../src/node/paragraph.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY,4CAA+B,CAAC;AAGzD,eAAO,MAAM,SAAS;;;;EAkCpB,CAAC"}

package/lib/{src/node → node}/text.d.ts

@@ -1,4 +1,4 @@
-export declare const text: import("@milkdown/utils/lib/src/types").WithExtend<string, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const text: import("@milkdown/utils/lib/types").WithExtend<string, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
     id: string;
     schema: (ctx: import("@milkdown/core").Ctx) => import("@milkdown/core").NodeSchema;
     view?: ((ctx: import("@milkdown/core").Ctx) => import("@milkdown/prose").NodeViewFactory) | undefined;

package/lib/node/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/node/text.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI;;;;EAiBd,CAAC"}

package/lib/plugin/filter-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-html.d.ts","sourceRoot":"","sources":["../../src/plugin/filter-html.ts"],"names":[],"mappings":"AACA,OAAO,EAAW,IAAI,EAAU,MAAM,OAAO,CAAC;AAgC9C,eAAO,MAAM,gBAAgB,eACE,IAAI,SAUlC,CAAC"}

package/lib/plugin/index.d.ts

@@ -0,0 +1,2 @@
+export declare const commonmarkPlugins: (import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, import("@milkdown/utils").UnknownRecord>> & import("@milkdown/core").MilkdownPlugin)[];
+//# sourceMappingURL=index.d.ts.map

package/lib/plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/plugin/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,4LAI7B,CAAC"}

package/lib/supported-keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"supported-keys.d.ts","sourceRoot":"","sources":["../src/supported-keys.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;CAmBhB,CAAC;AAEX,oBAAY,aAAa,GAAG,OAAO,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milkdown/preset-commonmark",
-  "version": "5.4.1",
+  "version": "6.0.0-next.1",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -17,24 +17,47 @@
     "commonmark"
   ],
   "devDependencies": {
-    "@milkdown/core": "5.4.1",
-    "@milkdown/prose": "5.4.1",
-    "@milkdown/design-system": "5.4.1"
+    "@milkdown/core": "6.0.0-next.1",
+    "@milkdown/prose": "6.0.0-next.1"
   },
   "peerDependencies": {
-    "@milkdown/core": "^5.4.0",
-    "@milkdown/prose": "^5.4.0"
+    "@milkdown/core": "^6.0.0-next.0",
+    "@milkdown/prose": "^6.0.0-next.0"
   },
   "dependencies": {
-    "@milkdown/utils": "5.4.1",
+    "@milkdown/utils": "6.0.0-next.1",
     "remark-inline-links": "^6.0.0",
     "tslib": "^2.3.1"
   },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "packages/preset-commonmark/lib"
+        ],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      },
+      "tsc": {
+        "outputs": [],
+        "dependsOn": [
+          {
+            "target": "build",
+            "projects": "dependencies"
+          }
+        ]
+      }
+    }
+  },
   "scripts": {
-    "start": "vite build --watch",
+    "start": "concurrently -n es,dts \"vite build --watch\"  \"tsc --emitDeclarationOnly --watch\"",
     "test": "vitest",
     "tsc": "tsc --noEmit",
-    "build": "vite build"
+    "build": "vite build && tsc --emitDeclarationOnly"
   },
-  "readme": "# @milkdown/preset-commonmark\n\nCommon mark preset for [milkdown](https://saul-mirone.github.io/milkdown/).\nAdd support for commonmark.\n\n# Example Usage\n\n```typescript\nimport { Editor } from '@milkdown/core';\nimport { nord } from '@milkdown/theme-nord';\n\nimport { commonmark } from '@milkdown/preset-commonmark';\n\nEditor.make().use(nord).use(commonmark).create();\n```\n\n## Custom Keymap\n\n```typescript\nimport { commonmarkNodes, commonmarkPlugins, blockquote, SupportedKeys } from '@milkdown/preset-commonmark';\n\nconst nodes = commonmarkNodes.configure(blockquote, {\n    keymap: {\n        [SupportedKeys.Blockquote]: 'Mod-Shift-b',\n    },\n});\n\nEditor.make().use(commonmarkPlugins).use(nodes);\n```\n\nKeymap supported:\n\n-   HardBreak\n-   Blockquote\n-   BulletList\n-   OrderedList\n-   CodeFence\n-   H1\n-   H2\n-   H3\n-   H4\n-   H5\n-   H6\n-   Text\n-   CodeInline\n-   Em\n-   Bold\n-   NextListItem\n-   SinkListItem\n-   LiftListItem\n\n## Custom Style\n\n```typescript\nimport { commonmark, Paragraph, Heading } from '@milkdown/commonmark';\n\nconst nodes = commonmark\n    .configure(Paragraph, {\n        className: () =>\n            'my-custom-paragraph'\n    })\n    .configure(Heading, {\n        className: (attrs) =>\n            `my-custom-heading my-h${attrs.level}`\n    })\n\nnew Editor({ ...  }).use(nodes);\n```\n\n## Other Options\n\n### Image\n\n-   placeholder\n    -   loading: _string_. The placeholder of loading status.\n    -   empty: _string_. The placeholder of empty status.\n    -   failed: _string_. The placeholder of failed status.\n\n### CodeFence\n\n-   languageList: _string[]_. The selectable languages list of code fence needs to be enabled.\n\n# License\n\nMilkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).\n"
+  "readme": "# @milkdown/preset-commonmark\n\nCommon mark preset for [milkdown](https://saul-mirone.github.io/milkdown/).\nAdd support for commonmark.\n\n# Example Usage\n\n```typescript\nimport { Editor } from '@milkdown/core';\nimport { nord } from '@milkdown/theme-nord';\n\nimport { commonmark } from '@milkdown/preset-commonmark';\n\nEditor.make().use(nord).use(commonmark).create();\n```\n\n## Custom Keymap\n\n```typescript\nimport { commonmarkNodes, commonmarkPlugins, blockquote, SupportedKeys } from '@milkdown/preset-commonmark';\n\nconst nodes = commonmarkNodes.configure(blockquote, {\n    keymap: {\n        [SupportedKeys.Blockquote]: 'Mod-Shift-b',\n    },\n});\n\nEditor.make().use(commonmarkPlugins).use(nodes);\n```\n\nKeymap supported:\n\n-   HardBreak\n-   Blockquote\n-   BulletList\n-   OrderedList\n-   CodeFence\n-   H1\n-   H2\n-   H3\n-   H4\n-   H5\n-   H6\n-   Text\n-   CodeInline\n-   Em\n-   Bold\n-   NextListItem\n-   SinkListItem\n-   LiftListItem\n\n## Custom Style\n\n```typescript\nimport { commonmark, Paragraph, Heading } from '@milkdown/commonmark';\n\nconst nodes = commonmark\n    .configure(Paragraph, {\n        className: () =>\n            'my-custom-paragraph'\n    })\n    .configure(Heading, {\n        className: (attrs) =>\n            `my-custom-heading my-h${attrs.level}`\n    })\n\nnew Editor({ ...  }).use(nodes);\n```\n\n## Other Options\n\n### Image\n\n-   placeholder: The placeholder of empty status.\n-   isBlock: Whether the image is a block (render as a row).\n-   input:\n    -   placeholder: The placeholder of image url input.\n    -   buttonText: The button text of image url input.\n\n### CodeFence\n\n-   languageList: _string[]_. The selectable languages list of code fence needs to be enabled.\n\n# License\n\nMilkdown is open sourced software licensed under [MIT license](https://github.com/Saul-Mirone/milkdown/blob/main/LICENSE).\n"
 }

package/src/mark/code-inline.ts

@@ -11,17 +11,6 @@ const id = 'code_inline';
 export const ToggleInlineCode = createCmdKey('ToggleInlineCode');
 
 export const codeInline = createMark<Keys>((utils) => {
-    const style = utils.getStyle(
-        ({ palette, size, font }, { css }) =>
-            css`
-                background-color: ${palette('neutral')};
-                color: ${palette('background')};
-                border-radius: ${size.radius};
-                font-weight: 500;
-                font-family: ${font.code};
-                padding: 0 0.2rem;
-            `,
-    );
     return {
         id,
         schema: () => ({
@@ -29,12 +18,12 @@ export const codeInline = createMark<Keys>((utils) => {
             code: true,
             inclusive: false,
             parseDOM: [{ tag: 'code' }],
-            toDOM: (mark) => ['code', { class: utils.getClassName(mark.attrs, 'code-inline', style) }],
+            toDOM: (mark) => ['code', { class: utils.getClassName(mark.attrs, 'code-inline') }],
             parseMarkdown: {
                 match: (node) => node.type === 'inlineCode',
                 runner: (state, node, markType) => {
                     state.openMark(markType);
-                    state.addText(node.value as string);
+                    state.addText(node['value'] as string);
                     state.closeMark(markType);
                 },
             },

package/src/mark/link.ts

@@ -1,26 +1,28 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core';
-import { InputRule, Node as ProseNode, TextSelection, toggleMark } from '@milkdown/prose';
+import { commandsCtx, createCmd, createCmdKey, schemaCtx, ThemeInputChipType } from '@milkdown/core';
+import {
+    EditorView,
+    InputRule,
+    Node as ProseNode,
+    Plugin,
+    PluginKey,
+    TextSelection,
+    toggleMark,
+} from '@milkdown/prose';
 import { createMark } from '@milkdown/utils';
 
+const key = new PluginKey('MILKDOWN_PLUGIN_LINK_INPUT');
+
 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 }) => {
-        const lineColor = themeTool.palette('line');
-
-        return css`
-            color: ${themeTool.palette('secondary')};
-            cursor: pointer;
-            transition: all 0.4s ease-in-out;
-            font-weight: 500;
-            &:hover {
-                background-color: ${lineColor};
-                box-shadow: 0 0.2rem ${lineColor}, 0 -0.2rem ${lineColor};
-            }
-        `;
-    });
+export type LinkOptions = {
+    input: {
+        placeholder: string;
+        buttonText?: string;
+    };
+};
+export const link = createMark<string, LinkOptions>((utils, options) => {
     return {
         id,
         schema: () => ({
@@ -40,12 +42,12 @@ export const link = createMark((utils) => {
                     },
                 },
             ],
-            toDOM: (mark) => ['a', { ...mark.attrs, class: utils.getClassName(mark.attrs, id, style) }],
+            toDOM: (mark) => ['a', { ...mark.attrs, class: utils.getClassName(mark.attrs, id) }],
             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 +57,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'],
                     });
                 },
             },
@@ -115,5 +117,77 @@ export const link = createMark((utils) => {
                 return tr;
             }),
         ],
+        prosePlugins: (type, ctx) => {
+            const inputChipRenderer = utils.themeManager.get<ThemeInputChipType>('input-chip', {
+                placeholder: options?.input?.placeholder ?? 'Input Web Link',
+                buttonText: options?.input?.buttonText,
+                onUpdate: (value) => {
+                    ctx.get(commandsCtx).call(ModifyLink, value);
+                },
+            });
+            const shouldDisplay = (view: EditorView) => {
+                const { selection, doc } = view.state;
+                const { from, to } = selection;
+
+                return (
+                    selection.empty &&
+                    selection instanceof TextSelection &&
+                    doc.rangeHasMark(from, from === to ? to + 1 : to, type)
+                );
+            };
+            const getCurrentLink = (view: EditorView) => {
+                const { selection } = view.state;
+                let node: ProseNode | undefined;
+                const { from, to } = selection;
+                view.state.doc.nodesBetween(from, from === to ? to + 1 : to, (n) => {
+                    if (type.isInSet(n.marks)) {
+                        node = n;
+                        return false;
+                    }
+                    return;
+                });
+                if (!node) return;
+
+                const mark = node.marks.find((m) => m.type === type);
+                if (!mark) return;
+
+                const value = mark.attrs['href'];
+                return value;
+            };
+            const renderByView = (view: EditorView) => {
+                if (!view.editable) {
+                    return;
+                }
+                const display = shouldDisplay(view);
+                if (display) {
+                    inputChipRenderer.show(view);
+                    inputChipRenderer.update(getCurrentLink(view));
+                } else {
+                    inputChipRenderer.hide();
+                }
+            };
+            return [
+                new Plugin({
+                    key,
+                    view: (editorView) => {
+                        inputChipRenderer.init(editorView);
+                        renderByView(editorView);
+
+                        return {
+                            update: (view, prevState) => {
+                                const isEqualSelection =
+                                    prevState?.doc.eq(view.state.doc) && prevState.selection.eq(view.state.selection);
+                                if (isEqualSelection) return;
+
+                                renderByView(view);
+                            },
+                            destroy: () => {
+                                inputChipRenderer.destroy();
+                            },
+                        };
+                    },
+                }),
+            ];
+        },
     };
 });

package/src/mark/strong.ts

@@ -9,12 +9,6 @@ type Keys = SupportedKeys['Bold'];
 const id = 'strong';
 export const ToggleBold = createCmdKey('ToggleBold');
 export const strong = createMark<Keys>((utils) => {
-    const style = utils.getStyle(
-        (_, { css }) =>
-            css`
-                font-weight: 600;
-            `,
-    );
     return {
         id,
         schema: () => ({
@@ -23,7 +17,7 @@ export const strong = createMark<Keys>((utils) => {
                 { tag: 'strong' },
                 { style: 'font-style', getAttrs: (value) => (value === 'bold') as false },
             ],
-            toDOM: (mark) => ['strong', { class: utils.getClassName(mark.attrs, id, style) }],
+            toDOM: (mark) => ['strong', { class: utils.getClassName(mark.attrs, id) }],
             parseMarkdown: {
                 match: (node) => node.type === 'strong',
                 runner: (state, node, markType) => {

package/src/node/blockquote.ts

@@ -12,19 +12,6 @@ const id = 'blockquote';
 export const WrapInBlockquote = createCmdKey('WrapInBlockquote');
 
 export const blockquote = createNode<Keys>((utils) => {
-    const style = utils.getStyle(
-        (themeTool, { css }) =>
-            css`
-                padding-left: 1.875rem;
-                line-height: 1.75rem;
-                border-left: 4px solid ${themeTool.palette('primary')};
-                * {
-                    font-size: 1rem;
-                    line-height: 1.5rem;
-                }
-            `,
-    );
-
     return {
         id,
         schema: () => ({
@@ -32,7 +19,7 @@ export const blockquote = createNode<Keys>((utils) => {
             group: 'block',
             defining: true,
             parseDOM: [{ tag: 'blockquote' }],
-            toDOM: (node) => ['blockquote', { class: utils.getClassName(node.attrs, id, style) }, 0],
+            toDOM: (node) => ['blockquote', { class: utils.getClassName(node.attrs, id) }, 0],
             parseMarkdown: {
                 match: ({ type }) => type === id,
                 runner: (state, node, type) => {