@jvs-milkdown/crepe 1.2.0 → 1.2.2

package/lib/cjs/index.js

@@ -18,6 +18,7 @@ var utils = require('@jvs-milkdown/kit/utils');
 var unistUtilVisit = require('unist-util-visit');
 var imageBlock$1 = require('@jvs-milkdown/kit/component/image-block');
 var commands = require('@jvs-milkdown/kit/prose/commands');
+var schemaList = require('@jvs-milkdown/kit/prose/schema-list');
 var katex = require('katex');
 var commands$1 = require('@codemirror/commands');
 var view = require('@codemirror/view');
@@ -216,6 +217,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>
@@ -612,6 +617,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: themeOneDark.oneDark,
@@ -647,12 +676,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
@@ -750,7 +784,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",
@@ -771,11 +827,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",
@@ -865,7 +926,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 = ctx.createSlice(
   {
@@ -1912,10 +1994,24 @@ function getGroups$1(filter, config, ctx) {
             return;
           }
           convertHeadingToParagraphIfNeeded$1(ctx2);
-          commands.call(commonmark.wrapInBlockTypeCommand.key, {
-            nodeType: listItem,
-            attrs: { checked: false }
+          const result = schemaList.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;
         }
       });
     }
@@ -3171,7 +3267,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 = slash.slashFactory("CREPE_MENU");
 function configureMenu(ctx, config) {
   ctx.set(menu.key, {
@@ -3185,7 +3281,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);
@@ -3214,7 +3310,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 {
@@ -3262,7 +3358,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 = vue.ref(false);
@@ -3349,7 +3445,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();
@@ -3801,7 +3897,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(codeBlock.codeBlockComponent);
@@ -6858,6 +6956,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 = () => vue.reactive({
   outlineVisible: false,
   outlinePosition: "left",
@@ -6865,7 +6968,8 @@ const createViewMenuState = () => vue.reactive({
   documentBackground: null,
   showTitle: false,
   showCover: false,
-  coverUrl: ""
+  coverUrl: "",
+  editorWidth: "default"
 });
 const viewMenuStateCtx = utils.$ctx(createViewMenuState(), "viewMenuStateCtx");
 
@@ -6949,7 +7053,7 @@ const MenuBar = vue.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);
@@ -6986,7 +7090,7 @@ const MenuBar = vue.defineComponent({
           style: {
             display: "flex",
             alignItems: "center",
-            padding: "0 0px",
+            padding: "0 6px 0 0",
             position: "relative"
           }
         },
@@ -7069,6 +7173,11 @@ const MenuBar = vue.defineComponent({
               {
                 key: menuKey,
                 onMouseenter: () => onMouseEnterItem(menuKey),
+                onMouseleave: () => {
+                  if (hasSubmenu(menuKey)) {
+                    activeSubmenu.value = null;
+                  }
+                },
                 style: {
                   position: "relative",
                   padding: "8px 16px",
@@ -7316,6 +7425,82 @@ const MenuBar = vue.defineComponent({
                       )
                     ) : null
                   ))
+                ),
+                /* @__PURE__ */ vue.h(
+                  "div",
+                  {
+                    style: {
+                      height: "1px",
+                      background: "var(--crepe-color-outline-variant, #eee)",
+                      margin: "4px 0"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ vue.h(
+                  "div",
+                  {
+                    style: {
+                      padding: "8px 16px",
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center"
+                    }
+                  },
+                  /* @__PURE__ */ vue.h(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "14px",
+                        color: "var(--crepe-color-on-surface, #333)"
+                      }
+                    },
+                    i18n(props.ctx, "view.editorWidth") || "\u5185\u5BB9\u5BBD\u5EA6"
+                  )
+                ),
+                /* @__PURE__ */ vue.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__ */ vue.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
             );
@@ -7326,6 +7511,191 @@ const MenuBar = vue.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__ */ vue.h("div", { style: { marginBottom: "16px" }, key: group.titleKey }, /* @__PURE__ */ vue.h("div", { style: groupTitleStyle }, i18n(ctx, group.titleKey)), /* @__PURE__ */ vue.h("div", { style: { display: "flex", flexDirection: "column" } }, group.items.map((item) => /* @__PURE__ */ vue.h("div", { key: item.labelKey, style: rowStyle }, /* @__PURE__ */ vue.h("span", { style: labelStyle }, i18n(ctx, item.labelKey)), /* @__PURE__ */ vue.h("div", { style: { display: "flex", gap: "4px", alignItems: "center" } }, item.keys.map((key, i) => /* @__PURE__ */ vue.h("span", { key: i, style: badgeStyle }, fmt(key))))))));
+}
+const ShortcutHelpModal = vue.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();
+    };
+    vue.onMounted(() => document.addEventListener("keydown", onKeydown));
+    vue.onBeforeUnmount(() => document.removeEventListener("keydown", onKeydown));
+    return () => /* @__PURE__ */ vue.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__ */ vue.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__ */ vue.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__ */ vue.h(
+            "span",
+            {
+              style: {
+                fontSize: "15px",
+                fontWeight: 600,
+                color: "var(--crepe-color-on-surface, #1a1a1a)"
+              }
+            },
+            i18n(props.ctx, "shortcuts.title")
+          ),
+          /* @__PURE__ */ vue.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__ */ vue.h(component.Icon, { icon: closeIcon })
+          )
+        ),
+        /* @__PURE__ */ vue.h("div", { style: { display: "flex", gap: "24px" } }, /* @__PURE__ */ vue.h("div", { style: columnStyle }, leftGroups.map((g) => renderGroup(props.ctx, g))), /* @__PURE__ */ vue.h(
+          "div",
+          {
+            style: {
+              width: "1px",
+              flexShrink: 0,
+              backgroundColor: "var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))"
+            }
+          }
+        ), /* @__PURE__ */ vue.h("div", { style: columnStyle }, rightGroups.map((g) => renderGroup(props.ctx, g))))
+      )
+    );
+  }
+});
+
 const FixedToolbarComponent = vue.defineComponent({
   props: {
     ctx: { type: Object, required: true },
@@ -7335,6 +7705,7 @@ const FixedToolbarComponent = vue.defineComponent({
     config: { type: Object, required: false }
   },
   setup(props) {
+    const showShortcuts = vue.ref(false);
     return () => /* @__PURE__ */ vue.h(
       "div",
       {
@@ -7343,7 +7714,7 @@ const FixedToolbarComponent = vue.defineComponent({
           alignItems: "center",
           justifyContent: "center",
           width: "100%",
-          gap: "12px"
+          gap: "0px"
         }
       },
       /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
@@ -7368,7 +7739,32 @@ const FixedToolbarComponent = vue.defineComponent({
           config: props.config,
           isFixed: true
         }
-      )
+      ),
+      /* @__PURE__ */ vue.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__ */ vue.h(
+        "button",
+        {
+          type: "button",
+          class: "toolbar-shortcut-btn",
+          title: i18n(props.ctx, "shortcuts.title"),
+          onClick: () => {
+            showShortcuts.value = true;
+          }
+        },
+        /* @__PURE__ */ vue.h(component.Icon, { icon: keyboardIcon })
+      ),
+      showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
     );
   }
 });
@@ -7738,10 +8134,24 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
         return;
       }
       convertHeadingToParagraphIfNeeded(ctx2);
-      commands.call(commonmark.wrapInBlockTypeCommand.key, {
-        nodeType: listItem,
-        attrs: { checked: false }
+      const result = schemaList.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;
     }
   });
 }
