@a3s-lab/office 0.1.0

package/dist/0~3557.js

@@ -0,0 +1,179 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { matchesOfficeEditorKeyboardShortcut } from "./0~9512.js";
+const DEFAULT_EXTENSION_PRIORITY = 100;
+function createOfficeEditorExtension(config) {
+    const name = config.name.trim();
+    if (!name) throw new Error('Editor extension name cannot be empty.');
+    const priority = Number.isFinite(config.priority) ? Number(config.priority) : DEFAULT_EXTENSION_PRIORITY;
+    return {
+        name,
+        priority,
+        createInstance: ()=>{
+            const storage = config.addStorage?.() ?? {};
+            const definitions = config.addCommands?.({
+                storage
+            }) ?? {};
+            const commands = new Map();
+            const keyboardShortcuts = Object.entries(config.addKeyboardShortcuts?.({
+                storage
+            }) ?? {}).map(([shortcut, handler])=>{
+                const normalizedShortcut = shortcut.trim();
+                if (!normalizedShortcut) throw new Error(`Keyboard shortcut in extension "${name}" cannot be empty.`);
+                if ('function' != typeof handler) throw new Error(`Keyboard shortcut "${shortcut}" in extension "${name}" must define a handler.`);
+                return {
+                    shortcut: normalizedShortcut,
+                    handler: (context, commands, can, event)=>handler({
+                            context,
+                            commands: commands,
+                            can: can,
+                            storage
+                        }, event)
+                };
+            });
+            for (const [commandName, candidate] of Object.entries(definitions)){
+                const definition = candidate;
+                if ('function' != typeof definition.execute) throw new Error(`Editor command "${commandName}" in extension "${name}" must define execute().`);
+                const execute = definition.execute;
+                const canExecute = 'function' == typeof definition.canExecute ? definition.canExecute : void 0;
+                commands.set(commandName, {
+                    canExecute: canExecute ? (context, args)=>canExecute(context, ...args) : void 0,
+                    execute: (context, args)=>execute(context, ...args)
+                });
+            }
+            return {
+                commands,
+                keyboardShortcuts,
+                onCreate: (context)=>config.onCreate?.({
+                        context,
+                        storage
+                    }),
+                onDestroy: (context)=>config.onDestroy?.({
+                        context,
+                        storage
+                    }),
+                onUpdate: (context, previousContext)=>config.onUpdate?.({
+                        context,
+                        previousContext,
+                        storage
+                    }),
+                storage
+            };
+        }
+    };
+}
+function createOfficeEditorRuntime(initialContext, extensions, options = {}) {
+    const orderedExtensions = extensions.map((extension, index)=>({
+            extension,
+            index
+        })).sort((left, right)=>right.extension.priority - left.extension.priority || left.index - right.index).map(({ extension })=>extension);
+    const extensionNames = new Set();
+    const commandDefinitions = new Map();
+    const storage = {};
+    const instances = orderedExtensions.map((extension)=>{
+        if (extensionNames.has(extension.name)) throw new Error(`Duplicate editor extension "${extension.name}".`);
+        extensionNames.add(extension.name);
+        const instance = extension.createInstance();
+        storage[extension.name] = instance.storage;
+        for (const [commandName, definition] of instance.commands){
+            if (commandDefinitions.has(commandName)) throw new Error(`Duplicate editor command "${commandName}".`);
+            commandDefinitions.set(commandName, definition);
+        }
+        return instance;
+    });
+    let context = initialContext;
+    const readContext = ()=>options.getCurrentContext?.() ?? context;
+    let mounted = false;
+    const commandApi = {};
+    const canApi = {};
+    for (const [commandName, definition] of commandDefinitions){
+        commandApi[commandName] = (...args)=>definition.execute(readContext(), args);
+        canApi[commandName] = (...args)=>definition.canExecute?.(readContext(), args) ?? true;
+    }
+    return {
+        commands: commandApi,
+        extensionNames: Object.freeze([
+            ...extensionNames
+        ]),
+        storage: Object.freeze(storage),
+        can: ()=>canApi,
+        handleKeyDown: (event)=>{
+            if (event.defaultPrevented) return false;
+            for (const instance of instances)for (const shortcut of instance.keyboardShortcuts)if (matchesOfficeEditorKeyboardShortcut(event, shortcut.shortcut) && shortcut.handler(readContext(), commandApi, canApi, event)) {
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        },
+        mount: ()=>{
+            if (mounted) return;
+            mounted = true;
+            for (const instance of instances)instance.onCreate(readContext());
+        },
+        unmount: ()=>{
+            if (!mounted) return;
+            for (const instance of [
+                ...instances
+            ].reverse())instance.onDestroy(readContext());
+            mounted = false;
+        },
+        updateContext: (nextContext)=>{
+            const previousContext = context;
+            context = nextContext;
+            if (!mounted || Object.is(previousContext, nextContext)) return;
+            for (const instance of instances)instance.onUpdate(context, previousContext);
+        }
+    };
+}
+function useOfficeEditorKeyboardShortcuts(editor, options = {}) {
+    const { capture = false, enabled = true, onHandled, scopeRef } = options;
+    useEffect(()=>{
+        if (!enabled) return;
+        const handleKeyDown = (event)=>{
+            if (scopeRef && !keyboardEventBelongsToScope(event, scopeRef.current)) return;
+            if (editor.handleKeyDown(event)) onHandled?.(event);
+        };
+        window.addEventListener('keydown', handleKeyDown, {
+            capture
+        });
+        return ()=>{
+            window.removeEventListener('keydown', handleKeyDown, {
+                capture
+            });
+        };
+    }, [
+        capture,
+        editor,
+        enabled,
+        onHandled,
+        scopeRef
+    ]);
+}
+function keyboardEventBelongsToScope(event, scope) {
+    if (!scope) return false;
+    if (event.target instanceof Node && scope.contains(event.target)) return true;
+    const activeElement = document.activeElement;
+    return activeElement instanceof Node && scope.contains(activeElement);
+}
+function useOfficeEditorRuntime(context, extensions) {
+    const contextRef = useRef(context);
+    contextRef.current = context;
+    const runtime = useMemo(()=>createOfficeEditorRuntime(contextRef.current, extensions, {
+            getCurrentContext: ()=>contextRef.current
+        }), [
+        extensions
+    ]);
+    useLayoutEffect(()=>{
+        runtime.mount();
+        return ()=>runtime.unmount();
+    }, [
+        runtime
+    ]);
+    useLayoutEffect(()=>{
+        runtime.updateContext(context);
+    }, [
+        context,
+        runtime
+    ]);
+    return runtime;
+}
+export { createOfficeEditorExtension, useOfficeEditorKeyboardShortcuts, useOfficeEditorRuntime };

package/dist/0~3635.js

@@ -0,0 +1,302 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { button_Button, Popover } from "./0~9512.js";
+const THEME_COLORS = [
+    '#111827',
+    '#1f2937',
+    '#374151',
+    '#6b7280',
+    '#9ca3af',
+    '#d1d5db',
+    '#e5e7eb',
+    '#f3f4f6',
+    '#f9fafb',
+    '#ffffff',
+    '#f4cccc',
+    '#fce5cd',
+    '#fff2cc',
+    '#d9ead3',
+    '#d0e0e3',
+    '#c9daf8',
+    '#cfe2f3',
+    '#d9d2e9',
+    '#ead1dc',
+    '#fce4ec',
+    '#ea9999',
+    '#f9cb9c',
+    '#ffe599',
+    '#b6d7a8',
+    '#a2c4c9',
+    '#a4c2f4',
+    '#9fc5e8',
+    '#b4a7d6',
+    '#d5a6bd',
+    '#f4b6c2',
+    '#e06666',
+    '#f6b26b',
+    '#ffd966',
+    '#93c47d',
+    '#76a5af',
+    '#6d9eeb',
+    '#6fa8dc',
+    '#8e7cc3',
+    '#c27ba0',
+    '#e67c99',
+    '#990000',
+    '#b45f06',
+    '#bf9000',
+    '#38761d',
+    '#134f5c',
+    '#1155cc',
+    '#0b5394',
+    '#351c75',
+    '#741b47',
+    '#a61c4c'
+];
+const STANDARD_COLORS = [
+    '#c00000',
+    '#ff0000',
+    '#ffc000',
+    '#ffff00',
+    '#92d050',
+    '#00b050',
+    '#00b0f0',
+    '#0070c0',
+    '#7030a0',
+    '#ff00ff'
+];
+const OFFICE_COLORS = [
+    ...THEME_COLORS,
+    ...STANDARD_COLORS
+];
+const COLOR_GRID_COLUMNS = 10;
+const COLOR_GRID_COLUMNS_PROPERTY = '--work-office-color-grid-columns';
+function OfficeColorPicker({ ariaLabel, value, onValueChange, disabled = false, compact = false, className = '', triggerLabel, triggerIcon }) {
+    const [draft, setDraft] = useState(value);
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(()=>Math.max(0, OFFICE_COLORS.indexOf(value.toLowerCase())));
+    const colorRefs = useRef([]);
+    const normalizedDraft = normalizeCssColor(draft);
+    useEffect(()=>setDraft(value), [
+        value
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        setDraft(value);
+        const selectedIndex = OFFICE_COLORS.indexOf(value.toLowerCase());
+        const nextIndex = Math.max(0, selectedIndex);
+        setActiveIndex(nextIndex);
+        const frame = requestAnimationFrame(()=>colorRefs.current[nextIndex]?.focus({
+                preventScroll: true
+            }));
+        return ()=>cancelAnimationFrame(frame);
+    }, [
+        open,
+        value
+    ]);
+    const choose = (color, close)=>{
+        setDraft(color);
+        close();
+        onValueChange(color);
+    };
+    const applyDraft = (close)=>{
+        if (normalizedDraft) choose(normalizedDraft, close);
+    };
+    const moveColorFocus = (event, index)=>{
+        const columns = renderedColorGridColumns(event.currentTarget);
+        let nextIndex = index;
+        if ('ArrowLeft' === event.key) nextIndex = Math.max(0, index - 1);
+        else if ('ArrowRight' === event.key) nextIndex = Math.min(OFFICE_COLORS.length - 1, index + 1);
+        else if ('ArrowUp' === event.key) nextIndex = verticalColorIndex(index, -1, columns);
+        else if ('ArrowDown' === event.key) nextIndex = verticalColorIndex(index, 1, columns);
+        else if ('Home' === event.key) nextIndex = 0;
+        else {
+            if ('End' !== event.key) return;
+            nextIndex = OFFICE_COLORS.length - 1;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setActiveIndex(nextIndex);
+        colorRefs.current[nextIndex]?.focus({
+            preventScroll: true
+        });
+    };
+    const colorOption = (color, index, close)=>/*#__PURE__*/ jsx("button", {
+            ref: (element)=>{
+                colorRefs.current[index] = element;
+            },
+            type: "button",
+            role: "option",
+            "aria-label": `颜色 ${color}`,
+            "aria-selected": color.toLowerCase() === value.toLowerCase(),
+            tabIndex: index === activeIndex ? 0 : -1,
+            style: {
+                backgroundColor: color,
+                color: swatchForeground(color)
+            },
+            onFocus: ()=>setActiveIndex(index),
+            onKeyDown: (event)=>moveColorFocus(event, index),
+            onClick: ()=>choose(color, close),
+            children: color.toLowerCase() === value.toLowerCase() && /*#__PURE__*/ jsx(Check, {
+                size: 13,
+                "aria-hidden": "true"
+            })
+        }, color);
+    return /*#__PURE__*/ jsx(Popover, {
+        label: ariaLabel,
+        panelLabel: ariaLabel,
+        panelRole: "dialog",
+        placement: "bottom-end",
+        portal: true,
+        className: `work-office-color-picker${compact ? ' compact' : ''}${triggerLabel ? ' labeled' : ''}${className ? ` ${className}` : ''}`,
+        panelClassName: "work-office-color-menu",
+        disabled: disabled,
+        open: open,
+        onOpenChange: setOpen,
+        trigger: (triggerProps)=>/*#__PURE__*/ jsxs("button", {
+                ...triggerProps,
+                className: "work-office-color-trigger",
+                title: ariaLabel,
+                children: [
+                    triggerIcon ? /*#__PURE__*/ jsx("span", {
+                        className: "work-office-color-trigger-icon",
+                        "aria-hidden": "true",
+                        children: triggerIcon
+                    }) : null,
+                    /*#__PURE__*/ jsx("span", {
+                        className: "work-office-color-swatch",
+                        style: {
+                            backgroundColor: value
+                        },
+                        "aria-hidden": "true"
+                    }),
+                    triggerLabel ? /*#__PURE__*/ jsx("span", {
+                        className: "work-office-color-trigger-label",
+                        children: triggerLabel
+                    }) : compact ? null : /*#__PURE__*/ jsx("span", {
+                        className: "work-office-color-value",
+                        children: value.toUpperCase()
+                    }),
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        size: 12,
+                        "aria-hidden": "true"
+                    })
+                ]
+            }),
+        children: (close)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "work-office-color-palette",
+                        role: "listbox",
+                        "aria-label": "颜色",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "work-office-color-section-title",
+                                children: "主题颜色"
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "work-office-color-grid theme",
+                                children: THEME_COLORS.map((color, index)=>colorOption(color, index, close))
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "work-office-color-section-title",
+                                children: "标准色"
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "work-office-color-grid standard",
+                                children: STANDARD_COLORS.map((color, index)=>colorOption(color, THEME_COLORS.length + index, close))
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "work-office-color-custom",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "work-office-color-custom-preview",
+                                "data-testid": "custom-color-preview",
+                                style: {
+                                    backgroundColor: normalizedDraft ?? value
+                                },
+                                "aria-hidden": "true"
+                            }),
+                            /*#__PURE__*/ jsxs("label", {
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: "自定义颜色"
+                                    }),
+                                    /*#__PURE__*/ jsx("input", {
+                                        type: "text",
+                                        "aria-label": "自定义颜色值",
+                                        "aria-invalid": draft.trim() && !normalizedDraft ? true : void 0,
+                                        value: draft,
+                                        spellCheck: false,
+                                        onChange: (event)=>setDraft(event.target.value),
+                                        onKeyDown: (event)=>{
+                                            if ('Enter' === event.key) {
+                                                event.preventDefault();
+                                                applyDraft(close);
+                                            }
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(button_Button, {
+                                size: "compact",
+                                tone: "primary",
+                                "aria-label": "应用自定义颜色",
+                                disabled: !normalizedDraft,
+                                onClick: ()=>applyDraft(close),
+                                children: "应用"
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+}
+function renderedColorGridColumns(option) {
+    const grid = option.closest('.work-office-color-grid');
+    if (!grid || "u" < typeof window) return COLOR_GRID_COLUMNS;
+    const renderedColumns = Number.parseInt(window.getComputedStyle(grid).getPropertyValue(COLOR_GRID_COLUMNS_PROPERTY), 10);
+    return Number.isFinite(renderedColumns) && renderedColumns > 0 ? renderedColumns : COLOR_GRID_COLUMNS;
+}
+function verticalColorIndex(index, direction, columns) {
+    const inTheme = index < THEME_COLORS.length;
+    const groupStart = inTheme ? 0 : THEME_COLORS.length;
+    const groupLength = inTheme ? THEME_COLORS.length : STANDARD_COLORS.length;
+    const localIndex = index - groupStart;
+    const column = localIndex % columns;
+    const row = Math.floor(localIndex / columns);
+    if (direction < 0) {
+        if (row > 0) return index - columns;
+        if (inTheme) return index;
+        const previousLastRow = Math.floor((THEME_COLORS.length - 1) / columns) * columns;
+        return Math.min(THEME_COLORS.length - 1, previousLastRow + column);
+    }
+    const nextLocalIndex = (row + 1) * columns + column;
+    if (nextLocalIndex < groupLength) return groupStart + nextLocalIndex;
+    if (!inTheme) return index;
+    return THEME_COLORS.length + Math.min(column, STANDARD_COLORS.length - 1);
+}
+function normalizeCssColor(value) {
+    const trimmed = value.trim();
+    if (/^#[0-9a-f]{3}$/i.test(trimmed)) return `#${trimmed.slice(1).split('').map((part)=>`${part}${part}`).join('')}`.toLowerCase();
+    if (/^#[0-9a-f]{6}$/i.test(trimmed)) return trimmed.toLowerCase();
+    return null;
+}
+function swatchForeground(color) {
+    const red = Number.parseInt(color.slice(1, 3), 16);
+    const green = Number.parseInt(color.slice(3, 5), 16);
+    const blue = Number.parseInt(color.slice(5, 7), 16);
+    return 0.299 * red + 0.587 * green + 0.114 * blue > 176 ? '#111827' : '#ffffff';
+}
+const MODAL_DIALOG_SELECTOR = '[role="dialog"][aria-modal="true"]';
+const OFFICE_SHORTCUT_IGNORE_SELECTOR = '[data-office-shortcuts="ignore"]';
+function isOfficeShortcutBlocked(target) {
+    if ("u" < typeof document) return false;
+    if (target instanceof Element && (target.closest(MODAL_DIALOG_SELECTOR) || target.closest(OFFICE_SHORTCUT_IGNORE_SELECTOR))) return true;
+    if (document.activeElement instanceof Element && (document.activeElement.closest(MODAL_DIALOG_SELECTOR) || document.activeElement.closest(OFFICE_SHORTCUT_IGNORE_SELECTOR))) return true;
+    return null !== document.querySelector(MODAL_DIALOG_SELECTOR);
+}
+export { OfficeColorPicker, isOfficeShortcutBlocked };