@jvs-milkdown/crepe 1.2.0 → 1.2.2

package/src/feature/fixed-toolbar/shortcut-help-modal.tsx

@@ -0,0 +1,244 @@
+import type { Ctx } from '@jvs-milkdown/kit/ctx'
+
+import { Icon } from '@jvs-milkdown/kit/component'
+import { defineComponent, type Ref, h, onMounted, onBeforeUnmount } from 'vue'
+
+import type { CrepeTranslations } from '../../core/locale'
+
+import { i18n } from '../../core/locale'
+import { closeIcon } from '../../icons'
+
+const isMac =
+  typeof navigator !== 'undefined' &&
+  /Mac|iPod|iPhone|iPad/.test(navigator.platform || navigator.userAgent)
+
+function fmt(shortcut: string): string {
+  return shortcut
+    .replace(/Mod/g, isMac ? '⌘' : 'Ctrl')
+    .replace(/\+/g, isMac ? '' : '+')
+    .replace(/Shift/g, isMac ? '⇧' : 'Shift')
+    .replace(/Alt/g, isMac ? '⌥' : 'Alt')
+}
+
+type ShortcutEntry = { labelKey: keyof CrepeTranslations; keys: string[] }
+type ShortcutGroup = {
+  titleKey: keyof CrepeTranslations
+  items: ShortcutEntry[]
+}
+
+const leftGroups: ShortcutGroup[] = [
+  {
+    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: ShortcutGroup[] = [
+  {
+    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'] },
+    ],
+  },
+]
+
+type ModalProps = {
+  ctx: Ctx
+  visible: Ref<boolean>
+}
+
+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' as const,
+}
+
+const columnStyle = {
+  flex: 1,
+  minWidth: 0,
+}
+
+const groupTitleStyle = {
+  fontSize: '11px',
+  fontWeight: 600,
+  color: 'var(--crepe-color-on-surface-variant, #888)',
+  marginBottom: '8px',
+  textTransform: 'uppercase' as const,
+  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: Ctx, group: ShortcutGroup) {
+  return (
+    <div style={{ marginBottom: '16px' }} key={group.titleKey}>
+      <div style={groupTitleStyle}>{i18n(ctx, group.titleKey)}</div>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {group.items.map((item) => (
+          <div key={item.labelKey} style={rowStyle}>
+            <span style={labelStyle}>{i18n(ctx, item.labelKey)}</span>
+            <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+              {item.keys.map((key, i) => (
+                <span key={i} style={badgeStyle}>
+                  {fmt(key)}
+                </span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const ShortcutHelpModal = defineComponent<ModalProps>({
+  props: {
+    ctx: { type: Object, required: true },
+    visible: { type: Object, required: true },
+  },
+  setup(props) {
+    const close = () => {
+      props.visible.value = false
+    }
+
+    const onKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close()
+    }
+
+    onMounted(() => document.addEventListener('keydown', onKeydown))
+    onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
+
+    return () => (
+      <div
+        style={{
+          position: 'fixed',
+          inset: 0,
+          zIndex: 10000,
+          background: 'rgba(0, 0, 0, 0.4)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        onClick={close}
+      >
+        <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()}
+        >
+          <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%))',
+            }}
+          >
+            <span
+              style={{
+                fontSize: '15px',
+                fontWeight: 600,
+                color: 'var(--crepe-color-on-surface, #1a1a1a)',
+              }}
+            >
+              {i18n(props.ctx, 'shortcuts.title')}
+            </span>
+            <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)',
+              }}
+            >
+              <Icon icon={closeIcon} />
+            </button>
+          </div>
+
+          <div style={{ display: 'flex', gap: '24px' }}>
+            <div style={columnStyle}>
+              {leftGroups.map((g) => renderGroup(props.ctx, g))}
+            </div>
+            <div
+              style={{
+                width: '1px',
+                flexShrink: 0,
+                backgroundColor:
+                  'var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))',
+              }}
+            />
+            <div style={columnStyle}>
+              {rightGroups.map((g) => renderGroup(props.ctx, g))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+})

package/src/feature/fixed-toolbar/view-menu-state.ts

@@ -1,6 +1,7 @@
 import { reactive } from 'vue'
 
 export type OutlinePosition = 'left' | 'right'
+export type EditorWidth = 'default' | 'wide' | 'full'
 
 export interface ViewMenuState {
   outlineVisible: boolean
@@ -10,6 +11,13 @@ export interface ViewMenuState {
   showTitle: boolean
   showCover: boolean
   coverUrl: string
+  editorWidth: EditorWidth
+}
+
+export const editorWidthMap: Record<EditorWidth, string> = {
+  default: '820px',
+  wide: '1020px',
+  full: 'none',
 }
 
 export const createViewMenuState = () =>
@@ -21,6 +29,7 @@ export const createViewMenuState = () =>
     showTitle: false,
     showCover: false,
     coverUrl: '',
+    editorWidth: 'default',
   })
 
 import { $ctx } from '@jvs-milkdown/kit/utils'

package/src/feature/image-block/index.ts

@@ -16,7 +16,13 @@ import type { DefineFeature } from '../shared'
 
 import { i18n } from '../../core/locale'
 import { crepeFeatureConfig } from '../../core/slice'
-import { captionIcon, imageIcon, confirmIcon } from '../../icons'
+import {
+  captionIcon,
+  imageIcon,
+  confirmIcon,
+  cropIcon,
+  borderIcon,
+} from '../../icons'
 import { CrepeFeature } from '../index'
 
 interface ImageBlockConfig {
@@ -32,6 +38,8 @@ interface ImageBlockConfig {
   blockImageIcon: string
   blockConfirmButton: string
   blockCaptionIcon: string
+  blockCropIcon: string
+  blockBorderIcon: string
   blockUploadButton: string
   blockCaptionPlaceholderText: string
   blockUploadPlaceholderText: string
@@ -68,6 +76,8 @@ export const imageBlock: DefineFeature<ImageBlockFeatureConfig> = (
           i18n(ctx, 'imageBlock.blockUploadButton'),
         imageIcon: config?.blockImageIcon ?? imageIcon,
         captionIcon: config?.blockCaptionIcon ?? captionIcon,
+        cropIcon: config?.blockCropIcon ?? cropIcon,
+        borderIcon: config?.blockBorderIcon ?? borderIcon,
         confirmButton:
           config?.blockConfirmButton ??
           i18n(ctx, 'imageBlock.blockConfirmButton'),

package/src/icons/border.ts

@@ -0,0 +1,5 @@
+export 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>
+`

package/src/icons/close.ts

@@ -0,0 +1,3 @@
+export 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>
+`

package/src/icons/crop.ts

@@ -0,0 +1,6 @@
+export 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>
+`

package/src/icons/index.ts

@@ -9,6 +9,7 @@ export * from './check-box-checked'
 export * from './check-box-unchecked'
 export * from './chevron-down'
 export * from './clear'
+export * from './close'
 export * from './code'
 export * from './confirm'
 export * from './copy'
@@ -47,3 +48,7 @@ export * from './line-code'
 export * from './merge-cell'
 export * from './more'
 export * from './split-cell'
+export * from './keyboard'
+export * from './word-wrap'
+export * from './crop'
+export * from './border'

package/src/icons/keyboard.ts

@@ -0,0 +1,3 @@
+export 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>
+`

package/src/icons/word-wrap.ts

@@ -0,0 +1,6 @@
+export 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>
+`

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

@@ -34,6 +34,10 @@
       background: transparent;
     }
 
+    .cm-activeLineGutter {
+      background-color: #f5f5f5;
+    }
+
     .cm-panel {
       font-family: var(--crepe-font-default);
       background: transparent;
@@ -140,6 +144,15 @@
           border-top-right-radius: 100px;
           border-bottom-right-radius: 100px;
         }
+
+        button.word-wrap-active {
+          background: var(--crepe-color-selected);
+          color: var(--crepe-color-primary);
+
+          svg {
+            stroke: var(--crepe-color-primary);
+          }
+        }
       }
 
       .language-button {