@milkdown/crepe 7.7.0 → 7.9.0

package/lib/esm/index-E8UgFLeN.js

@@ -0,0 +1,79 @@
+import { listItemBlockComponent, listItemBlockConfig } from '@milkdown/kit/component/list-item-block';
+
+const bulletIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_952_6527)">
+      <circle cx="12" cy="12" r="3" />
+    </g>
+    <defs>
+      <clipPath id="clip0_952_6527">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const checkBoxCheckedIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_1803_1151)">
+      <path
+        d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM10.71 16.29C10.32 16.68 9.69 16.68 9.3 16.29L5.71 12.7C5.32 12.31 5.32 11.68 5.71 11.29C6.1 10.9 6.73 10.9 7.12 11.29L10 14.17L16.88 7.29C17.27 6.9 17.9 6.9 18.29 7.29C18.68 7.68 18.68 8.31 18.29 8.7L10.71 16.29Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1803_1151">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+const checkBoxUncheckedIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_1803_535)">
+      <path
+        d="M18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1803_535">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+function configureListItem(ctx, config) {
+  ctx.set(listItemBlockConfig.key, {
+    renderLabel: ({ label, listType, checked }) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (checked == null) {
+        if (listType === "bullet") return (_b = (_a = config == null ? void 0 : config.bulletIcon) == null ? void 0 : _a.call(config)) != null ? _b : bulletIcon;
+        return label;
+      }
+      if (checked) return (_d = (_c = config == null ? void 0 : config.checkBoxCheckedIcon) == null ? void 0 : _c.call(config)) != null ? _d : checkBoxCheckedIcon;
+      return (_f = (_e = config == null ? void 0 : config.checkBoxUncheckedIcon) == null ? void 0 : _e.call(config)) != null ? _f : checkBoxUncheckedIcon;
+    }
+  });
+}
+const defineFeature = (editor, config) => {
+  editor.config((ctx) => configureListItem(ctx, config)).use(listItemBlockComponent);
+};
+
+export { defineFeature };
+//# sourceMappingURL=index-E8UgFLeN.js.map

