@rtif-sdk/web 1.0.0 → 1.1.0

package/dist/font-family-picker.js

@@ -0,0 +1,314 @@
+/**
+ * Font family picker — a dropdown for selecting text font.
+ *
+ * Each option is rendered in its own font face so the user can preview
+ * how the font looks. Shows the current font name in the trigger button.
+ * Uses the same `mousedown + preventDefault()` pattern as the toolbar to
+ * avoid stealing editor focus.
+ *
+ * @module
+ */
+import { getMarkValueAtSelection } from './plugins/mark-utils.js';
+// ---------------------------------------------------------------------------
+// Module-scoped counter for unique IDs
+// ---------------------------------------------------------------------------
+let instanceCounter = 0;
+/**
+ * Default font families displayed in the picker dropdown.
+ *
+ * Organized by category: sans-serif, serif, monospace.
+ *
+ * @example
+ * ```ts
+ * const picker = createFontFamilyPicker({
+ *   container, bus, engine,
+ *   families: DEFAULT_FONT_FAMILIES.filter(f => f.stack.includes('sans')),
+ * });
+ * ```
+ */
+export const DEFAULT_FONT_FAMILIES = [
+    // Sans-serif
+    { value: 'Arial', label: 'Arial', stack: 'Arial, sans-serif' },
+    { value: 'Helvetica Neue', label: 'Helvetica Neue', stack: '"Helvetica Neue", Helvetica, sans-serif' },
+    { value: 'Verdana', label: 'Verdana', stack: 'Verdana, sans-serif' },
+    { value: 'Trebuchet MS', label: 'Trebuchet MS', stack: '"Trebuchet MS", sans-serif' },
+    { value: 'Tahoma', label: 'Tahoma', stack: 'Tahoma, sans-serif' },
+    // Serif
+    { value: 'Times New Roman', label: 'Times New Roman', stack: '"Times New Roman", Times, serif' },
+    { value: 'Georgia', label: 'Georgia', stack: 'Georgia, serif' },
+    { value: 'Garamond', label: 'Garamond', stack: 'Garamond, serif' },
+    { value: 'Palatino', label: 'Palatino', stack: 'Palatino, "Palatino Linotype", serif' },
+    // Monospace
+    { value: 'Courier New', label: 'Courier New', stack: '"Courier New", Courier, monospace' },
+    { value: 'Lucida Console', label: 'Lucida Console', stack: '"Lucida Console", Monaco, monospace' },
+    { value: 'Consolas', label: 'Consolas', stack: 'Consolas, monospace' },
+    { value: 'Monaco', label: 'Monaco', stack: 'Monaco, monospace' },
+];
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+/**
+ * Create a font family picker dropdown backed by a {@link CommandBus}.
+ *
+ * The picker reflects the current font family by querying the engine's
+ * mark state. It subscribes to the bus for live updates. Each option
+ * is rendered in its own font face for preview.
+ *
+ * @param config - Picker configuration
+ * @returns A handle for lifecycle management
+ *
+ * @example
+ * ```ts
+ * const picker = createFontFamilyPicker({
+ *   container: toolbar,
+ *   bus: editor.commandBus,
+ *   engine,
+ * });
+ * ```
+ */
+export function createFontFamilyPicker(config) {
+    const { container, bus, engine, families = DEFAULT_FONT_FAMILIES, } = config;
+    const doc = container.ownerDocument;
+    const id = ++instanceCounter;
+    const menuId = `rtif-font-family-menu-${id}`;
+    let isOpen = false;
+    let highlightIndex = -1;
+    let destroyed = false;
+    // Total selectable items: "Default" + family options
+    const totalItems = 1 + families.length;
+    // -----------------------------------------------------------------------
+    // DOM creation
+    // -----------------------------------------------------------------------
+    const wrapper = doc.createElement('div');
+    wrapper.className = 'rtif-font-family-picker';
+    // Trigger button
+    const trigger = doc.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'rtif-font-family-picker-trigger';
+    trigger.setAttribute('role', 'combobox');
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-controls', menuId);
+    trigger.setAttribute('aria-label', 'Font family');
+    const labelSpan = doc.createElement('span');
+    labelSpan.className = 'rtif-font-family-picker-label';
+    const chevron = doc.createElement('span');
+    chevron.className = 'rtif-font-family-picker-chevron';
+    chevron.textContent = '\u25BE'; // ▾
+    trigger.appendChild(labelSpan);
+    trigger.appendChild(chevron);
+    // Menu
+    const menu = doc.createElement('div');
+    menu.id = menuId;
+    menu.className = 'rtif-font-family-picker-menu';
+    menu.setAttribute('role', 'listbox');
+    menu.setAttribute('aria-label', 'Font families');
+    menu.hidden = true;
+    // "Default" option (removes font family)
+    const defaultOption = doc.createElement('div');
+    defaultOption.className = 'rtif-font-family-picker-option rtif-font-family-picker-default';
+    defaultOption.id = `rtif-font-family-opt-${id}-default`;
+    defaultOption.setAttribute('role', 'option');
+    defaultOption.setAttribute('aria-selected', 'false');
+    defaultOption.textContent = 'Default';
+    defaultOption.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        selectDefault();
+    });
+    menu.appendChild(defaultOption);
+    // Separator
+    const sep = doc.createElement('div');
+    sep.className = 'rtif-font-family-picker-separator';
+    sep.setAttribute('role', 'separator');
+    menu.appendChild(sep);
+    // Family options
+    const optionEls = [];
+    for (let i = 0; i < families.length; i++) {
+        const family = families[i];
+        const option = doc.createElement('div');
+        option.className = 'rtif-font-family-picker-option';
+        option.id = `rtif-font-family-opt-${id}-${i}`;
+        option.setAttribute('role', 'option');
+        option.setAttribute('aria-selected', 'false');
+        option.setAttribute('data-family', family.value);
+        option.textContent = family.label;
+        option.style.fontFamily = family.stack;
+        option.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            selectFamily(family.value);
+        });
+        menu.appendChild(option);
+        optionEls.push(option);
+    }
+    wrapper.appendChild(trigger);
+    wrapper.appendChild(menu);
+    container.appendChild(wrapper);
+    // -----------------------------------------------------------------------
+    // Active state detection
+    // -----------------------------------------------------------------------
+    function findFamilyOption(value) {
+        return families.find((f) => f.value === value);
+    }
+    function updateDisplay() {
+        const { value, isMixed } = getMarkValueAtSelection(engine, 'fontFamily');
+        if (isMixed) {
+            labelSpan.textContent = '\u2014'; // em dash
+            labelSpan.style.fontFamily = '';
+        }
+        else if (value != null) {
+            const familyStr = value;
+            const matched = findFamilyOption(familyStr);
+            labelSpan.textContent = matched?.label ?? familyStr;
+            labelSpan.style.fontFamily = matched?.stack ?? familyStr;
+        }
+        else {
+            labelSpan.textContent = 'Default';
+            labelSpan.style.fontFamily = '';
+        }
+        // Update option selection
+        defaultOption.setAttribute('aria-selected', value == null && !isMixed ? 'true' : 'false');
+        for (const opt of optionEls) {
+            const optFamily = opt.getAttribute('data-family');
+            opt.setAttribute('aria-selected', !isMixed && value === optFamily ? 'true' : 'false');
+        }
+    }
+    // -----------------------------------------------------------------------
+    // Open / close
+    // -----------------------------------------------------------------------
+    function openMenu() {
+        if (isOpen)
+            return;
+        isOpen = true;
+        highlightIndex = -1;
+        menu.hidden = false;
+        trigger.setAttribute('aria-expanded', 'true');
+        trigger.removeAttribute('aria-activedescendant');
+        doc.addEventListener('mousedown', onDocumentMouseDown);
+    }
+    function closeMenu() {
+        if (!isOpen)
+            return;
+        isOpen = false;
+        highlightIndex = -1;
+        menu.hidden = true;
+        trigger.setAttribute('aria-expanded', 'false');
+        trigger.removeAttribute('aria-activedescendant');
+        // Clear highlight
+        defaultOption.classList.remove('rtif-font-family-picker-option-highlighted');
+        for (const el of optionEls) {
+            el.classList.remove('rtif-font-family-picker-option-highlighted');
+        }
+        doc.removeEventListener('mousedown', onDocumentMouseDown);
+    }
+    // -----------------------------------------------------------------------
+    // Selection
+    // -----------------------------------------------------------------------
+    function selectDefault() {
+        bus.execute('removeFontFamily');
+        closeMenu();
+    }
+    function selectFamily(family) {
+        bus.execute('setFontFamily', { family });
+        closeMenu();
+    }
+    // -----------------------------------------------------------------------
+    // Keyboard navigation
+    // -----------------------------------------------------------------------
+    function getOptionId(index) {
+        if (index === 0)
+            return defaultOption.id;
+        return optionEls[index - 1]?.id ?? '';
+    }
+    function onKeyDown(e) {
+        if (!isOpen)
+            return;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                highlightIndex = (highlightIndex + 1) % totalItems;
+                updateHighlight();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                highlightIndex = highlightIndex <= 0
+                    ? totalItems - 1
+                    : highlightIndex - 1;
+                updateHighlight();
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                if (highlightIndex === 0) {
+                    selectDefault();
+                }
+                else if (highlightIndex > 0 && highlightIndex <= families.length) {
+                    selectFamily(families[highlightIndex - 1].value);
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                closeMenu();
+                break;
+            }
+        }
+    }
+    function updateHighlight() {
+        defaultOption.classList.toggle('rtif-font-family-picker-option-highlighted', highlightIndex === 0);
+        for (let i = 0; i < optionEls.length; i++) {
+            optionEls[i].classList.toggle('rtif-font-family-picker-option-highlighted', highlightIndex === i + 1);
+        }
+        if (highlightIndex >= 0 && highlightIndex < totalItems) {
+            trigger.setAttribute('aria-activedescendant', getOptionId(highlightIndex));
+        }
+        else {
+            trigger.removeAttribute('aria-activedescendant');
+        }
+    }
+    // -----------------------------------------------------------------------
+    // Event handlers
+    // -----------------------------------------------------------------------
+    function onTriggerMouseDown(e) {
+        e.preventDefault();
+    }
+    function onTriggerClick() {
+        if (isOpen) {
+            closeMenu();
+        }
+        else {
+            openMenu();
+        }
+    }
+    function onDocumentMouseDown(e) {
+        if (!wrapper.contains(e.target)) {
+            closeMenu();
+        }
+    }
+    trigger.addEventListener('mousedown', onTriggerMouseDown);
+    trigger.addEventListener('click', onTriggerClick);
+    trigger.addEventListener('keydown', onKeyDown);
+    // -----------------------------------------------------------------------
+    // Bus subscription
+    // -----------------------------------------------------------------------
+    updateDisplay();
+    const unsubscribe = bus.subscribe(() => updateDisplay());
+    // -----------------------------------------------------------------------
+    // Handle
+    // -----------------------------------------------------------------------
+    return {
+        element: wrapper,
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            unsubscribe();
+            closeMenu();
+            trigger.removeEventListener('mousedown', onTriggerMouseDown);
+            trigger.removeEventListener('click', onTriggerClick);
+            trigger.removeEventListener('keydown', onKeyDown);
+            wrapper.remove();
+        },
+    };
+}
+//# sourceMappingURL=font-family-picker.js.map

