stilo-editor 0.1.0 → 0.2.1

package/dist/ui/components/font-size-input.d.ts

@@ -0,0 +1,21 @@
+import { type Editor } from '../../index';
+import type { Messages } from '../i18n/types';
+import type { ToolbarFontSizeInput } from '../toolbar/types';
+/** Options of {@link createFontSizeInput}. */
+export interface CreateFontSizeInputOptions {
+    /** The element the list scrolls with: the toolbar. */
+    container: HTMLElement;
+    messages: Messages;
+}
+/** The font size control and its list (T-038). */
+export interface FontSizeInput {
+    /** The wrapper of the three parts. */
+    readonly element: HTMLElement;
+    /** The toolbar items, in order: decrease, field, increase. */
+    readonly parts: readonly HTMLElement[];
+    /** Shows the size at the selection and refreshes the enabled state. */
+    update(): void;
+    destroy(): void;
+}
+/** Creates the font size control of `item` (list closed); the list is mounted in `container`. */
+export declare function createFontSizeInput(editor: Editor, item: ToolbarFontSizeInput, options: CreateFontSizeInputOptions): FontSizeInput;

package/dist/ui/components/icon-menu.d.ts

@@ -0,0 +1,20 @@
+import type { Editor } from '../../index';
+import type { Messages } from '../i18n/types';
+import type { ToolbarIconMenu } from '../toolbar/types';
+/** Options of {@link createIconMenu}. */
+export interface IconMenuOptions {
+    /** The element the menu scrolls with: the toolbar. */
+    container: HTMLElement;
+    messages: Messages;
+    /** Whether shortcuts are shown with Mac symbols. */
+    mac: boolean;
+}
+/** A button that shows the icon of the active option and opens the options in a row (T-039). */
+export interface IconMenu {
+    readonly trigger: HTMLButtonElement;
+    /** Shows the active option and refreshes the enabled states. */
+    update(): void;
+    destroy(): void;
+}
+/** Creates the trigger of `item` and its menu (closed), mounted in `container`. */
+export declare function createIconMenu(editor: Editor, item: ToolbarIconMenu, options: IconMenuOptions): IconMenu;

package/dist/ui/components/status-bar.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from '../../index';
+import type { Messages } from '../i18n/types';
+/** Options of {@link createStatusBar}. */
+export interface StatusBarOptions {
+    /** The status bar element is appended inside it. */
+    container: HTMLElement;
+    /** UI strings. Default: `en`. */
+    messages?: Messages;
+}
+/** A status bar created by {@link createStatusBar}. */
+export interface StatusBar {
+    readonly element: HTMLElement;
+    /** Counts again now (it also counts 500 ms after the last change). */
+    update(): void;
+    /** Removes the status bar and every listener. Calling it twice is a no-op. */
+    destroy(): void;
+}
+/** Creates a status bar with the word and character count of the document (F-901). */
+export declare function createStatusBar(editor: Editor, options: StatusBarOptions): StatusBar;

package/dist/ui/components/table-actions.d.ts

@@ -0,0 +1,25 @@
+import type { Editor } from '../../index';
+import type { Messages } from '../i18n/types';
+/** A table operation: the command of the same name, `toggleHeader*` for the header toggles. */
+export type TableAction = 'addRowBefore' | 'addRowAfter' | 'deleteRow' | 'addColumnBefore' | 'addColumnAfter' | 'deleteColumn' | 'mergeCells' | 'splitCell' | 'toggleHeaderRow' | 'toggleHeaderColumn' | 'deleteTable';
+/** Options of {@link createTableActions}. */
+export interface TableActionsOptions {
+    /** The operations, in groups divided by a separator. */
+    groups: ReadonlyArray<ReadonlyArray<TableAction>>;
+    /** The accessible name of the menu. */
+    label: string;
+    messages: Messages;
+    /** Closes the popover holding the menu (`Tab`, and before an operation runs). */
+    close(): void;
+}
+/** A `role="menu"` of table operations, for a popover. */
+export interface TableActions {
+    readonly element: HTMLElement;
+    /** Enables the items whose command can run and checks the header toggles. */
+    refresh(): void;
+    /** Focuses the first enabled item. */
+    focusFirst(): void;
+    destroy(): void;
+}
+/** Creates a menu of table operations; an item runs its command on the selection. */
+export declare function createTableActions(editor: Editor, options: TableActionsOptions): TableActions;

