mardora 1.2.0 → 1.2.2

package/dist/{chunk-3OCUX4OO.js → chunk-SMHHXYOS.js}

@@ -3580,7 +3580,7 @@ function createMediaPreviewButton(ownerDocument, options) {
 }
 function openMediaLightbox(ownerDocument, options) {
   ownerDocument.querySelector(".cm-mardora-media-lightbox")?.remove();
-  const mountPoint = options.returnFocus?.closest(".cm-editor") ?? ownerDocument.body;
+  const mountPoint = options.returnFocus?.closest(".cm-editor, .mardora-preview") ?? ownerDocument.body;
   const root = ownerDocument.createElement("div");
   root.className = "cm-mardora-media-lightbox";
   root.setAttribute("role", "dialog");
@@ -3795,6 +3795,15 @@ var imageMarkDecorations = {
 };
 var imageWidthAttributePattern = /^(\s*)\{width=(\d+)\}/;
 var minImageWidth = 120;
+var imageWidgetEditorSelectionEventTypes = /* @__PURE__ */ new Set([
+  "mousedown",
+  "mouseup",
+  "mousemove",
+  "pointerdown",
+  "pointermove",
+  "pointerup"
+]);
+var previewImageIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="M9 21H3v-6"></path><path d="m3 21 7-7"></path></svg>';
 function parseImageMarkdown(content) {
   const trimmed = content.trim();
   const widthMatch = trimmed.match(/\{width=(\d+)\}$/);
@@ -3853,6 +3862,25 @@ function resolveImageDeleteChange(input) {
   const range = readImageMarkdownRange(input.doc, input.from, input.to);
   return { from: input.from, to: range.to, insert: "" };
 }
+function bindImagePreviewButtons(root) {
+  const onClick = (event) => {
+    const target = event.target && typeof event.target.closest === "function" ? event.target : null;
+    const previewButton = target?.closest(".cm-mardora-image-preview-button[data-src]");
+    if (!previewButton || !root.contains(previewButton)) return;
+    consumeMediaLightboxTrigger(event);
+    openMediaLightbox(previewButton.ownerDocument, {
+      content: {
+        kind: "image",
+        src: previewButton.dataset.src ?? "",
+        alt: previewButton.dataset.alt ?? "",
+        ...previewButton.dataset.title ? { title: previewButton.dataset.title } : {}
+      },
+      returnFocus: previewButton
+    });
+  };
+  root.addEventListener("click", onClick);
+  return () => root.removeEventListener("click", onClick);
+}
 var ImageWidget = class extends WidgetType {
   constructor(url, alt, from, imageTo, to, width, title) {
     super();
@@ -3937,9 +3965,8 @@ var ImageWidget = class extends WidgetType {
     return figure;
   }
   ignoreEvent(event) {
-    return !["click", "mousedown", "mouseup", "mousemove", "pointerdown", "pointermove", "pointerup"].includes(
-      event.type
-    );
+    if (imageWidgetEditorSelectionEventTypes.has(event.type)) return true;
+    return event.type !== "click";
   }
   createToolbar(view, figure) {
     const toolbar = figure.ownerDocument.createElement("div");
@@ -4049,10 +4076,16 @@ function clampImageWidth(width, maxWidth) {
   return Math.max(minImageWidth, Math.min(Math.round(width), maxWidth));
 }
 function resolveImageMaxWidth(view, figure) {
-  const content = figure.closest(".cm-content") ?? view.contentDOM ?? view.dom;
+  const content = figure.closest(".cm-line") ?? figure.closest(".cm-content") ?? view.contentDOM ?? view.dom;
   const width = content.getBoundingClientRect().width;
   return Math.max(minImageWidth, Math.round(width || figure.getBoundingClientRect().width || 800));
 }
+function renderPreviewImageButton(parsed, ctx) {
+  const titleDataAttr = parsed.title ? ` data-title="${ctx.sanitize(parsed.title)}"` : "";
+  return `<div class="cm-mardora-image-toolbar">
+    <button type="button" class="cm-mardora-image-tool-button cm-mardora-image-preview-button" aria-label="\u653E\u5927\u67E5\u770B\u56FE\u7247" title="\u653E\u5927\u67E5\u770B\u56FE\u7247" data-src="${ctx.sanitize(parsed.url)}" data-alt="${ctx.sanitize(parsed.alt)}"${titleDataAttr}>${previewImageIcon}</button>
+  </div>`;
+}
 var ImagePlugin = class extends DecorationPlugin {
   name = "image";
   version = "1.0.0";
@@ -4212,9 +4245,11 @@ var ImagePlugin = class extends DecorationPlugin {
     const altAttr = ctx.sanitize(parsed.alt);
     const titleAttr = parsed.title ? ` title="${ctx.sanitize(parsed.title)}"` : "";
     const ariaLabel = parsed.title ? ` aria-label="${ctx.sanitize(parsed.title)}"` : "";
-    const widthStyle = parsed.width ? ` style="width: ${parsed.width}px;"` : "";
-    let html = `<figure class="cm-mardora-image-figure" role="figure"${ariaLabel}>`;
-    html += `<img class="cm-mardora-image" src="${ctx.sanitize(parsed.url)}" alt="${altAttr}"${titleAttr}${widthStyle} loading="lazy" decoding="async" />`;
+    const figureWidthStyle = parsed.width ? ` style="width: ${parsed.width}px;"` : "";
+    const imageWidthStyle = parsed.width ? ` style="width: 100%;"` : "";
+    let html = `<figure class="cm-mardora-image-figure" role="figure"${ariaLabel}${figureWidthStyle}>`;
+    html += `<img class="cm-mardora-image" src="${ctx.sanitize(parsed.url)}" alt="${altAttr}"${titleAttr}${imageWidthStyle} loading="lazy" decoding="async" />`;
+    html += renderPreviewImageButton(parsed, ctx);
     if (parsed.title) {
       html += `<figcaption class="cm-mardora-image-caption">${ctx.sanitize(parsed.title)}</figcaption>`;
     }
@@ -4260,7 +4295,9 @@ var imageTheme = createTheme({
       alignItems: "start",
       width: "100%",
       maxWidth: "100%",
-      padding: "0"
+      margin: "0",
+      padding: "0",
+      position: "relative"
     },
     ".cm-mardora-image-toolbar": {
       position: "absolute",
@@ -5124,7 +5161,7 @@ var codePluginTheme = createTheme({
     // Inline code
     ".cm-mardora-code-inline": {
       fontFamily: "var(--font-jetbrains-mono, monospace)",
-      fontSize: "0.9rem",
+      fontSize: "0.9em",
       backgroundColor: "rgba(0, 0, 0, 0.05)",
       padding: "0.1rem 0.25rem",
       border: "1px solid var(--color-border)",
@@ -5170,12 +5207,11 @@ var codePluginTheme = createTheme({
       alignItems: "center",
       gap: "0.2rem",
       position: "absolute",
-      top: "50%",
+      top: "0.5rem",
       right: "0.45rem",
       zIndex: "20",
       opacity: "0",
       pointerEvents: "none",
-      transform: "translateY(-50%)",
       transition: "opacity 0.12s ease",
       color: "var(--color-text, inherit)",
       fontFamily: "var(--font-sans, system-ui, sans-serif)",
@@ -5604,6 +5640,7 @@ var codeLanguageOptions = [
   ["JavaScript", "javascript"],
   ["JSON", "json"],
   ["Markdown", "markdown"],
+  ["Mermaid", "mermaid"],
   ["Python", "python"],
   ["Ruby", "ruby"],
   ["Rust", "rust"],
@@ -5630,6 +5667,7 @@ var codeLanguageAliases = {
   js: "JavaScript",
   json: "JSON",
   markdown: "Markdown",
+  mermaid: "Mermaid",
   md: "Markdown",
   python: "Python",
   py: "Python",
@@ -7685,6 +7723,6 @@ var essentialPlugins = [
 ];
 var allPlugins = [...essentialPlugins];
 
-export { CODE_COPY_SUCCESS_ICON, CodePlugin, EmojiPlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, TablePlugin, allPlugins, bindCodeCopyButtons, copyCodeTextToClipboard, decodeCodeCopyPayload, encodeCodeCopyPayload, essentialPlugins, resolveCalloutTitleInputTarget, resolveCalloutTypeChange };
-//# sourceMappingURL=chunk-3OCUX4OO.js.map
-//# sourceMappingURL=chunk-3OCUX4OO.js.map
+export { CODE_COPY_SUCCESS_ICON, CodePlugin, EmojiPlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, TablePlugin, allPlugins, bindCodeCopyButtons, bindImagePreviewButtons, copyCodeTextToClipboard, decodeCodeCopyPayload, encodeCodeCopyPayload, essentialPlugins, resolveCalloutTitleInputTarget, resolveCalloutTypeChange };
+//# sourceMappingURL=chunk-SMHHXYOS.js.map
+//# sourceMappingURL=chunk-SMHHXYOS.js.map