@dxpos/markdown 0.0.1

package/dist/editor/VideoMenu.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 function 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: "video-menu", ref: rootRef, children: [_jsx("button", { className: "icon-btn icon-btn--ghost 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: "icon-btn__spin", "aria-hidden": true }) : _jsx(Video, { "aria-hidden": true }) }), open ? (_jsxs("div", { className: "video-menu__panel", role: "dialog", "aria-label": "\u89C6\u9891", children: [_jsx("button", { className: "video-menu__upload", type: "button", onClick: onUpload, children: "\u4E0A\u4F20\u89C6\u9891" }), _jsxs("form", { className: "video-menu__form", onSubmit: (event) => {
+                            event.preventDefault();
+                            onSubmitUrl(url);
+                        }, children: [_jsx("label", { className: "video-menu__label", htmlFor: inputId, children: "\u89C6\u9891\u94FE\u63A5" }), _jsx("input", { id: inputId, className: "video-menu__input", type: "url", value: url, placeholder: "mp4\u3001webm\u3001YouTube\u3001Bilibili", onChange: (event) => setUrl(event.target.value) }), error ? _jsx("p", { className: "video-menu__error", children: error }) : null, _jsx("button", { className: "video-menu__submit", type: "submit", children: "\u63D2\u5165" })] })] })) : null] }));
+}

package/dist/editor/color-menu/index.d.ts

