@dxpos/markdown 0.0.1

package/dist/editor/video-menu/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2, Video } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+/** 工具栏视频菜单：上传文件或粘贴链接 */
+export const VideoMenu = ({ open, uploading, error, onOpenChange, onUpload, onSubmitUrl }) => {
+    const rootRef = useRef(null);
+    const inputId = useId();
+    const [url, setUrl] = useState("");
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                onOpenChange(false);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onOpenChange(false);
+            }
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open, onOpenChange]);
+    return (_jsxs("div", { className: "wsmd-video-menu", ref: rootRef, children: [_jsx("button", { className: "wsmd-icon-btn wsmd-icon-btn--ghost wsmd-toolbar__btn", type: "button", title: uploading ? "上传中" : "视频", "aria-label": uploading ? "上传中" : "视频", "aria-expanded": open, "aria-haspopup": "dialog", disabled: uploading, onClick: () => onOpenChange(!open), children: uploading ? _jsx(Loader2, { className: "wsmd-icon-btn__spin", "aria-hidden": true }) : _jsx(Video, { "aria-hidden": true }) }), open ? (_jsxs("div", { className: "wsmd-video-menu__panel", role: "dialog", "aria-label": "\u89C6\u9891", children: [_jsx("button", { className: "wsmd-video-menu__upload", type: "button", onClick: onUpload, children: "\u4E0A\u4F20\u89C6\u9891" }), _jsxs("form", { className: "wsmd-video-menu__form", onSubmit: (event) => {
+                            event.preventDefault();
+                            onSubmitUrl(url);
+                        }, children: [_jsx("label", { className: "wsmd-video-menu__label", htmlFor: inputId, children: "\u89C6\u9891\u94FE\u63A5" }), _jsx("input", { id: inputId, className: "wsmd-video-menu__input", type: "url", value: url, placeholder: "mp4\u3001webm\u3001YouTube\u3001Bilibili", onChange: (event) => setUrl(event.target.value) }), error ? _jsx("p", { className: "wsmd-video-menu__error", children: error }) : null, _jsx("button", { className: "wsmd-video-menu__submit", type: "submit", children: "\u63D2\u5165" })] })] })) : null] }));
+};

package/dist/editor/video-url.d.ts

@@ -0,0 +1,8 @@
+export type VideoProvider = "file" | "youtube" | "bilibili";
+export type VideoEmbedAttrs = {
+    provider: VideoProvider;
+    src: string;
+};
+/** 把用户粘贴的地址解析成可嵌入的视频节点属性 */
+export declare function parseVideoUrl(input: string): VideoEmbedAttrs | null;
+//# sourceMappingURL=video-url.d.ts.map

package/dist/editor/video-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-url.d.ts","sourceRoot":"","sources":["../../src/editor/video-url.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,aAAa,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AA0FF,4BAA4B;AAC5B,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,GAAG,IAAI,CAkBnE"}

package/dist/editor/video-url.js

@@ -0,0 +1,102 @@
+const YOUTUBE_ID = /^[\w-]{11}$/;
+const BVID = /^BV[\w]+$/i;
+function httpUrl(input) {
+    const trimmed = input.trim();
+    if (!trimmed) {
+        return null;
+    }
+    let url;
+    try {
+        url = new URL(trimmed);
+    }
+    catch {
+        return null;
+    }
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+        return null;
+    }
+    return url;
+}
+function bareHost(url) {
+    return url.hostname.replace(/^www\./, "").toLowerCase();
+}
+function youtubeId(url) {
+    const host = bareHost(url);
+    if (host === "youtu.be") {
+        const id = url.pathname.split("/").filter(Boolean)[0];
+        return id && YOUTUBE_ID.test(id) ? id : null;
+    }
+    if (host !== "youtube.com" &&
+        host !== "m.youtube.com" &&
+        host !== "music.youtube.com" &&
+        host !== "youtube-nocookie.com") {
+        return null;
+    }
+    if (url.pathname === "/watch") {
+        const id = url.searchParams.get("v");
+        return id && YOUTUBE_ID.test(id) ? id : null;
+    }
+    const parts = url.pathname.split("/").filter(Boolean);
+    if ((parts[0] === "embed" || parts[0] === "shorts") && parts[1] && YOUTUBE_ID.test(parts[1])) {
+        return parts[1];
+    }
+    return null;
+}
+function bilibiliEmbed(url) {
+    const host = bareHost(url);
+    if (host === "bilibili.com" || host === "m.bilibili.com") {
+        const bv = url.pathname.match(/\/video\/(BV[\w]+)/i);
+        if (bv?.[1] && BVID.test(bv[1])) {
+            return {
+                provider: "bilibili",
+                src: `https://player.bilibili.com/player.html?bvid=${bv[1]}&autoplay=0`,
+            };
+        }
+        const av = url.pathname.match(/\/video\/av(\d+)/i);
+        if (av?.[1]) {
+            return {
+                provider: "bilibili",
+                src: `https://player.bilibili.com/player.html?aid=${av[1]}&autoplay=0`,
+            };
+        }
+        return null;
+    }
+    if (host !== "player.bilibili.com") {
+        return null;
+    }
+    const bvid = url.searchParams.get("bvid");
+    if (bvid && BVID.test(bvid)) {
+        return {
+            provider: "bilibili",
+            src: `https://player.bilibili.com/player.html?bvid=${bvid}&autoplay=0`,
+        };
+    }
+    const aid = url.searchParams.get("aid");
+    if (aid && /^\d+$/.test(aid)) {
+        return {
+            provider: "bilibili",
+            src: `https://player.bilibili.com/player.html?aid=${aid}&autoplay=0`,
+        };
+    }
+    return null;
+}
+/** 把用户粘贴的地址解析成可嵌入的视频节点属性 */
+export function parseVideoUrl(input) {
+    const url = httpUrl(input);
+    if (!url) {
+        return null;
+    }
+    const youtube = youtubeId(url);
+    if (youtube) {
+        return { provider: "youtube", src: `https://www.youtube.com/embed/${youtube}` };
+    }
+    const bilibili = bilibiliEmbed(url);
+    if (bilibili) {
+        return bilibili;
+    }
+    const path = decodeURIComponent(url.pathname).toLowerCase();
+    if (path.endsWith(".mp4") || path.endsWith(".webm")) {
+        return { provider: "file", src: url.toString() };
+    }
+    return null;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Editor } from "./editor";
+export { Viewer } from "./view";
+export { DEFAULT_TOOLBAR, type ToolbarItem, type UploadFile, type UploadFileResult, type UploadFileType } from "./editor/toolbar/items";
+export type { MarkdownPlugin } from "./plugin";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxI,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+"use client";
+export { Editor } from "./editor";
+export { Viewer } from "./view";
+export { DEFAULT_TOOLBAR } from "./editor/toolbar/items";

