@dxpos/markdown 0.0.1 → 0.0.2

package/dist/view/image-lightbox/index.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from "react";
+export type PreviewImage = {
+    src: string;
+    alt: string;
+};
+interface ImageLightboxProps {
+    images: PreviewImage[];
+    index: number;
+    onIndexChange: (index: number) => void;
+    onClose: () => void;
+}
+/** 全屏查看预览中的图片，并在文档顺序内切换 */
+export declare const ImageLightbox: FC<ImageLightboxProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/view/image-lightbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/view/image-lightbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAmBF,UAAU,kBAAkB;IAC1B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,2BAA2B;AAC3B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4EhD,CAAC"}

package/dist/view/image-lightbox/index.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+const keyHandlers = new Set();
+// 模块加载时挂到 window 捕获阶段，早于页面弹窗的 Esc 监听
+if (typeof window !== "undefined") {
+    window.addEventListener("keydown", (event) => {
+        for (const handler of keyHandlers) {
+            handler(event);
+        }
+    }, true);
+}
+/** 全屏查看预览中的图片，并在文档顺序内切换 */
+export const ImageLightbox = ({ images, index, onIndexChange, onClose }) => {
+    const current = images[index];
+    const showNav = images.length > 1;
+    useEffect(() => {
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previous;
+        };
+    }, []);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key !== "Escape" && event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+                return;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (event.key === "Escape") {
+                onClose();
+                return;
+            }
+            if (event.key === "ArrowLeft" && index > 0) {
+                onIndexChange(index - 1);
+                return;
+            }
+            if (event.key === "ArrowRight" && index < images.length - 1) {
+                onIndexChange(index + 1);
+            }
+        };
+        keyHandlers.add(onKeyDown);
+        return () => {
+            keyHandlers.delete(onKeyDown);
+        };
+    }, [images.length, index, onClose, onIndexChange]);
+    if (!current) {
+        return null;
+    }
+    return createPortal(_jsxs("div", { className: "wsmd-image-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "\u56FE\u7247\u9884\u89C8", children: [_jsx("button", { className: "wsmd-image-lightbox__backdrop", type: "button", "aria-label": "\u5173\u95ED\u9884\u89C8", onClick: onClose }), _jsx("button", { className: "wsmd-image-lightbox__close", type: "button", "aria-label": "\u5173\u95ED", onClick: onClose, children: _jsx(X, {}) }), showNav ? (_jsx("button", { className: "wsmd-image-lightbox__nav wsmd-image-lightbox__nav--prev", type: "button", "aria-label": "\u4E0A\u4E00\u5F20", disabled: index === 0, onClick: () => onIndexChange(index - 1), children: _jsx(ChevronLeft, {}) })) : null, _jsx("img", { className: "wsmd-image-lightbox__image", src: current.src, alt: current.alt }), showNav ? (_jsx("button", { className: "wsmd-image-lightbox__nav wsmd-image-lightbox__nav--next", type: "button", "aria-label": "\u4E0B\u4E00\u5F20", disabled: index === images.length - 1, onClick: () => onIndexChange(index + 1), children: _jsx(ChevronRight, {}) })) : null, _jsxs("p", { className: "wsmd-image-lightbox__counter", children: [index + 1, " / ", images.length] })] }), document.body);
+};

package/dist/view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/view/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,wGAmBjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/view/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,eAAO,MAAM,MAAM,wGAkDjB,CAAC"}

package/dist/view/index.js

@@ -1,8 +1,28 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
 import Markdown from "react-markdown";
+import { ImageLightbox } from "./image-lightbox";
+const previewSrc = (image) => {
+    if (!image.getAttribute("src")) {
+        return "";
+    }
+    return image.currentSrc || image.src;
+};
+const previewImages = (root) => {
+    return Array.from(root.querySelectorAll("img")).flatMap((node) => {
+        if (!(node instanceof HTMLImageElement) || node.closest("a")) {
+            return [];
+        }
+        const src = previewSrc(node);
+        if (!src) {
+            return [];
+        }
+        return [{ node, image: { src, alt: node.alt } }];
+    });
+};
 export const Viewer = forwardRef(({ content, plugins = [], className }, ref) => {
+    const [gallery, setGallery] = useState(null);
     const remarkPlugins = [];
     const rehypePlugins = [];
     for (const plugin of plugins) {
@@ -13,6 +33,25 @@ export const Viewer = forwardRef(({ content, plugins = [], className }, ref) =>
             rehypePlugins.push(plugin.rehype);
         }
     }
+    useEffect(() => {
+        setGallery(null);
+    }, [content]);
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const image = target.closest("img");
+        if (!(image instanceof HTMLImageElement) || !event.currentTarget.contains(image) || image.closest("a")) {
+            return;
+        }
+        const images = previewImages(event.currentTarget);
+        const index = images.findIndex((item) => item.node === image);
+        if (index < 0) {
+            return;
+        }
+        setGallery({ images: images.map((item) => item.image), index });
+    };
     const rootClass = className ? `wsmd-markdown-body ${className}` : "wsmd-markdown-body";
-    return (_jsx("div", { ref: ref, className: rootClass, children: _jsx(Markdown, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, children: content }) }));
+    return (_jsxs("div", { ref: ref, className: rootClass, onClick: onClick, children: [_jsx(Markdown, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, children: content }), gallery ? (_jsx(ImageLightbox, { images: gallery.images, index: gallery.index, onIndexChange: (index) => setGallery({ images: gallery.images, index }), onClose: () => setGallery(null) })) : null] }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxpos/markdown",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Markdown 编辑器与渲染器",
   "type": "module",
   "main": "./dist/index.js",

package/styles.css

@@ -303,6 +303,105 @@
   border-radius: 8px;
 }
 
+.wsmd-markdown-body img {
+  cursor: zoom-in;
+}
+
+.wsmd-markdown-body a img,
+.wsmd-tiptap img {
+  cursor: auto;
+}
+
+.wsmd-image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wsmd-image-lightbox__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  padding: 0;
+  background: rgb(0 0 0 / 72%);
+  cursor: zoom-out;
+}
+
+.wsmd-image-lightbox__image {
+  position: relative;
+  z-index: 1;
+  max-width: calc(100% - 128px);
+  max-height: calc(100% - 96px);
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.wsmd-image-lightbox__close,
+.wsmd-image-lightbox__nav {
+  position: absolute;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 45%);
+  color: #fff;
+  cursor: pointer;
+}
+
+.wsmd-image-lightbox__close:hover,
+.wsmd-image-lightbox__nav:hover:not(:disabled) {
+  background: rgb(255 255 255 / 20%);
+}
+
+.wsmd-image-lightbox__nav:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.wsmd-image-lightbox__close svg,
+.wsmd-image-lightbox__nav svg {
+  width: 20px;
+  height: 20px;
+}
+
+.wsmd-image-lightbox__close {
+  top: 16px;
+  right: 16px;
+}
+
+.wsmd-image-lightbox__nav {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.wsmd-image-lightbox__nav--prev {
+  left: 16px;
+}
+
+.wsmd-image-lightbox__nav--next {
+  right: 16px;
+}
+
+.wsmd-image-lightbox__counter {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  z-index: 2;
+  margin: 0;
+  transform: translateX(-50%);
+  color: #fff;
+  font-family: var(--wsmd-font-mono), ui-monospace, monospace;
+  font-size: 13px;
+}
+
 .wsmd-markdown-editor__loading {
   padding: 20px 24px;
   color: var(--wsmd-muted);