@@ -0,0 +1,19 @@
+import { type FC } from "react";
+export declare const PRESET_HIGHLIGHT_COLORS: readonly ["#fde047", "#fdba74", "#fca5a5", "#f9a8d4", "#d8b4fe", "#93c5fd", "#67e8f9", "#86efac", "#d4d4d8"];
+export declare const PRESET_TEXT_COLORS: readonly ["#e11d48", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#7c3aed", "#db2777", "#71717a"];
+interface ColorMenuProps {
+    label: string;
+    active?: boolean;
+    currentColor: string | null;
+    presets: readonly string[];
+    customPresets?: readonly string[];
+    onPick: (color: string) => void;
+    onRemember?: (color: string) => void;
+    onRemoveCustom?: (color: string) => void;
+    onClear: () => void;
+    children: React.ReactNode;
+}
+/** 工具栏颜色菜单：预设色板 + 任意色 + 清除 */
+export declare const ColorMenu: FC<ColorMenuProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/editor/color-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/color-menu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEpE,eAAO,MAAM,uBAAuB,8GAU1B,CAAC;AAEX,eAAO,MAAM,kBAAkB,8GAUrB,CAAC;AAEX,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAUD,8BAA8B;AAC9B,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAmJxC,CAAC"}

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

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eraser, X } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+export const PRESET_HIGHLIGHT_COLORS = [
+    "#fde047",
+    "#fdba74",
+    "#fca5a5",
+    "#f9a8d4",
+    "#d8b4fe",
+    "#93c5fd",
+    "#67e8f9",
+    "#86efac",
+    "#d4d4d8",
+];
+export const PRESET_TEXT_COLORS = [
+    "#e11d48",
+    "#ea580c",
+    "#ca8a04",
+    "#16a34a",
+    "#0891b2",
+    "#2563eb",
+    "#7c3aed",
+    "#db2777",
+    "#71717a",
+];
+const sameColor = (left, right) => {
+    return left?.toLowerCase() === right.toLowerCase();
+};
+const colorInputValue = (color) => {
+    return color && /^#[0-9a-fA-F]{6}$/i.test(color) ? color : "#000000";
+};
+/** 工具栏颜色菜单：预设色板 + 任意色 + 清除 */
+export const ColorMenu = ({ label, active, currentColor, presets, customPresets, onPick, onRemember, onRemoveCustom, onClear, children }) => {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const pickedRef = useRef(null);
+    const customId = useId();
+    const rememberPicked = () => {
+        if (!pickedRef.current) {
+            return;
+        }
+        onRemember?.(pickedRef.current);
+        pickedRef.current = null;
+    };
+    const close = () => {
+        rememberPicked();
+        setOpen(false);
+    };
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                close();
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                close();
+            }
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open, onRemember]);
+    return (_jsxs("div", { className: "wsmd-color-menu", ref: rootRef, children: [_jsxs("button", { className: `wsmd-icon-btn wsmd-icon-btn--ghost wsmd-toolbar__btn wsmd-color-menu__trigger${active ? " wsmd-toolbar__btn--active" : ""}`, type: "button", title: label, "aria-label": label, "aria-expanded": open, "aria-haspopup": "dialog", "aria-pressed": active, onClick: () => {
+                    if (open) {
+                        close();
+                        return;
+                    }
+                    setOpen(true);
+                }, children: [children, _jsx("span", { className: "wsmd-color-menu__bar", style: currentColor ? { background: currentColor } : undefined })] }), open ? (_jsxs("div", { className: "wsmd-color-menu__panel", role: "dialog", "aria-label": label, children: [_jsxs("div", { className: "wsmd-color-menu__section", children: [_jsx("p", { className: "wsmd-color-menu__caption", children: "\u9884\u8BBE" }), _jsxs("div", { className: "wsmd-color-menu__swatches", children: [presets.map((color) => (_jsx("button", { className: `wsmd-color-menu__swatch${sameColor(currentColor, color) ? " wsmd-color-menu__swatch--active" : ""}`, type: "button", title: color, "aria-label": color, style: { background: color }, onClick: () => {
+                                            onPick(color);
+                                            close();
+                                        } }, color))), _jsx("button", { className: "wsmd-color-menu__swatch wsmd-color-menu__swatch--clear", type: "button", title: "\u6E05\u9664", "aria-label": "\u6E05\u9664", onClick: () => {
+                                            onClear();
+                                            close();
+                                        }, children: _jsx(Eraser, { "aria-hidden": true }) })] })] }), customPresets && customPresets.length > 0 ? (_jsxs("div", { className: "wsmd-color-menu__section", children: [_jsx("p", { className: "wsmd-color-menu__caption", children: "\u81EA\u5B9A\u4E49" }), _jsx("div", { className: "wsmd-color-menu__swatches", children: customPresets.map((color) => (_jsxs("span", { className: "wsmd-color-menu__custom-swatch", children: [_jsx("button", { className: `wsmd-color-menu__swatch${sameColor(currentColor, color) ? " wsmd-color-menu__swatch--active" : ""}`, type: "button", title: color, "aria-label": color, style: { background: color }, onClick: () => {
+                                                onPick(color);
+                                                close();
+                                            } }), _jsx("button", { className: "wsmd-color-menu__swatch-remove", type: "button", title: "\u5220\u9664", "aria-label": `删除 ${color}`, onClick: () => onRemoveCustom?.(color), children: _jsx(X, { "aria-hidden": true }) })] }, color))) })] })) : null, _jsxs("label", { className: "wsmd-color-menu__custom", htmlFor: customId, children: [_jsx("span", { className: "wsmd-color-menu__caption", children: "\u4EFB\u610F" }), _jsx("input", { id: customId, className: "wsmd-color-menu__picker", type: "color", value: colorInputValue(currentColor), onChange: (event) => {
+                                    pickedRef.current = event.target.value;
+                                    onPick(event.target.value);
+                                }, onBlur: rememberPicked })] })] })) : null] }));
+};

package/dist/editor/color-menu/text-color-presets.d.ts

@@ -0,0 +1,9 @@
+export declare const TEXT_COLOR_PRESET_KEY = "kb-text-color-presets";
+export declare const TEXT_COLOR_PRESET_LIMIT = 16;
+export declare const normalizeTextColor: (color: string) => string | null;
+/** 记住自定义色：去重后追加，超过上限丢掉最早的；内置色不写入 */
+export declare const rememberCustomTextColor: (current: readonly string[], color: string, builtin: readonly string[]) => string[];
+export declare const removeCustomTextColor: (current: readonly string[], color: string) => string[];
+export declare const readCustomTextColors: () => string[];
+export declare const writeCustomTextColors: (colors: readonly string[]) => void;
+//# sourceMappingURL=text-color-presets.d.ts.map