package/dist/ui/components/table-handles.d.ts

@@ -0,0 +1,16 @@
+import type { Editor } from '../../index';
+import type { Messages } from '../i18n/types';
+/** Options of {@link createTableHandles}. */
+export interface TableHandlesOptions {
+    /** The element the handles scroll with: the parent of the editable element. */
+    container: HTMLElement;
+    messages: Messages;
+}
+/** The handles of the row, the column and the table of the cell under the mouse or the cursor. */
+export interface TableHandles {
+    /** Shows, moves or hides the handles after the selection, the focus or the mouse changed. */
+    update(): void;
+    destroy(): void;
+}
+/** Creates the table handles, which follow the editor on their own. */
+export declare function createTableHandles(editor: Editor, options: TableHandlesOptions): TableHandles;

package/dist/ui/components/table-menu.d.ts

@@ -0,0 +1,21 @@
+import type { Editor } from '../../index';
+import type { Messages } from '../i18n/types';
+/** Options of {@link createTableMenu}. */
+export interface TableMenuOptions {
+    /** The toolbar button that opens the menu. */
+    anchor: HTMLElement;
+    /** The element the menu scrolls with: the toolbar. */
+    container: HTMLElement;
+    messages: Messages;
+}
+/** The table menu: the insert grid outside a table, the table operations inside one. */
+export interface TableMenu {
+    readonly isOpen: boolean;
+    open(): void;
+    /** Closes the menu and gives the focus back to the editor. */
+    close(): void;
+    toggle(): void;
+    destroy(): void;
+}
+/** Creates the table menu (closed), anchored to the toolbar button. */
+export declare function createTableMenu(editor: Editor, options: TableMenuOptions): TableMenu;

package/dist/ui/i18n/types.d.ts

@@ -1,4 +1,4 @@
 /** Keys of the built-in UI strings (dot.case). */
