@milkdown/preset-commonmark 5.3.2 → 5.4.0

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,EAIH,SAAS,EAIZ,MAAM,iBAAiB,CAAC;AAGzB,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;;;;EAqKlB,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,6 +1,6 @@
 {
   "name": "@milkdown/preset-commonmark",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "type": "module",
   "main": "./lib/index.es.js",
   "types": "./lib/index.d.ts",
@@ -16,12 +16,17 @@
     "markdown",
     "commonmark"
   ],
+  "devDependencies": {
+    "@milkdown/core": "5.4.0",
+    "@milkdown/prose": "5.4.0",
+    "@milkdown/design-system": "5.4.0"
+  },
+  "peerDependencies": {
+    "@milkdown/core": "^5.4.0",
+    "@milkdown/prose": "^5.4.0"
+  },
   "dependencies": {
-    "@emotion/css": "^11.1.3",
-    "@milkdown/prose": "5.3.2",
-    "@milkdown/core": "5.3.2",
-    "@milkdown/design-system": "5.3.2",
-    "@milkdown/utils": "5.3.2",
+    "@milkdown/utils": "5.4.0",
     "remark-inline-links": "^6.0.0",
     "tslib": "^2.3.1"
   },
@@ -29,7 +34,7 @@
     "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')};

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/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`
@@ -137,6 +136,9 @@ export const codeFence = createNode<Keys, { languageList?: string[] }>((utils, o
             pre {
                 font-family: ${font.code};
                 margin: 0 1.2rem !important;
+                white-space: pre;
+                overflow: auto;
+                ${scrollbar('x')};
             }
         `;
     });

package/src/node/heading.ts

@@ -1,7 +1,14 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
-import { createCmd, createCmdKey } from '@milkdown/core';
-import { setBlockType, textblockTypeInputRule } from '@milkdown/prose';
+import { createCmd, createCmdKey, editorViewCtx } from '@milkdown/core';
+import {
+    EditorState,
+    Node,
+    Plugin,
+    PluginKey,
+    setBlockType,
+    textblockTypeInputRule,
+    Transaction,
+} from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
 
 import { SupportedKeys } from '../supported-keys';
@@ -20,31 +27,46 @@ 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,
@@ -53,15 +75,27 @@ export const heading = createNode<Keys>((utils, options) => {
             group: 'block',
             defining: true,
             attrs: {
+                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,
@@ -100,5 +134,64 @@ 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, ctx) => {
+            let lock = false;
+            const createId = (node: Node) => {
+                return node.textContent
+                    .replace(/[\p{P}\p{S}]/gu, '')
+                    .replace(/\s/g, '')
+                    .trim();
+            };
+            const walkThrough = (state: EditorState, callback: (tr: Transaction) => void) => {
+                const tr = state.tr;
+                state.doc.descendants((node, pos) => {
+                    if (node.type === type && !lock) {
+                        if (node.textContent.trim().length === 0) {
+                            return;
+                        }
+                        const attrs = node.attrs;
+                        const id = createId(node);
+
+                        if (attrs.id !== id) {
+                            tr.setNodeMarkup(pos, undefined, {
+                                ...attrs,
+                                id,
+                            });
+                        }
+                    }
+                });
+                callback(tr);
+            };
+            return [
+                new Plugin({
+                    key: headingPluginKey,
+                    props: {
+                        handleDOMEvents: {
+                            compositionstart: () => {
+                                lock = true;
+                                return false;
+                            },
+                            compositionend: () => {
+                                lock = false;
+                                const view = ctx.get(editorViewCtx);
+                                walkThrough(view.state, (tr) => view.dispatch(tr));
+                                return false;
+                            },
+                        },
+                    },
+                    appendTransaction: (transactions, _, nextState) => {
+                        let tr: Transaction | null = null;
+
+                        if (transactions.some((transaction) => transaction.docChanged)) {
+                            walkThrough(nextState, (t) => {
+                                tr = t;
+                            });
+                        }
+
+                        return tr;
+                    },
+                }),
+            ];
+        },
     };
 });

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;
@@ -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,

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/paragraph.ts

@@ -1,5 +1,4 @@
 /* Copyright 2021, Milkdown by Mirone. */