package/dist/font-family-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-family-picker.js","sourceRoot":"","sources":["../src/font-family-picker.ts"],"names":[],"mappings":"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"}

package/dist/font-size-picker.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Font size picker — a dropdown for selecting text size.
+ *
+ * Shows the current font size in the trigger button and lets the user
+ * choose from a list of preset sizes. Uses the same
+ * `mousedown + preventDefault()` pattern as the toolbar to avoid stealing
+ * editor focus.
+ *
+ * @module
+ */
+import type { IEditorEngine } from '@rtif-sdk/engine';
+import type { CommandBus } from './command-bus.js';
+/**
+ * Default font sizes displayed in the picker dropdown.
+ *
+ * @example
+ * ```ts
+ * const picker = createFontSizePicker({
+ *   container, bus, engine,
+ *   sizes: DEFAULT_FONT_SIZES.filter(s => s >= 12 && s <= 36),
+ * });
+ * ```
+ */
+export declare const DEFAULT_FONT_SIZES: readonly number[];
+/**
+ * Configuration for the font size picker.
+ *
+ * @example
+ * ```ts
+ * const picker = createFontSizePicker({
+ *   container: document.getElementById('toolbar')!,
+ *   bus: editor.commandBus,
+ *   engine,
+ * });
+ * ```
+ */
+export interface FontSizePickerConfig {
+    /** The DOM element to render the picker into. */
+    readonly container: HTMLElement;
+    /** The command bus for executing font size commands. */
+    readonly bus: CommandBus;
+    /** The engine for querying the current mark value. */
+    readonly engine: IEditorEngine;
+    /** Font sizes to display (default: {@link DEFAULT_FONT_SIZES}). */
+    readonly sizes?: readonly number[];
+}
+/**
+ * Handle returned by {@link createFontSizePicker} for lifecycle management.
+ *
+ * @example
+ * ```ts
+ * const picker = createFontSizePicker({ container, bus, engine });
+ * // ... later:
+ * picker.destroy();
+ * ```
+ */
+export interface FontSizePickerHandle {
+    /** The picker's root wrapper element. */
+    readonly element: HTMLElement;
+    /** Remove all event listeners and DOM nodes. Idempotent. */
+    destroy(): void;
+}
+/**
+ * Create a font size picker dropdown backed by a {@link CommandBus}.
+ *
+ * The picker reflects the current font size by querying the engine's
+ * mark state. It subscribes to the bus for live updates.
+ *
+ * @param config - Picker configuration
+ * @returns A handle for lifecycle management
+ *
+ * @example
+ * ```ts
+ * const picker = createFontSizePicker({
+ *   container: toolbar,
+ *   bus: editor.commandBus,
+ *   engine,
+ * });
+ * ```
+ */
+export declare function createFontSizePicker(config: FontSizePickerConfig): FontSizePickerHandle;
+//# sourceMappingURL=font-size-picker.d.ts.map

package/dist/font-size-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-size-picker.d.ts","sourceRoot":"","sources":["../src/font-size-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAanD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAC;AAMF;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,wDAAwD;IACxD,QAAQ,CAAC,GAAG,EAAE,UAAU,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,mEAAmE;IACnE,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACpC;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAoB;IACnC,yCAAyC;IACzC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,4DAA4D;IAC5D,OAAO,IAAI,IAAI,CAAC;CACjB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,oBAAoB,GAAG,oBAAoB,CA8RvF"}