-export type MessageKey = 'toolbar.label' | 'toolbar.undo' | 'toolbar.redo' | 'toolbar.bold' | 'toolbar.italic' | 'toolbar.underline' | 'toolbar.strike' | 'toolbar.subscript' | 'toolbar.superscript' | 'toolbar.code' | 'toolbar.clearFormatting' | 'toolbar.bulletList' | 'toolbar.orderedList' | 'toolbar.blockquote' | 'toolbar.horizontalRule' | 'toolbar.link' | 'toolbar.heading' | 'heading.paragraph' | 'heading.h1' | 'heading.h2' | 'heading.h3' | 'heading.h4' | 'heading.h5' | 'heading.h6' | 'link.url' | 'link.newTab' | 'link.apply' | 'link.remove' | 'link.edit' | 'link.open' | 'toolbar.characters' | 'characters.search' | 'characters.noResults' | 'characters.symbols' | 'characters.emoji' | 'characters.punctuation' | 'characters.currency' | 'characters.math' | 'characters.arrows' | 'characters.greek' | 'characters.latin' | 'characters.signs' | 'characters.smileys' | 'characters.people' | 'characters.nature' | 'characters.food' | 'characters.travel' | 'characters.activities' | 'characters.objects' | 'characters.emojiSymbols' | 'toolbar.textColor' | 'toolbar.highlight' | 'color.more' | 'color.default' | 'color.none' | 'color.pick' | 'color.custom' | 'color.apply' | 'color.black' | 'color.darkGray2' | 'color.darkGray1' | 'color.gray' | 'color.lightGray1' | 'color.lightGray2' | 'color.lightGray3' | 'color.white' | 'color.red' | 'color.orange' | 'color.yellow' | 'color.green' | 'color.cyan' | 'color.blue' | 'color.purple' | 'color.pink' | 'color.lightRed' | 'color.lightOrange' | 'color.lightYellow' | 'color.lightGreen' | 'color.lightCyan' | 'color.lightBlue' | 'color.lightPurple' | 'color.lightPink' | 'color.darkRed' | 'color.darkOrange' | 'color.darkYellow' | 'color.darkGreen' | 'color.darkCyan' | 'color.darkBlue' | 'color.darkPurple' | 'color.darkPink';
+export type MessageKey = 'toolbar.label' | 'toolbar.undo' | 'toolbar.redo' | 'toolbar.bold' | 'toolbar.italic' | 'toolbar.underline' | 'toolbar.strike' | 'toolbar.subscript' | 'toolbar.superscript' | 'toolbar.code' | 'toolbar.clearFormatting' | 'toolbar.textCase' | 'toolbar.bulletList' | 'toolbar.orderedList' | 'toolbar.taskList' | 'toolbar.blockquote' | 'toolbar.codeBlock' | 'toolbar.horizontalRule' | 'toolbar.link' | 'toolbar.heading' | 'toolbar.fontFamily' | 'toolbar.fontSize' | 'fontSize.decrease' | 'fontSize.increase' | 'toolbar.textAlign' | 'align.left' | 'align.center' | 'align.right' | 'align.justify' | 'toolbar.lineHeight' | 'lineHeight.default' | 'textCase.upper' | 'textCase.lower' | 'textCase.title' | 'textCase.sentence' | 'textCase.toggle' | 'font.default' | 'font.sansSerif' | 'font.serif' | 'font.monospace' | 'heading.paragraph' | 'heading.h1' | 'heading.h2' | 'heading.h3' | 'heading.h4' | 'heading.h5' | 'heading.h6' | 'link.url' | 'link.newTab' | 'link.apply' | 'link.remove' | 'link.edit' | 'link.open' | 'toolbar.characters' | 'characters.search' | 'characters.noResults' | 'characters.symbols' | 'characters.emoji' | 'characters.punctuation' | 'characters.currency' | 'characters.math' | 'characters.arrows' | 'characters.greek' | 'characters.latin' | 'characters.signs' | 'characters.smileys' | 'characters.people' | 'characters.nature' | 'characters.food' | 'characters.travel' | 'characters.activities' | 'characters.objects' | 'characters.emojiSymbols' | 'toolbar.textColor' | 'toolbar.highlight' | 'color.more' | 'color.default' | 'color.none' | 'color.pick' | 'color.custom' | 'color.apply' | 'color.black' | 'color.darkGray2' | 'color.darkGray1' | 'color.gray' | 'color.lightGray1' | 'color.lightGray2' | 'color.lightGray3' | 'color.white' | 'color.red' | 'color.orange' | 'color.yellow' | 'color.green' | 'color.cyan' | 'color.blue' | 'color.purple' | 'color.pink' | 'color.lightRed' | 'color.lightOrange' | 'color.lightYellow' | 'color.lightGreen' | 'color.lightCyan' | 'color.lightBlue' | 'color.lightPurple' | 'color.lightPink' | 'color.darkRed' | 'color.darkOrange' | 'color.darkYellow' | 'color.darkGreen' | 'color.darkCyan' | 'color.darkBlue' | 'color.darkPurple' | 'color.darkPink' | 'toolbar.table' | 'table.insert' | 'table.size' | 'table.row' | 'table.column' | 'table.headerRow' | 'table.headerColumn' | 'table.addRowBefore' | 'table.addRowAfter' | 'table.deleteRow' | 'table.addColumnBefore' | 'table.addColumnAfter' | 'table.deleteColumn' | 'table.mergeCells' | 'table.splitCell' | 'table.deleteTable' | 'toolbar.find' | 'find.find' | 'find.replace' | 'find.previous' | 'find.next' | 'find.matchCase' | 'find.wholeWord' | 'find.replaceOne' | 'find.replaceAll' | 'find.close' | 'find.position' | 'find.results' | 'find.noResults' | 'status.words' | 'status.characters';
 /** UI strings: every {@link MessageKey}, plus the label keys of custom toolbar items. */
 export type Messages = Readonly<Record<MessageKey, string>> & Readonly<Record<string, string>>;

package/dist/ui/index.d.ts

@@ -3,17 +3,21 @@
 export type { Dropdown, DropdownOptions, DropdownOptionView, DropdownState, } from './components/dropdown';
 /** Shortcut formatting utilities. */
 export { formatShortcut } from './components/shortcut';
+/** Status bar with the word and character count. */
+export { createStatusBar, type StatusBar, type StatusBarOptions, } from './components/status-bar';
 /** English UI strings. */
 export { en } from './i18n/en';
 /** Italian UI strings. */
 export { it } from './i18n/it';
 /** i18n types. */
 export type { MessageKey, Messages } from './i18n/types';
+/** Default lists of the font dropdowns. */
+export { DEFAULT_FONT_SIZES, DEFAULT_FONTS } from './toolbar/fonts';
 /** Default toolbar items and layout. */
