@jvs-milkdown/crepe 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jvs-milkdown/crepe",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "keywords": [
     "crepe",
     "editor",
@@ -97,9 +97,9 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.26.0",
     "@floating-ui/dom": "^1.7.6",
-    "@jvs-milkdown/kit": "^1.2.0",
-    "@jvs-milkdown/prose": "^1.2.0",
-    "@jvs-milkdown/utils": "^1.2.0",
+    "@jvs-milkdown/kit": "^1.2.2",
+    "@jvs-milkdown/prose": "^1.2.2",
+    "@jvs-milkdown/utils": "^1.2.2",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.0.0",
     "codemirror": "^6.0.1",

package/src/core/locale.ts

@@ -29,6 +29,10 @@ export const zhCN = {
   'view.docBackground': '文档背景色',
   'view.title': '显示标题',
   'view.cover': '显示封面',
+  'view.editorWidth': '内容宽度',
+  'view.widthDefault': '默认',
+  'view.widthWide': '较宽',
+  'view.widthFull': '全宽',
 
   // code-mirror
   'codeMirror.searchPlaceholder': '搜索语言',
@@ -36,6 +40,7 @@ export const zhCN = {
   'codeMirror.previewToggleOptionEdit': '编辑',
   'codeMirror.previewToggleOptionHide': '隐藏',
   'codeMirror.previewLabel': '预览',
+  'codeMirror.wrapText': '自动换行',
 
   // link-tooltip
   'linkTooltip.pasteLink': '粘贴链接...',
@@ -144,6 +149,29 @@ export const zhCN = {
   'latex.helpDoc': '查看帮助文档',
   'latex.emptyPlaceholder': '添加 LaTeX 公式',
   'latex.inputPlaceholder': '请输入公式',
+
+  // shortcuts
+  'shortcuts.title': '键盘快捷键',
+  'shortcuts.formatting': '文本格式',
+  'shortcuts.bold': '加粗',
+  'shortcuts.italic': '斜体',
+  'shortcuts.underline': '下划线',
+  'shortcuts.strikethrough': '删除线',
+  'shortcuts.inlineCode': '行内代码',
+  'shortcuts.highlight': '高亮',
+  'shortcuts.paragraph': '段落',
+  'shortcuts.heading': '标题',
+  'shortcuts.block': '块级元素',
+  'shortcuts.codeBlock': '代码块',
+  'shortcuts.blockquote': '引用',
+  'shortcuts.orderedList': '有序列表',
+  'shortcuts.bulletList': '无序列表',
+  'shortcuts.indent': '增加缩进',
+  'shortcuts.outdent': '减少缩进',
+  'shortcuts.hardBreak': '换行',
+  'shortcuts.history': '历史记录',
+  'shortcuts.undo': '撤销',
+  'shortcuts.redo': '重做',
 }
 
 export const enUS: typeof zhCN = {
@@ -168,12 +196,17 @@ export const enUS: typeof zhCN = {
   '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...',
 
@@ -274,6 +307,28 @@ export const enUS: typeof zhCN = {
   'latex.helpDoc': 'Help Doc',
   'latex.emptyPlaceholder': 'Add LaTeX',
   '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',
 }
 
 export type CrepeTranslations = typeof zhCN

package/src/feature/block-edit/menu/config.ts

@@ -25,6 +25,7 @@ import {
 import { createTable } from '@jvs-milkdown/kit/preset/gfm'
 import { findNodeInSelection } from '@jvs-milkdown/kit/prose'
 import { lift } from '@jvs-milkdown/kit/prose/commands'
+import { wrapInList } from '@jvs-milkdown/kit/prose/schema-list'
 import { TextSelection } from '@jvs-milkdown/kit/prose/state'
 
 import type { BlockEditFeatureConfig } from '../index'
@@ -711,10 +712,25 @@ export function getGroups(
 
           // Convert heading to paragraph first, then wrap
           convertHeadingToParagraphIfNeeded(ctx)
-          commands.call(wrapInBlockTypeCommand.key, {
-            nodeType: listItem,
-            attrs: { checked: false },
+          const result = wrapInList(bulletList)(view.state, (tr) => {
+            // Set checked attribute on each list item
+            tr.doc.nodesBetween(
+              tr.mapping.map(from),
+              tr.mapping.map(to),
+              (node, pos) => {
+                if (node.type === listItem) {
+                  tr.setNodeMarkup(pos, undefined, {
+                    ...node.attrs,
+                    checked: false,
+                    listType: 'bullet',
+                    label: '•',
+                  })
+                }
+              }
+            )
+            view.dispatch(tr)
           })
+          if (result) return
         },
       })
     }

package/src/feature/code-mirror/index.ts

@@ -20,6 +20,7 @@ import {
   editIcon,
   searchIcon,
   visibilityOffIcon,
+  wordWrapIcon,
 } from '../../icons'
 import { CrepeFeature } from '../index'
 
@@ -82,6 +83,8 @@ export const codeMirror: DefineFeature<CodeMirrorFeatureConfig> = (
         previewLoading: config.previewLoading || defaultConfig.previewLoading,
         previewOnlyByDefault:
           config.previewOnlyByDefault ?? defaultConfig.previewOnlyByDefault,
+        wrapText: config.wrapText || i18n(ctx, 'codeMirror.wrapText'),
+        wrapIcon: config.wrapIcon || wordWrapIcon,
       }))
     })
     .use(codeBlockComponent)