package/dist/editor/color-menu/text-color-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-color-presets.d.ts","sourceRoot":"","sources":["../../../src/editor/color-menu/text-color-presets.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAC7D,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAI1C,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,kBAG/C,CAAC;AAEF,oCAAoC;AACpC,eAAO,MAAM,uBAAuB,GAAI,SAAS,SAAS,MAAM,EAAE,EAAE,OAAO,MAAM,EAAE,SAAS,SAAS,MAAM,EAAE,aAc5G,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,SAAS,SAAS,MAAM,EAAE,EAAE,OAAO,MAAM,aAM9E,CAAC;AAEF,eAAO,MAAM,oBAAoB,gBAYhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,SAAS,MAAM,EAAE,SAE9D,CAAC"}

package/dist/editor/color-menu/text-color-presets.js

@@ -0,0 +1,46 @@
+export const TEXT_COLOR_PRESET_KEY = "kb-text-color-presets";
+export const TEXT_COLOR_PRESET_LIMIT = 16;
+const HEX = /^#[0-9a-f]{6}$/;
+export const normalizeTextColor = (color) => {
+    const value = color.trim().toLowerCase();
+    return HEX.test(value) ? value : null;
+};
+/** 记住自定义色：去重后追加，超过上限丢掉最早的；内置色不写入 */
+export const rememberCustomTextColor = (current, color, builtin) => {
+    const normalized = normalizeTextColor(color);
+    if (!normalized) {
+        return [...current];
+    }
+    if (builtin.some((item) => item.toLowerCase() === normalized)) {
+        return [...current];
+    }
+    const next = current.filter((item) => item !== normalized);
+    next.push(normalized);
+    if (next.length <= TEXT_COLOR_PRESET_LIMIT) {
+        return next;
+    }
+    return next.slice(next.length - TEXT_COLOR_PRESET_LIMIT);
+};
+export const removeCustomTextColor = (current, color) => {
+    const normalized = normalizeTextColor(color);
+    if (!normalized) {
+        return [...current];
+    }
+    return current.filter((item) => item !== normalized);
+};
+export const readCustomTextColors = () => {
+    const raw = localStorage.getItem(TEXT_COLOR_PRESET_KEY);
+    if (!raw) {
+        return [];
+    }
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+        return [];
+    }
+    return parsed
+        .filter((item) => typeof item === "string" && HEX.test(item))
+        .slice(-TEXT_COLOR_PRESET_LIMIT);
+};
+export const writeCustomTextColors = (colors) => {
+    localStorage.setItem(TEXT_COLOR_PRESET_KEY, JSON.stringify(colors));
+};

package/dist/editor/index.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from "react";
+import { type ToolbarItem, type UploadFile } from "./toolbar/items";
+interface EditorProps {
+    content: string;
+    onChange: (markdown: string) => void;
+    onError: (message: string) => void;
+    uploadFile: UploadFile;
+    toolbar?: readonly ToolbarItem[];
+}
+export declare const Editor: FC<EditorProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editor/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAA4D,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1F,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,UAAU,EAAuB,MAAM,iBAAiB,CAAC;AAI1G,UAAU,WAAW;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;CAClC;AA4ID,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAyPlC,CAAC"}

package/dist/editor/index.js