-export { DEFAULT_ITEMS, DEFAULT_TOOLBAR, headingDropdown, highlightButton, textColorButton, } from './toolbar/items';
+export { DEFAULT_ITEMS, DEFAULT_TOOLBAR, type FontSizeInputOptions, fontFamilyDropdown, fontSizeInput, headingDropdown, highlightButton, lineHeightDropdown, textAlignMenu, textColorButton, } from './toolbar/items';
 /** Default palette of the color buttons. */
 export { DEFAULT_PALETTE } from './toolbar/palette';
 /** Toolbar element and creation function. */
 export { createToolbar, type Toolbar, type ToolbarOptions } from './toolbar/toolbar';
 /** Toolbar item types. */
-export type { ToolbarButton, ToolbarColor, ToolbarColorButton, ToolbarContext, ToolbarDropdown, ToolbarDropdownOption, ToolbarItem, } from './toolbar/types';
+export type { ToolbarButton, ToolbarColor, ToolbarColorButton, ToolbarContext, ToolbarDropdown, ToolbarDropdownOption, ToolbarFont, ToolbarFontSizeInput, ToolbarIconMenu, ToolbarIconMenuOption, ToolbarItem, } from './toolbar/types';

package/dist/ui/toolbar/fonts.d.ts

@@ -0,0 +1,8 @@
+import type { ToolbarFont } from './types';
+/**
+ * The default fonts of the font family dropdown: the three generic families, which every system
+ * resolves, then common fonts with fallbacks for the systems that lack them.
+ */
+export declare const DEFAULT_FONTS: readonly ToolbarFont[];
+/** The default sizes of the font size list, by unit (`rem` uses the px list). */
+export declare const DEFAULT_FONT_SIZES: Readonly<Record<'pt' | 'px', readonly number[]>>;

package/dist/ui/toolbar/items.d.ts

@@ -1,5 +1,5 @@
-import type { HeadingLevel } from '../../index';
-import type { ToolbarColor, ToolbarColorButton, ToolbarDropdown, ToolbarItem } from './types';
+import type { FontSizeUnit, HeadingLevel } from '../../index';
+import type { ToolbarColor, ToolbarColorButton, ToolbarDropdown, ToolbarFont, ToolbarFontSizeInput, ToolbarIconMenu, ToolbarItem } from './types';
 /** Default toolbar item IDs for the `items` configuration. */
 export declare const DEFAULT_TOOLBAR: ReadonlyArray<ReadonlyArray<string>>;
 /** The default toolbar items, by ID. */
@@ -8,5 +8,26 @@ export declare const DEFAULT_ITEMS: Readonly<Record<string, ToolbarItem>>;
 export declare function textColorButton(palette?: readonly ToolbarColor[]): ToolbarColorButton;
 /** The highlight split button (`Highlight` extension), default a plain `<mark>`. */
 export declare function highlightButton(palette?: readonly ToolbarColor[]): ToolbarColorButton;
+/**
+ * The font family dropdown (`TextStyle` extension): "Default" removes the font family, then one
+ * option per font, drawn in that font. A font that is not in the list is shown by its first name.
+ */
+export declare function fontFamilyDropdown(fonts?: readonly ToolbarFont[]): ToolbarDropdown;
+/** Options of {@link fontSizeInput}. */
+export interface FontSizeInputOptions {
+    /** The unit the field shows and writes. Default: `pt`. */
+    unit?: FontSizeUnit;
+    /** The sizes of the list, in `unit` (px for `rem`). Default: `DEFAULT_FONT_SIZES` of the unit. */
+    sizes?: readonly number[];
+}
+/** The font size control (`TextStyle` extension): −, a field with a list of sizes, +. */
+export declare function fontSizeInput(options?: FontSizeInputOptions): ToolbarFontSizeInput;
+/** The text alignment menu (`TextAlign` extension): left, center, right, justify. */
+export declare function textAlignMenu(): ToolbarIconMenu;
+/**
+ * The line spacing dropdown (`LineHeight` extension): "Default" (no line height of its own) and
+ * the `values`, shown as numbers.
+ */
+export declare function lineHeightDropdown(values?: readonly number[]): ToolbarDropdown;
 /** A heading dropdown toolbar item. */
 export declare function headingDropdown(levels?: HeadingLevel[]): ToolbarDropdown;

package/dist/ui/toolbar/types.d.ts

@@ -1,5 +1,5 @@
 import type { IconNode } from 'lucide';
