@milkdown/preset-commonmark 5.3.0 → 5.3.4

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

@@ -1,7 +1,9 @@
+import { PluginKey } from '@milkdown/prose';
 import { SupportedKeys } from '../supported-keys';
 declare type Keys = SupportedKeys['H1'] | SupportedKeys['H2'] | SupportedKeys['H3'] | SupportedKeys['H4'] | SupportedKeys['H5'] | SupportedKeys['H6'];
 export declare const TurnIntoHeading: import("@milkdown/core").CmdKey<number>;
-export declare const heading: import("@milkdown/utils/lib/types").WithExtend<Keys, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const headingPluginKey: PluginKey<any, any>;
+export declare const heading: import("@milkdown/utils/lib/src/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/src/node/heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["heading.ts"],"names":[],"mappings":"AAEA,OAAO,EAAU,SAAS,EAAwC,MAAM,iBAAiB,CAAC;AAG1F,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAMlD,aAAK,IAAI,GACH,aAAa,CAAC,IAAI,CAAC,GACnB,aAAa,CAAC,IAAI,CAAC,GACnB,aAAa,CAAC,IAAI,CAAC,GACnB,aAAa,CAAC,IAAI,CAAC,GACnB,aAAa,CAAC,IAAI,CAAC,GACnB,aAAa,CAAC,IAAI,CAAC,CAAC;AAE1B,eAAO,MAAM,eAAe,yCAAyB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,qBAAsC,CAAC;AAEpE,eAAO,MAAM,OAAO;;;;EAiIlB,CAAC"}

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

@@ -1,5 +1,5 @@
 export declare const InsertHr: import("@milkdown/core").CmdKey<string>;
-export declare const hr: import("@milkdown/utils/lib/types").WithExtend<string, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const hr: import("@milkdown/utils/lib/src/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/src/node/hr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hr.d.ts","sourceRoot":"","sources":["hr.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAC/C,eAAO,MAAM,EAAE;;;;EAyDb,CAAC"}

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

@@ -8,7 +8,7 @@ export declare type ImageOptions = {
         failed: string;
     };
 };
-export declare const image: import("@milkdown/utils/lib/types").WithExtend<string, ImageOptions, import("prosemirror-model").NodeType<any>, {
+export declare const image: import("@milkdown/utils/lib/src/types").WithExtend<string, ImageOptions, 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/src/node/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["image.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,yCAAyB,CAAC;AAClD,eAAO,MAAM,WAAW,yCAAyB,CAAC;AAElD,oBAAY,YAAY,GAAG;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE;QACT,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,KAAK;;;;EAyVhB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,KAAK;;2OAajB,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/{node → src/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/types").WithExtend<Keys, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const listItem: import("@milkdown/utils/lib/src/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/src/node/list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.d.ts","sourceRoot":"","sources":["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,4CAAiB,CAAC;AAC5C,eAAO,MAAM,YAAY,4CAAiB,CAAC;AAC3C,eAAO,MAAM,YAAY,4CAAiB,CAAC;AAE3C,eAAO,MAAM,QAAQ;;;;EAuDnB,CAAC"}

package/lib/{node → src/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/types").WithExtend<"OrderedList", import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const orderedList: import("@milkdown/utils/lib/src/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/src/node/ordered-list.d.ts.map

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

package/lib/{node → src/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/types").WithExtend<"Text", import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const paragraph: import("@milkdown/utils/lib/src/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/src/node/paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["paragraph.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,YAAY,4CAAiB,CAAC;AAG3C,eAAO,MAAM,SAAS;;;;EA0CpB,CAAC"}

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

@@ -1,4 +1,4 @@
-export declare const text: import("@milkdown/utils/lib/types").WithExtend<string, import("@milkdown/utils").UnknownRecord, import("prosemirror-model").NodeType<any>, {
+export declare const text: import("@milkdown/utils/lib/src/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/src/node/text.d.ts.map

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

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

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

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

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

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

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

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

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

package/lib/src/types.d.ts

@@ -0,0 +1,5 @@
+/* Copyright 2021, Milkdown by Mirone. */
+declare module 'remark-inline-links' {
+    let a: never;
+    export = a;
+}

package/package.json

@@ -1,15 +1,9 @@
 {
   "name": "@milkdown/preset-commonmark",
-  "version": "5.3.0",
-  "main": "./lib/index.cjs.js",
-  "module": "./lib/index.es.js",
+  "version": "5.3.4",
+  "type": "module",
+  "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js"
-    }
-  },
   "sideEffects": false,
   "license": "MIT",
   "files": [
@@ -22,26 +16,19 @@
     "markdown",
     "commonmark"
   ],
-  "peerDependencies": {
-    "@milkdown/core": "*"
-  },
   "dependencies": {
-    "@emotion/css": "^11.1.3",
-    "@milkdown/utils": "5.3.0",
+    "@milkdown/prose": "5.3.4",
+    "@milkdown/core": "5.3.4",
+    "@milkdown/design-system": "5.3.4",
+    "@milkdown/utils": "5.3.4",
     "remark-inline-links": "^6.0.0",
     "tslib": "^2.3.1"
   },
-  "devDependencies": {
-    "@milkdown/prose": "5.3.0",
-    "@milkdown/core": "5.3.0",
-    "@milkdown/design-system": "5.3.0"
-  },
   "scripts": {
-    "start": "vite",
-    "watch": "vite build --watch",
-    "test": "jest",
+    "start": "vite build --watch",
+    "test": "vitest",
     "tsc": "tsc --noEmit",
-    "build": "vite build && tsc --emitDeclarationOnly"
+    "build": "vite build"
   },
   "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"
 }

package/src/mark/code-inline.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
 import { markRule, toggleMark } from '@milkdown/prose';
 import { createMark, createShortcut } from '@milkdown/utils';
@@ -13,7 +12,7 @@ export const ToggleInlineCode = createCmdKey();
 
 export const codeInline = createMark<Keys>((utils) => {
     const style = utils.getStyle(
-        ({ palette, size, font }) =>
+        ({ palette, size, font }, { css }) =>
             css`
                 background-color: ${palette('neutral')};
                 color: ${palette('background')};
@@ -26,7 +25,9 @@ export const codeInline = createMark<Keys>((utils) => {
     return {
         id,
         schema: () => ({
-            excludes: '_',
+            priority: 100,
+            code: true,
+            inclusive: false,
             parseDOM: [{ tag: 'code' }],
             toDOM: (mark) => ['code', { class: utils.getClassName(mark.attrs, 'code-inline', style) }],
             parseMarkdown: {
@@ -39,10 +40,8 @@ export const codeInline = createMark<Keys>((utils) => {
             },
             toMarkdown: {
                 match: (mark) => mark.type.name === id,
-                runner: (state, _, node) => {
-                    state.addNode('inlineCode', undefined, node.text || '');
-
-                    return true;
+                runner: (state, mark, node) => {
+                    state.withMark(mark, 'inlineCode', node.text || '');
                 },
             },
         }),

package/src/mark/link.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core';
 import { InputRule, Node as ProseNode, TextSelection, toggleMark } from '@milkdown/prose';
 import { createMark } from '@milkdown/utils';
@@ -8,7 +7,7 @@ export const ToggleLink = createCmdKey<string>();
 export const ModifyLink = createCmdKey<string>();
 const id = 'link';
 export const link = createMark((utils) => {
-    const style = utils.getStyle((themeTool) => {
+    const style = utils.getStyle((themeTool, { css }) => {
         const lineColor = themeTool.palette('line');
 
         return css`

package/src/mark/strong.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
 import { markRule, toggleMark } from '@milkdown/prose';
 import { createMark, createShortcut } from '@milkdown/utils';
@@ -11,7 +10,7 @@ const id = 'strong';
 export const ToggleBold = createCmdKey();
 export const strong = createMark<Keys>((utils) => {
     const style = utils.getStyle(
-        () =>
+        (_, { css }) =>
             css`
                 font-weight: 600;
             `,

package/src/node/blockquote.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
 import { wrapIn, wrappingInputRule } from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
@@ -14,7 +13,7 @@ export const WrapInBlockquote = createCmdKey();
 
 export const blockquote = createNode<Keys>((utils) => {
     const style = utils.getStyle(
-        (themeTool) =>
+        (themeTool, { css }) =>
             css`
                 padding-left: 1.875rem;
                 line-height: 1.75rem;

package/src/node/bullet-list.ts

@@ -36,7 +36,7 @@ export const bulletList = createNode<Keys>((utils) => {
         inputRules: (nodeType) => [wrappingInputRule(/^\s*([-+*])\s$/, nodeType)],
         commands: (nodeType) => [createCmd(WrapInBulletList, () => wrapIn(nodeType))],
         shortcuts: {
-            [SupportedKeys.BulletList]: createShortcut(WrapInBulletList, 'Mod-Shift-8'),
+            [SupportedKeys.BulletList]: createShortcut(WrapInBulletList, 'Mod-Alt-8'),
         },
     };
 });

package/src/node/code-fence.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey, themeToolCtx } from '@milkdown/core';
 import { setBlockType, textblockTypeInputRule } from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
@@ -34,7 +33,7 @@ export const TurnIntoCodeFence = createCmdKey();
 
 const id = 'fence';
 export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, options) => {
-    const style = utils.getStyle(({ palette, mixin, size, font }) => {
+    const style = utils.getStyle(({ palette, mixin, size, font }, { css }) => {
         const { shadow, scrollbar, border } = mixin;
         const { lineWidth, radius } = size;
         return css`
@@ -69,7 +68,7 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
                 height: 2.625rem;
                 align-items: center;
 
-                & > *:last-child {
+                & > .icon {
                     width: 2.625rem;
                     height: 100%;
                     display: flex;
@@ -171,12 +170,12 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
             ],
             toDOM: (node) => {
                 return [
-                    'div',
+                    'pre',
                     {
                         'data-language': node.attrs.language,
                         class: utils.getClassName(node.attrs, 'code-fence', style),
                     },
-                    ['pre', ['code', { spellCheck: 'false' }, 0]],
+                    ['code', { spellCheck: 'false' }, 0],
                 ];
             },
             parseMarkdown: {
@@ -227,7 +226,9 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
             valueWrapper.className = 'code-fence_value';
             const value = document.createElement('span');
             valueWrapper.appendChild(value);
-            valueWrapper.appendChild(ctx.get(themeToolCtx).slots.icon('downArrow'));
+            if (view.editable) {
+                valueWrapper.appendChild(ctx.get(themeToolCtx).slots.icon('downArrow'));
+            }
 
             select.className = 'code-fence_select';
             select.addEventListener('mousedown', (e) => {

package/src/node/heading.ts

@@ -1,7 +1,6 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
-import { setBlockType, textblockTypeInputRule } from '@milkdown/prose';
+import { Plugin, PluginKey, setBlockType, textblockTypeInputRule } from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
 
 import { SupportedKeys } from '../supported-keys';
@@ -20,50 +19,75 @@ type Keys =
 
 export const TurnIntoHeading = createCmdKey<number>();
 
-export const heading = createNode<Keys>((utils, options) => {
+export const headingPluginKey = new PluginKey('MILKDOWN_PLUGIN_ID');
+
+export const heading = createNode<Keys>((utils) => {
     const id = 'heading';
-    const headingMap: Record<number, string> = {
-        1: css`
-            font-size: 3rem;
-            line-height: 3.5rem;
-        `,
-        2: css`
-            font-size: 2.125rem;
-            line-height: 2.25rem;
-        `,
-        3: css`
-            font-size: 1.5rem;
-            line-height: 1.5rem;
-        `,
-    };
 
     const style = (level: number) =>
-        options?.headless
-            ? null
-            : css`
-                  ${headingMap[level] || ''}
-                  margin: 2.5rem 0 !important;
-                  font-weight: 400;
-              `;
+        utils.getStyle((_, { css }) => {
+            const headingMap: Record<number, string> = {
+                1: css`
+                    font-size: 3rem;
+                    line-height: 3.5rem;
+                `,
+                2: css`
+                    font-size: 2.5rem;
+                    line-height: 3rem;
+                `,
+                3: css`
+                    font-size: 2.125rem;
+                    line-height: 2.25rem;
+                `,
+                4: css`
+                    font-size: 1.75rem;
+                    line-height: 2rem;
+                `,
+                5: css`
+                    font-size: 1.5rem;
+                    line-height: 1.5rem;
+                `,
+                6: css`
+                    font-size: 1.25rem;
+                    line-height: 1.25rem;
+                `,
+            };
+
+            return css`
+                ${headingMap[level] || ''}
+                margin: 2.5rem 0 !important;
+                font-weight: 400;
+            `;
+        });
 
     return {
         id,
         schema: () => ({
             content: 'inline*',
             group: 'block',
+            defining: true,
             attrs: {
-                level: {
-                    default: 1,
-                },
                 id: {
                     default: '',
                 },
+                level: {
+                    default: 1,
+                },
             },
-            parseDOM: headingIndex.map((x) => ({ tag: `h${x}`, attrs: { level: x } })),
+            parseDOM: headingIndex.map((x) => ({
+                tag: `h${x}`,
+                getAttrs: (node) => {
+                    if (!(node instanceof HTMLElement)) {
+                        throw new Error();
+                    }
+                    return { level: x, id: node.id };
+                },
+            })),
             toDOM: (node) => {
                 return [
                     `h${node.attrs.level}`,
                     {
+                        id: node.attrs.id || node.textContent.split(' ').join('-').toLocaleLowerCase(),
                         class: utils.getClassName(node.attrs, `heading h${node.attrs.level}`, style(node.attrs.level)),
                     },
                     0,
@@ -102,5 +126,28 @@ export const heading = createNode<Keys>((utils, options) => {
             [SupportedKeys.H5]: createShortcut(TurnIntoHeading, 'Mod-Alt-5', 5),
             [SupportedKeys.H6]: createShortcut(TurnIntoHeading, 'Mod-Alt-6', 6),
         },
+        prosePlugins: (type) => [
+            new Plugin({
+                key: headingPluginKey,
+                appendTransaction: (transactions, _, nextState) => {
+                    const tr = nextState.tr;
+                    let modified = false;
+                    if (transactions.some((transaction) => transaction.docChanged)) {
+                        nextState.doc.descendants((node, pos) => {
+                            if (node.type === type) {
+                                const attrs = node.attrs;
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...attrs,
+                                    id: node.textContent.split(' ').join('-').toLocaleLowerCase(),
+                                });
+                                modified = true;
+                            }
+                        });
+                    }
+
+                    return modified ? tr : null;
+                },
+            }),
+        ],
     };
 });

package/src/node/hr.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey, schemaCtx } from '@milkdown/core';
 import { InputRule, Selection } from '@milkdown/prose';
 import { createNode } from '@milkdown/utils';
@@ -8,7 +7,7 @@ const id = 'hr';
 export const InsertHr = createCmdKey<string>();
 export const hr = createNode((utils) => {
     const style = utils.getStyle(
-        (themeTool) => css`
+        (themeTool, { css }) => css`
             height: ${themeTool.size.lineWidth};
             background-color: ${themeTool.palette('line')};
             border-width: 0;

package/src/node/image.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey, themeToolCtx } from '@milkdown/core';
 import type { Icon } from '@milkdown/design-system';
 import { findSelectedNodeOfType, InputRule } from '@milkdown/prose';
@@ -16,6 +15,7 @@ export type ImageOptions = {
         failed: string;
     };
 };
+
 export const image = createNode<string, ImageOptions>((utils, options) => {
     const placeholder = {
         loading: 'Loading...',
@@ -25,7 +25,7 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
     };
     const isBlock = options?.isBlock ?? false;
     const containerStyle = utils.getStyle(
-        (themeTool) =>
+        (themeTool, { css }) =>
             css`
                 display: inline-block;
                 position: relative;
@@ -123,7 +123,7 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
     );
 
     const style = utils.getStyle(
-        () =>
+        (_, { css }) =>
             css`
                 display: inline-block;
                 margin: 0 auto;
@@ -152,7 +152,7 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
                 title: { default: null },
                 failed: { default: false },
                 loading: { default: true },
-                width: { default: 0 },
+                width: { default: null },
             },
             parseDOM: [
                 {
@@ -167,7 +167,7 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
                             src: dom.getAttribute('src') || '',
                             alt: dom.getAttribute('alt'),
                             title: dom.getAttribute('title') || dom.getAttribute('alt'),
-                            width: dom.getAttribute('width') || 0,
+                            width: dom.getAttribute('width'),
                         };
                     },
                 },
@@ -276,8 +276,11 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
                 img.src = src;
 
                 img.onerror = () => {
+                    const pos = getPos();
+                    if (!pos) return;
+
                     const { tr } = view.state;
-                    const _tr = tr.setNodeMarkup(getPos(), nodeType, {
+                    const _tr = tr.setNodeMarkup(pos, nodeType, {
                         ...node.attrs,
                         src,
                         loading: false,
@@ -288,7 +291,11 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
 
                 img.onload = () => {
                     const { tr } = view.state;
-                    const _tr = tr.setNodeMarkup(getPos(), nodeType, {
+
+                    const pos = getPos();
+                    if (!pos) return;
+
+                    const _tr = tr.setNodeMarkup(pos, nodeType, {
                         ...node.attrs,
                         width: img.width,
                         src,
@@ -303,7 +310,9 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
             content.src = src;
             content.title = title || alt;
             content.alt = alt;
-            content.width = width;
+            if (width) {
+                content.width = width;
+            }
 
             if (src.length === 0) {
                 container.classList.add('system', 'empty');
@@ -321,7 +330,9 @@ export const image = createNode<string, ImageOptions>((utils, options) => {
                     content.src = src;
                     content.alt = alt;
                     content.title = title || alt;
-                    content.width = width;
+                    if (width) {
+                        content.width = width;
+                    }
                     if (loading) {
                         loadImage(src);
                         return true;

package/src/node/list-item.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
 import { liftListItem, sinkListItem, splitListItem, wrappingInputRule } from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
@@ -16,7 +15,7 @@ export const LiftListItem = createCmdKey();
 
 export const listItem = createNode<Keys>((utils) => {
     const style = utils.getStyle(
-        (themeTool) =>
+        (themeTool, { css }) =>
             css`
                 &,
                 & > * {

package/src/node/ordered-list.ts

@@ -64,6 +64,6 @@ export const orderedList = createNode<Keys>((utils) => ({
     ],
     commands: (nodeType) => [createCmd(WrapInOrderedList, () => wrapIn(nodeType))],
     shortcuts: {
-        [SupportedKeys.OrderedList]: createShortcut(WrapInOrderedList, 'Mod-Shift-7'),
+        [SupportedKeys.OrderedList]: createShortcut(WrapInOrderedList, 'Mod-Alt-7'),
     },
 }));