@@ -0,0 +1,314 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Color from "@tiptap/extension-text-style/color";
+import { FontFamily } from "@tiptap/extension-text-style/font-family";
+import { FontSize } from "@tiptap/extension-text-style/font-size";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import { TableKit } from "@tiptap/extension-table";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextAlign from "@tiptap/extension-text-align";
+import { LineHeight } from "@tiptap/extension-text-style/line-height";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { NodeSelection } from "@tiptap/pm/state";
+import { GripVertical } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Markdown } from "tiptap-markdown";
+import { LetterSpacing } from "./letter-spacing";
+import { createSlashCommand } from "./slash-menu";
+import { Toolbar } from "./toolbar";
+import { DEFAULT_TOOLBAR } from "./toolbar/items";
+import { VideoEmbed } from "./video-embed";
+import { parseVideoUrl } from "./video-embed/video-url";
+const mediaFilesFrom = (data) => {
+    const files = data ? Array.from(data.files) : [];
+    return {
+        images: files.filter((file) => file.type.startsWith("image/")),
+        videos: files.filter((file) => file.type === "video/mp4" || file.type === "video/webm"),
+    };
+};
+const hasFilePayload = (data) => {
+    return Boolean(data?.types.includes("Files"));
+};
+/** 行首图片后紧跟内容或单换行时补成段落分隔，避免序列化后粘连 */
+const normalizeStandaloneImages = (markdown) => {
+    let current = markdown.replace(/\r\n/g, "\n");
+    let next = current.replace(/^(\s*)(!\[[^\]]*\]\([^)]*\))[ \t]*(?:\n(?!\n)|(?=\S))/gm, "$1$2\n\n");
+    while (next !== current) {
+        current = next;
+        next = current.replace(/^(\s*)(!\[[^\]]*\]\([^)]*\))[ \t]*(?:\n(?!\n)|(?=\S))/gm, "$1$2\n\n");
+    }
+    return next;
+};
+const uploadError = (type) => {
+    if (type === "video") {
+        return "上传视频失败";
+    }
+    if (type === "image") {
+        return "上传图片失败";
+    }
+    return "上传失败";
+};
+const BlockDragHandle = ({ editorDom, getEditor }) => {
+    const handleRef = useRef(null);
+    const nodePosRef = useRef(null);
+    useEffect(() => {
+        const handle = handleRef.current;
+        if (!handle) {
+            return;
+        }
+        const hide = () => {
+            handle.style.opacity = "0";
+            handle.style.pointerEvents = "none";
+            nodePosRef.current = null;
+        };
+        const onMove = (event) => {
+            const editor = getEditor();
+            if (!editor) {
+                return;
+            }
+            if (handle.contains(event.target)) {
+                return;
+            }
+            const pos = editor.view.posAtCoords({ left: event.clientX, top: event.clientY });
+            if (!pos) {
+                hide();
+                return;
+            }
+            const $pos = editor.state.doc.resolve(pos.inside >= 0 ? pos.inside : pos.pos);
+            if ($pos.depth < 1) {
+                hide();
+                return;
+            }
+            const nodePos = $pos.before(1);
+            const coords = editor.view.coordsAtPos(nodePos);
+            const editorRect = editor.view.dom.getBoundingClientRect();
+            handle.style.top = `${coords.top - editorRect.top + editor.view.dom.scrollTop}px`;
+            handle.style.opacity = "1";
+            handle.style.pointerEvents = "auto";
+            nodePosRef.current = nodePos;
+        };
+        const onLeave = (event) => {
+            if (handle.contains(event.relatedTarget)) {
+                return;
+            }
+            hide();
+        };
+        editorDom.addEventListener("mousemove", onMove);
+        editorDom.addEventListener("mouseleave", onLeave);
+        return () => {
+            editorDom.removeEventListener("mousemove", onMove);
+            editorDom.removeEventListener("mouseleave", onLeave);
+        };
+    }, [editorDom, getEditor]);
+    return (_jsx("button", { ref: handleRef, className: "wsmd-drag-handle", type: "button", draggable: true, "aria-label": "\u62D6\u62FD\u5757", title: "\u62D6\u62FD\u5757", onDragStart: (event) => {
+            const editor = getEditor();
+            const nodePos = nodePosRef.current;
+            if (!editor || nodePos === null) {
+                event.preventDefault();
+                return;
+            }
+            const selection = NodeSelection.create(editor.state.doc, nodePos);
+            editor.view.dispatch(editor.state.tr.setSelection(selection));
+            editor.view.dragging = { slice: selection.content(), move: true };
+            event.dataTransfer.setData("text/plain", selection.content().content.textBetween(0, selection.content().size));
+            event.dataTransfer.effectAllowed = "move";
+        }, onDragEnd: () => {
+            const editor = getEditor();
+            if (editor) {
+                editor.view.dragging = null;
+            }
+        }, children: _jsx(GripVertical, { "aria-hidden": true }) }));
+};
+export const Editor = ({ content, onChange, onError, uploadFile, toolbar = DEFAULT_TOOLBAR }) => {
+    const fileInputRef = useRef(null);
+    const videoInputRef = useRef(null);
+    const editorRef = useRef(null);
+    const uploadFileRef = useRef(uploadFile);
+    uploadFileRef.current = uploadFile;
+    const [uploading, setUploading] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [editorDom, setEditorDom] = useState(null);
+    const [videoOpen, setVideoOpen] = useState(false);
+    const [videoError, setVideoError] = useState(null);
+    const insertMediaFiles = useCallback(async (files, type, insert) => {
+        if (files.length === 0) {
+            return;
+        }
+        setUploading(true);
+        try {
+            for (const file of files) {
+                try {
+                    const uploaded = await uploadFileRef.current(file, type);
+                    if (!uploaded.url) {
+                        throw new Error(uploadError(type));
+                    }
+                    const current = editorRef.current;
+                    if (!current) {
+                        return;
+                    }
+                    insert(current, uploaded.url, file);
+                }
+                catch (error) {
+                    onError(error instanceof Error ? error.message : uploadError(type));
+                }
+            }
+        }
+        finally {
+            setUploading(false);
+        }
+    }, [onError]);
+    const insertImageFiles = useCallback((files) => insertMediaFiles(files, "image", (editor, url, file) => {
+        editor.chain().focus().setImage({ src: url, alt: file.name }).run();
+    }), [insertMediaFiles]);
+    const insertVideoFiles = useCallback((files) => insertMediaFiles(files, "video", (editor, url) => {
+        editor.chain().focus().setVideoEmbed({ src: url, provider: "file" }).run();
+    }), [insertMediaFiles]);
+    const openImagePicker = useCallback(() => {
+        fileInputRef.current?.click();
+    }, []);
+    const openVideoMenu = useCallback(() => {
+        setVideoError(null);
+        setVideoOpen(true);
+    }, []);
+    const openVideoPicker = useCallback(() => {
+        videoInputRef.current?.click();
+    }, []);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: [
+            StarterKit.configure({
+                link: false,
+                heading: { levels: [1, 2, 3, 4, 5, 6] },
+            }),
+            Placeholder.configure({
+                placeholder: "输入 / 唤起命令",
+            }),
+            Image,
+            VideoEmbed,
+            Link.configure({ openOnClick: false }),
+            TextAlign.configure({ types: ["heading", "paragraph"] }),
+            TextStyle,
+            Color,
+            FontFamily,
+            FontSize,
+            LineHeight,
+            LetterSpacing,
+            Highlight.configure({ multicolor: true }),
+            TableKit.configure({ table: { resizable: false } }),
+            TaskList,
+            TaskItem.configure({ nested: true }),
+            Markdown,
+            createSlashCommand(openImagePicker, openVideoMenu),
+        ],
+        content: normalizeStandaloneImages(content),
+        editorProps: {
+            attributes: { class: "wsmd-tiptap" },
+            handleDrop: (_view, event) => {
+                const { images, videos } = mediaFilesFrom(event.dataTransfer);
+                if (images.length === 0 && videos.length === 0) {
+                    return false;
+                }
+                event.preventDefault();
+                void (async () => {
+                    await insertImageFiles(images);
+                    await insertVideoFiles(videos);
+                })();
+                return true;
+            },
+            handlePaste: (_view, event) => {
+                const { images, videos } = mediaFilesFrom(event.clipboardData);
+                if (images.length === 0 && videos.length === 0) {
+                    return false;
+                }
+                event.preventDefault();
+                void (async () => {
+                    await insertImageFiles(images);
+                    await insertVideoFiles(videos);
+                })();
+                return true;
+            },
+        },
+        onCreate: ({ editor: next }) => {
+            onChange(normalizeStandaloneImages(next.storage.markdown.getMarkdown()));
+        },
+        onUpdate: ({ editor: next }) => {
+            onChange(normalizeStandaloneImages(next.storage.markdown.getMarkdown()));
+        },
+    });
+    editorRef.current = editor;
+    useEffect(() => {
+        if (editor) {
+            setEditorDom(editor.view.dom);
+        }
+    }, [editor]);
+    const getEditor = useCallback(() => editorRef.current, []);
+    const onEditorDragEnter = (event) => {
+        if (!hasFilePayload(event.dataTransfer)) {
+            return;
+        }
+        event.preventDefault();
+        setIsDragging(true);
+    };
+    const onEditorDragOver = (event) => {
+        if (!hasFilePayload(event.dataTransfer)) {
+            return;
+        }
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        setIsDragging(true);
+    };
+    const onEditorDragLeave = (event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) {
+            return;
+        }
+        setIsDragging(false);
+    };
+    const onEditorDrop = (event) => {
+        const { images, videos } = mediaFilesFrom(event.dataTransfer);
+        setIsDragging(false);
+        if (images.length === 0 && videos.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const current = editorRef.current;
+        if (current && current.view.dom.contains(event.target)) {
+            return;
+        }
+        void (async () => {
+            await insertImageFiles(images);
+            await insertVideoFiles(videos);
+        })();
+    };
+    if (!editor) {
+        return _jsx("p", { className: "wsmd-markdown-editor__loading", children: "\u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D\u2026" });
+    }
+    return (_jsxs("div", { className: `wsmd-markdown-editor${isDragging ? " wsmd-markdown-editor--dragging" : ""}`, onDragEnter: onEditorDragEnter, onDragOver: onEditorDragOver, onDragLeave: onEditorDragLeave, onDrop: onEditorDrop, children: [_jsx(Toolbar, { editor: editor, items: toolbar, uploading: uploading, videoOpen: videoOpen, videoError: videoError, onInsertImage: openImagePicker, onVideoOpenChange: setVideoOpen, onUploadVideo: openVideoPicker, onInsertVideoUrl: (url) => {
+                    const parsed = parseVideoUrl(url);
+                    if (!parsed) {
+                        setVideoError("无法识别的视频地址");
+                        return;
+                    }
+                    editor.chain().focus().setVideoEmbed(parsed).run();
+                    setVideoError(null);
+                    setVideoOpen(false);
+                } }), _jsxs("div", { className: "wsmd-markdown-editor__canvas", children: [editorDom ? _jsx(BlockDragHandle, { editorDom: editorDom, getEditor: getEditor }) : null, _jsx(EditorContent, { editor: editor, className: "wsmd-markdown-editor__content wsmd-markdown-body" })] }), _jsx("input", { ref: fileInputRef, className: "wsmd-markdown-editor__file", type: "file", accept: "image/*", onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    event.target.value = "";
+                    if (file) {
+                        void insertImageFiles([file]);
+                    }
+                } }), _jsx("input", { ref: videoInputRef, className: "wsmd-markdown-editor__file", type: "file", accept: "video/mp4,video/webm", onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    event.target.value = "";
+                    if (file) {
+                        setVideoOpen(false);
+                        void insertVideoFiles([file]);
+                    }
+                } })] }));
+};