package/lib/esm/index-E8UgFLeN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-E8UgFLeN.js","sources":["../../src/icons/bullet.ts","../../src/icons/check-box-checked.ts","../../src/icons/check-box-unchecked.ts","../../src/feature/list-item/index.ts"],"sourcesContent":["export const bulletIcon = `\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n  >\n    <g clip-path=\"url(#clip0_952_6527)\">\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_952_6527\">\n        <rect width=\"24\" height=\"24\" />\n      </clipPath>\n    </defs>\n  </svg>\n`\n","export const checkBoxCheckedIcon = `\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n  >\n    <g clip-path=\"url(#clip0_1803_1151)\">\n      <path\n        d=\"M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM10.71 16.29C10.32 16.68 9.69 16.68 9.3 16.29L5.71 12.7C5.32 12.31 5.32 11.68 5.71 11.29C6.1 10.9 6.73 10.9 7.12 11.29L10 14.17L16.88 7.29C17.27 6.9 17.9 6.9 18.29 7.29C18.68 7.68 18.68 8.31 18.29 8.7L10.71 16.29Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1803_1151\">\n        <rect width=\"24\" height=\"24\" />\n      </clipPath>\n    </defs>\n  </svg>\n`\n","export const checkBoxUncheckedIcon = `\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n  >\n    <g clip-path=\"url(#clip0_1803_535)\">\n      <path\n        d=\"M18 19H6C5.45 19 5 18.55 5 18V6C5 5.45 5.45 5 6 5H18C18.55 5 19 5.45 19 6V18C19 18.55 18.55 19 18 19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_1803_535\">\n        <rect width=\"24\" height=\"24\" />\n      </clipPath>\n    </defs>\n  </svg>\n`\n","import type { Ctx } from '@milkdown/kit/ctx'\n\nimport {\n  listItemBlockComponent,\n  listItemBlockConfig,\n} from '@milkdown/kit/component/list-item-block'\n\nimport type { DefineFeature, Icon } from '../shared'\n\nimport {\n  bulletIcon,\n  checkBoxCheckedIcon,\n  checkBoxUncheckedIcon,\n} from '../../icons'\n\nexport interface ListItemConfig {\n  bulletIcon: Icon\n  checkBoxCheckedIcon: Icon\n  checkBoxUncheckedIcon: Icon\n}\n\nexport type ListItemFeatureConfig = Partial<ListItemConfig>\n\nfunction configureListItem(ctx: Ctx, config?: ListItemFeatureConfig) {\n  ctx.set(listItemBlockConfig.key, {\n    renderLabel: ({ label, listType, checked }) => {\n      if (checked == null) {\n        if (listType === 'bullet') return config?.bulletIcon?.() ?? bulletIcon\n\n        return label\n      }\n\n      if (checked) return config?.checkBoxCheckedIcon?.() ?? checkBoxCheckedIcon\n\n      return config?.checkBoxUncheckedIcon?.() ?? checkBoxUncheckedIcon\n    },\n  })\n}\n\nexport const defineFeature: DefineFeature<ListItemFeatureConfig> = (\n  editor,\n  config\n) => {\n  editor\n    .config((ctx) => configureListItem(ctx, config))\n    .use(listItemBlockComponent)\n}\n"],"names":[],"mappings":";;AAAO,MAAM,UAAa,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;ACAnB,MAAM,mBAAsB,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;ACA5B,MAAM,qBAAwB,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;ACuBrC,SAAS,iBAAA,CAAkB,KAAU,MAAgC,EAAA;AACnE,EAAI,GAAA,CAAA,GAAA,CAAI,oBAAoB,GAAK,EAAA;AAAA,IAC/B,aAAa,CAAC,EAAE,KAAO,EAAA,QAAA,EAAU,SAAc,KAAA;AAzBnD,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AA0BM,MAAA,IAAI,WAAW,IAAM,EAAA;AACnB,QAAA,IAAI,QAAa,KAAA,QAAA,EAAiB,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,eAAR,IAA0B,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,KAAA,IAAA,GAAA,EAAA,GAAA,UAAA;AAE5D,QAAO,OAAA,KAAA;AAAA;AAGT,MAAA,IAAI,OAAS,EAAA,OAAA,CAAO,EAAQ,GAAA,CAAA,EAAA,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,mBAAA,KAAR,IAAmC,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,KAAA,IAAA,GAAA,EAAA,GAAA,mBAAA;AAEvD,MAAO,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAQ,0BAAR,IAAqC,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAA,CAAA,KAAA,IAAA,GAAA,EAAA,GAAA,qBAAA;AAAA;AAC9C,GACD,CAAA;AACH;AAEa,MAAA,aAAA,GAAsD,CACjE,MAAA,EACA,MACG,KAAA;AACH,EACG,MAAA,CAAA,MAAA,CAAO,CAAC,GAAQ,KAAA,iBAAA,CAAkB,KAAK,MAAM,CAAC,CAC9C,CAAA,GAAA,CAAI,sBAAsB,CAAA;AAC/B;;;;"}

package/lib/esm/index.js

@@ -1,12 +1,12 @@
-export { a as Crepe, C as CrepeFeature, c as crepeCtx } from './index-CLpluqvF.js';
+export { a as Crepe, C as CrepeFeature, c as crepeCtx } from './index-Dc_wWopW.js';
 import '@milkdown/kit/core';
-import '@milkdown/kit/preset/commonmark';
-import '@milkdown/kit/preset/gfm';
+import '@milkdown/kit/plugin/clipboard';
 import '@milkdown/kit/plugin/history';
 import '@milkdown/kit/plugin/indent';
-import '@milkdown/kit/utils';
-import '@milkdown/kit/plugin/clipboard';
+import '@milkdown/kit/plugin/listener';
 import '@milkdown/kit/plugin/trailing';
+import '@milkdown/kit/preset/commonmark';
+import '@milkdown/kit/preset/gfm';
+import '@milkdown/kit/utils';
 import '@milkdown/kit/ctx';
-import '@milkdown/kit/plugin/listener';
 //# sourceMappingURL=index.js.map

package/lib/esm/plus-lrX0Q75O.js

