@jvs-milkdown/crepe 1.2.17 → 1.2.20

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

@@ -1,14 +1,20 @@
 import type { Ctx } from '@jvs-milkdown/kit/ctx'
 import type { Selection } from '@jvs-milkdown/kit/prose/state'
 
-import { Icon } from '@jvs-milkdown/kit/component'
+import { commandsCtx } from '@jvs-milkdown/kit/core'
 // @ts-ignore
-import { defineComponent, type ShallowRef, type Ref, ref, h } from 'vue'
+import {
+  defineComponent,
+  type ShallowRef,
+  type Ref,
+  ref,
+  onMounted,
+  onUnmounted,
+} from 'vue'
 
 import type { FixedToolbarFeatureConfig } from '.'
 
-import { i18n } from '../../core/locale'
-import { keyboardIcon } from '../../icons'
+import { undoIcon, redoIcon } from '../../icons'
 import { Toolbar } from '../toolbar/component'
 import { MenuBar } from './menu-bar'
 import { ShortcutHelpModal } from './shortcut-help-modal'
@@ -19,6 +25,8 @@ type FixedToolbarProps = {
   show: Ref<boolean>
   selection: ShallowRef<Selection>
   config?: FixedToolbarFeatureConfig
+  canUndo: Ref<boolean>
+  canRedo: Ref<boolean>
 }
 
 export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
@@ -28,62 +36,155 @@ export const FixedToolbarComponent = defineComponent<FixedToolbarProps>({
     show: { type: Object, required: true },
     selection: { type: Object, required: true },
     config: { type: Object, required: false },
+    canUndo: { type: Object, required: true },
+    canRedo: { type: Object, required: true },
   },
   setup(props: any) {
     const showShortcuts = ref(false)
 
-    return () => (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: '100%',
-          gap: '0px',
-        }}
-      >
-        <MenuBar ctx={props.ctx} config={props.config} />
-        <div
-          style={{
-            width: '1px',
-            minWidth: '1px',
-            height: '20px',
-            backgroundColor:
-              'var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))',
-          }}
-        />
-        <Toolbar
-          ctx={props.ctx}
-          hide={props.hide}
-          show={props.show}
-          selection={props.selection}
-          config={props.config as any}
-          isFixed={true}
-        />
+    onMounted(() => {
+      const handleShowShortcuts = () => {
+        showShortcuts.value = true
+      }
+      window.addEventListener('milkdown-show-shortcuts', handleShowShortcuts)
+      onUnmounted(() => {
+        window.removeEventListener(
+          'milkdown-show-shortcuts',
+          handleShowShortcuts
+        )
+      })
+    })
+
+    return () => {
+      // Access selection.value to register reactivity dependency for Vue on editor transactions
+      const _selection = props.selection.value
+      void _selection
+
+      const canUndo =
+        (typeof props.canUndo === 'boolean'
+          ? props.canUndo
+          : props.canUndo?.value) || false
+      const canRedo =
+        (typeof props.canRedo === 'boolean'
+          ? props.canRedo
+          : props.canRedo?.value) || false
+
+      return (
         <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
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            gap: '0px',
+            minWidth: '0',
+            overflow: 'hidden',
           }}
         >
-          <Icon icon={keyboardIcon} />
-        </button>
-        {showShortcuts.value && (
-          <ShortcutHelpModal ctx={props.ctx} visible={showShortcuts} />
-        )}
-      </div>
-    )
+          {props.config?.showMenuBar !== false && [
+            <MenuBar ctx={props.ctx} config={props.config} />,
+            <div
+              style={{
+                width: '1px',
+                minWidth: '1px',
+                height: '20px',
+                backgroundColor:
+                  'var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))',
+              }}
+            />,
+          ]}
+          {props.config?.showHistory !== false && [
+            <button
+              type="button"
+              class={['toolbar-item', !canUndo && 'disabled']}
+              disabled={!canUndo}
+              title="撤销"
+              onPointerdown={(e: PointerEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+                if (canUndo) {
+                  props.ctx.get(commandsCtx).call('Undo')
+                }
+              }}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: 'none',
+                background: 'transparent',
+                cursor: canUndo ? 'pointer' : 'default',
+                padding: '6px',
+                borderRadius: '4px',
+                color: canUndo ? '#363b4c' : '#c0c4cc',
+                '--toolbar-icon-color': canUndo ? '#363b4c' : '#c0c4cc',
+              }}
+            >
+              <span
+                style={{ display: 'inline-flex', alignItems: 'center' }}
+                innerHTML={undoIcon}
+              />
+            </button>,
+            <button
+              type="button"
+              class={['toolbar-item', !canRedo && 'disabled']}
+              disabled={!canRedo}
+              title="恢复"
+              onPointerdown={(e: PointerEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault()
+                e.stopPropagation()
+                if (canRedo) {
+                  props.ctx.get(commandsCtx).call('Redo')
+                }
+              }}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: 'none',
+                background: 'transparent',
+                cursor: canRedo ? 'pointer' : 'default',
+                padding: '6px',
+                borderRadius: '4px',
+                color: canRedo ? '#363b4c' : '#c0c4cc',
+                '--toolbar-icon-color': canRedo ? '#363b4c' : '#c0c4cc',
+              }}
+            >
+              <span
+                style={{ display: 'inline-flex', alignItems: 'center' }}
+                innerHTML={redoIcon}
+              />
+            </button>,
+            <div
+              style={{
+                width: '1px',
+                minWidth: '1px',
+                height: '20px',
+                backgroundColor:
+                  'var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%))',
+              }}
+            />,
+          ]}
+          <Toolbar
+            ctx={props.ctx}
+            hide={props.hide}
+            show={props.show}
+            selection={props.selection}
+            config={props.config as any}
+            isFixed={true}
+          />
+          {showShortcuts.value && (
+            <ShortcutHelpModal ctx={props.ctx} visible={showShortcuts} />
+          )}
+        </div>
+      )
+    }
   },
 })

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