package/dist/editor/letter-spacing/index.d.ts

@@ -0,0 +1,17 @@
+import { Extension } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        letterSpacing: {
+            setLetterSpacing: (letterSpacing: string) => ReturnType;
+            unsetLetterSpacing: () => ReturnType;
+        };
+    }
+}
+declare module "@tiptap/extension-text-style" {
+    interface TextStyleAttributes {
+        letterSpacing?: string | null;
+    }
+}
+/** 字间距，挂在 textStyle 上以便随 span style 写回 Markdown */
+export declare const LetterSpacing: Extension<any, any>;
+//# sourceMappingURL=index.d.ts.map

package/dist/editor/letter-spacing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/letter-spacing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAE3D,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,aAAa,EAAE;YACb,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,UAAU,CAAC;YACxD,kBAAkB,EAAE,MAAM,UAAU,CAAC;SACtC,CAAC;KACH;CACF;AAED,OAAO,QAAQ,8BAA8B,CAAC;IAC5C,UAAU,mBAAmB;QAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KAC/B;CACF;AAED,mDAAmD;AACnD,eAAO,MAAM,aAAa,qBA0CxB,CAAC"}

package/dist/editor/letter-spacing/index.js

@@ -0,0 +1,35 @@
+import { Extension, getStyleProperty } from "@tiptap/core";
+/** 字间距，挂在 textStyle 上以便随 span style 写回 Markdown */
+export const LetterSpacing = Extension.create({
+    name: "letterSpacing",
+    addOptions() {
+        return {
+            types: ["textStyle"],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    letterSpacing: {
+                        default: null,
+                        parseHTML: (element) => getStyleProperty(element, "letter-spacing") ?? element.style.letterSpacing,
+                        renderHTML: (attributes) => {
+                            if (!attributes.letterSpacing) {
+                                return {};
+                            }
+                            return { style: `letter-spacing: ${attributes.letterSpacing}` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setLetterSpacing: (letterSpacing) => ({ chain }) => chain().setMark("textStyle", { letterSpacing }).run(),
+            unsetLetterSpacing: () => ({ chain }) => chain().setMark("textStyle", { letterSpacing: null }).removeEmptyTextStyle().run(),
+        };
+    },
+});

package/dist/editor/letter-spacing.d.ts

@@ -0,0 +1,17 @@
+import { Extension } from "@tiptap/core";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        letterSpacing: {
+            setLetterSpacing: (letterSpacing: string) => ReturnType;
+            unsetLetterSpacing: () => ReturnType;
+        };
+    }
+}
+declare module "@tiptap/extension-text-style" {
+    interface TextStyleAttributes {
+        letterSpacing?: string | null;
+    }
+}
+/** 字间距，挂在 textStyle 上以便随 span style 写回 Markdown */
+export declare const LetterSpacing: Extension<any, any>;
+//# sourceMappingURL=letter-spacing.d.ts.map

package/dist/editor/letter-spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"letter-spacing.d.ts","sourceRoot":"","sources":["../../src/editor/letter-spacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAE3D,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,aAAa,EAAE;YACb,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,UAAU,CAAC;YACxD,kBAAkB,EAAE,MAAM,UAAU,CAAC;SACtC,CAAC;KACH;CACF;AAED,OAAO,QAAQ,8BAA8B,CAAC;IAC5C,UAAU,mBAAmB;QAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KAC/B;CACF;AAED,mDAAmD;AACnD,eAAO,MAAM,aAAa,qBA0CxB,CAAC"}

package/dist/editor/letter-spacing.js

@@ -0,0 +1,35 @@
+import { Extension, getStyleProperty } from "@tiptap/core";
+/** 字间距，挂在 textStyle 上以便随 span style 写回 Markdown */
+export const LetterSpacing = Extension.create({
+    name: "letterSpacing",
+    addOptions() {
+        return {
+            types: ["textStyle"],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    letterSpacing: {
+                        default: null,
+                        parseHTML: (element) => getStyleProperty(element, "letter-spacing") ?? element.style.letterSpacing,
+                        renderHTML: (attributes) => {
+                            if (!attributes.letterSpacing) {
+                                return {};
+                            }
+                            return { style: `letter-spacing: ${attributes.letterSpacing}` };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setLetterSpacing: (letterSpacing) => ({ chain }) => chain().setMark("textStyle", { letterSpacing }).run(),
+            unsetLetterSpacing: () => ({ chain }) => chain().setMark("textStyle", { letterSpacing: null }).removeEmptyTextStyle().run(),
+        };
+    },
+});