@dxpos/markdown 0.0.1

package/README.md

@@ -0,0 +1,77 @@
+# @dxpos/markdown
+
+Markdown 编辑器与渲染器。编辑器基于 TipTap，渲染器基于 react-markdown。
+
+## 安装
+
+```bash
+pnpm add @dxpos/markdown
+```
+
+同时需要 `react` 和 `react-dom`（`^18` 或 `^19`）。组件使用 `useId`，最低支持 React 18。
+
+在应用入口引入样式：
+
+```ts
+import "@dxpos/markdown/styles.css";
+```
+
+## CSS 变量
+
+主题变量由宿主提供。代码高亮变量在样式里已有默认值，宿主可以覆盖。
+
+| 变量 | 影响 |
+| --- | --- |
+| `--wsmd-background` | 代码块、颜色输入和菜单输入的背景 |
+| `--wsmd-foreground` | 强调文字、选中描边、菜单标题 |
+| `--wsmd-surface` | 菜单面板和行内代码背景 |
+| `--wsmd-border` | 分割线、表格边框、引用左边线和菜单边框 |
+| `--wsmd-muted` | 次要文字、占位符、引用文字和工具栏图标 |
+| `--wsmd-accent` | 拖入文件时编辑区的高亮描边 |
+| `--wsmd-danger` | 视频链接无法识别时的错误文字 |
+| `--wsmd-font-mono` | 行内代码和代码块字体 |
+| `--wsmd-hl-base` | 代码高亮的默认文字色 |
+| `--wsmd-hl-keyword` | 关键字 |
+| `--wsmd-hl-title` | 函数名、类名 |
+| `--wsmd-hl-constant` | 数字、属性、字面量 |
+| `--wsmd-hl-string` | 字符串 |
+| `--wsmd-hl-built-in` | 内置符号 |
+| `--wsmd-hl-comment` | 注释 |
+| `--wsmd-hl-tag` | 标签名 |
+| `--wsmd-hl-section` | 标题标记 |
+| `--wsmd-hl-bullet` | 列表标记 |
+| `--wsmd-hl-add-fg` / `--wsmd-hl-add-bg` | diff 新增行的文字和背景 |
+| `--wsmd-hl-del-fg` / `--wsmd-hl-del-bg` | diff 删除行的文字和背景 |
+
+类名以 `wsmd-` 开头，例如 `wsmd-markdown-body`、`wsmd-toolbar`。
+
+## 编辑
+
+```tsx
+import { Editor } from "@dxpos/markdown";
+
+<Editor
+  content={markdown}
+  onChange={setMarkdown}
+  onError={(message) => console.error(message)}
+  uploadFile={async (file, type) => {
+    const uploaded = await upload(file);
+    return { id: uploaded.id, url: uploaded.url, extra: {} };
+  }}
+/>
+```
+
+`toolbar` 不传时使用当前文档编辑器的默认顺序，也可传入标识数组，例如 `["h1", "h2", "divider", "image"]`。同一组的变体写成 `组:值`，如 `align:center`、`list:bullet`。`divider` 是分隔线，`spacer` 把后面的按钮推到右侧。默认数组从包入口以 `DEFAULT_TOOLBAR` 导出。
+
+## 渲染
+
+插件从子路径按需引入，通过 `plugins` 数组传入，没有默认项。
+
+```tsx
+import { Viewer } from "@dxpos/markdown";
+import { gfm } from "@dxpos/markdown/plugins/gfm";
+import { raw } from "@dxpos/markdown/plugins/raw";
+import { highlight } from "@dxpos/markdown/plugins/highlight";
+
+<Viewer content={markdown} plugins={[gfm, raw, highlight]} />
+```

package/dist/editor/ColorMenu.d.ts