@@ -29,6 +29,8 @@ 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 { getMarkdown } from '@jvs-milkdown/kit/utils'
+import { replaceAll } from '@jvs-milkdown/utils'
 
 import type { GroupBuilder } from '../../utils'
 import type { ToolbarItem } from '../toolbar/config'
@@ -50,6 +52,9 @@ import {
   highLineCodeIcon,
   linCodeIcon,
   linkIcon,
+  exportIcon,
+  importIcon,
+  keyboardIcon,
 } from '../../icons'
 import { attachmentSchema } from '../attachment/schema'
 import { CrepeFeature } from '../index'
@@ -472,7 +477,6 @@ export function buildDefaultFixedToolbar(
       },
     })
 
-
   if (isAttachmentEnabled) {
     blockGroup.addItem('attachment', {
       label: ctx ? i18n(ctx, 'menu.item.attachment') : 'Video or File',
@@ -532,7 +536,6 @@ export function buildDefaultFixedToolbar(
     },
   })
 
-
   if (isLatexEnabled) {
     blockGroup.addItem('math-block', {
       label: ctx ? i18n(ctx, 'menu.item.math') : 'Math Block',
@@ -552,5 +555,70 @@ export function buildDefaultFixedToolbar(
     })
   }
 
+  const documentGroup = builder.addGroup('document', 'Document')
+
+  if (_config?.showExport !== false) {
+    documentGroup.addItem('export', {
+      label: ctx ? i18n(ctx, 'customMenu.export' as any) || '导出' : '导出',
+      icon: exportIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        const markdown = getMarkdown()(ctx)
+        if (_config?.onExport) {
+          _config.onExport(markdown, ctx)
+        } else {
+          const blob = new Blob([markdown], {
+            type: 'text/markdown;charset=utf-8;',
+          })
+          const url = URL.createObjectURL(blob)
+          const link = document.createElement('a')
+          link.href = url
+          link.download = 'document.md'
+          link.click()
+          URL.revokeObjectURL(url)
+        }
+      },
+    })
+  }
+
+  if (_config?.showImport !== false) {
+    documentGroup.addItem('import', {
+      label: ctx ? i18n(ctx, 'customMenu.import' as any) || '导入' : '导入',
+      icon: importIcon,
+      active: () => false,
+      onRun: (ctx) => {
+        if (_config?.onImport) {
+          _config.onImport((markdown) => replaceAll(markdown)(ctx), ctx)
+        } else {
+          const input = document.createElement('input')
+          input.type = 'file'
+          input.accept = '.md'
+          input.onchange = (e) => {
+            const file = (e.target as HTMLInputElement).files?.[0]
+            if (!file) return
+            file
+              .text()
+              .then((text) => {
+                replaceAll(text)(ctx)
+              })
+              .catch((err) => {
+                console.error('Failed to read file:', err)
+              })
+          }
+          input.click()
+        }
+      },
+    })
+  }
+
+  documentGroup.addItem('shortcuts', {
+    label: ctx ? i18n(ctx, 'shortcuts.title') : 'Shortcuts',
+    icon: keyboardIcon,
+    active: () => false,
+    onRun: () => {
+      window.dispatchEvent(new CustomEvent('milkdown-show-shortcuts'))
+    },
+  })
+
   return builder.build()
 }

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