package/src/feature/fixed-toolbar/component.tsx

@@ -1,12 +1,16 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 import type { Selection } from '@jvs-milkdown/kit/prose/state'
 
-import { defineComponent, type ShallowRef, type Ref, h } from 'vue'
+import { Icon } from '@jvs-milkdown/kit/component'
+import { defineComponent, type ShallowRef, type Ref, h, ref } from 'vue'
 
 import type { FixedToolbarFeatureConfig } from '.'
 
+import { i18n } from '../../core/locale'
+import { keyboardIcon } from '../../icons'
 import { Toolbar } from '../toolbar/component'
 import { MenuBar } from './menu-bar'
+import { ShortcutHelpModal } from './shortcut-help-modal'
 
 type FixedToolbarProps = {
   ctx: Ctx
@@ -25,6 +29,8 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
     config: { type: Object, required: false },
   },
   setup(props) {
+    const showShortcuts = ref(false)
+
     return () => (
       <div
         style={{
@@ -32,7 +38,7 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
           alignItems: 'center',
           justifyContent: 'center',
           width: '100%',
-          gap: '12px',
+          gap: '0px',
         }}
       >
         <MenuBar ctx={props.ctx} config={props.config} />
@@ -53,6 +59,29 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
           config={props.config as any}
           isFixed={true}
         />
+        <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%))',
+          }}
+        />
+        <button
+          type="button"
+          class="toolbar-shortcut-btn"
+          title={i18n(props.ctx, 'shortcuts.title')}
+          onClick={() => {
+            showShortcuts.value = true
+          }}
+        >
+          <Icon icon={keyboardIcon} />
+        </button>
+        {showShortcuts.value && (
+          <ShortcutHelpModal ctx={props.ctx} visible={showShortcuts} />
+        )}
       </div>
     )
   },

package/src/feature/fixed-toolbar/config.ts

@@ -23,6 +23,7 @@ import {
 import { createTable } from '@jvs-milkdown/kit/preset/gfm'
 import { findNodeInSelection } from '@jvs-milkdown/kit/prose'
 import { lift } from '@jvs-milkdown/kit/prose/commands'
+import { wrapInList } from '@jvs-milkdown/kit/prose/schema-list'
 
 import type { GroupBuilder } from '../../utils'
 import type { ToolbarItem } from '../toolbar/config'
@@ -477,10 +478,24 @@ export function buildDefaultFixedToolbar(
         }
 
         convertHeadingToParagraphIfNeeded(ctx)
-        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, undefined, {
+                  ...node.attrs,
+                  checked: false,
+                  listType: 'bullet',
+                  label: '•',
+                })
+              }
+            }
+          )
+          view.dispatch(tr)
         })
+        if (result) return
       },
     })
 }

package/src/feature/fixed-toolbar/document-header.tsx

@@ -5,7 +5,7 @@ import { defineComponent, computed, ref, watch, h } from 'vue'
 import type { FixedToolbarConfig } from './index'
 
 import { builtInCoverImages, randomCover } from './cover-defaults'