-import { css } from '@emotion/css';
 import { createCmd, createCmdKey } from '@milkdown/core';
 import { setBlockType } from '@milkdown/prose';
 import { createNode, createShortcut } from '@milkdown/utils';
@@ -11,14 +10,14 @@ type Keys = SupportedKeys['Text'];
 export const TurnIntoText = createCmdKey();
 
 const id = 'paragraph';
-export const paragraph = createNode<Keys>((utils, options) => {
-    const style = options?.headless
-        ? null
-        : css`
-              font-size: 1rem;
-              line-height: 1.5;
-              letter-spacing: 0.5px;
-          `;
+export const paragraph = createNode<Keys>((utils) => {
+    const style = utils.getStyle((_, { css }) => {
+        return css`
+            font-size: 1rem;
+            line-height: 1.5;
+            letter-spacing: 0.5px;
+        `;
+    });
 
     return {
         id,

package/lib/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAmB3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AAEjC,eAAO,MAAM,eAAe;;gOAAwC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,eAAO,MAAM,UAAU;;gOAA8D,CAAC;AAEtF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;CAwBX,CAAC;AACX,oBAAY,QAAQ,GAAG,OAAO,QAAQ,CAAC"}

package/lib/mark/code-inline.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-inline.d.ts","sourceRoot":"","sources":["../../src/mark/code-inline.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,gBAAgB,4CAAiB,CAAC;AAE/C,eAAO,MAAM,UAAU;;;;EAyCrB,CAAC"}

package/lib/mark/em.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"em.d.ts","sourceRoot":"","sources":["../../src/mark/em.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,YAAY,4CAAiB,CAAC;AAE3C,eAAO,MAAM,EAAE;;;;EAgCZ,CAAC"}

package/lib/mark/index.d.ts

@@ -1,6 +0,0 @@
-export declare const marks: (import("@milkdown/utils/lib/types").Metadata<import("@milkdown/utils/lib/types").GetPlugin<string, import("@milkdown/utils").UnknownRecord>> & import("@milkdown/core").MilkdownPlugin)[];
-export * from './code-inline';
-export * from './em';
-export * from './link';
-export * from './strong';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mark/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK,4LAAyC,CAAC;AAE5D,cAAc,eAAe,CAAC;AAC9B,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}

package/lib/mark/link.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/mark/link.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,yCAAyB,CAAC;AACjD,eAAO,MAAM,UAAU,yCAAyB,CAAC;AAEjD,eAAO,MAAM,IAAI;;;;EA8Gf,CAAC"}

package/lib/mark/strong.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"strong.d.ts","sourceRoot":"","sources":["../../src/mark/strong.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,UAAU,4CAAiB,CAAC;AACzC,eAAO,MAAM,MAAM;;;;EAwCjB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"blockquote.d.ts","sourceRoot":"","sources":["../../src/node/blockquote.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,gBAAgB,4CAAiB,CAAC;AAE/C,eAAO,MAAM,UAAU;;;;EAyCrB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"bullet-list.d.ts","sourceRoot":"","sources":["../../src/node/bullet-list.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gBAAgB,4CAAiB,CAAC;AAE/C,eAAO,MAAM,UAAU;;;;EA8BrB,CAAC"}

package/lib/node/code-fence.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"code-fence.d.ts","sourceRoot":"","sources":["../../src/node/code-fence.ts"],"names":[],"mappings":"AA6BA,eAAO,MAAM,kBAAkB,QAAoC,CAAC;AACpE,eAAO,MAAM,eAAe,QAAoC,CAAC;AAEjE,eAAO,MAAM,iBAAiB,4CAAiB,CAAC;AAGhD,eAAO,MAAM,SAAS;;;;;;EA2RpB,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"hardbreak.d.ts","sourceRoot":"","sources":["../../src/node/hardbreak.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,eAAe,4CAAiB,CAAC;AAE9C,eAAO,MAAM,SAAS;;;;EAmEpB,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../src/node/heading.ts"],"names":[],"mappings":"AAMA,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,OAAO;;;;EAiFlB,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/node/image.ts"],"names":[],"mappings":"AAOA,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;AACF,eAAO,MAAM,KAAK;;;;EAkVhB,CAAC"}

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

@@ -1 +0,0 @@
-{"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"}