@rtif-sdk/web 1.0.0 → 1.1.0

package/dist/block-type-dropdown.js

@@ -0,0 +1,276 @@
+/**
+ * Block type dropdown — a combobox-style dropdown for switching block types.
+ *
+ * Shows the currently active block type (e.g., "Heading 1", "Bullet List")
+ * and lets the user switch to a different type. Uses the same
+ * `mousedown + preventDefault()` pattern as the toolbar to avoid stealing
+ * editor focus.
+ *
+ * @module
+ */
+// ---------------------------------------------------------------------------
+// Module-scoped counter for unique IDs
+// ---------------------------------------------------------------------------
+let instanceCounter = 0;
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+/**
+ * Create a block type dropdown backed by a {@link CommandBus}.
+ *
+ * The dropdown reflects the currently active block type by querying
+ * `bus.isActive()` for each item. It subscribes to the bus for live updates.
+ *
+ * @param container - The DOM element to render the dropdown into
+ * @param bus - The CommandBus to execute commands and query state
+ * @param items - Array of dropdown item configurations
+ * @returns A handle for lifecycle management
+ *
+ * @example
+ * ```ts
+ * const dropdown = createBlockTypeDropdown(
+ *   document.getElementById('toolbar')!,
+ *   bus,
+ *   [
+ *     { command: null, label: 'Paragraph' },
+ *     { command: 'toggleHeading', payload: { level: 1 }, label: 'Heading 1', icon: 'H1' },
+ *   ],
+ * );
+ * ```
+ */
+export function createBlockTypeDropdown(container, bus, items) {
+    const doc = container.ownerDocument;
+    const id = ++instanceCounter;
+    const menuId = `rtif-btd-menu-${id}`;
+    let isOpen = false;
+    let highlightIndex = -1;
+    let destroyed = false;
+    // -----------------------------------------------------------------------
+    // DOM creation
+    // -----------------------------------------------------------------------
+    const wrapper = doc.createElement('div');
+    wrapper.className = 'rtif-block-type-dropdown';
+    // Trigger button
+    const trigger = doc.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'rtif-block-type-dropdown-trigger';
+    trigger.setAttribute('role', 'combobox');
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-controls', menuId);
+    trigger.setAttribute('aria-label', 'Block type');
+    const iconSpan = doc.createElement('span');
+    iconSpan.className = 'rtif-block-type-dropdown-icon';
+    const labelSpan = doc.createElement('span');
+    labelSpan.className = 'rtif-block-type-dropdown-label';
+    const chevronSpan = doc.createElement('span');
+    chevronSpan.className = 'rtif-block-type-dropdown-chevron';
+    chevronSpan.textContent = '\u25BE'; // ▾
+    trigger.appendChild(iconSpan);
+    trigger.appendChild(labelSpan);
+    trigger.appendChild(chevronSpan);
+    // Menu
+    const menu = doc.createElement('div');
+    menu.id = menuId;
+    menu.className = 'rtif-block-type-dropdown-menu';
+    menu.setAttribute('role', 'listbox');
+    menu.setAttribute('aria-label', 'Block types');
+    menu.hidden = true;
+    // Options
+    const optionEls = [];
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const option = doc.createElement('div');
+        option.className = 'rtif-block-type-dropdown-option';
+        option.id = `rtif-btd-option-${id}-${i}`;
+        option.setAttribute('role', 'option');
+        option.setAttribute('aria-selected', 'false');
+        if (item.icon) {
+            const optIcon = doc.createElement('span');
+            optIcon.className = 'rtif-block-type-dropdown-option-icon';
+            optIcon.textContent = item.icon;
+            option.appendChild(optIcon);
+        }
+        const optLabel = doc.createElement('span');
+        optLabel.className = 'rtif-block-type-dropdown-option-label';
+        optLabel.textContent = item.label;
+        option.appendChild(optLabel);
+        option.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            selectItem(i);
+        });
+        menu.appendChild(option);
+        optionEls.push(option);
+    }
+    wrapper.appendChild(trigger);
+    wrapper.appendChild(menu);
+    container.appendChild(wrapper);
+    // -----------------------------------------------------------------------
+    // Active state detection
+    // -----------------------------------------------------------------------
+    function findActiveIndex() {
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.command !== null && bus.isActive(item.command, item.payload)) {
+                return i;
+            }
+        }
+        // Default: find the null-command item (Paragraph), else fall back to 0
+        const nullIdx = items.findIndex((it) => it.command === null);
+        return nullIdx !== -1 ? nullIdx : 0;
+    }
+    function updateDisplay() {
+        const activeIdx = findActiveIndex();
+        const active = items[activeIdx];
+        iconSpan.textContent = active.icon ?? '';
+        labelSpan.textContent = active.label;
+        // Update aria-selected on options
+        for (let i = 0; i < optionEls.length; i++) {
+            optionEls[i].setAttribute('aria-selected', i === activeIdx ? '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
+        for (const el of optionEls) {
+            el.classList.remove('rtif-block-type-dropdown-option-highlighted');
+        }
+        doc.removeEventListener('mousedown', onDocumentMouseDown);
+    }
+    // -----------------------------------------------------------------------
+    // Selection
+    // -----------------------------------------------------------------------
+    function selectItem(index) {
+        const item = items[index];
+        if (item.command === null) {
+            // "Paragraph" — toggle off the currently active type
+            const activeIdx = findActiveIndex();
+            const activeItem = items[activeIdx];
+            if (activeItem && activeItem.command !== null) {
+                bus.execute(activeItem.command, activeItem.payload);
+            }
+            // If already on paragraph, this is a no-op
+        }
+        else {
+            bus.execute(item.command, item.payload);
+        }
+        closeMenu();
+    }
+    // -----------------------------------------------------------------------
+    // Keyboard navigation
+    // -----------------------------------------------------------------------
+    function onKeyDown(e) {
+        if (!isOpen)
+            return;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                highlightIndex = (highlightIndex + 1) % items.length;
+                updateHighlight();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                highlightIndex = highlightIndex <= 0
+                    ? items.length - 1
+                    : highlightIndex - 1;
+                updateHighlight();
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                if (highlightIndex >= 0 && highlightIndex < items.length) {
+                    selectItem(highlightIndex);
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                closeMenu();
+                break;
+            }
+        }
+    }
+    function updateHighlight() {
+        for (let i = 0; i < optionEls.length; i++) {
+            const el = optionEls[i];
+            if (i === highlightIndex) {
+                el.classList.add('rtif-block-type-dropdown-option-highlighted');
+            }
+            else {
+                el.classList.remove('rtif-block-type-dropdown-option-highlighted');
+            }
+        }
+        if (highlightIndex >= 0 && highlightIndex < optionEls.length) {
+            trigger.setAttribute('aria-activedescendant', optionEls[highlightIndex].id);
+        }
+        else {
+            trigger.removeAttribute('aria-activedescendant');
+        }
+    }
+    // -----------------------------------------------------------------------
+    // Event handlers
+    // -----------------------------------------------------------------------
+    function onTriggerMouseDown(e) {
+        e.preventDefault();
+    }
+    function onTriggerClick() {
+        if (isOpen) {
+            closeMenu();
+        }
+        else {
+            openMenu();
+        }
+    }
+    function onDocumentMouseDown(e) {
+        // Close on outside click, but not if clicking inside wrapper
+        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=block-type-dropdown.js.map

package/dist/block-type-dropdown.js.map

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

package/dist/color-picker.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Color picker — a swatch grid dropdown for applying text colors.
+ *
+ * Shows the current text color in the trigger button and lets the user
+ * pick from preset swatches or enter a custom hex color. 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 color swatches displayed in the color picker grid.
+ *
+ * Row 1: dark/saturated colors.
+ * Row 2: light/pastel colors.
+ *
+ * @example
+ * ```ts
+ * const picker = createColorPicker({
+ *   container, bus, engine,
+ *   swatches: DEFAULT_COLOR_SWATCHES.slice(0, 10), // first row only
+ * });
+ * ```
+ */
+export declare const DEFAULT_COLOR_SWATCHES: readonly string[];
+/**
+ * Configuration for the color picker.
+ *
+ * @example
+ * ```ts
+ * const picker = createColorPicker({
+ *   container: document.getElementById('toolbar')!,
+ *   bus: editor.commandBus,
+ *   engine,
+ *   swatches: DEFAULT_COLOR_SWATCHES,
+ *   showCustom: true,
+ * });
+ * ```
+ */
+export interface ColorPickerConfig {
+    /** The DOM element to render the picker into. */
+    readonly container: HTMLElement;
+    /** The command bus for executing color commands. */
+    readonly bus: CommandBus;
+    /** The engine for querying the current mark value. */
+    readonly engine: IEditorEngine;
+    /** Color swatches to display (default: {@link DEFAULT_COLOR_SWATCHES}). */
+    readonly swatches?: readonly string[];
+    /** Number of columns in the swatch grid (default: 10). */
+    readonly columns?: number;
+    /** Whether to show the custom hex color input (default: true). */
+    readonly showCustom?: boolean;
+}
+/**
+ * Handle returned by {@link createColorPicker} for lifecycle management.
+ *
+ * @example
+ * ```ts
+ * const picker = createColorPicker({ container, bus, engine });
+ * // ... later:
+ * picker.destroy();
+ * ```
+ */
+export interface ColorPickerHandle {
+    /** The picker's root wrapper element. */
+    readonly element: HTMLElement;
+    /** Remove all event listeners and DOM nodes. Idempotent. */
+    destroy(): void;
+}
+/**
+ * Create a color picker dropdown backed by a {@link CommandBus}.
+ *
+ * The picker reflects the current text color 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 = createColorPicker({
+ *   container: toolbar,
+ *   bus: editor.commandBus,
+ *   engine,
+ * });
+ * ```
+ */
+export declare function createColorPicker(config: ColorPickerConfig): ColorPickerHandle;
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../src/color-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;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,MAAM,EAOnD,CAAC;AAMF;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,oDAAoD;IACpD,QAAQ,CAAC,GAAG,EAAE,UAAU,CAAC;IACzB,sDAAsD;IACtD,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,2EAA2E;IAC3E,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,kEAAkE;IAClE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,4DAA4D;IAC5D,OAAO,IAAI,IAAI,CAAC;CACjB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,iBAAiB,CA2V9E"}