@@ -7968,10 +8378,9 @@ const DocumentHeader = vue.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__ */ vue.h("style", null, `.milkdown-document-title::placeholder { color: #BFBFBF; }`),
@@ -8396,7 +8805,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 = utils.$ctx(
   {},
   "fixedToolbarConfigCtx"
@@ -8416,6 +8825,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;
     };
@@ -8437,6 +8847,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";
@@ -8532,7 +8943,8 @@ class FixedToolbarView {
           viewState.outlinePosition,
           viewState.outlineWidth,
           viewState.documentBackground,
-          viewState.showCover
+          viewState.showCover,
+          viewState.editorWidth
         ],
         () => {
           if (viewState.documentBackground) {
@@ -8561,6 +8973,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`;
+          }
           vue.nextTick(() => {
             var _a;
             (_a = __privateGet$3(this, _updateOutlineGeometry)) == null ? void 0 : _a.call(this);
@@ -8583,6 +9006,7 @@ _show$1 = new WeakMap();
 _resizeObserver = new WeakMap();
 _updateOutlineGeometry = new WeakMap();
 _scrollContainers = new WeakMap();
+_view = new WeakMap();
 const fixedToolbarPlugin = utils.$prose((ctx) => {
   return new state.Plugin({
     key: fixedToolbarKey,
@@ -8622,17 +9046,19 @@ const imageBlock = (editor, config) => {
       };
     });
     ctx.update(imageBlock$1.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
       };