-import { viewMenuStateCtx } from './view-menu-state'
+import { viewMenuStateCtx, editorWidthMap } from './view-menu-state'
 
 export const DocumentHeader = defineComponent({
   props: {
@@ -237,9 +237,13 @@ export 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'
+                    ? undefined
+                    : editorWidthMap[state.editorWidth],
+                margin:
+                  editorWidthMap[state.editorWidth] === 'none' ? '0' : '0 auto',
+                padding: `40px ${editorWidthMap[state.editorWidth] === 'none' ? '80px' : '0'} 0`,
               }}
             >
               <style>{`.milkdown-document-title::placeholder { color: #BFBFBF; }`}</style>

package/src/feature/fixed-toolbar/index.ts

@@ -25,7 +25,7 @@ import { FixedToolbarComponent } from './component'
 import { buildDefaultFixedToolbar } from './config'
 import { DocumentHeader } from './document-header'
 import { OutlinePanel } from './outline-panel'
-import { viewMenuStateCtx } from './view-menu-state'
+import { viewMenuStateCtx, editorWidthMap } from './view-menu-state'
 
 export interface FixedToolbarConfig {
   boldIcon?: string
@@ -65,8 +65,10 @@ class FixedToolbarView implements PluginView {
   #resizeObserver?: ResizeObserver
   #updateOutlineGeometry?: () => void
   #scrollContainers: Element[] = []
+  #view: EditorView
 
   constructor(ctx: Ctx, view: EditorView) {
+    this.#view = view
     const config = ctx.get(fixedToolbarConfig.key)
     const content = document.createElement('div')
     content.className = 'milkdown-fixed-toolbar'
@@ -185,6 +187,7 @@ class FixedToolbarView implements PluginView {
           viewState.outlineWidth,
           viewState.documentBackground,
           viewState.showCover,
+          viewState.editorWidth,
         ],
         () => {
           if (viewState.documentBackground) {
@@ -215,6 +218,20 @@ class FixedToolbarView implements PluginView {
             this.#content.style.marginRight = '0'
           }
 
+          const maxWidth = editorWidthMap[viewState.editorWidth]
+          const isFull = maxWidth === 'none'
+          const px = isFull ? '80px' : '0'
+          this.#view.dom.style.maxWidth = maxWidth
+          this.#view.dom.style.width = isFull ? '100%' : maxWidth
+          this.#view.dom.style.margin = isFull ? '0' : '0 auto'
+          this.#view.dom.style.padding = `20px ${px} 0`
+          if (this.#headerContent) {
+            // this.#headerContent.style.maxWidth = maxWidth
+            // this.#headerContent.style.width = isFull ? '100%' : maxWidth
+            this.#headerContent.style.margin = isFull ? '0' : '0 auto'
+            this.#headerContent.style.padding = `0px`
+          }
+
           // Compute geometry after styles and DOM (cover) are updated
           nextTick(() => {
             this.#updateOutlineGeometry?.()

package/src/feature/fixed-toolbar/menu-bar.tsx

@@ -8,7 +8,7 @@ import type { FixedToolbarConfig } from './index'
 import { i18n } from '../../core/locale'
 import { menuIcon } from '../../icons'
 import { randomCover } from './cover-defaults'
-import { viewMenuStateCtx } from './view-menu-state'
+import { viewMenuStateCtx, type EditorWidth } from './view-menu-state'
 
 // Simple iOS-style Toggle Switch
 const ToggleSwitch = defineComponent({
@@ -98,7 +98,9 @@ export const MenuBar = defineComponent({
       if (
         showMenu.value &&
         containerRef.value &&
-        !containerRef.value.contains(e.target as Node)
+        !containerRef.value.contains(e.target as Node) &&
+        mainRef.value &&
+        !mainRef.value.contains(e.target as Node)
       ) {
         showMenu.value = false
         activeSubmenu.value = null
@@ -142,7 +144,7 @@ export const MenuBar = defineComponent({
           style={{
             display: 'flex',
             alignItems: 'center',
-            padding: '0 0px',
+            padding: '0 6px 0 0',
             position: 'relative',
           }}
         >
@@ -225,6 +227,11 @@ export const MenuBar = defineComponent({
                   <div
                     key={menuKey}
                     onMouseenter={() => onMouseEnterItem(menuKey)}
+                    onMouseleave={() => {
+                      if (hasSubmenu(menuKey)) {
+                        activeSubmenu.value = null
+                      }
+                    }}
                     style={{
                       position: 'relative',
                       padding: '8px 16px',
@@ -453,6 +460,87 @@ export const MenuBar = defineComponent({
                             </div>
                           ))}
                         </div>
+
+                        <div
+                          style={{
+                            height: '1px',
+                            background:
+                              'var(--crepe-color-outline-variant, #eee)',
+                            margin: '4px 0',
+                          }}
+                        />
+
+                        <div
+                          style={{
+                            padding: '8px 16px',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontSize: '14px',
+                              color: 'var(--crepe-color-on-surface, #333)',
+                            }}
+                          >
+                            {i18n(props.ctx, 'view.editorWidth' as any) ||
+                              '内容宽度'}
+                          </span>
+                        </div>
+
+                        <div
+                          style={{
+                            padding: '4px 16px 8px',
+                            display: 'flex',
+                            gap: '6px',
+                          }}
+                        >
+                          {[
+                            {
+                              key: 'default' as EditorWidth,
+                              labelKey: 'view.widthDefault',
+                            },
+                            {
+                              key: 'wide' as EditorWidth,
+                              labelKey: 'view.widthWide',
+                            },
+                            {
+                              key: 'full' as EditorWidth,
+                              labelKey: 'view.widthFull',
+                            },
+                          ].map(({ key, labelKey }) => (
+                            <button
+                              key={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 as any) || key}
+                            </button>
+                          ))}
+                        </div>
                       </div>
                     ) : null}
                   </div>