@jvs-milkdown/crepe 1.2.0 → 1.2.2

package/lib/esm/index.js

@@ -6,7 +6,7 @@ import { createSlice } from '@jvs-milkdown/kit/ctx';
 import { commandsCtx, editorViewCtx, editorCtx, EditorStatus, schemaCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
 import { findNodeInSelection, findParent, nodeRule } from '@jvs-milkdown/kit/prose';
 import { NodeSelection, TextSelection, Plugin, PluginKey, EditorState, AllSelection } from '@jvs-milkdown/kit/prose/state';
-import { defineComponent, ref, computed, watch, watchEffect, onUnmounted, h, createApp, Fragment, reactive, onMounted, shallowRef, nextTick } from 'vue';
+import { defineComponent, ref, computed, watch, watchEffect, onUnmounted, h, createApp, Fragment, reactive, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
 import { computePosition, flip, shift, offset } from '@floating-ui/dom';
 import { slashFactory, SlashProvider } from '@jvs-milkdown/kit/plugin/slash';
 import { Icon } from '@jvs-milkdown/kit/component';
@@ -16,6 +16,7 @@ import { $remark, $markAttr, $markSchema, $command, $ctx, $nodeSchema, $prose, $
 import { visit } from 'unist-util-visit';
 import { imageBlockSchema, imageBlockConfig, imageBlockComponent } from '@jvs-milkdown/kit/component/image-block';
 import { lift, toggleMark } from '@jvs-milkdown/kit/prose/commands';
+import { wrapInList } from '@jvs-milkdown/kit/prose/schema-list';
 import katex from 'katex';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { keymap } from '@codemirror/view';
@@ -214,6 +215,10 @@ const clearIcon = `
   </svg>
 `;
 
+const closeIcon = `
+  <svg viewBox="0 0 1024 1024" width="20" height="20"><path d="M619.52 544.448l324.672-324.928a53.632 53.632 0 0 0 0-75.776 53.376 53.376 0 0 0-75.712 0L543.872 468.672l-324.48-324.928a53.376 53.376 0 0 0-75.712 0 53.632 53.632 0 0 0 0 75.776l324.48 324.8-324.48 324.928a53.632 53.632 0 0 0 75.776 75.776l324.416-324.8 324.48 324.8a53.184 53.184 0 0 0 37.952 15.744 53.696 53.696 0 0 0 37.76-91.52l-324.48-324.8z" fill="#6F7588"></path></svg>
+`;
+
 const codeIcon = `
   <svg viewBox="0 0 1024 1024" width="24" height="24">
   <path d="M64 830.848V193.152q0-53.504 37.76-91.328Q139.712 64 193.216 64h637.696q53.504 0 91.328 37.76 37.824 37.888 37.824 91.392v637.696q0 53.504-37.76 91.328-37.888 37.824-91.392 37.824H193.152q-53.504 0-91.328-37.76Q64 884.288 64 830.784z m94.72 0q0 34.432 34.432 34.432h637.696q34.432 0 34.432-34.432V193.152q0-34.432-34.432-34.432H193.152q-34.432 0-34.432 34.432v637.696zM278.144 432q-6.592-6.592-10.24-15.296-3.584-8.704-3.584-18.176 0-4.608 0.896-9.216t2.688-8.832q1.792-4.288 4.416-8.192 2.56-3.904 5.824-7.232 3.392-3.2 7.232-5.888 3.84-2.56 8.192-4.352 4.224-1.792 8.896-2.688 4.544-0.96 9.216-0.96 9.408 0 18.112 3.584 8.704 3.648 15.36 10.304L491.968 512q6.72 6.656 10.24 15.36 3.648 8.64 3.648 18.112 0 9.408-3.584 18.112-3.584 8.704-10.24 15.36L345.216 725.76q-6.72 6.72-15.36 10.304-8.768 3.584-18.24 3.584-4.608 0-9.216-0.896-4.48-0.896-8.832-2.688-4.288-1.728-8.192-4.416-3.84-2.56-7.168-5.888-3.328-3.264-5.888-7.104-2.624-3.904-4.416-8.192-1.792-4.288-2.688-8.96-0.96-4.48-0.96-9.216 0-9.408 3.648-18.112 3.584-8.64 10.24-15.36L391.68 545.408 278.144 432z m440.832 299.2H585.472q-4.672 0-9.28-0.896-4.544-0.832-8.832-2.688-4.352-1.792-8.256-4.352-3.84-2.56-7.104-5.952-3.264-3.2-5.952-7.04-2.56-3.968-4.352-8.256-1.728-4.352-2.688-8.896-0.896-4.544-0.896-9.28 0-4.608 0.896-9.216 0.96-4.544 2.688-8.832 1.792-4.352 4.352-8.32 2.688-3.84 5.952-7.04 3.2-3.328 7.168-5.952 3.904-2.56 8.192-4.352 4.288-1.792 8.832-2.688 4.608-0.96 9.28-0.96h133.504q4.736 0 9.28 0.96 4.608 0.896 8.96 2.688 4.224 1.792 8.128 4.352 3.84 2.624 7.104 5.888 3.392 3.328 5.952 7.232 2.624 3.904 4.416 8.192 1.792 4.288 2.624 8.832 0.896 4.608 0.896 9.216 0 4.736-0.896 9.28-0.832 4.608-2.624 8.96-1.792 4.224-4.48 8.128-2.56 3.84-5.888 7.104-3.2 3.392-7.04 5.952-3.968 2.56-8.256 4.352-4.352 1.856-8.896 2.688-4.544 0.896-9.28 0.896z" fill="#363B4C" p-id="16577"></path></svg>
@@ -610,6 +615,30 @@ const splitCellIcon = `
   </svg>
 `;
 
+const keyboardIcon = `
+  <svg t="1778036070440" class="icon" viewBox="0 0 1024 1024" width="20" height="20"><path d="M934.4 190.08c0-23.68-18.048-42.88-40.192-42.88H129.856c-22.208 0-40.256 19.2-40.256 42.88v643.84c0 23.68 17.984 42.88 40.32 42.88h764.288c22.144 0 40.128-19.2 40.192-42.88V190.08z m-764.352 43.008h683.968v558.016H170.048V233.088z m603.456 343.296c11.072 0 20.16 9.728 20.16 21.44v42.944c0 11.84-9.088 21.44-20.16 21.44H250.56a20.8 20.8 0 0 1-20.16-21.44v-42.88c0-11.904 9.088-21.504 20.16-21.504h522.88z m-422.4-193.088a20.8 20.8 0 0 0-20.096-21.44H250.56a20.8 20.8 0 0 0-20.16 21.44v42.88c0 11.904 9.088 21.504 20.16 21.504h80.448c11.072 0 20.096-9.728 20.096-21.44v-42.944zM512 361.856c11.136 0 20.096 9.6 20.096 21.44v42.88c0 11.84-8.96 21.504-20.096 21.504H431.616a20.8 20.8 0 0 1-20.16-21.44v-42.944c0-11.84 9.024-21.44 20.16-21.44H512z m281.6 21.44a20.8 20.8 0 0 0-20.096-21.44H612.608a20.8 20.8 0 0 0-20.16 21.44v42.88c0 11.904 9.088 21.504 20.16 21.504h160.896a20.928 20.928 0 0 0 20.16-21.44v-42.944z" fill="#363B4C" p-id="13200"></path></svg>
+`;
+
+const wordWrapIcon = `
+  <svg viewBox="0 0 1024 1024" height="24px"
+    width="24px">
+    <path d="M128 850.88V173.12q0-4.48 0.896-8.832 0.832-4.352 2.56-8.448 1.664-4.096 4.16-7.808 2.432-3.648 5.568-6.848 3.2-3.136 6.848-5.568 3.712-2.496 7.808-4.16 4.096-1.728 8.448-2.56Q168.704 128 173.12 128q4.48 0 8.832 0.896 4.352 0.832 8.448 2.56 4.096 1.664 7.808 4.16 3.648 2.432 6.848 5.568 3.136 3.2 5.568 6.848 2.496 3.712 4.16 7.808 1.728 4.096 2.56 8.448 0.896 4.416 0.896 8.832v677.76q0 4.48-0.896 8.768-0.832 4.416-2.56 8.512-1.664 4.096-4.16 7.808-2.432 3.648-5.568 6.848-3.2 3.136-6.848 5.568-3.712 2.496-7.808 4.16-4.096 1.728-8.448 2.56-4.416 0.896-8.832 0.896-4.48 0-8.832-0.896-4.352-0.832-8.448-2.56-4.096-1.664-7.808-4.16-3.648-2.432-6.848-5.632-3.136-3.136-5.568-6.784-2.496-3.712-4.16-7.808-1.728-4.096-2.56-8.512Q128 855.296 128 850.88z m677.76 0a45.12 45.12 0 0 0 90.24 0V173.12a45.12 45.12 0 0 0-90.24 0v677.76zM471.232 684.8a46.208 46.208 0 0 1-4.288 0.192h-48l48 48.448c8.832 8.896 13.056 20.288 13.056 32a44.8 44.8 0 0 1-12.992 32 45.184 45.184 0 0 1-64 0L282.24 676.224A44.992 44.992 0 0 1 269.184 640a44.992 44.992 0 0 1 13.056-36.288l120.704-120.704a45.184 45.184 0 1 1 64 64l-47.744 47.744h47.744c2.176 0 4.352 0.128 6.464 0.448h70.656q47.68 0 81.472-33.728 33.728-33.792 33.728-81.472 0-47.744-33.728-81.472Q591.744 364.8 544 364.8H384a44.8 44.8 0 1 1 0-89.6h160q84.8 0 144.832 59.968 59.968 59.968 59.968 144.832 0 84.8-59.968 144.832-60.032 59.968-144.832 59.968H471.232z" fill="#363B4C"></path>
+  </svg>
+`;
+
+const cropIcon = `
+  <svg viewBox="0 0 1024 1024" height="24px" width="24px">
+    <path d="M192 128v128H128v64h192V128h-128z m0 0h64v128h-64V128z m512 0v128h192v64H640V128h64z m-512 640H128v-64h192v192h-128v-128z m0 128h64v-128h-64v128z m512 0v-128h192v64h-128v128h-64z m0 0h64v-128h-64v128z" fill="currentColor"/>
+    <path d="M256 256h512v512H256z" fill="none" stroke="currentColor" stroke-width="64"/>
+  </svg>
+`;
+
+const borderIcon = `
+  <svg viewBox="0 0 1024 1024" height="24px" width="24px">
+    <path d="M160 160h704v704H160z" fill="none" stroke="currentColor" stroke-width="64" stroke-dasharray="64 32"/>
+  </svg>
+`;
+
 const defaultConfig = {
   [CrepeFeature.CodeMirror]: {
     theme: oneDark,
@@ -645,12 +674,17 @@ const zhCN = {
   "view.docBackground": "\u6587\u6863\u80CC\u666F\u8272",
   "view.title": "\u663E\u793A\u6807\u9898",
   "view.cover": "\u663E\u793A\u5C01\u9762",
+  "view.editorWidth": "\u5185\u5BB9\u5BBD\u5EA6",
+  "view.widthDefault": "\u9ED8\u8BA4",
+  "view.widthWide": "\u8F83\u5BBD",
+  "view.widthFull": "\u5168\u5BBD",
   // code-mirror
   "codeMirror.searchPlaceholder": "\u641C\u7D22\u8BED\u8A00",
   "codeMirror.noResultText": "\u65E0\u7ED3\u679C",
   "codeMirror.previewToggleOptionEdit": "\u7F16\u8F91",
   "codeMirror.previewToggleOptionHide": "\u9690\u85CF",
   "codeMirror.previewLabel": "\u9884\u89C8",
+  "codeMirror.wrapText": "\u81EA\u52A8\u6362\u884C",
   // link-tooltip
   "linkTooltip.pasteLink": "\u7C98\u8D34\u94FE\u63A5...",
   // image-block
@@ -748,7 +782,29 @@ const zhCN = {
   "latex.escToExit": "\u6309 ESC \u5B8C\u6210\u8F93\u5165",
   "latex.helpDoc": "\u67E5\u770B\u5E2E\u52A9\u6587\u6863",
   "latex.emptyPlaceholder": "\u6DFB\u52A0 LaTeX \u516C\u5F0F",
-  "latex.inputPlaceholder": "\u8BF7\u8F93\u5165\u516C\u5F0F"
+  "latex.inputPlaceholder": "\u8BF7\u8F93\u5165\u516C\u5F0F",
+  // shortcuts
+  "shortcuts.title": "\u952E\u76D8\u5FEB\u6377\u952E",
+  "shortcuts.formatting": "\u6587\u672C\u683C\u5F0F",
+  "shortcuts.bold": "\u52A0\u7C97",
+  "shortcuts.italic": "\u659C\u4F53",
+  "shortcuts.underline": "\u4E0B\u5212\u7EBF",
+  "shortcuts.strikethrough": "\u5220\u9664\u7EBF",
+  "shortcuts.inlineCode": "\u884C\u5185\u4EE3\u7801",
+  "shortcuts.highlight": "\u9AD8\u4EAE",
+  "shortcuts.paragraph": "\u6BB5\u843D",
+  "shortcuts.heading": "\u6807\u9898",
+  "shortcuts.block": "\u5757\u7EA7\u5143\u7D20",
+  "shortcuts.codeBlock": "\u4EE3\u7801\u5757",
+  "shortcuts.blockquote": "\u5F15\u7528",
+  "shortcuts.orderedList": "\u6709\u5E8F\u5217\u8868",
+  "shortcuts.bulletList": "\u65E0\u5E8F\u5217\u8868",
+  "shortcuts.indent": "\u589E\u52A0\u7F29\u8FDB",
+  "shortcuts.outdent": "\u51CF\u5C11\u7F29\u8FDB",
+  "shortcuts.hardBreak": "\u6362\u884C",
+  "shortcuts.history": "\u5386\u53F2\u8BB0\u5F55",
+  "shortcuts.undo": "\u64A4\u9500",
+  "shortcuts.redo": "\u91CD\u505A"
 };
 const enUS = {
   "handle.add": "Add content",
@@ -769,11 +825,16 @@ const enUS = {
   "view.docBackground": "Document Background",
   "view.title": "Show Title",
   "view.cover": "Show Cover",
+  "view.editorWidth": "Content Width",
+  "view.widthDefault": "Default",
+  "view.widthWide": "Wide",
+  "view.widthFull": "Full Width",
   "codeMirror.searchPlaceholder": "Search language",
   "codeMirror.noResultText": "No result",
   "codeMirror.previewToggleOptionEdit": "Edit",
   "codeMirror.previewToggleOptionHide": "Hide",
   "codeMirror.previewLabel": "Preview",
+  "codeMirror.wrapText": "Wrap",
   "linkTooltip.pasteLink": "Paste link...",
   "imageBlock.inlineUploadButton": "Upload",
   "imageBlock.inlineUploadPlaceholder": "or paste link",
@@ -863,7 +924,28 @@ const enUS = {
   "latex.escToExit": "Press ESC to finish",
   "latex.helpDoc": "Help Doc",
   "latex.emptyPlaceholder": "Add LaTeX",
-  "latex.inputPlaceholder": "Please enter formula"
+  "latex.inputPlaceholder": "Please enter formula",
+  "shortcuts.title": "Keyboard Shortcuts",
+  "shortcuts.formatting": "Text Formatting",
+  "shortcuts.bold": "Bold",
+  "shortcuts.italic": "Italic",
+  "shortcuts.underline": "Underline",
+  "shortcuts.strikethrough": "Strikethrough",
+  "shortcuts.inlineCode": "Inline Code",
+  "shortcuts.highlight": "Highlight",
+  "shortcuts.paragraph": "Paragraph",
+  "shortcuts.heading": "Heading",
+  "shortcuts.block": "Block Elements",
+  "shortcuts.codeBlock": "Code Block",
+  "shortcuts.blockquote": "Blockquote",
+  "shortcuts.orderedList": "Ordered List",
+  "shortcuts.bulletList": "Bullet List",
+  "shortcuts.indent": "Indent",
+  "shortcuts.outdent": "Outdent",
+  "shortcuts.hardBreak": "Hard Break",
+  "shortcuts.history": "History",
+  "shortcuts.undo": "Undo",
+  "shortcuts.redo": "Redo"
 };
 const translationsCtx = createSlice(
   {
@@ -1910,10 +1992,24 @@ function getGroups$1(filter, config, ctx) {
             return;
           }
           convertHeadingToParagraphIfNeeded$1(ctx2);
-          commands.call(wrapInBlockTypeCommand.key, {
-            nodeType: listItem,
-            attrs: { checked: false }
+          const result = wrapInList(bulletList)(view.state, (tr) => {
+            tr.doc.nodesBetween(
+              tr.mapping.map(from),
+              tr.mapping.map(to),
+              (node, pos) => {
+                if (node.type === listItem) {
+                  tr.setNodeMarkup(pos, void 0, {
+                    ...node.attrs,
+                    checked: false,
+                    listType: "bullet",
+                    label: "\u2022"
+                  });
+                }
+              }
+            );
+            view.dispatch(tr);
           });
+          if (result) return;
         }
       });
     }
@@ -3169,7 +3265,7 @@ var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Ca
 var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), member.get(obj));
 var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$4, _app$4, _filter, _slashProvider, _activeKey, _view, _programmaticallyPos, _mode, _hideTimeout, _isMenuHovered, _keepOpenUntilClickOutside;
+var _content$4, _app$4, _filter, _slashProvider, _activeKey, _view$1, _programmaticallyPos, _mode, _hideTimeout, _isMenuHovered, _keepOpenUntilClickOutside;
 const menu = slashFactory("CREPE_MENU");
 function configureMenu(ctx, config) {
   ctx.set(menu.key, {
@@ -3183,7 +3279,7 @@ class MenuView {
     __privateAdd$5(this, _filter);
     __privateAdd$5(this, _slashProvider);
     __privateAdd$5(this, _activeKey);
-    __privateAdd$5(this, _view);
+    __privateAdd$5(this, _view$1);
     __privateAdd$5(this, _programmaticallyPos, null);
     __privateAdd$5(this, _mode, null);
     __privateAdd$5(this, _hideTimeout);
@@ -3212,7 +3308,7 @@ class MenuView {
       __privateSet$5(this, _programmaticallyPos, pos);
       __privateSet$5(this, _mode, mode);
       __privateGet$5(this, _filter).value = "";
-      const node = __privateGet$5(this, _view).state.doc.nodeAt(pos);
+      const node = __privateGet$5(this, _view$1).state.doc.nodeAt(pos);
       if (node) {
         __privateGet$5(this, _activeKey).value = getBlockKey(node);
       } else {
@@ -3260,7 +3356,7 @@ class MenuView {
       __privateGet$5(this, _app$4).unmount();
       __privateGet$5(this, _content$4).remove();
     };
-    __privateSet$5(this, _view, view);
+    __privateSet$5(this, _view$1, view);
     const content = document.createElement("div");
     content.classList.add("milkdown-slash-menu");
     const show = ref(false);
@@ -3347,7 +3443,7 @@ _app$4 = new WeakMap();
 _filter = new WeakMap();
 _slashProvider = new WeakMap();
 _activeKey = new WeakMap();
-_view = new WeakMap();
+_view$1 = new WeakMap();
 _programmaticallyPos = new WeakMap();
 _mode = new WeakMap();
 _hideTimeout = new WeakMap();
@@ -3799,7 +3895,9 @@ const codeMirror = (editor, config = {}) => {
         },
         previewLabel: config.previewLabel || i18n(ctx, "codeMirror.previewLabel"),
         previewLoading: config.previewLoading || defaultConfig.previewLoading,
-        previewOnlyByDefault: (_a = config.previewOnlyByDefault) != null ? _a : defaultConfig.previewOnlyByDefault
+        previewOnlyByDefault: (_a = config.previewOnlyByDefault) != null ? _a : defaultConfig.previewOnlyByDefault,
+        wrapText: config.wrapText || i18n(ctx, "codeMirror.wrapText"),
+        wrapIcon: config.wrapIcon || wordWrapIcon
       };
     });
   }).use(codeBlockComponent);
@@ -6856,6 +6954,11 @@ function randomCover(custom) {
   return (_a = images[Math.floor(Math.random() * images.length)]) != null ? _a : "";
 }
 
+const editorWidthMap = {
+  default: "820px",
+  wide: "1020px",
+  full: "none"
+};
 const createViewMenuState = () => reactive({
   outlineVisible: false,
   outlinePosition: "left",
@@ -6863,7 +6966,8 @@ const createViewMenuState = () => reactive({
   documentBackground: null,
   showTitle: false,
   showCover: false,
-  coverUrl: ""
+  coverUrl: "",
+  editorWidth: "default"
 });
 const viewMenuStateCtx = $ctx(createViewMenuState(), "viewMenuStateCtx");
 
@@ -6947,7 +7051,7 @@ const MenuBar = defineComponent({
       activeSubmenu.value = menuKey;
     };
     const closeMenu = (e) => {
-      if (showMenu.value && containerRef.value && !containerRef.value.contains(e.target)) {
+      if (showMenu.value && containerRef.value && !containerRef.value.contains(e.target) && mainRef.value && !mainRef.value.contains(e.target)) {
         showMenu.value = false;
         activeSubmenu.value = null;
         if (rafId) cancelAnimationFrame(rafId);
@@ -6984,7 +7088,7 @@ const MenuBar = defineComponent({
           style: {
             display: "flex",
             alignItems: "center",
-            padding: "0 0px",
+            padding: "0 6px 0 0",
             position: "relative"
           }
         },
@@ -7067,6 +7171,11 @@ const MenuBar = defineComponent({
               {
                 key: menuKey,
                 onMouseenter: () => onMouseEnterItem(menuKey),
+                onMouseleave: () => {
+                  if (hasSubmenu(menuKey)) {
+                    activeSubmenu.value = null;
+                  }
+                },
                 style: {
                   position: "relative",
                   padding: "8px 16px",
@@ -7314,6 +7423,82 @@ const MenuBar = defineComponent({
                       )
                     ) : null
                   ))
+                ),
+                /* @__PURE__ */ h(
+                  "div",
+                  {
+                    style: {
+                      height: "1px",
+                      background: "var(--crepe-color-outline-variant, #eee)",
+                      margin: "4px 0"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ h(
+                  "div",
+                  {
+                    style: {
+                      padding: "8px 16px",
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center"
+                    }
+                  },
+                  /* @__PURE__ */ h(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "14px",
+                        color: "var(--crepe-color-on-surface, #333)"
+                      }
+                    },
+                    i18n(props.ctx, "view.editorWidth") || "\u5185\u5BB9\u5BBD\u5EA6"
+                  )
+                ),
+                /* @__PURE__ */ h(
+                  "div",
+                  {
+                    style: {
+                      padding: "4px 16px 8px",
+                      display: "flex",
+                      gap: "6px"
+                    }
+                  },
+                  [
+                    {
+                      key: "default",
+                      labelKey: "view.widthDefault"
+                    },
+                    {
+                      key: "wide",
+                      labelKey: "view.widthWide"
+                    },
+                    {
+                      key: "full",
+                      labelKey: "view.widthFull"
+                    }
+                  ].map(({ key, labelKey }) => /* @__PURE__ */ h(
+                    "button",
+                    {
+                      key,
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        state.editorWidth = key;
+                      },
+                      style: {
+                        flex: 1,
+                        padding: "4px 0",
+                        fontSize: "12px",
+                        cursor: "pointer",
+                        borderRadius: "4px",
+                        border: state.editorWidth === key ? "1px solid var(--crepe-color-primary, #1890ff)" : "1px solid var(--crepe-color-outline-variant, #e8e8e8)",
+                        background: state.editorWidth === key ? "var(--crepe-color-primary, #1890ff)" : "transparent",
+                        color: state.editorWidth === key ? "#fff" : "var(--crepe-color-on-surface, #333)"
+                      }
+                    },
+                    i18n(props.ctx, labelKey) || key
+                  ))
                 )
               ) : null
             );
@@ -7324,6 +7509,191 @@ const MenuBar = defineComponent({
   }
 });
 
+const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+function fmt(shortcut) {
+  return shortcut.replace(/Mod/g, isMac ? "\u2318" : "Ctrl").replace(/\+/g, isMac ? "" : "+").replace(/Shift/g, isMac ? "\u21E7" : "Shift").replace(/Alt/g, isMac ? "\u2325" : "Alt");
+}
+const leftGroups = [
+  {
+    titleKey: "shortcuts.formatting",
+    items: [
+      { labelKey: "shortcuts.bold", keys: ["Mod+b"] },
+      { labelKey: "shortcuts.italic", keys: ["Mod+i"] },
+      { labelKey: "shortcuts.underline", keys: ["Mod+u"] },
+      { labelKey: "shortcuts.strikethrough", keys: ["Mod+Alt+x"] },
+      { labelKey: "shortcuts.inlineCode", keys: ["Mod+e"] },
+      { labelKey: "shortcuts.highlight", keys: ["Mod+Shift+h"] }
+    ]
+  },
+  {
+    titleKey: "shortcuts.paragraph",
+    items: [
+      { labelKey: "shortcuts.paragraph", keys: ["Mod+Alt+0"] },
+      { labelKey: "shortcuts.heading", keys: ["Mod+Alt+1~6"] }
+    ]
+  }
+];
+const rightGroups = [
+  {
+    titleKey: "shortcuts.block",
+    items: [
+      { labelKey: "shortcuts.codeBlock", keys: ["Mod+Alt+c"] },
+      { labelKey: "shortcuts.blockquote", keys: ["Mod+Shift+b"] },
+      { labelKey: "shortcuts.orderedList", keys: ["Mod+Alt+7"] },
+      { labelKey: "shortcuts.bulletList", keys: ["Mod+Alt+8"] },
+      { labelKey: "shortcuts.indent", keys: ["Tab", "Mod+]"] },
+      { labelKey: "shortcuts.outdent", keys: ["Shift+Tab", "Mod+["] },
+      { labelKey: "shortcuts.hardBreak", keys: ["Shift+Enter"] }
+    ]
+  },
+  {
+    titleKey: "shortcuts.history",
+    items: [
+      { labelKey: "shortcuts.undo", keys: ["Mod+z"] },
+      { labelKey: "shortcuts.redo", keys: ["Mod+y", "Shift+Mod+z"] }
+    ]
+  }
+];
+const badgeStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minWidth: "22px",
+  height: "22px",
+  padding: "0 6px",
+  borderRadius: "4px",
+  fontSize: "11px",
+  fontFamily: "var(--crepe-font-code, monospace)",
+  backgroundColor: "var(--crepe-color-surface-low, color-mix(in srgb, var(--crepe-color-surface), transparent 60%))",
+  border: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))",
+  whiteSpace: "nowrap"
+};
+const columnStyle = {
+  flex: 1,
+  minWidth: 0
+};
+const groupTitleStyle = {
+  fontSize: "11px",
+  fontWeight: 600,
+  color: "var(--crepe-color-on-surface-variant, #888)",
+  marginBottom: "8px",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+const rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "5px 0"
+};
+const labelStyle = {
+  fontSize: "13px",
+  color: "var(--crepe-color-on-surface, #333)"
+};
+function renderGroup(ctx, group) {
+  return /* @__PURE__ */ h("div", { style: { marginBottom: "16px" }, key: group.titleKey }, /* @__PURE__ */ h("div", { style: groupTitleStyle }, i18n(ctx, group.titleKey)), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column" } }, group.items.map((item) => /* @__PURE__ */ h("div", { key: item.labelKey, style: rowStyle }, /* @__PURE__ */ h("span", { style: labelStyle }, i18n(ctx, item.labelKey)), /* @__PURE__ */ h("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, item.keys.map((key, i) => /* @__PURE__ */ h("span", { key: i, style: badgeStyle }, fmt(key))))))));
+}
+const ShortcutHelpModal = defineComponent({
+  props: {
+    ctx: { type: Object, required: true },
+    visible: { type: Object, required: true }
+  },
+  setup(props) {
+    const close = () => {
+      props.visible.value = false;
+    };
+    const onKeydown = (e) => {
+      if (e.key === "Escape") close();
+    };
+    onMounted(() => document.addEventListener("keydown", onKeydown));
+    onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+    return () => /* @__PURE__ */ h(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e4,
+          background: "rgba(0, 0, 0, 0.4)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        onClick: close
+      },
+      /* @__PURE__ */ h(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: "560px",
+            maxWidth: "calc(100vw - 32px)",
+            background: "var(--crepe-color-surface, #fff)",
+            borderRadius: "12px",
+            boxShadow: "0 8px 32px rgba(0, 0, 0, 0.15)",
+            padding: "20px 24px"
+          },
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: "16px",
+              paddingBottom: "12px",
+              borderBottom: "1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+            }
+          },
+          /* @__PURE__ */ h(
+            "span",
+            {
+              style: {
+                fontSize: "15px",
+                fontWeight: 600,
+                color: "var(--crepe-color-on-surface, #1a1a1a)"
+              }
+            },
+            i18n(props.ctx, "shortcuts.title")
+          ),
+          /* @__PURE__ */ h(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "28px",
+                height: "28px",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                borderRadius: "4px",
+                color: "var(--crepe-color-on-surface-variant, #666)"
+              }
+            },
+            /* @__PURE__ */ h(Icon, { icon: closeIcon })
+          )
+        ),
+        /* @__PURE__ */ h("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ h("div", { style: columnStyle }, leftGroups.map((g) => renderGroup(props.ctx, g))), /* @__PURE__ */ h(
+          "div",
+          {
+            style: {
+              width: "1px",
+              flexShrink: 0,
+              backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+            }
+          }
+        ), /* @__PURE__ */ h("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
+      )
+    );
+  }
+});
+
 const FixedToolbarComponent = defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -7333,6 +7703,7 @@ const FixedToolbarComponent = defineComponent({
     config: { type: Object, required: false }
   },
   setup(props) {
+    const showShortcuts = ref(false);
     return () => /* @__PURE__ */ h(
       "div",
       {
@@ -7341,7 +7712,7 @@ const FixedToolbarComponent = defineComponent({
           alignItems: "center",
           justifyContent: "center",
           width: "100%",
-          gap: "12px"
+          gap: "0px"
         }
       },
       /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
@@ -7366,7 +7737,32 @@ const FixedToolbarComponent = defineComponent({
           config: props.config,
           isFixed: true
         }
-      )
+      ),
+      /* @__PURE__ */ h(
+        "div",
+        {
+          style: {
+            width: "1px",
+            minWidth: "1px",
+            height: "20px",
+            flexShrink: 0,
+            backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+          }
+        }
+      ),
+      /* @__PURE__ */ h(
+        "button",
+        {
+          type: "button",
+          class: "toolbar-shortcut-btn",
+          title: i18n(props.ctx, "shortcuts.title"),
+          onClick: () => {
+            showShortcuts.value = true;
+          }
+        },
+        /* @__PURE__ */ h(Icon, { icon: keyboardIcon })
+      ),
+      showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
     );
   }
 });
@@ -7736,10 +8132,24 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
         return;
       }
       convertHeadingToParagraphIfNeeded(ctx2);
-      commands.call(wrapInBlockTypeCommand.key, {
-        nodeType: listItem,
-        attrs: { checked: false }
+      const result = wrapInList(bulletList)(view.state, (tr) => {
+        tr.doc.nodesBetween(
+          tr.mapping.map(from),
+          tr.mapping.map(to),
+          (node, pos) => {
+            if (node.type === listItem) {
+              tr.setNodeMarkup(pos, void 0, {
+                ...node.attrs,
+                checked: false,
+                listType: "bullet",
+                label: "\u2022"
+              });
+            }
+          }
+        );
+        view.dispatch(tr);
       });
+      if (result) return;
     }
   });
 }
@@ -7966,10 +8376,9 @@ const DocumentHeader = defineComponent({
             class: "milkdown-document-title-wrapper",
             style: {
               width: "100%",
-              // maxWidth: '900px',
-              // margin: '0 auto',
-              padding: "40px 120px 0"
-              // Match ProseMirror padding
+              maxWidth: editorWidthMap[state.editorWidth] === "none" ? void 0 : editorWidthMap[state.editorWidth],
+              margin: editorWidthMap[state.editorWidth] === "none" ? "0" : "0 auto",
+              padding: `40px ${editorWidthMap[state.editorWidth] === "none" ? "80px" : "0"} 0`
             }
           },
           /* @__PURE__ */ h("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
@@ -8394,7 +8803,7 @@ var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Ca
 var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver, _updateOutlineGeometry, _scrollContainers;
+var _content$2, _app$2, _headerContent, _headerApp, _outlineContent, _outlineApp, _watcher, _selection$1, _show$1, _resizeObserver, _updateOutlineGeometry, _scrollContainers, _view;
 const fixedToolbarConfig = $ctx(
   {},
   "fixedToolbarConfigCtx"
@@ -8414,6 +8823,7 @@ class FixedToolbarView {
     __privateAdd$3(this, _resizeObserver);
     __privateAdd$3(this, _updateOutlineGeometry);
     __privateAdd$3(this, _scrollContainers, []);
+    __privateAdd$3(this, _view);
     this.update = (view) => {
       __privateGet$3(this, _selection$1).value = view.state.selection;
     };
@@ -8435,6 +8845,7 @@ class FixedToolbarView {
       if (__privateGet$3(this, _outlineApp)) __privateGet$3(this, _outlineApp).unmount();
       if (__privateGet$3(this, _outlineContent)) __privateGet$3(this, _outlineContent).remove();
     };
+    __privateSet$3(this, _view, view);
     const config = ctx.get(fixedToolbarConfig.key);
     const content = document.createElement("div");
     content.className = "milkdown-fixed-toolbar";
@@ -8530,7 +8941,8 @@ class FixedToolbarView {
           viewState.outlinePosition,
           viewState.outlineWidth,
           viewState.documentBackground,
-          viewState.showCover
+          viewState.showCover,
+          viewState.editorWidth
         ],
         () => {
           if (viewState.documentBackground) {
@@ -8559,6 +8971,17 @@ class FixedToolbarView {
             __privateGet$3(this, _content$2).style.marginLeft = "0";
             __privateGet$3(this, _content$2).style.marginRight = "0";
           }
+          const maxWidth = editorWidthMap[viewState.editorWidth];
+          const isFull = maxWidth === "none";
+          const px = isFull ? "80px" : "0";
+          __privateGet$3(this, _view).dom.style.maxWidth = maxWidth;
+          __privateGet$3(this, _view).dom.style.width = isFull ? "100%" : maxWidth;
+          __privateGet$3(this, _view).dom.style.margin = isFull ? "0" : "0 auto";
+          __privateGet$3(this, _view).dom.style.padding = `20px ${px} 0`;
+          if (__privateGet$3(this, _headerContent)) {
+            __privateGet$3(this, _headerContent).style.margin = isFull ? "0" : "0 auto";
+            __privateGet$3(this, _headerContent).style.padding = `0px`;
+          }
           nextTick(() => {
             var _a;
             (_a = __privateGet$3(this, _updateOutlineGeometry)) == null ? void 0 : _a.call(this);
@@ -8581,6 +9004,7 @@ _show$1 = new WeakMap();
 _resizeObserver = new WeakMap();
 _updateOutlineGeometry = new WeakMap();
 _scrollContainers = new WeakMap();
+_view = new WeakMap();
 const fixedToolbarPlugin = $prose((ctx) => {
   return new Plugin({
     key: fixedToolbarKey,
@@ -8620,17 +9044,19 @@ const imageBlock = (editor, config) => {
       };
     });
     ctx.update(imageBlockConfig.key, (value) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
       return {
         uploadButton: (_a = config == null ? void 0 : config.blockUploadButton) != null ? _a : i18n(ctx, "imageBlock.blockUploadButton"),
         imageIcon: (_b = config == null ? void 0 : config.blockImageIcon) != null ? _b : imageIcon,
         captionIcon: (_c = config == null ? void 0 : config.blockCaptionIcon) != null ? _c : captionIcon,
-        confirmButton: (_d = config == null ? void 0 : config.blockConfirmButton) != null ? _d : i18n(ctx, "imageBlock.blockConfirmButton"),
-        captionPlaceholderText: (_e = config == null ? void 0 : config.blockCaptionPlaceholderText) != null ? _e : i18n(ctx, "imageBlock.blockCaptionPlaceholder"),
-        uploadPlaceholderText: (_f = config == null ? void 0 : config.blockUploadPlaceholderText) != null ? _f : i18n(ctx, "imageBlock.blockUploadPlaceholder"),
-        onUpload: (_h = (_g = config == null ? void 0 : config.blockOnUpload) != null ? _g : config == null ? void 0 : config.onUpload) != null ? _h : value.onUpload,
+        cropIcon: (_d = config == null ? void 0 : config.blockCropIcon) != null ? _d : cropIcon,
+        borderIcon: (_e = config == null ? void 0 : config.blockBorderIcon) != null ? _e : borderIcon,
+        confirmButton: (_f = config == null ? void 0 : config.blockConfirmButton) != null ? _f : i18n(ctx, "imageBlock.blockConfirmButton"),
+        captionPlaceholderText: (_g = config == null ? void 0 : config.blockCaptionPlaceholderText) != null ? _g : i18n(ctx, "imageBlock.blockCaptionPlaceholder"),
+        uploadPlaceholderText: (_h = config == null ? void 0 : config.blockUploadPlaceholderText) != null ? _h : i18n(ctx, "imageBlock.blockUploadPlaceholder"),
+        onUpload: (_j = (_i = config == null ? void 0 : config.blockOnUpload) != null ? _i : config == null ? void 0 : config.onUpload) != null ? _j : value.onUpload,
         proxyDomURL: config == null ? void 0 : config.proxyDomURL,
-        onImageLoadError: (_i = config == null ? void 0 : config.onImageLoadError) != null ? _i : value.onImageLoadError,
+        onImageLoadError: (_k = config == null ? void 0 : config.onImageLoadError) != null ? _k : value.onImageLoadError,
         maxWidth: config == null ? void 0 : config.maxWidth,
         maxHeight: config == null ? void 0 : config.maxHeight
       };