@jvs-milkdown/crepe 1.2.25 → 1.2.26

package/lib/esm/index.js

@@ -7,7 +7,7 @@ import { $ctx, $nodeSchema, $view, $remark, $markAttr, $markSchema, $command, $p
 import { defineComponent, shallowRef, ref, computed, h, createApp, watchEffect, watch, onUnmounted, Fragment, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Icon } from '@jvs-milkdown/kit/component';
 import { blockConfig, block, BlockProvider } from '@jvs-milkdown/kit/plugin/block';
-import { commandsCtx, editorViewCtx, schemaCtx, editorCtx, EditorStatus, parserCtx, editorViewOptionsCtx, Editor, rootCtx, defaultValueCtx } from '@jvs-milkdown/kit/core';
+import { commandsCtx, editorViewCtx, schemaCtx, editorCtx, EditorStatus, rootCtx, parserCtx, editorViewOptionsCtx, Editor, defaultValueCtx } from '@jvs-milkdown/kit/core';
 import { findNodeInSelection, findParent, nodeRule } from '@jvs-milkdown/kit/prose';
 import { NodeSelection, TextSelection, Plugin, PluginKey, EditorState, AllSelection } from '@jvs-milkdown/kit/prose/state';
 import { computePosition, flip, shift, offset } from '@floating-ui/dom';
@@ -9096,7 +9096,17 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
       active: () => false,
       onRun: (ctx2) => {
         const markdown = getMarkdown()(ctx2);
-        if (_config == null ? void 0 : _config.onExport) {
+        const view = ctx2.get(editorViewCtx);
+        const root = ctx2.get(rootCtx);
+        const rootNode = view.dom.getRootNode();
+        if ((_config == null ? void 0 : _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 == null ? void 0 : _config.onExport) {
           _config.onExport(markdown, ctx2);
         } else {
           const blob = new Blob([markdown], {
@@ -9118,7 +9128,17 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
       icon: importIcon,
       active: () => false,
       onRun: (ctx2) => {
-        if (_config == null ? void 0 : _config.onImport) {
+        const view = ctx2.get(editorViewCtx);
+        const root = ctx2.get(rootCtx);
+        const rootNode = view.dom.getRootNode();
+        if ((_config == null ? void 0 : _config.importItems) && _config.importItems.length > 0) {
+          const importItems = _config.importItems;
+          if (importItems.length === 1) {
+            handleDirectImport(importItems[0], root, ctx2);
+          } else {
+            showImportPopover(rootNode, root, ctx2, importItems);
+          }
+        } else if (_config == null ? void 0 : _config.onImport) {
           _config.onImport((markdown) => replaceAll(markdown)(ctx2), ctx2);
         } else {
           const input = document.createElement("input");
@@ -9149,6 +9169,388 @@ function buildDefaultFixedToolbar(builder, _config, ctx) {
   });
   return builder.build();
 }
+const activeDownloadPopovers = /* @__PURE__ */ new WeakMap();
+const activeImportPopovers = /* @__PURE__ */ new WeakMap();
+const ensureStyles = (rootNode) => {
+  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, view, root) {
+  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, root, ctx) {
+  if (type === "markdown") {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".md";
+    input.onchange = (evt) => {
+      var _a;
+      const file = (_a = evt.target.files) == null ? void 0 : _a[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, root, view, markdown, exportItems) {
+  var _a, _b, _c;
+  const button = root.querySelector('button[data-key="export"]');
+  if (!button) return;
+  const existing = activeDownloadPopovers.get(button);
+  if (existing) {
+    existing.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>\u4E0B\u8F7D 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>\u4E0B\u8F7D 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>\u4E0B\u8F7D 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.closePopover = closePopover;
+  const handleContainerClick = (e) => {
+    const target = e.target;
+    if (!popover.contains(target) && target !== button && !button.contains(target)) {
+      closePopover();
+    }
+  };
+  const handleOuterClick = (e) => {
+    const target = e.target;
+    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);
+  (_a = popover.querySelector("#download-md-btn")) == null ? void 0 : _a.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);
+  });
+  (_b = popover.querySelector("#download-word-btn")) == null ? void 0 : _b.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);
+  });
+  (_c = popover.querySelector("#download-pdf-btn")) == null ? void 0 : _c.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, root, ctx, importItems) {
+  var _a, _b, _c;
+  const button = root.querySelector('button[data-key="import"]');
+  if (!button) return;
+  const existing = activeImportPopovers.get(button);
+  if (existing) {
+    existing.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>\u5BFC\u5165 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>\u5BFC\u5165 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>\u5BFC\u5165 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.closePopover = closePopover;
+  const handleContainerClick = (e) => {
+    const target = e.target;
+    if (!popover.contains(target) && target !== button && !button.contains(target)) {
+      closePopover();
+    }
+  };
+  const handleOuterClick = (e) => {
+    const target = e.target;
+    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);
+  (_a = popover.querySelector("#import-md-btn")) == null ? void 0 : _a.addEventListener("click", (e) => {
+    e.stopPropagation();
+    closePopover();
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".md";
+    input.onchange = (evt) => {
+      var _a2;
+      const file = (_a2 = evt.target.files) == null ? void 0 : _a2[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();
+  });
+  (_b = popover.querySelector("#import-word-btn")) == null ? void 0 : _b.addEventListener("click", (e) => {
+    e.stopPropagation();
+    closePopover();
+    const event = new CustomEvent("import-click", {
+      detail: { type: "word" },
+      bubbles: true,
+      composed: true
+    });
+    root.dispatchEvent(event);
+  });
+  (_c = popover.querySelector("#import-pdf-btn")) == null ? void 0 : _c.addEventListener("click", (e) => {
+    e.stopPropagation();
+    closePopover();
+    const event = new CustomEvent("import-click", {
+      detail: { type: "pdf" },
+      bubbles: true,
+      composed: true
+    });
+    root.dispatchEvent(event);
+  });
+}
 
 keepAlive(h);
 const DocumentHeader = defineComponent({