@@ -0,0 +1,22 @@
+const plusIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <g clip-path="url(#clip0_971_7676)">
+      <path
+        d="M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_971_7676">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+export { plusIcon as p };
+//# sourceMappingURL=plus-lrX0Q75O.js.map

package/lib/esm/plus-lrX0Q75O.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plus-lrX0Q75O.js","sources":["../../src/icons/plus.ts"],"sourcesContent":["export const plusIcon = `\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n  >\n    <g clip-path=\"url(#clip0_971_7676)\">\n      <path\n        d=\"M18 13H13V18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18V13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H11V6C11 5.45 11.45 5 12 5C12.55 5 13 5.45 13 6V11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"clip0_971_7676\">\n        <rect width=\"24\" height=\"24\" />\n      </clipPath>\n    </defs>\n  </svg>\n`\n"],"names":[],"mappings":"AAAO,MAAM,QAAW,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/lib/esm/remove-D3g0Cd6_.js

@@ -0,0 +1,15 @@
+const removeIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"
+    />
+  </svg>
+`;
+
+export { removeIcon as r };
+//# sourceMappingURL=remove-D3g0Cd6_.js.map

package/lib/esm/remove-D3g0Cd6_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"remove-D3g0Cd6_.js","sources":["../../src/icons/remove.ts"],"sourcesContent":["export const removeIcon = `\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n  >\n    <path\n      d=\"M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z\"\n    />\n  </svg>\n`\n"],"names":[],"mappings":"AAAO,MAAM,UAAa,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/lib/theme/_internal/classic-common.css

@@ -30,6 +30,12 @@
   background: var(--crepe-color-background);
 }
 
+  .milkdown .milkdown-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .milkdown .ProseMirror-focused {
     outline: none;
   }
@@ -187,7 +193,7 @@
         transparent 40%
       );
       font-family: var(--crepe-font-code);
-      padding: 0 10px;
+      padding: 0 2px;
       border-radius: 4px;
       font-size: 87.5%;
       display: inline-block;

package/lib/theme/common/block-edit.css