@@ -0,0 +1,18 @@
+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"];
+type 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 function ColorMenu({ label, active, currentColor, presets, customPresets, onPick, onRemember, onRemoveCustom, onClear, children, }: ColorMenuProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ColorMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorMenu.d.ts","sourceRoot":"","sources":["../../src/editor/ColorMenu.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,uBAAuB,8GAU1B,CAAC;AAEX,eAAO,MAAM,kBAAkB,8GAUrB,CAAC;AAEX,KAAK,cAAc,GAAG;IACpB,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,CAAC;AAUF,8BAA8B;AAC9B,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,YAAY,EACZ,OAAO,EACP,aAAa,EACb,MAAM,EACN,UAAU,EACV,cAAc,EACd,OAAO,EACP,QAAQ,GACT,EAAE,cAAc,+BAgJhB"}

package/dist/editor/ColorMenu.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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",
+];
+function sameColor(left, right) {
+    return left?.toLowerCase() === right.toLowerCase();
+}
+function colorInputValue(color) {
+    return color && /^#[0-9a-fA-F]{6}$/i.test(color) ? color : "#000000";
+}
+/** 工具栏颜色菜单：预设色板 + 任意色 + 清除 */
+export function 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: "color-menu", ref: rootRef, children: [_jsxs("button", { className: `icon-btn icon-btn--ghost toolbar__btn color-menu__trigger${active ? " 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: "color-menu__bar", style: currentColor ? { background: currentColor } : undefined })] }), open ? (_jsxs("div", { className: "color-menu__panel", role: "dialog", "aria-label": label, children: [_jsx("p", { className: "color-menu__caption", children: "\u9884\u8BBE" }), _jsxs("div", { className: "color-menu__swatches", children: [presets.map((color) => (_jsx("button", { className: `color-menu__swatch${sameColor(currentColor, color) ? " color-menu__swatch--active" : ""}`, type: "button", title: color, "aria-label": color, style: { background: color }, onClick: () => {
+                                    onPick(color);
+                                    close();
+                                } }, color))), _jsx("button", { className: "color-menu__swatch 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(_Fragment, { children: [_jsx("p", { className: "color-menu__caption color-menu__caption--custom", children: "\u81EA\u5B9A\u4E49" }), _jsx("div", { className: "color-menu__swatches", children: customPresets.map((color) => (_jsxs("span", { className: "color-menu__custom-swatch", children: [_jsx("button", { className: `color-menu__swatch${sameColor(currentColor, color) ? " color-menu__swatch--active" : ""}`, type: "button", title: color, "aria-label": color, style: { background: color }, onClick: () => {
+                                                onPick(color);
+                                                close();
+                                            } }), _jsx("button", { className: "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: "color-menu__custom", htmlFor: customId, children: ["\u4EFB\u610F", _jsx("input", { id: customId, type: "color", value: colorInputValue(currentColor), onChange: (event) => {
+                                    pickedRef.current = event.target.value;
+                                    onPick(event.target.value);
+                                }, onBlur: rememberPicked })] })] })) : null] }));
+}

package/dist/editor/SlashMenu.d.ts

@@ -0,0 +1,24 @@
+import { Extension, type Editor, type Range } from "@tiptap/react";
+import { type SuggestionKeyDownProps, type SuggestionProps } from "@tiptap/suggestion";
+import { Heading1 } from "lucide-react";
+export type SlashCommandContext = {
+    editor: Editor;
+    range: Range;
+    onInsertImage: () => void;
+    onInsertVideo: () => void;
+};
+export type SlashItem = {
+    title: string;
+    icon: typeof Heading1;
+    command: (ctx: SlashCommandContext) => void;
+};
+export declare const SLASH_ITEMS: SlashItem[];
+type SlashMenuProps = SuggestionProps<SlashItem, SlashItem>;
+export type SlashMenuHandle = {
+    onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+};
+export declare const SlashMenu: import("react").ForwardRefExoticComponent<SlashMenuProps & import("react").RefAttributes<SlashMenuHandle>>;
+/** 输入 / 唤起块类型菜单 */
+export declare function createSlashCommand(onInsertImage: () => void, onInsertVideo: () => void): Extension<any, any>;
+export {};
+//# sourceMappingURL=SlashMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlashMenu.d.ts","sourceRoot":"","sources":["../../src/editor/SlashMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAiB,KAAK,MAAM,EAAE,KAAK,KAAK,EAAE,MAAM,eAAe,CAAC;AAClF,OAAmB,EAAE,KAAK,sBAAsB,EAAE,KAAK,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACnG,OAAO,EAEL,QAAQ,EAcT,MAAM,cAAc,CAAC;AAGtB,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,OAAO,EAAE,CAAC,GAAG,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC7C,CAAC;AAqBF,eAAO,MAAM,WAAW,EAAE,SAAS,EAwElC,CAAC;AAEF,KAAK,cAAc,GAAG,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,OAAO,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,SAAS,4GA0DrB,CAAC;AAEF,mBAAmB;AACnB,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,IAAI,EAAE,aAAa,EAAE,MAAM,IAAI,uBA+CtF"}

package/dist/editor/SlashMenu.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Extension, ReactRenderer } from "@tiptap/react";
+import Suggestion from "@tiptap/suggestion";
+import { Code, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, ImageIcon, List, ListOrdered, ListTodo, Minus, Quote, Table, Video, } from "lucide-react";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+const HEADING_ICONS = {
+    1: Heading1,
+    2: Heading2,
+    3: Heading3,
+    4: Heading4,
+    5: Heading5,
+    6: Heading6,
+};
+function headingItem(level) {
+    return {
+        title: `标题 ${level}`,
+        icon: HEADING_ICONS[level],
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setHeading({ level }).run();
+        },
+    };
+}
+export const SLASH_ITEMS = [
+    headingItem(1),
+    headingItem(2),
+    headingItem(3),
+    headingItem(4),
+    headingItem(5),
+    headingItem(6),
+    {
+        title: "无序列表",
+        icon: List,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleBulletList().run();
+        },
+    },
+    {
+        title: "有序列表",
+        icon: ListOrdered,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+        },
+    },
+    {
+        title: "待办",
+        icon: ListTodo,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleTaskList().run();
+        },
+    },
+    {
+        title: "代码块",
+        icon: Code,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+        },
+    },
+    {
+        title: "引用",
+        icon: Quote,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+        },
+    },
+    {
+        title: "表格",
+        icon: Table,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+        },
+    },
+    {
+        title: "分割线",
+        icon: Minus,
+        command: ({ editor, range }) => {
+            editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+        },
+    },
+    {
+        title: "图片",
+        icon: ImageIcon,
+        command: ({ editor, range, onInsertImage }) => {
+            editor.chain().focus().deleteRange(range).run();
+            onInsertImage();
+        },
+    },
+    {
+        title: "视频",
+        icon: Video,
+        command: ({ editor, range, onInsertVideo }) => {
+            editor.chain().focus().deleteRange(range).run();
+            onInsertVideo();
+        },
+    },
+];
+export const SlashMenu = forwardRef(function SlashMenu({ items, command }, ref) {
+    const [selected, setSelected] = useState(0);
+    useEffect(() => {
+        setSelected(0);
+    }, [items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            if (items.length === 0) {
+                return false;
+            }
+            if (event.key === "ArrowUp") {
+                setSelected((index) => (index + items.length - 1) % items.length);
+                return true;
+            }
+            if (event.key === "ArrowDown") {
+                setSelected((index) => (index + 1) % items.length);
+                return true;
+            }
+            if (event.key === "Enter") {
+                const item = items[selected];
+                if (item) {
+                    command(item);
+                }
+                return true;
+            }
+            return false;
+        },
+    }));
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "slash-menu", role: "listbox", children: items.map((item, index) => {
+            const Icon = item.icon;
+            return (_jsxs("button", { className: `slash-menu__item${index === selected ? " slash-menu__item--active" : ""}`, type: "button", role: "option", "aria-selected": index === selected, onMouseEnter: () => setSelected(index), onClick: () => command(item), children: [_jsx(Icon, { "aria-hidden": true }), _jsx("span", { children: item.title })] }, item.title));
+        }) }));
+});
+/** 输入 / 唤起块类型菜单 */
+export function createSlashCommand(onInsertImage, onInsertVideo) {
+    return Extension.create({
+        name: "slashCommand",
+        addProseMirrorPlugins() {
+            return [
+                Suggestion({
+                    editor: this.editor,
+                    char: "/",
+                    items: ({ query }) => SLASH_ITEMS.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())),
+                    command: ({ editor, range, props }) => {
+                        props.command({ editor, range, onInsertImage, onInsertVideo });
+                    },
+                    render: () => {
+                        let component = null;
+                        let unmount = null;
+                        return {
+                            onStart: (props) => {
+                                component = new ReactRenderer(SlashMenu, {
+                                    editor: props.editor,
+                                    props,
+                                });
+                                unmount = props.mount(component.element);
+                            },
+                            onUpdate: (props) => {
+                                component?.updateProps(props);
+                            },
+                            onKeyDown: (props) => {
+                                if (props.event.key === "Escape") {
+                                    unmount?.();
+                                    return true;
+                                }
+                                return component?.ref?.onKeyDown(props) ?? false;
+                            },
+                            onExit: () => {
+                                unmount?.();
+                                component?.destroy();
+                                unmount = null;
+                                component = null;
+                            },
+                        };
+                    },
+                }),
+            ];
+        },
+    });
+}

package/dist/editor/TextStyleMenu.d.ts

@@ -0,0 +1,45 @@
+export declare const FONT_FAMILIES: readonly [{
+    readonly label: "宋体";
+    readonly value: "SimSun, Songti SC, serif";
+}, {
+    readonly label: "黑体";
+    readonly value: "SimHei, Heiti SC, sans-serif";
+}, {
+    readonly label: "楷体";
+    readonly value: "KaiTi, Kaiti SC, serif";
+}, {
+    readonly label: "微软雅黑";
+    readonly value: "\"Microsoft YaHei\", \"PingFang SC\", sans-serif";
+}, {
+    readonly label: "苹方";
+    readonly value: "\"PingFang SC\", \"Microsoft YaHei\", sans-serif";
+}, {
+    readonly label: "Arial";
+    readonly value: "Arial, sans-serif";
+}, {
+    readonly label: "Georgia";
+    readonly value: "Georgia, serif";
+}, {
+    readonly label: "Times New Roman";
+    readonly value: "\"Times New Roman\", Times, serif";
+}, {
+    readonly label: "Consolas";
+    readonly value: "Consolas, monospace";
+}];
+export declare const FONT_SIZES: readonly ["12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px"];
+export declare const LETTER_SPACINGS: readonly ["-1px", "-0.5px", "0px", "0.5px", "1px", "1.5px", "2px", "3px", "4px", "6px", "8px"];
+export declare const LINE_HEIGHTS: readonly ["1", "1.15", "1.25", "1.5", "1.75", "2", "2.25", "2.5", "2.75", "3"];
+type TextStyleMenuProps = {
+    fontFamily: string | null;
+    fontSize: string | null;
+    letterSpacing: string | null;
+    lineHeight: string | null;
+    onFontFamily: (value: string | null) => void;
+    onFontSize: (value: string | null) => void;
+    onLetterSpacing: (value: string | null) => void;
+    onLineHeight: (value: string | null) => void;
+};
+/** 工具栏文本样式：字体、字号、字间距、行距 */
+export declare function TextStyleMenu({ fontFamily, fontSize, letterSpacing, lineHeight, onFontFamily, onFontSize, onLetterSpacing, onLineHeight, }: TextStyleMenuProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=TextStyleMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextStyleMenu.d.ts","sourceRoot":"","sources":["../../src/editor/TextStyleMenu.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUhB,CAAC;AAEX,eAAO,MAAM,UAAU,mFAAoF,CAAC;AAE5G,eAAO,MAAM,eAAe,gGAYlB,CAAC;AAEX,eAAO,MAAM,YAAY,gFAAiF,CAAC;AAE3G,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C,CAAC;AAkCF,2BAA2B;AAC3B,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,QAAQ,EACR,aAAa,EACb,UAAU,EACV,YAAY,EACZ,UAAU,EACV,eAAe,EACf,YAAY,GACb,EAAE,kBAAkB,+BA0EpB"}

package/dist/editor/TextStyleMenu.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Type } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+export const FONT_FAMILIES = [
+    { label: "宋体", value: "SimSun, Songti SC, serif" },
+    { label: "黑体", value: "SimHei, Heiti SC, sans-serif" },
+    { label: "楷体", value: "KaiTi, Kaiti SC, serif" },
+    { label: "微软雅黑", value: '"Microsoft YaHei", "PingFang SC", sans-serif' },
+    { label: "苹方", value: '"PingFang SC", "Microsoft YaHei", sans-serif' },
+    { label: "Arial", value: "Arial, sans-serif" },
+    { label: "Georgia", value: "Georgia, serif" },
+    { label: "Times New Roman", value: '"Times New Roman", Times, serif' },
+    { label: "Consolas", value: "Consolas, monospace" },
+];
+export const FONT_SIZES = ["12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px"];
+export const LETTER_SPACINGS = [
+    "-1px",
+    "-0.5px",
+    "0px",
+    "0.5px",
+    "1px",
+    "1.5px",
+    "2px",
+    "3px",
+    "4px",
+    "6px",
+    "8px",
+];
+export const LINE_HEIGHTS = ["1", "1.15", "1.25", "1.5", "1.75", "2", "2.25", "2.5", "2.75", "3"];
+function StyleRow({ label, value, options, onChange, }) {
+    const id = useId();
+    return (_jsxs("label", { className: "text-style-menu__row", htmlFor: id, children: [_jsx("span", { children: label }), _jsxs("select", { id: id, className: "text-style-menu__select", value: value ?? "", onChange: (event) => onChange(event.target.value || null), children: [_jsx("option", { value: "", children: "\u9ED8\u8BA4" }), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })] }));
+}
+/** 工具栏文本样式：字体、字号、字间距、行距 */
+export function TextStyleMenu({ fontFamily, fontSize, letterSpacing, lineHeight, onFontFamily, onFontSize, onLetterSpacing, onLineHeight, }) {
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef(null);
+    const active = Boolean(fontFamily || fontSize || letterSpacing || lineHeight);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const onPointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open]);
+    return (_jsxs("div", { className: "text-style-menu", ref: rootRef, children: [_jsx("button", { className: `icon-btn icon-btn--ghost toolbar__btn${active ? " toolbar__btn--active" : ""}`, type: "button", title: "\u6587\u672C", "aria-label": "\u6587\u672C", "aria-expanded": open, "aria-haspopup": "dialog", "aria-pressed": active, onClick: () => setOpen((value) => !value), children: _jsx(Type, { "aria-hidden": true }) }), open ? (_jsxs("div", { className: "text-style-menu__panel", role: "dialog", "aria-label": "\u6587\u672C", children: [_jsx(StyleRow, { label: "\u5B57\u4F53", value: fontFamily, options: FONT_FAMILIES, onChange: onFontFamily }), _jsx(StyleRow, { label: "\u5B57\u53F7", value: fontSize, options: FONT_SIZES.map((size) => ({ label: size, value: size })), onChange: onFontSize }), _jsx(StyleRow, { label: "\u5B57\u95F4\u8DDD", value: letterSpacing, options: LETTER_SPACINGS.map((spacing) => ({
+                            label: spacing === "0px" ? "0" : spacing,
+                            value: spacing,
+                        })), onChange: onLetterSpacing }), _jsx(StyleRow, { label: "\u884C\u8DDD", value: lineHeight, options: LINE_HEIGHTS.map((height) => ({ label: height, value: height })), onChange: onLineHeight })] })) : null] }));
+}

package/dist/editor/VideoEmbed.d.ts

@@ -0,0 +1,15 @@
+import { Node } from "@tiptap/core";
+import type { VideoProvider } from "./video-url";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        videoEmbed: {
+            setVideoEmbed: (attrs: {
+                src: string;
+                provider: VideoProvider;
+            }) => ReturnType;
+        };
+    }
+}
+/** 块级视频：本地文件用 video，外站用官方播放器 iframe */
+export declare const VideoEmbed: Node<any, any>;
+//# sourceMappingURL=VideoEmbed.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEmbed.d.ts","sourceRoot":"","sources":["../../src/editor/VideoEmbed.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAErD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,QAAQ,EAAE,aAAa,CAAA;aAAE,KAAK,UAAU,CAAC;SAChF,CAAC;KACH;CACF;AAMD,uCAAuC;AACvC,eAAO,MAAM,UAAU,gBA8FrB,CAAC"}

package/dist/editor/VideoEmbed.js

@@ -0,0 +1,95 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+function attrString(value) {
+    return typeof value === "string" ? value : null;
+}
+/** 块级视频：本地文件用 video，外站用官方播放器 iframe */
+export const VideoEmbed = Node.create({
+    name: "videoEmbed",
+    group: "block",
+    atom: true,
+    draggable: true,
+    selectable: true,
+    addAttributes() {
+        return {
+            src: { default: null },
+            provider: { default: "file" },
+        };
+    },
+    parseHTML() {
+        return [
+            {
+                tag: "video[src]",
+                getAttrs: (element) => {
+                    if (!(element instanceof HTMLElement)) {
+                        return false;
+                    }
+                    const src = element.getAttribute("src");
+                    if (!src) {
+                        return false;
+                    }
+                    return { src, provider: "file" };
+                },
+            },
+            {
+                tag: "iframe[data-video-provider]",
+                getAttrs: (element) => {
+                    if (!(element instanceof HTMLElement)) {
+                        return false;
+                    }
+                    const provider = element.getAttribute("data-video-provider");
+                    const src = element.getAttribute("src");
+                    if ((provider !== "youtube" && provider !== "bilibili") || !src) {
+                        return false;
+                    }
+                    return { src, provider };
+                },
+            },
+        ];
+    },
+    renderHTML({ node }) {
+        const src = attrString(node.attrs.src);
+        const provider = node.attrs.provider;
+        if (!src) {
+            return ["video", { controls: "true", preload: "metadata" }];
+        }
+        if (provider === "youtube" || provider === "bilibili") {
+            return [
+                "iframe",
+                mergeAttributes({
+                    src,
+                    "data-video-provider": provider,
+                    allowfullscreen: "true",
+                    frameborder: "0",
+                }),
+            ];
+        }
+        return [
+            "video",
+            mergeAttributes({
+                src,
+                controls: "true",
+                preload: "metadata",
+            }),
+        ];
+    },
+    addCommands() {
+        return {
+            setVideoEmbed: (attrs) => ({ state, dispatch }) => {
+                const type = state.schema.nodes.videoEmbed;
+                if (!type) {
+                    return false;
+                }
+                const node = type.create(attrs);
+                const $from = state.doc.resolve(state.selection.from);
+                const insertAt = $from.parent.inlineContent ? $from.after() : state.selection.to;
+                if (dispatch) {
+                    const tr = state.tr.insert(insertAt, node);
+                    const $after = tr.doc.resolve(Math.min(insertAt + node.nodeSize, tr.doc.content.size));
+                    dispatch(tr.setSelection(TextSelection.near($after)).scrollIntoView());
+                }
+                return true;
+            },
+        };
+    },
+});

package/dist/editor/VideoMenu.d.ts

@@ -0,0 +1,12 @@
+type VideoMenuProps = {
+    open: boolean;
+    uploading: boolean;
+    error: string | null;
+    onOpenChange: (open: boolean) => void;
+    onUpload: () => void;
+    onSubmitUrl: (url: string) => void;
+};
+/** 工具栏视频菜单：上传文件或粘贴链接 */
+export declare function VideoMenu({ open, uploading, error, onOpenChange, onUpload, onSubmitUrl, }: VideoMenuProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=VideoMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoMenu.d.ts","sourceRoot":"","sources":["../../src/editor/VideoMenu.tsx"],"names":[],"mappings":"AAKA,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,wBAAwB;AACxB,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,GACZ,EAAE,cAAc,+BAyEhB"}