-import type { Editor } from '../../index';
+import type { Editor, FontSizeUnit } from '../../index';
 /** A toolbar button. */
 export interface ToolbarButton {
     /** Unique within the toolbar; written as `data-item`. */
@@ -25,14 +25,25 @@ export interface ToolbarContext {
     openLinkPopover(): void;
     /** Opens or closes the character picker (no-op without the `characters` item). */
     toggleCharacterPicker(): void;
+    /** Opens or closes the find bar (no-op without the `Search` extension). */
+    toggleFindBar(): void;
+    /** Opens or closes the table menu (no-op without the `table` item). T-045. */
+    toggleTableMenu(): void;
 }
-/** A dropdown of mutually exclusive options (T-014). */
+/** A dropdown of mutually exclusive options, or of actions (T-048) (T-014). */
 export interface ToolbarDropdown {
     id: string;
     kind: 'dropdown';
     /** Key of the accessible name of the trigger and of the menu. */
     labelKey: string;
+    /** Shown by the trigger instead of the active option (T-040); default: the option label. */
+    icon?: IconNode;
     options: ToolbarDropdownOption[];
+    /**
+     * The text of the trigger when no option is active, e.g. a font size that is not in the list;
+     * `null` (or no function) shows the dropdown label.
+     */
+    getValueLabel?(editor: Editor): string | null;
     isAvailable?(editor: Editor): boolean;
 }
 /** An option of a {@link ToolbarDropdown}. */
@@ -41,8 +52,11 @@ export interface ToolbarDropdownOption {
     id: string;
     labelKey: string;
     shortcut?: string;
+    /** Shows the option label in this font family (a CSS `font-family` list). */
+    fontFamily?: string;
     run(editor: Editor): void;
-    isActive(editor: Editor): boolean;
+    /** Without it the option is an action (`role="menuitem"`), never checked. T-048. */
+    isActive?(editor: Editor): boolean;
     /** Default: always enabled. */
     isEnabled?(editor: Editor): boolean;
 }
@@ -83,5 +97,54 @@ export interface ToolbarColorButton {
     isEnabled?(editor: Editor): boolean;
     isAvailable?(editor: Editor): boolean;
 }
+/** A font of the `fontFamilyDropdown` list. */
+export interface ToolbarFont {
+    /** A CSS `font-family` list, written as the editor stores it (`'Times New Roman', serif`). */
+    fontFamily: string;
+    /** Key of the font name in `messages`; a missing key is shown as is. */
+    labelKey: string;
+}
+/**
+ * The font size control (T-038): a decrease button, a field that shows the size at the selection,
+ * takes a typed size and opens a list of sizes, and an increase button.
+ */
+export interface ToolbarFontSizeInput {
+    /** Unique within the toolbar; written as `data-item` on the three parts. */
+    id: string;
+    kind: 'fontSize';
+    /** Key of the accessible name of the field and of the list. */
+    labelKey: string;
+    /** The unit the field shows and writes; `rem` shows px and writes rem. */
+    unit: FontSizeUnit;
+    /** The sizes of the list, in `unit` (px for `rem`). */
+    sizes: readonly number[];
+    isAvailable?(editor: Editor): boolean;
+}
+/**
+ * A button that shows the icon of the active option (of the first one when none is active) and
+ * opens the options as icons in a row (T-039).
+ */
+export interface ToolbarIconMenu {
+    /** Unique within the toolbar; written as `data-item`. */
+    id: string;
+    kind: 'iconMenu';
+    /** Key of the accessible name of the trigger and of the menu. */
+    labelKey: string;
+    options: ToolbarIconMenuOption[];
+    isAvailable?(editor: Editor): boolean;
+}
+/** An option of a {@link ToolbarIconMenu}. */
+export interface ToolbarIconMenuOption {
+    /** Unique within the menu; used in the class `stilo-icon-menu__option--<id>`. */
+    id: string;
+    icon: IconNode;
+    labelKey: string;
+    /** Keymap notation shown in the tooltip. */
+    shortcut?: string;
+    run(editor: Editor): void;
+    isActive(editor: Editor): boolean;
+    /** Default: always enabled. */
+    isEnabled?(editor: Editor): boolean;
+}
 /** A single item in the toolbar. */
-export type ToolbarItem = ToolbarButton | ToolbarDropdown | ToolbarColorButton;
+export type ToolbarItem = ToolbarButton | ToolbarDropdown | ToolbarColorButton | ToolbarFontSizeInput | ToolbarIconMenu;