@@ -1,8 +1,8 @@
-.milkdown milkdown-block-handle[data-show='false'] {
+.milkdown .milkdown-block-handle[data-show='false'] {
       opacity: 0;
       pointer-events: none;
     }
-    .milkdown milkdown-block-handle {
+    .milkdown .milkdown-block-handle {
     transition: all 0.2s;
     position: absolute;
     cursor: pointer;
@@ -11,27 +11,27 @@
     align-items: center;
     gap: 2px;
 }
-    .milkdown milkdown-block-handle .operation-item {
+    .milkdown .milkdown-block-handle .operation-item {
       border-radius: 4px;
       width: 32px;
       height: 32px;
       padding: 4px;
     }
-    .milkdown milkdown-block-handle .operation-item svg {
+    .milkdown .milkdown-block-handle .operation-item svg {
         width: 24px;
         height: 24px;
         fill: var(--crepe-color-outline);
       }
-    .milkdown milkdown-block-handle .operation-item:hover {
+    .milkdown .milkdown-block-handle .operation-item:hover {
         background: var(--crepe-color-hover);
       }
-    .milkdown milkdown-block-handle .operation-item.active {
+    .milkdown .milkdown-block-handle .operation-item.active {
         background: var(--crepe-color-selected);
       }
-  .milkdown milkdown-slash-menu[data-show='false'] {
+  .milkdown .milkdown-slash-menu[data-show='false'] {
       display: none;
     }
-  .milkdown milkdown-slash-menu {
+  .milkdown .milkdown-slash-menu {
     position: absolute;
     display: block;
     font-family: var(--crepe-font-default);
@@ -40,45 +40,45 @@
     border-radius: 12px;
     box-shadow: var(--crepe-shadow-1);
 }
-  .milkdown milkdown-slash-menu ul {
+  .milkdown .milkdown-slash-menu ul {
       list-style-type: none;
     }
-  .milkdown milkdown-slash-menu ul li {
+  .milkdown .milkdown-slash-menu ul li {
         cursor: pointer;
         border-radius: 8px;
       }
-  .milkdown milkdown-slash-menu .tab-group {
+  .milkdown .milkdown-slash-menu .tab-group {
       border-bottom: 1px solid
         color-mix(in srgb, var(--crepe-color-outline), transparent 80%);
       padding: 12px 12px 0;
     }
-  .milkdown milkdown-slash-menu .tab-group ul {
+  .milkdown .milkdown-slash-menu .tab-group ul {
         padding: 8px 10px;
         display: flex;
         gap: 10px;
         flex-wrap: nowrap;
       }
-  .milkdown milkdown-slash-menu .tab-group ul li {
+  .milkdown .milkdown-slash-menu .tab-group ul li {
           padding: 6px 10px;
           font-size: 14px;
           font-style: normal;
           font-weight: 600;
           line-height: 20px;
         }
-  .milkdown milkdown-slash-menu .tab-group ul li:hover {
+  .milkdown .milkdown-slash-menu .tab-group ul li:hover {
             background: var(--crepe-color-hover);
           }
-  .milkdown milkdown-slash-menu .tab-group ul li.selected {
+  .milkdown .milkdown-slash-menu .tab-group ul li.selected {
             background: var(--crepe-color-selected);
           }
-  .milkdown milkdown-slash-menu .menu-groups {
+  .milkdown .milkdown-slash-menu .menu-groups {
       padding: 0 12px 12px;
       max-height: 420px;
       overflow: auto;
       overscroll-behavior: contain;
       scroll-behavior: smooth;
     }
-  .milkdown milkdown-slash-menu .menu-groups .menu-group h6 {
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group h6 {
           font-size: 14px;
           font-style: normal;
           font-weight: 600;
@@ -91,7 +91,7 @@
             transparent 40%
           );
         }
-  .milkdown milkdown-slash-menu .menu-groups .menu-group li {
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li {
           min-width: 220px;
           display: flex;
           justify-content: flex-start;
@@ -99,25 +99,25 @@
           gap: 16px;
           padding: 14px 10px;
         }
-  .milkdown milkdown-slash-menu .menu-groups .menu-group li.hover {
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li.hover {
             background: var(--crepe-color-hover);
           }
-  .milkdown milkdown-slash-menu .menu-groups .menu-group li.active {
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li.active {
             background: var(--crepe-color-selected);
           }
-  .milkdown milkdown-slash-menu .menu-groups .menu-group li > svg {
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li > svg {
             width: 24px;
             height: 24px;
             color: var(--crepe-color-outline);
             fill: var(--crepe-color-outline);
           }
-  .milkdown milkdown-slash-menu .menu-groups .menu-group li > span {
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group li > span {
             font-size: 14px;
             font-style: normal;
             font-weight: 600;
             line-height: 20px;
           }
-  .milkdown milkdown-slash-menu .menu-groups .menu-group + .menu-group::before {
+  .milkdown .milkdown-slash-menu .menu-groups .menu-group + .menu-group::before {
         content: '';
         display: block;
         height: 1px;

package/lib/theme/common/code-mirror.css

@@ -1,4 +1,4 @@
-.milkdown milkdown-code-block {
+.milkdown .milkdown-code-block {
     display: block;
     position: relative;
     padding: 8px 20px 20px;
@@ -6,44 +6,43 @@
     margin: 4px 0;
   }
 
-    .milkdown milkdown-code-block .language-picker {
+    .milkdown .milkdown-code-block .language-picker {
       padding-top: 10px;
       width: -moz-max-content;
       width: max-content;
       position: absolute;
       z-index: 1;
-      display: none;
     }
 
-    .milkdown milkdown-code-block .language-picker.show {
-        display: block;
-      }
-
-    .milkdown milkdown-code-block .hidden {
+    .milkdown .milkdown-code-block .hidden {
       display: none !important;
     }
 
-    .milkdown milkdown-code-block.selected {
+    .milkdown .milkdown-code-block.selected {
       outline: 1px solid var(--crepe-color-primary);
     }
 
-    .milkdown milkdown-code-block .cm-editor {
+    .milkdown .milkdown-code-block .cm-editor {
       outline: none !important;
       background: var(--crepe-color-surface);
     }
 
-    .milkdown milkdown-code-block .cm-gutters {
+    .milkdown .milkdown-code-block .cm-gutters {
       border-right: none;
       background: var(--crepe-color-surface);
     }
 
-    .milkdown milkdown-code-block .tools {
+    .milkdown .milkdown-code-block .tools {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
 
-    .milkdown milkdown-code-block .tools .preview-toggle-button {
+    .milkdown .milkdown-code-block .tools input {
+        caret-color: var(--crepe-color-outline);
+      }
+
+    .milkdown .milkdown-code-block .tools .preview-toggle-button {
         background: var(--crepe-color-secondary);
         color: var(--crepe-color-on-surface-variant);
         padding: 4px 10px;
@@ -61,13 +60,13 @@
         gap: 4px;
       }
 
-    .milkdown milkdown-code-block .tools .preview-toggle-button svg {
+    .milkdown .milkdown-code-block .tools .preview-toggle-button svg {
           width: 14px;
           height: 14px;
           fill: var(--crepe-color-on-surface-variant);
         }
 
-    .milkdown milkdown-code-block .tools .language-button {
+    .milkdown .milkdown-code-block .tools .language-button {
         display: flex;
         align-items: center;
         font-family: var(--crepe-font-default);
@@ -85,11 +84,11 @@
         transition: opacity 0.2s ease-in-out;
       }
 
-    .milkdown milkdown-code-block .tools .language-button:hover {
+    .milkdown .milkdown-code-block .tools .language-button:hover {
           background: var(--crepe-color-hover);
         }
 
-    .milkdown milkdown-code-block .tools .language-button .expand-icon {
+    .milkdown .milkdown-code-block .tools .language-button .expand-icon {
           transition: transform 0.2s ease-in-out;
           width: 18px;
           height: 18px;
@@ -98,30 +97,30 @@
           align-items: center;
         }
 
-    .milkdown milkdown-code-block .tools .language-button .expand-icon svg {
+    .milkdown .milkdown-code-block .tools .language-button .expand-icon svg {
           width: 14px;
           height: 14px;
           color: var(--crepe-color-outline);
         }
 
-    .milkdown milkdown-code-block .tools .language-button[data-expanded='true'] .expand-icon {
+    .milkdown .milkdown-code-block .tools .language-button[data-expanded='true'] .expand-icon {
           transform: rotate(180deg);
         }
 
-    .milkdown milkdown-code-block .tools .language-button .expand-icon svg:focus,
-        .milkdown milkdown-code-block .tools .language-button .expand-icon:focus-visible {
+    .milkdown .milkdown-code-block .tools .language-button .expand-icon svg:focus,
+        .milkdown .milkdown-code-block .tools .language-button .expand-icon:focus-visible {
           outline: none;
         }
 
-    .milkdown milkdown-code-block:hover .language-button {
+    .milkdown .milkdown-code-block:hover .language-button {
       opacity: 1;
     }
 
-    .milkdown milkdown-code-block:hover .preview-toggle-button {
+    .milkdown .milkdown-code-block:hover .preview-toggle-button {
       opacity: 1;
     }
 
-    .milkdown milkdown-code-block .list-wrapper {
+    .milkdown .milkdown-code-block .list-wrapper {
       background: var(--crepe-color-surface-low);
       border-radius: 12px;
       box-shadow: var(--crepe-shadow-1);
@@ -129,7 +128,7 @@
       padding-top: 12px;
     }
 
-    .milkdown milkdown-code-block .language-list {
+    .milkdown .milkdown-code-block .language-list {
       height: 410px;
       overflow-y: auto;
       overscroll-behavior: contain;
@@ -137,7 +136,7 @@
       padding: 0;
     }
 
-    .milkdown milkdown-code-block .language-list-item {
+    .milkdown .milkdown-code-block .language-list-item {
       cursor: pointer;
       margin: 0;
       display: flex;
@@ -149,31 +148,31 @@
       line-height: 20px;
     }
 
-    .milkdown milkdown-code-block .language-list-item:hover {
+    .milkdown .milkdown-code-block .language-list-item:hover {
         background: var(--crepe-color-hover);
       }
 
-    .milkdown milkdown-code-block .language-list-item:focus-visible {
+    .milkdown .milkdown-code-block .language-list-item:focus-visible {
         outline: none;
         background: var(--crepe-color-hover);
       }
 
-    .milkdown milkdown-code-block .language-list-item .leading,
-      .milkdown milkdown-code-block .language-list-item .leading svg {
+    .milkdown .milkdown-code-block .language-list-item .leading,
+      .milkdown .milkdown-code-block .language-list-item .leading svg {
         width: 24px;
         height: 24px;
       }
 
-    .milkdown milkdown-code-block .language-list-item.no-result {
+    .milkdown .milkdown-code-block .language-list-item.no-result {
         cursor: default;
         opacity: 0.6;
       }
 
-    .milkdown milkdown-code-block .language-list-item.no-result:hover {
+    .milkdown .milkdown-code-block .language-list-item.no-result:hover {
           background: transparent;
         }
 
-    .milkdown milkdown-code-block .search-box {
+    .milkdown .milkdown-code-block .search-box {
       display: flex;
       align-items: center;
       margin: 0 12px 8px;
@@ -184,55 +183,55 @@
       padding: 6px 10px;
     }
 
-    .milkdown milkdown-code-block .search-box:has(input:focus) {
+    .milkdown .milkdown-code-block .search-box:has(input:focus) {
         outline: 2px solid var(--crepe-color-primary);
       }
 
-    .milkdown milkdown-code-block .search-box .search-input {
+    .milkdown .milkdown-code-block .search-box .search-input {
         width: 100%;
         color: var(--crepe-color-on-surface);
       }
 
-    .milkdown milkdown-code-block .search-box .search-icon {
+    .milkdown .milkdown-code-block .search-box .search-icon {
         display: none;
       }
 
-    .milkdown milkdown-code-block .search-box .clear-icon {
+    .milkdown .milkdown-code-block .search-box .clear-icon {
         cursor: pointer;
         width: 20px;
         height: 20px;
       }
 
-    .milkdown milkdown-code-block .search-box .clear-icon svg {
+    .milkdown .milkdown-code-block .search-box .clear-icon svg {
           width: 20px;
           height: 20px;
           color: var(--crepe-color-primary);
           fill: var(--crepe-color-primary);
         }
 
-    .milkdown milkdown-code-block .search-box .clear-icon:hover {
+    .milkdown .milkdown-code-block .search-box .clear-icon:hover {
           background: var(--crepe-color-hover);
         }
 
-    .milkdown milkdown-code-block .search-box input {
+    .milkdown .milkdown-code-block .search-box input {
         font-family: var(--crepe-font-default);
         font-size: 14px;
         line-height: 20px;
         background: transparent;
       }
 
-    .milkdown milkdown-code-block .search-box input:focus {
+    .milkdown .milkdown-code-block .search-box input:focus {
         outline: none;
       }
 
-    .milkdown milkdown-code-block .preview-panel .preview-divider {
+    .milkdown .milkdown-code-block .preview-panel .preview-divider {
         height: 1px;
         opacity: 0.2;
         background: var(--crepe-color-outline);
         margin: 6px 0;
       }
 
-    .milkdown milkdown-code-block .preview-panel .preview-label {
+    .milkdown .milkdown-code-block .preview-panel .preview-label {
         margin: 6px 0;
         font-size: 12px;
         color: color-mix(
@@ -245,7 +244,7 @@
         font-family: var(--crepe-font-default);
       }
 
-    .milkdown milkdown-code-block .preview-panel .preview {
+    .milkdown .milkdown-code-block .preview-panel .preview {
         text-align: center;
         overflow-x: auto;
       }

package/lib/theme/common/cursor.css

@@ -1,4 +1,5 @@
 @import '@milkdown/kit/prose/gapcursor/style/gapcursor.css';
+@import 'prosemirror-virtual-cursor/style/virtual-cursor.css';
 
 .milkdown .crepe-drop-cursor {
     background-color: color-mix(
@@ -15,3 +16,7 @@
     box-sizing: border-box;
     border-top: 1px solid var(--crepe-color-on-background);
   }
+
+.milkdown .ProseMirror-focused {
+    --prosemirror-virtual-cursor-color: var(--crepe-color-outline);
+  }