package/dist/plugin.d.ts

@@ -0,0 +1,6 @@
+/** Viewer 插件：remark 或 rehype 二选一 */
+export type MarkdownPlugin = {
+    remark?: (this: unknown, ...args: never[]) => unknown;
+    rehype?: (this: unknown, ...args: never[]) => unknown;
+};
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,CAAC;CACvD,CAAC"}

package/dist/plugin.js

@@ -0,0 +1 @@
+export {};

package/dist/plugins/gfm/index.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownPlugin } from "../../plugin";
+export declare const gfm: MarkdownPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/plugins/gfm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/gfm/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,GAAG,EAAE,cAAsC,CAAC"}

package/dist/plugins/gfm/index.js

@@ -0,0 +1,2 @@
+import remarkGfm from "remark-gfm";
+export const gfm = { remark: remarkGfm };

package/dist/plugins/highlight/index.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownPlugin } from "../../plugin";
+export declare const highlight: MarkdownPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/plugins/highlight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/highlight/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,SAAS,EAAE,cAA4C,CAAC"}

package/dist/plugins/highlight/index.js

@@ -0,0 +1,2 @@
+import rehypeHighlight from "rehype-highlight";
+export const highlight = { rehype: rehypeHighlight };

package/dist/plugins/raw/index.d.ts

@@ -0,0 +1,3 @@
+import type { MarkdownPlugin } from "../../plugin";
+export declare const raw: MarkdownPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/plugins/raw/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/raw/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,GAAG,EAAE,cAAsC,CAAC"}

package/dist/plugins/raw/index.js

@@ -0,0 +1,2 @@
+import rehypeRaw from "rehype-raw";
+export const raw = { rehype: rehypeRaw };

package/dist/view/index.d.ts

@@ -0,0 +1,9 @@
+import type { MarkdownPlugin } from "../plugin";
+interface ViewerProps {
+    content: string;
+    plugins?: MarkdownPlugin[];
+    className?: string;
+}
+export declare const Viewer: import("react").ForwardRefExoticComponent<ViewerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/view/index.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Markdown from "react-markdown";
+export const Viewer = forwardRef(({ content, plugins = [], className }, ref) => {
+    const remarkPlugins = [];
+    const rehypePlugins = [];
+    for (const plugin of plugins) {
+        if (plugin.remark) {
+            remarkPlugins.push(plugin.remark);
+        }
+        if (plugin.rehype) {
+            rehypePlugins.push(plugin.rehype);
+        }
+    }
+    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 }) }));
+});

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@dxpos/markdown",
+  "version": "0.0.1",
+  "description": "Markdown 编辑器与渲染器",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css",
+    "./plugins/gfm": {
+      "types": "./dist/plugins/gfm/index.d.ts",
+      "import": "./dist/plugins/gfm/index.js"
+    },
+    "./plugins/raw": {
+      "types": "./dist/plugins/raw/index.d.ts",
+      "import": "./dist/plugins/raw/index.js"
+    },
+    "./plugins/highlight": {
+      "types": "./dist/plugins/highlight/index.d.ts",
+      "import": "./dist/plugins/highlight/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "styles.css",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.30.5",
+    "@tiptap/extension-color": "3.30.5",
+    "@tiptap/extension-highlight": "^3.30.5",
+    "@tiptap/extension-image": "^3.30.5",
+    "@tiptap/extension-link": "^3.30.5",
+    "@tiptap/extension-placeholder": "^3.30.5",
+    "@tiptap/extension-table": "^3.30.5",
+    "@tiptap/extension-task-item": "^3.30.5",
+    "@tiptap/extension-task-list": "^3.30.5",
+    "@tiptap/extension-text-align": "^3.30.5",
+    "@tiptap/extension-text-style": "3.30.5",
+    "@tiptap/pm": "^3.30.5",
+    "@tiptap/react": "^3.30.5",
+    "@tiptap/starter-kit": "^3.30.5",
+    "@tiptap/suggestion": "^3.30.5",
+    "highlight.js": "^11.12.0",
+    "lucide-react": "^1.37.0",
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "tiptap-markdown": "^0.9.0"
+  },
+  "license": "MIT"
+}