@jvs-milkdown/crepe 1.2.17 → 1.2.18

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

@@ -3,7 +3,8 @@ import type { PluginView, Selection } from '@jvs-milkdown/kit/prose/state'
 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 { $ctx, $prose, getMarkdown } 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,15 @@ 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,
+  h,
+  watch,
+} from 'vue'
 
 import type { FixedToolbarConfig } from './index'
 
@@ -143,7 +151,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 +247,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

package/src/feature/toolbar/component.tsx

@@ -1631,6 +1631,7 @@ export const Toolbar = defineComponent<ToolbarProps>({
                         'toolbar-item',
                         ctx && checkActive(item.active) && 'active'
                       )}
+                      data-key={item.key}
                       onPointerdown={(e: PointerEvent) => {
                         if (isTable) {
                           e.preventDefault()
@@ -2547,11 +2548,13 @@ export const Toolbar = defineComponent<ToolbarProps>({
                   onClick: ((e: MouseEvent) => void) | undefined,
                   hasDropdown = false,
                   onMouseEnter?: (e: MouseEvent) => void,
-                  onMouseLeave?: (e: MouseEvent) => void
+                  onMouseLeave?: (e: MouseEvent) => void,
+                  key?: string
                 ) => (
                   <button
                     type="button"
                     class={clsx('toolbar-item', isActive && 'active')}
+                    data-key={key}
                     title={title}
                     onPointerdown={(e: PointerEvent) => {
                       e.preventDefault()
@@ -2686,7 +2689,8 @@ export const Toolbar = defineComponent<ToolbarProps>({
                               },
                           isTable,
                           isTable ? handleTableEnter : undefined,
-                          isTable ? handleTableLeave : undefined
+                          isTable ? handleTableLeave : undefined,
+                          item.key
                         )
                       )
                     }

package/src/icons/export.ts

@@ -0,0 +1,5 @@
+export const exportIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M452.288 725.12L246.016 537.6c-4.928-4.48-10.432-8.832-14.72-13.696-20.8-23.232-21.312-42.944-2.304-59.52 17.664-15.36 43.392-14.976 65.536 4.48 49.088 43.328 32.256 27.712 80.512 71.744l69.376 63.36 11.968 10.688v-173.44c0-33.92-0.128-80.96-0.32-128.448-0.192-51.52-0.32-103.616-0.32-140.16L455.68 163.84a183.04 183.04 0 0 1 0.704-24.896c3.52-29.248 19.328-43.712 45.248-42.88 25.344 0.768 41.088 15.872 42.688 45.504 1.28 22.848 1.024 45.888 0.768 68.864l-0.128 27.136c0 50.048 0.128 112.832 0.256 176.384 0.192 71.552 0.384 144.192 0.32 200.704 74.432-68.224 131.968-119.68 162.688-147.584 7.424-6.72 14.912-14.272 24-18.304 18.688-8.448 37.76-7.808 52.8 7.36 14.72 14.72 16.384 31.36 3.968 48.192-3.84 5.248-8.64 10.112-13.44 14.656-45.76 41.92-189.76 173.248-236.16 214.464a62.336 62.336 0 0 1-8.064 6.016 43.712 43.712 0 0 1-15.872 9.792c-20.544 7.104-37.504-0.512-51.968-13.952l-11.2-10.24z m430.784-37.248c24-0.576 42.176 13.44 43.328 39.04 1.728 38.208 2.944 76.992-1.088 115.136-5.312 50.752-51.52 84.16-114.752 85.312-50.112 0.832-100.224 0.64-150.4 0.512l-64.832-0.128H422.272a26252.8 26252.8 0 0 1-194.432-0.192c-90.624-0.512-130.752-37.696-131.392-120.64l-0.192-17.408c-0.32-19.84-0.576-39.68 0.768-59.392 1.92-27.904 20.48-43.648 45.76-42.368 23.488 1.152 37.312 15.296 40.064 42.368 0.896 9.152 0.832 18.432 0.704 27.648l-0.064 10.816c0.384 71.744 7.36 78.208 88.128 78.272 117.248 0.128 234.432 0.128 351.68 0l43.968 0.192c36.096 0.064 72.192 0.192 108.288-0.448 52.672-0.96 64-12.096 65.152-60.288a494.464 494.464 0 0 0 0-21.76 365.632 365.632 0 0 1 0.704-35.84c2.24-26.048 17.92-40.32 41.664-40.832z" fill="currentColor"></path>
+</svg>
+`

package/src/icons/import.ts

@@ -0,0 +1,6 @@
+export const importIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M838.656 594.432a41.152 41.152 0 0 0-40.768 41.472v176.128c0 0.384-0.384 0.96-1.216 0.96H210.688c-0.768 0-1.216-0.576-1.216-0.96V275.968c0-0.384 0.448-0.96 1.216-0.96h143.616a41.088 41.088 0 0 0 41.28-41.472A41.088 41.088 0 0 0 354.304 192H210.688C165.12 192 128 229.76 128 275.968v536.064C128 858.368 165.12 896 210.688 896h585.984c45.632 0 82.688-37.632 82.688-83.968V635.904a41.152 41.152 0 0 0-40.704-41.472z" fill="currentColor"></path>
+  <path d="M895.744 229.056a40.896 40.896 0 0 0-44.864-36.8c-4.032 0.448-99.456 11.52-200.576 68.352-106.24 59.776-179.2 147.648-214.656 257.28l-44.672-131.584a40.576 40.576 0 0 0-51.84-25.792 41.664 41.664 0 0 0-25.152 52.928l80.064 235.968a40.576 40.576 0 0 0 51.84 25.6l0.512-0.128 232.192-85.312a41.728 41.728 0 0 0 24-52.928 40.576 40.576 0 0 0-51.648-25.152l-144 52.928c26.048-99.2 86.464-176.256 180.416-229.76a508.672 508.672 0 0 1 172.416-59.904c22.336-2.56 38.4-22.976 35.968-45.696z" fill="currentColor"></path>
+</svg>
+`

package/src/icons/index.ts

@@ -53,3 +53,7 @@ export * from './word-wrap'
 export * from './crop'
 export * from './border'
 export * from './format-painter'
+export * from './undo'
+export * from './redo'
+export * from './export'
+export * from './import'

package/src/icons/redo.ts

@@ -0,0 +1,5 @@
+export const redoIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M755.584 183.168a42.688 42.688 0 0 0-60.352 60.352l97.856 97.792H341.44a256 256 0 0 0 0 512h213.312a42.688 42.688 0 0 0 0-85.312H341.44a170.688 170.688 0 0 1 0-341.312h451.648l-97.856 97.856a42.688 42.688 0 0 0 60.352 60.288l170.048-170.048a42.56 42.56 0 0 0 0-61.568l-170.048-170.048z" fill="currentColor"></path>
+</svg>
+`

package/src/icons/undo.ts

@@ -0,0 +1,5 @@
+export const undoIcon = `
+<svg viewBox="0 0 1024 1024" version="1.1" width="20" height="20">
+  <path d="M328.768 243.52a42.688 42.688 0 0 0-60.352-60.352L97.92 353.664A43.008 43.008 0 0 0 85.248 384a42.56 42.56 0 0 0 12.48 30.208l170.688 170.624a42.688 42.688 0 1 0 60.352-60.288l-97.92-97.92h451.712a170.688 170.688 0 1 1 0 341.376H469.248a42.688 42.688 0 1 0 0 85.312h213.312a256 256 0 1 0 0-512H230.912l97.856-97.792z" fill="currentColor"></path>
+</svg>
+`

package/src/theme/common/toolbar.css

@@ -73,6 +73,14 @@
           fill: var(--crepe-color-primary);
         }
       }
+
+      &[data-key='export'],
+      &[data-key='import'],
+      &[data-key='shortcuts'] {
+        svg {
+          --toolbar-icon-color: #363b4c;
+        }
+      }
     }
   }
 
@@ -164,6 +172,14 @@
           fill: var(--crepe-color-primary);
         }
       }
+
+      &[data-key='export'],
+      &[data-key='import'],
+      &[data-key='shortcuts'] {
+        svg {
+          --toolbar-icon-color: #363b4c;
+        }
+      }
     }
   }
 }