@@ -4,6 +4,7 @@ import type { EditorView } from '@jvs-milkdown/kit/prose/view'
 
 import { Plugin, PluginKey, TextSelection } from '@jvs-milkdown/kit/prose/state'
 import { $ctx, $prose } from '@jvs-milkdown/kit/utils'
+import { undo, redo } from '@jvs-milkdown/prose/history'
 // @ts-ignore
 import {
   createApp,
@@ -44,6 +45,21 @@ export interface FixedToolbarConfig {
   outlinePosition?: 'left' | 'right'
   onUploadCover?: (file: File) => Promise<string>
   defaultCoverImages?: string[]
+  showMenuBar?: boolean
+  menuBarItems?: {
+    file?: boolean
+    edit?: boolean
+    view?: boolean
+    insert?: boolean
+    format?: boolean
+  }
+  showHistory?: boolean
+  showExport?: boolean
+  onExport?: (markdown: string, ctx: Ctx) => void
+  showImport?: boolean
+  onImport?: (replaceContent: (markdown: string) => void, ctx: Ctx) => void
+  useLocalStorage?: boolean
+  id?: string
 }
 
 export type FixedToolbarFeatureConfig = Partial<FixedToolbarConfig>
@@ -65,6 +81,8 @@ class FixedToolbarView implements PluginView {
   #watcher?: WatchStopHandle
   #selection: ShallowRef<Selection>
   #show = ref(true)
+  #canUndo = ref(false)
+  #canRedo = ref(false)
   #resizeObserver?: ResizeObserver
   #updateOutlineGeometry?: () => void
   #scrollContainers: Element[] = []
@@ -75,6 +93,65 @@ class FixedToolbarView implements PluginView {
   constructor(ctx: Ctx, view: EditorView) {
     this.#view = view
     const config = ctx.get(fixedToolbarConfig.key)
+    const viewState = ctx.get(viewMenuStateCtx.key)
+
+    // Load initial view menu state from localStorage if useLocalStorage is enabled
+    if (config?.useLocalStorage) {
+      try {
+        const stored = localStorage.getItem('jvs-milkdown-data')
+        if (stored) {
+          const parsed = JSON.parse(stored)
+          if (parsed.outlineVisible !== undefined)
+            viewState.outlineVisible = parsed.outlineVisible
+          if (parsed.outlinePosition !== undefined)
+            viewState.outlinePosition = parsed.outlinePosition
+          if (parsed.outlineWidth !== undefined)
+            viewState.outlineWidth = parsed.outlineWidth
+          if (parsed.documentBackground !== undefined)
+            viewState.documentBackground = parsed.documentBackground
+          if (parsed.showTitle !== undefined)
+            viewState.showTitle = parsed.showTitle
+          if (parsed.showCover !== undefined)
+            viewState.showCover = parsed.showCover
+          if (parsed.coverUrl !== undefined)
+            viewState.coverUrl = parsed.coverUrl
+          if (parsed.editorWidth !== undefined)
+            viewState.editorWidth = parsed.editorWidth
+        }
+      } catch (e) {
+        console.error('Error loading view state from localStorage:', e)
+      }
+
+      // Automatically watch and persist view state changes to localStorage
+      watch(
+        viewState,
+        (newState) => {
+          try {
+            const stored = localStorage.getItem('jvs-milkdown-data')
+            let parsed = {}
+            if (stored) {
+              parsed = JSON.parse(stored)
+            }
+            const merged = {
+              ...parsed,
+              outlineVisible: newState.outlineVisible,
+              outlinePosition: newState.outlinePosition,
+              outlineWidth: newState.outlineWidth,
+              documentBackground: newState.documentBackground,
+              showTitle: newState.showTitle,
+              showCover: newState.showCover,
+              coverUrl: newState.coverUrl,
+              editorWidth: newState.editorWidth,
+            }
+            localStorage.setItem('jvs-milkdown-data', JSON.stringify(merged))
+          } catch (e) {
+            console.error('Error saving view state to localStorage:', e)
+          }
+        },
+        { deep: true }
+      )
+    }
+
     const content = document.createElement('div')
     content.className = 'milkdown-fixed-toolbar'
     this.#selection = shallowRef(view.state.selection)
@@ -85,6 +162,8 @@ class FixedToolbarView implements PluginView {
       config,
       selection: this.#selection,
       show: this.#show,
+      canUndo: this.#canUndo,
+      canRedo: this.#canRedo,
     })
     app.mount(content)
     this.#content = content
@@ -317,6 +396,12 @@ class FixedToolbarView implements PluginView {
 
   update = (view: EditorView) => {
     this.#selection.value = view.state.selection
+    try {
+      this.#canUndo.value = undo(view.state)
+      this.#canRedo.value = redo(view.state)
+    } catch (e) {
+      // Ignore initialization errors
+    }
   }
 
   destroy = () => {

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

@@ -2,7 +2,14 @@ import type { Ctx } from '@jvs-milkdown/kit/ctx'
 
 import { Icon } from '@jvs-milkdown/kit/component'
 // @ts-ignore
-import { defineComponent, ref, onUnmounted, computed, onMounted, h, watch } from 'vue'
+import {
+  defineComponent,
+  ref,
+  onUnmounted,
+  computed,
+  onMounted,
+  watch,
+} from 'vue'
 
 import type { FixedToolbarConfig } from './index'
 
@@ -143,7 +150,14 @@ export const MenuBar = defineComponent({
       { name: '浅粉', value: '#FDE8E9' },
     ]
 
-    const menuKeys = ['file', 'edit', 'view', 'insert', 'format']
+    const menuKeys = computed(() => {
+      const allKeys = ['file', 'edit', 'view', 'insert', 'format']
+      const itemsConfig = props.config?.menuBarItems
+      if (!itemsConfig) return allKeys
+      return allKeys.filter(
+        (key) => itemsConfig[key as keyof typeof itemsConfig] !== false
+      )
+    })
     const hasSubmenu = (key: string) => key === 'view'
 
     return () => {
@@ -232,7 +246,7 @@ export const MenuBar = defineComponent({
                 e.stopPropagation()
               }}
             >
-              {menuKeys.map((menuKey) => {
+              {menuKeys.value.map((menuKey) => {
                 const isHovered = activeSubmenu.value === menuKey
                 const label =
                   i18n(props.ctx, `menuBar.${menuKey}` as any) || menuKey