@jvs-milkdown/crepe 1.2.25 → 1.2.26

package/lib/types/feature/fixed-toolbar/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAkChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAqDxD,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,EAClC,OAAO,CAAC,EAAE,yBAAyB,EACnC,GAAG,CAAC,EAAE,GAAG;;;;;;;;IAmhBV"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAkChD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAqDxD,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,EAClC,OAAO,CAAC,EAAE,yBAAyB,EACnC,GAAG,CAAC,EAAE,GAAG;;;;;;;;IAyiBV"}

package/lib/types/feature/fixed-toolbar/index.d.ts

@@ -29,8 +29,10 @@ export interface FixedToolbarConfig {
     showHistory?: boolean;
     showExport?: boolean;
     onExport?: (markdown: string, ctx: Ctx) => void;
+    exportItems?: ('markdown' | 'word' | 'pdf')[];
     showImport?: boolean;
     onImport?: (replaceContent: (markdown: string) => void, ctx: Ctx) => void;
+    importItems?: ('markdown' | 'word' | 'pdf')[];
     useLocalStorage?: boolean;
     id?: string;
     outlineVisible?: boolean;

package/lib/types/feature/fixed-toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAIhD,OAAO,EAAU,SAAS,EAAiB,MAAM,+BAA+B,CAAA;AAehF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAUpD,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAA;AAE1B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC3D,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAC/C,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE;QACb,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,MAAM,CAAC,EAAE,OAAO,CAAA;KACjB,CAAA;IACD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACzE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAA;AAEnE,eAAO,MAAM,kBAAkB,0FAG9B,CAAA;AAED,eAAO,MAAM,eAAe,gBAA0C,CAAA;AAoXtE,eAAO,MAAM,kBAAkB,sCAK7B,CAAA;AAEF,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,yBAAyB,CA6BjE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/feature/fixed-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAIhD,OAAO,EAAU,SAAS,EAAiB,MAAM,+BAA+B,CAAA;AAehF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAUpD,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAA;AAE1B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IAC3D,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IAC/C,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE;QACb,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,IAAI,CAAC,EAAE,OAAO,CAAA;QACd,MAAM,CAAC,EAAE,OAAO,CAAA;QAChB,MAAM,CAAC,EAAE,OAAO,CAAA;KACjB,CAAA;IACD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/C,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IACzE,WAAW,CAAC,EAAE,CAAC,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC,EAAE,CAAA;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAED,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAA;AAEnE,eAAO,MAAM,kBAAkB,0FAG9B,CAAA;AAED,eAAO,MAAM,eAAe,gBAA0C,CAAA;AAoXtE,eAAO,MAAM,kBAAkB,sCAK7B,CAAA;AAEF,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,yBAAyB,CA6BjE,CAAA"}

package/package.json

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

package/src/default-config/default-config.spec.ts

@@ -25,3 +25,18 @@ test('should use custom config to override the default config', () => {
     mockCppLanguageDescription,
   ])
 })
+
+test('should apply exportItems and importItems config to FixedToolbar', () => {
+  const myConfig = applyConfig({
+    [CrepeFeature.FixedToolbar]: {
+      exportItems: ['markdown', 'word'],
+      importItems: ['markdown'],
+    },
+  })
+
+  expect(myConfig[CrepeFeature.FixedToolbar]?.exportItems).toEqual([
+    'markdown',
+    'word',
+  ])
+  expect(myConfig[CrepeFeature.FixedToolbar]?.importItems).toEqual(['markdown'])
+})

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

@@ -3,7 +3,7 @@ import type { Node as ProseNode } from '@jvs-milkdown/kit/prose/model'
 
 import { imageBlockSchema } from '@jvs-milkdown/kit/component/image-block'
 import { toggleLinkCommand } from '@jvs-milkdown/kit/component/link-tooltip'
