@dxpos/markdown 0.0.1

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

@@ -0,0 +1,25 @@
+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[];
+interface SlashMenuProps extends SuggestionProps<SlashItem, SlashItem> {
+}
+export interface SlashMenuHandle {
+    onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+}
+export declare const SlashMenu: import("react").ForwardRefExoticComponent<SlashMenuProps & import("react").RefAttributes<SlashMenuHandle>>;
+/** 输入 / 唤起块类型菜单 */
+export declare const createSlashCommand: (onInsertImage: () => void, onInsertVideo: () => void) => Extension<any, any>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/slash-menu/index.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,UAAU,cAAe,SAAQ,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC;CAAG;AAEzE,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,OAAO,CAAC;CACvD;AAED,eAAO,MAAM,SAAS,4GAwDpB,CAAC;AAEH,mBAAmB;AACnB,eAAO,MAAM,kBAAkB,GAAI,eAAe,MAAM,IAAI,EAAE,eAAe,MAAM,IAAI,wBA+CtF,CAAC"}

package/dist/editor/slash-menu/index.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,
+};
+const 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(({ 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: "wsmd-slash-menu", role: "listbox", children: items.map((item, index) => {
+            const Icon = item.icon;
+            return (_jsxs("button", { className: `wsmd-slash-menu__item${index === selected ? " wsmd-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 const 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/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 function normalizeTextColor(color: string): string | null;
+/** 记住自定义色：去重后追加，超过上限丢掉最早的；内置色不写入 */
+export declare function rememberCustomTextColor(current: readonly string[], color: string, builtin: readonly string[]): string[];
+export declare function removeCustomTextColor(current: readonly string[], color: string): string[];
+export declare function readCustomTextColors(): string[];
+export declare function writeCustomTextColors(colors: readonly string[]): void;
+//# sourceMappingURL=text-color-presets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-color-presets.d.ts","sourceRoot":"","sources":["../../src/editor/text-color-presets.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAC7D,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAI1C,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,iBAG/C;AAED,oCAAoC;AACpC,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,SAAS,MAAM,EAAE,YAe3B;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,YAM9E;AAED,wBAAgB,oBAAoB,aAYnC;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,QAE9D"}

package/dist/editor/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 function normalizeTextColor(color) {
+    const value = color.trim().toLowerCase();
+    return HEX.test(value) ? value : null;
+}
+/** 记住自定义色：去重后追加，超过上限丢掉最早的；内置色不写入 */
+export function 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 function removeCustomTextColor(current, color) {
+    const normalized = normalizeTextColor(color);
+    if (!normalized) {
+        return [...current];
+    }
+    return current.filter((item) => item !== normalized);
+}
+export function 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 function writeCustomTextColors(colors) {
+    localStorage.setItem(TEXT_COLOR_PRESET_KEY, JSON.stringify(colors));
+}

package/dist/editor/text-style-menu/index.d.ts

@@ -0,0 +1,46 @@
+import { type FC } from "react";
+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"];
+interface 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 const TextStyleMenu: FC<TextStyleMenuProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/editor/text-style-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/text-style-menu/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAsC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEpE,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUhB,CAAC;AAEX,eAAO,MAAM,UAAU,mFAAoF,CAAC;AAE5G,eAAO,MAAM,eAAe,gGAYlB,CAAC;AAEX,eAAO,MAAM,YAAY,gFAAiF,CAAC;AAS3G,UAAU,kBAAkB;IAC1B,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;AAwBD,2BAA2B;AAC3B,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0EhD,CAAC"}

package/dist/editor/text-style-menu/index.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"];
+const StyleRow = ({ label, value, options, onChange }) => {
+    const id = useId();
+    return (_jsxs("label", { className: "wsmd-text-style-menu__row", htmlFor: id, children: [_jsx("span", { children: label }), _jsxs("select", { id: id, className: "wsmd-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 const 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: "wsmd-text-style-menu", ref: rootRef, children: [_jsx("button", { className: `wsmd-icon-btn wsmd-icon-btn--ghost wsmd-toolbar__btn${active ? " wsmd-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: "wsmd-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/theme.d.ts

@@ -0,0 +1,8 @@
+export declare const THEME_STORAGE_KEY = "kb-theme";
+export type ColorTheme = "light" | "dark";
+export type ThemePreference = ColorTheme | "system";
+export declare function isColorTheme(value: string | null): value is ColorTheme;
+/** 未手动选择时不写 data-theme，交给系统 prefers-color-scheme */
+export declare function applyThemePreference(preference: ThemePreference): void;
+export declare function resolveColorTheme(preference: ThemePreference): ColorTheme;
+//# sourceMappingURL=theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/editor/theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,aAAa,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAC1C,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,IAAI,UAAU,CAEtE;AAED,oDAAoD;AACpD,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,eAAe,QAM/D;AAED,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,eAAe,GAAG,UAAU,CAKzE"}

package/dist/editor/theme.js

@@ -0,0 +1,18 @@
+export const THEME_STORAGE_KEY = "kb-theme";
+export function isColorTheme(value) {
+    return value === "light" || value === "dark";
+}
+/** 未手动选择时不写 data-theme，交给系统 prefers-color-scheme */
+export function applyThemePreference(preference) {
+    if (preference === "system") {
+        document.documentElement.removeAttribute("data-theme");
+        return;
+    }
+    document.documentElement.dataset.theme = preference;
+}
+export function resolveColorTheme(preference) {
+    if (preference !== "system") {
+        return preference;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}

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

@@ -0,0 +1,17 @@
+import type { Editor } from "@tiptap/react";
+import { type FC } from "react";
+import { type ToolbarItem } from "./items";
+interface ToolbarProps {
+    editor: Editor;
+    items: readonly ToolbarItem[];
+    uploading: boolean;
+    videoOpen: boolean;
+    videoError: string | null;
+    onInsertImage: () => void;
+    onVideoOpenChange: (open: boolean) => void;
+    onUploadVideo: () => void;
+    onInsertVideoUrl: (url: string) => void;
+}
+export declare const Toolbar: FC<ToolbarProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/editor/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAgC5C,OAAO,EAAuB,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAC;AAUrE,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAqB5D,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAuED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAmXpC,CAAC"}

package/dist/editor/toolbar/index.js

@@ -0,0 +1,206 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Baseline, Bold, Code, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlighter, ImageIcon, Italic, Link as LinkIcon, List, ListOrdered, Loader2, Moon, Pilcrow, Quote, Redo2, Strikethrough, Sun, Table, Undo2, } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ColorMenu, PRESET_HIGHLIGHT_COLORS, PRESET_TEXT_COLORS } from "../color-menu";
+import { readCustomTextColors, rememberCustomTextColor, removeCustomTextColor, writeCustomTextColors, } from "../color-menu/text-color-presets";
+import { TextStyleMenu } from "../text-style-menu";
+import { VideoMenu } from "../video-menu";
+import { DEFAULT_TOOLBAR } from "./items";
+import { applyThemePreference, isColorTheme, resolveColorTheme, THEME_STORAGE_KEY, } from "./theme";
+const HEADING_ICONS = {
+    1: Heading1,
+    2: Heading2,
+    3: Heading3,
+    4: Heading4,
+    5: Heading5,
+    6: Heading6,
+};
+const ToolbarButton = ({ title, active, disabled, onClick, children }) => {
+    return (_jsx("button", { className: `wsmd-icon-btn wsmd-icon-btn--ghost wsmd-toolbar__btn${active ? " wsmd-toolbar__btn--active" : ""}`, type: "button", title: title, "aria-label": title, "aria-pressed": active, disabled: disabled, onClick: onClick, children: children }));
+};
+const useToolbarTheme = () => {
+    const [preference, setPreference] = useState("system");
+    const [resolved, setResolved] = useState("light");
+    useEffect(() => {
+        const stored = localStorage.getItem(THEME_STORAGE_KEY);
+        const next = isColorTheme(stored) ? stored : "system";
+        setPreference(next);
+        setResolved(resolveColorTheme(next));
+        applyThemePreference(next);
+    }, []);
+    useEffect(() => {
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const sync = () => setResolved(resolveColorTheme(preference));
+        media.addEventListener("change", sync);
+        return () => media.removeEventListener("change", sync);
+    }, [preference]);
+    const toggle = () => {
+        const next = resolved === "dark" ? "light" : "dark";
+        localStorage.setItem(THEME_STORAGE_KEY, next);
+        setPreference(next);
+        setResolved(next);
+        applyThemePreference(next);
+    };
+    return { resolved, toggle };
+};
+const textStyleValue = (value) => {
+    return typeof value === "string" && value ? value : null;
+};
+const headingLevel = (item) => {
+    if (!item.startsWith("h")) {
+        return null;
+    }
+    const level = Number(item.slice(1));
+    if (level < 1 || level > 6) {
+        return null;
+    }
+    return level;
+};
+export const Toolbar = ({ editor, items = DEFAULT_TOOLBAR, uploading, videoOpen, videoError, onInsertImage, onVideoOpenChange, onUploadVideo, onInsertVideoUrl }) => {
+    const { resolved, toggle } = useToolbarTheme();
+    const [customTextColors, setCustomTextColors] = useState([]);
+    const state = useEditorState({
+        editor,
+        selector: (ctx) => ({
+            canUndo: ctx.editor.can().undo(),
+            canRedo: ctx.editor.can().redo(),
+            isParagraph: ctx.editor.isActive("paragraph"),
+            headingLevels: [1, 2, 3, 4, 5, 6].map((level) => ctx.editor.isActive("heading", { level })),
+            isBold: ctx.editor.isActive("bold"),
+            isItalic: ctx.editor.isActive("italic"),
+            isStrike: ctx.editor.isActive("strike"),
+            isHighlight: ctx.editor.isActive("highlight"),
+            highlightColor: ctx.editor.getAttributes("highlight").color ?? null,
+            textColor: textStyleValue(ctx.editor.getAttributes("textStyle").color),
+            fontFamily: textStyleValue(ctx.editor.getAttributes("textStyle").fontFamily),
+            fontSize: textStyleValue(ctx.editor.getAttributes("textStyle").fontSize),
+            letterSpacing: textStyleValue(ctx.editor.getAttributes("textStyle").letterSpacing),
+            lineHeight: textStyleValue(ctx.editor.getAttributes("textStyle").lineHeight),
+            isBulletList: ctx.editor.isActive("bulletList"),
+            isOrderedList: ctx.editor.isActive("orderedList"),
+            isBlockquote: ctx.editor.isActive("blockquote"),
+            isCodeBlock: ctx.editor.isActive("codeBlock"),
+            isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
+            isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
+            isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
+            isAlignJustify: ctx.editor.isActive({ textAlign: "justify" }),
+            isLink: ctx.editor.isActive("link"),
+        }),
+    });
+    useEffect(() => {
+        setCustomTextColors(readCustomTextColors());
+    }, []);
+    const setLink = () => {
+        const url = window.prompt("链接地址", editor.getAttributes("link").href ?? "");
+        if (url === null) {
+            return;
+        }
+        if (url === "") {
+            editor.chain().focus().unsetLink().run();
+            return;
+        }
+        editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    };
+    const renderItem = (item, index) => {
+        const level = headingLevel(item);
+        if (level) {
+            const Icon = HEADING_ICONS[level];
+            return (_jsx(ToolbarButton, { title: `标题 ${level}`, active: state.headingLevels[level - 1], onClick: () => editor.chain().focus().toggleHeading({ level }).run(), children: _jsx(Icon, { "aria-hidden": true }) }, `${item}-${index}`));
+        }
+        switch (item) {
+            case "divider":
+                return _jsx("span", { className: "wsmd-toolbar__divider" }, `${item}-${index}`);
+            case "spacer":
+                return _jsx("span", { className: "wsmd-toolbar__spacer" }, `${item}-${index}`);
+            case "paragraph":
+                return (_jsx(ToolbarButton, { title: "\u6BB5\u843D", active: state.isParagraph, onClick: () => editor.chain().focus().setParagraph().run(), children: _jsx(Pilcrow, { "aria-hidden": true }) }, item));
+            case "bold":
+                return (_jsx(ToolbarButton, { title: "\u7C97\u4F53", active: state.isBold, onClick: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, { "aria-hidden": true }) }, item));
+            case "italic":
+                return (_jsx(ToolbarButton, { title: "\u659C\u4F53", active: state.isItalic, onClick: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, { "aria-hidden": true }) }, item));
+            case "strike":
+                return (_jsx(ToolbarButton, { title: "\u5220\u9664\u7EBF", active: state.isStrike, onClick: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { "aria-hidden": true }) }, item));
+            case "highlight":
+                return (_jsx(ColorMenu, { label: "\u9AD8\u4EAE", active: state.isHighlight, currentColor: state.highlightColor, presets: PRESET_HIGHLIGHT_COLORS, onPick: (color) => editor.chain().focus().setHighlight({ color }).run(), onClear: () => editor.chain().focus().unsetHighlight().run(), children: _jsx(Highlighter, { "aria-hidden": true }) }, item));
+            case "color":
+                return (_jsx(ColorMenu, { label: "\u6587\u5B57\u989C\u8272", active: Boolean(state.textColor), currentColor: state.textColor, presets: PRESET_TEXT_COLORS, customPresets: customTextColors, onPick: (color) => editor.chain().focus().setColor(color).run(), onRemember: (color) => {
+                        setCustomTextColors((current) => {
+                            const next = rememberCustomTextColor(current, color, PRESET_TEXT_COLORS);
+                            writeCustomTextColors(next);
+                            return next;
+                        });
+                    }, onRemoveCustom: (color) => {
+                        setCustomTextColors((current) => {
+                            const next = removeCustomTextColor(current, color);
+                            writeCustomTextColors(next);
+                            return next;
+                        });
+                    }, onClear: () => editor.chain().focus().unsetColor().run(), children: _jsx(Baseline, { "aria-hidden": true }) }, item));
+            case "textStyle":
+                return (_jsx(TextStyleMenu, { fontFamily: state.fontFamily, fontSize: state.fontSize, letterSpacing: state.letterSpacing, lineHeight: state.lineHeight, onFontFamily: (value) => {
+                        const chain = editor.chain().focus();
+                        if (value) {
+                            chain.setFontFamily(value).run();
+                            return;
+                        }
+                        chain.unsetFontFamily().run();
+                    }, onFontSize: (value) => {
+                        const chain = editor.chain().focus();
+                        if (value) {
+                            chain.setFontSize(value).run();
+                            return;
+                        }
+                        chain.unsetFontSize().run();
+                    }, onLetterSpacing: (value) => {
+                        const chain = editor.chain().focus();
+                        if (value) {
+                            chain.setLetterSpacing(value).run();
+                            return;
+                        }
+                        chain.unsetLetterSpacing().run();
+                    }, onLineHeight: (value) => {
+                        const chain = editor.chain().focus();
+                        if (value) {
+                            chain.setLineHeight(value).run();
+                            return;
+                        }
+                        chain.unsetLineHeight().run();
+                    } }, item));
+            case "list:bullet":
+                return (_jsx(ToolbarButton, { title: "\u65E0\u5E8F\u5217\u8868", active: state.isBulletList, onClick: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, { "aria-hidden": true }) }, item));
+            case "list:ordered":
+                return (_jsx(ToolbarButton, { title: "\u6709\u5E8F\u5217\u8868", active: state.isOrderedList, onClick: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { "aria-hidden": true }) }, item));
+            case "quote":
+                return (_jsx(ToolbarButton, { title: "\u5F15\u7528", active: state.isBlockquote, onClick: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, { "aria-hidden": true }) }, item));
+            case "code":
+                return (_jsx(ToolbarButton, { title: "\u4EE3\u7801\u5757", active: state.isCodeBlock, onClick: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(Code, { "aria-hidden": true }) }, item));
+            case "align:left":
+                return (_jsx(ToolbarButton, { title: "\u5DE6\u5BF9\u9F50", active: state.isAlignLeft, onClick: () => editor.chain().focus().setTextAlign("left").run(), children: _jsx(AlignLeft, { "aria-hidden": true }) }, item));
+            case "align:center":
+                return (_jsx(ToolbarButton, { title: "\u5C45\u4E2D", active: state.isAlignCenter, onClick: () => editor.chain().focus().setTextAlign("center").run(), children: _jsx(AlignCenter, { "aria-hidden": true }) }, item));
+            case "align:right":
+                return (_jsx(ToolbarButton, { title: "\u53F3\u5BF9\u9F50", active: state.isAlignRight, onClick: () => editor.chain().focus().setTextAlign("right").run(), children: _jsx(AlignRight, { "aria-hidden": true }) }, item));
+            case "align:justify":
+                return (_jsx(ToolbarButton, { title: "\u4E24\u7AEF\u5BF9\u9F50", active: state.isAlignJustify, onClick: () => editor.chain().focus().setTextAlign("justify").run(), children: _jsx(AlignJustify, { "aria-hidden": true }) }, item));
+            case "link":
+                return (_jsx(ToolbarButton, { title: "\u94FE\u63A5", active: state.isLink, onClick: setLink, children: _jsx(LinkIcon, { "aria-hidden": true }) }, item));
+            case "table":
+                return (_jsx(ToolbarButton, { title: "\u8868\u683C", onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), children: _jsx(Table, { "aria-hidden": true }) }, item));
+            case "image":
+                return (_jsx(ToolbarButton, { title: uploading ? "上传中" : "图片", disabled: uploading, onClick: onInsertImage, children: uploading ? _jsx(Loader2, { className: "wsmd-icon-btn__spin", "aria-hidden": true }) : _jsx(ImageIcon, { "aria-hidden": true }) }, item));
+            case "video":
+                return (_jsx(VideoMenu, { open: videoOpen, uploading: uploading, error: videoError, onOpenChange: onVideoOpenChange, onUpload: onUploadVideo, onSubmitUrl: onInsertVideoUrl }, item));
+            case "undo":
+                return (_jsx(ToolbarButton, { title: "\u64A4\u9500", disabled: !state.canUndo, onClick: () => editor.chain().focus().undo().run(), children: _jsx(Undo2, { "aria-hidden": true }) }, item));
+            case "redo":
+                return (_jsx(ToolbarButton, { title: "\u6062\u590D", disabled: !state.canRedo, onClick: () => editor.chain().focus().redo().run(), children: _jsx(Redo2, { "aria-hidden": true }) }, item));
+            case "theme":
+                return (_jsx(ToolbarButton, { title: resolved === "dark" ? "切换浅色" : "切换深色", onClick: toggle, children: resolved === "dark" ? _jsx(Sun, { "aria-hidden": true }) : _jsx(Moon, { "aria-hidden": true }) }, item));
+            default:
+                return null;
+        }
+    };
+    return (_jsx("div", { className: "wsmd-toolbar", role: "toolbar", "aria-label": "\u683C\u5F0F", children: items.map((item, index) => renderItem(item, index)) }));
+};