-import { commandsCtx, editorViewCtx } from '@jvs-milkdown/kit/core'
+import { commandsCtx, editorViewCtx, rootCtx } from '@jvs-milkdown/kit/core'
 import {
   addBlockTypeCommand,
   blockquoteSchema,
@@ -564,7 +564,18 @@ export function buildDefaultFixedToolbar(
       active: () => false,
       onRun: (ctx) => {
         const markdown = getMarkdown()(ctx)
-        if (_config?.onExport) {
+        const view = ctx.get(editorViewCtx)
+        const root = ctx.get(rootCtx) as HTMLElement
+        const rootNode = view.dom.getRootNode() as ShadowRoot | Document
+
+        if (_config?.exportItems && _config.exportItems.length > 0) {
+          const exportItems = _config.exportItems
+          if (exportItems.length === 1) {
+            handleDirectExport(exportItems[0]!, markdown, view, root)
+          } else {
+            showDownloadPopover(rootNode, root, view, markdown, exportItems)
+          }
+        } else if (_config?.onExport) {
           _config.onExport(markdown, ctx)
         } else {
           const blob = new Blob([markdown], {
@@ -587,7 +598,18 @@ export function buildDefaultFixedToolbar(
       icon: importIcon,
       active: () => false,
       onRun: (ctx) => {
-        if (_config?.onImport) {
+        const view = ctx.get(editorViewCtx)
+        const root = ctx.get(rootCtx) as HTMLElement
+        const rootNode = view.dom.getRootNode() as ShadowRoot | Document
+
+        if (_config?.importItems && _config.importItems.length > 0) {
+          const importItems = _config.importItems
+          if (importItems.length === 1) {
+            handleDirectImport(importItems[0]!, root, ctx)
+          } else {
+            showImportPopover(rootNode, root, ctx, importItems)
+          }
+        } else if (_config?.onImport) {
           _config.onImport((markdown) => replaceAll(markdown)(ctx), ctx)
         } else {
           const input = document.createElement('input')
@@ -622,3 +644,460 @@ export function buildDefaultFixedToolbar(
 
   return builder.build()
 }
+
+const activeDownloadPopovers = new WeakMap<HTMLElement, HTMLElement>()
+const activeImportPopovers = new WeakMap<HTMLElement, HTMLElement>()
+
+const ensureStyles = (rootNode: ShadowRoot | Document) => {
+  const target = rootNode instanceof ShadowRoot ? rootNode : document.head
+  if (target.querySelector('#download-popover-styles')) return
+
+  const styleEl = document.createElement('style')
+  styleEl.id = 'download-popover-styles'
+  styleEl.textContent = `
+    .download-popover, .import-popover {
+      position: fixed;
+      z-index: 10000;
+      width: 140px;
+      padding: 6px 0;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--crepe-color-surface, #ffffff);
+      border: 1px solid var(--crepe-color-outline-variant, color-mix(in srgb, var(--crepe-color-outline), transparent 80%));
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      opacity: 0;
+      transform: translateY(-8px);
+      transition: opacity 0.15s ease, transform 0.15s ease;
+      pointer-events: none;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+    .download-popover.show, .import-popover.show {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+    .download-popover-item, .import-popover-item {
+      cursor: pointer;
+      padding: 8px 14px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--crepe-color-primary, #363B4C);
+      transition: background-color 0.2s;
+      user-select: none;
+    }
+    .download-popover-item:hover, .import-popover-item:hover {
+      background-color: var(--crepe-color-hover, #f5f5f5);
+    }
+    .download-popover-item-icon, .import-popover-item-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      color: var(--crepe-color-primary, #363B4C);
+      opacity: 0.8;
+    }
+  `
+  target.appendChild(styleEl)
+}
+
+function handleDirectExport(
+  type: 'markdown' | 'word' | 'pdf',
+  markdown: string,
+  view: any,
+  root: HTMLElement
+) {
+  if (type === 'markdown') {
+    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)
+  }
+
+  const event = new CustomEvent('download-click', {
+    detail: {
+      type,
+      markdown,
+      html: view.dom.innerHTML || '',
+    },
+    bubbles: true,
+    composed: true,
+  })
+  root.dispatchEvent(event)
+}
+
+function handleDirectImport(
+  type: 'markdown' | 'word' | 'pdf',
+  root: HTMLElement,
+  ctx: Ctx
+) {
+  if (type === 'markdown') {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.md'
+    input.onchange = (evt) => {
+      const file = (evt.target as HTMLInputElement).files?.[0]
+      if (!file) return
+      file
+        .text()
+        .then((text) => {
+          replaceAll(text)(ctx)
+
+          const event = new CustomEvent('import-click', {
+            detail: { type: 'markdown', file },
+            bubbles: true,
+            composed: true,
+          })
+          root.dispatchEvent(event)
+        })
+        .catch((err) => {
+          console.error('Failed to read file:', err)
+        })
+    }
+    input.click()
+  } else {
+    const event = new CustomEvent('import-click', {
+      detail: { type },
+      bubbles: true,
+      composed: true,
+    })
+    root.dispatchEvent(event)
+  }
+}
+
+function showDownloadPopover(
+  rootNode: ShadowRoot | Document,
+  root: HTMLElement,
+  view: any,
+  markdown: string,
+  exportItems: ('markdown' | 'word' | 'pdf')[]
+) {
+  const button = root.querySelector('button[data-key="export"]') as HTMLElement
+  if (!button) return
+
+  const existing = activeDownloadPopovers.get(button)
+  if (existing) {
+    ;(existing as any).closePopover()
+    return
+  }
+
+  ensureStyles(rootNode)
+
+  const container = rootNode instanceof ShadowRoot ? rootNode : document.body
+  const popover = document.createElement('div')
+  popover.className = 'download-popover'
+
+  let popoverHtml = ''
+  if (exportItems.includes('markdown')) {
+    popoverHtml += `
+      <div class="download-popover-item" id="download-md-btn">
+        <span class="download-popover-item-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>
+        </span>
+        <span>下载 MD</span>
+      </div>
+    `
+  }
+  if (exportItems.includes('word')) {
+    popoverHtml += `
+      <div class="download-popover-item" id="download-word-btn">
+        <span class="download-popover-item-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+        </span>
+        <span>下载 WORD</span>
+      </div>
+    `
+  }
+  if (exportItems.includes('pdf')) {
+    popoverHtml += `
+      <div class="download-popover-item" id="download-pdf-btn">
+        <span class="download-popover-item-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
+        </span>
+        <span>下载 PDF</span>
+      </div>
+    `
+  }
+  popover.innerHTML = popoverHtml
+
+  container.appendChild(popover)
+  activeDownloadPopovers.set(button, popover)
+
+  const updatePosition = () => {
+    const rect = button.getBoundingClientRect()
+    popover.style.top = `${rect.bottom + 4}px`
+    popover.style.left = `${rect.left + (rect.width - 140) / 2}px`
+  }
+
+  updatePosition()
+
+  requestAnimationFrame(() => {
+    popover.classList.add('show')
+  })
+
+  const closePopover = () => {
+    popover.classList.remove('show')
+    activeDownloadPopovers.delete(button)
+    container.removeEventListener('pointerdown', handleContainerClick, true)
+    document.removeEventListener('pointerdown', handleOuterClick, true)
+    window.removeEventListener('resize', updatePosition)
+    popover.addEventListener(
+      'transitionend',
+      () => {
+        popover.remove()
+      },
+      { once: true }
+    )
+  }
+  ;(popover as any).closePopover = closePopover
+
+  const handleContainerClick = (e: Event) => {
+    const target = e.target as HTMLElement
+    if (
+      !popover.contains(target) &&
+      target !== button &&
+      !button.contains(target)
+    ) {
+      closePopover()
+    }
+  }
+
+  const handleOuterClick = (e: Event) => {
+    const target = e.target as HTMLElement
+    if (target !== root && !root.contains(target)) {
+      closePopover()
+    }
+  }
+
+  popover.addEventListener('pointerdown', (e) => {
+    e.stopPropagation()
+  })
+
+  container.addEventListener('pointerdown', handleContainerClick, true)
+  document.addEventListener('pointerdown', handleOuterClick, true)
+  window.addEventListener('resize', updatePosition)
+
+  popover.querySelector('#download-md-btn')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    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)
+    closePopover()
+
+    const event = new CustomEvent('download-click', {
+      detail: {
+        type: 'markdown',
+        markdown,
+        html: view.dom.innerHTML || '',
+      },
+      bubbles: true,
+      composed: true,
+    })
+    root.dispatchEvent(event)
+  })
+
+  popover
+    .querySelector('#download-word-btn')
+    ?.addEventListener('click', (e) => {
+      e.stopPropagation()
+      closePopover()
+      const event = new CustomEvent('download-click', {
+        detail: {
+          type: 'word',
+          markdown,
+          html: view.dom.innerHTML || '',
+        },
+        bubbles: true,
+        composed: true,
+      })
+      root.dispatchEvent(event)
+    })
+
+  popover.querySelector('#download-pdf-btn')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    closePopover()
+    const event = new CustomEvent('download-click', {
+      detail: {
+        type: 'pdf',
+        markdown,
+        html: view.dom.innerHTML || '',
+      },
+      bubbles: true,
+      composed: true,
+    })
+    root.dispatchEvent(event)
+  })
+}
+
+function showImportPopover(
+  rootNode: ShadowRoot | Document,
+  root: HTMLElement,
+  ctx: Ctx,
+  importItems: ('markdown' | 'word' | 'pdf')[]
+) {
+  const button = root.querySelector('button[data-key="import"]') as HTMLElement
+  if (!button) return
+
+  const existing = activeImportPopovers.get(button)
+  if (existing) {
+    ;(existing as any).closePopover()
+    return
+  }
+
+  ensureStyles(rootNode)
+
+  const container = rootNode instanceof ShadowRoot ? rootNode : document.body
+  const popover = document.createElement('div')
+  popover.className = 'import-popover'
+
+  let popoverHtml = ''
+  if (importItems.includes('markdown')) {
+    popoverHtml += `
+      <div class="import-popover-item" id="import-md-btn">
+        <span class="import-popover-item-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>
+        </span>
+        <span>导入 MD</span>
+      </div>
+    `
+  }
+  if (importItems.includes('word')) {
+    popoverHtml += `
+      <div class="import-popover-item" id="import-word-btn">
+        <span class="import-popover-item-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+        </span>
+        <span>导入 WORD</span>
+      </div>
+    `
+  }
+  if (importItems.includes('pdf')) {
+    popoverHtml += `
+      <div class="import-popover-item" id="import-pdf-btn">
+        <span class="import-popover-item-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
+        </span>
+        <span>导入 PDF</span>
+      </div>
+    `
+  }
+  popover.innerHTML = popoverHtml
+
+  container.appendChild(popover)
+  activeImportPopovers.set(button, popover)
+
+  const updatePosition = () => {
+    const rect = button.getBoundingClientRect()
+    popover.style.top = `${rect.bottom + 4}px`
+    popover.style.left = `${rect.left + (rect.width - 140) / 2}px`
+  }
+
+  updatePosition()
+
+  requestAnimationFrame(() => {
+    popover.classList.add('show')
+  })
+
+  const closePopover = () => {
+    popover.classList.remove('show')
+    activeImportPopovers.delete(button)
+    container.removeEventListener('pointerdown', handleContainerClick, true)
+    document.removeEventListener('pointerdown', handleOuterClick, true)
+    window.removeEventListener('resize', updatePosition)
+    popover.addEventListener(
+      'transitionend',
+      () => {
+        popover.remove()
+      },
+      { once: true }
+    )
+  }
+  ;(popover as any).closePopover = closePopover
+
+  const handleContainerClick = (e: Event) => {
+    const target = e.target as HTMLElement
+    if (
+      !popover.contains(target) &&
+      target !== button &&
+      !button.contains(target)
+    ) {
+      closePopover()
+    }
+  }
+
+  const handleOuterClick = (e: Event) => {
+    const target = e.target as HTMLElement
+    if (target !== root && !root.contains(target)) {
+      closePopover()
+    }
+  }
+
+  popover.addEventListener('pointerdown', (e) => {
+    e.stopPropagation()
+  })
+
+  container.addEventListener('pointerdown', handleContainerClick, true)
+  document.addEventListener('pointerdown', handleOuterClick, true)
+  window.addEventListener('resize', updatePosition)
+
+  popover.querySelector('#import-md-btn')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    closePopover()
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.md'
+    input.onchange = (evt) => {
+      const file = (evt.target as HTMLInputElement).files?.[0]
+      if (!file) return
+      file
+        .text()
+        .then((text) => {
+          replaceAll(text)(ctx)
+
+          const event = new CustomEvent('import-click', {
+            detail: { type: 'markdown', file },
+            bubbles: true,
+            composed: true,
+          })
+          root.dispatchEvent(event)
+        })
+        .catch((err) => {
+          console.error('Failed to read file:', err)
+        })
+    }
+    input.click()
+  })
+
+  popover.querySelector('#import-word-btn')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    closePopover()
+    const event = new CustomEvent('import-click', {
+      detail: { type: 'word' },
+      bubbles: true,
+      composed: true,
+    })
+    root.dispatchEvent(event)
+  })
+
+  popover.querySelector('#import-pdf-btn')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    closePopover()
+    const event = new CustomEvent('import-click', {
+      detail: { type: 'pdf' },
+      bubbles: true,
+      composed: true,
+    })
+    root.dispatchEvent(event)
+  })
+}

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

@@ -60,8 +60,10 @@ export interface FixedToolbarConfig {
   showHistory?: boolean
   showExport?: boolean
   onExport?: (markdown: string, ctx: Ctx) => void
+  exportItems?: ('markdown' | 'word' | 'pdf')[]
   showImport?: boolean
   onImport?: (replaceContent: (markdown: string) => void, ctx: Ctx) => void
+  importItems?: ('markdown' | 'word' | 'pdf')[]
   useLocalStorage?: boolean
   id?: string
   outlineVisible?: boolean