tosijs-styled-editor 0.4.2

package/dist/selection.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Selection management for tosijs-styled-editor.
+ *
+ * Replaces browser selection behavior entirely. Selections are tracked
+ * using marker elements (.sel-start, .sel-end) and the .selected class.
+ *
+ * Key concept: "spanification" — wrapping each character (or word) in a
+ * <span> so we can determine exact screen positions without browser
+ * selection APIs.
+ */
+/**
+ * Wrap text nodes inside `element` into individual character spans
+ * (or word spans if byWord is true). When `make` is false, unwraps
+ * existing spanification.
+ */
+export declare function spanify(element: Element, make: boolean, byWord?: boolean): void;
+/**
+ * Selectable manages custom text selection within a root element.
+ * It replaces browser selection with DOM-based markers.
+ */
+export declare class Selectable {
+    root: HTMLElement;
+    selecting: number | false;
+    touchMode: boolean;
+    constructor(root: HTMLElement);
+    private lastHovered;
+    /** A click inside a selection, resolved on mouseup if no drag started */
+    private pendingCollapse;
+    private setup;
+    destroy(): void;
+    private handleMouseMove;
+    /**
+     * Put the caret at the character nearest a point. Used when a click inside a
+     * selection turns out not to be a drag, and to show the live drop position
+     * while dragging — we own the caret, so the drop indicator IS the caret.
+     */
+    placeCaretAt(x: number, y: number): void;
+    /** Put the bounds around the word containing an offset in a text node. */
+    selectWordAt(node: Text, offset: number): void;
+    private handleMouseDown;
+    private handleMouseUp;
+    private handleMouseLeave;
+    private handleTouchStart;
+    private handleTouchMove;
+    private handleTouchEnd;
+    /** Trigger selectionchanged event and focus the caret */
+    selectionChanged(): void;
+    /**
+     * Set by the component. The markers in the text are inert spans — a replaced
+     * element there breaks the shaping run, which is what tore Arabic words apart
+     * around the caret — so the visible caret and the focusable element live
+     * OUTSIDE the document, and this is how they learn the bounds moved.
+     */
+    onBoundsChanged?: () => void;
+    /** The focusable element that stands in for the caret */
+    focusTarget?: HTMLElement;
+    focus(): void;
+    /** Create a document fragment with sel-start and sel-end markers */
+    createBounds(): DocumentFragment;
+    /**
+     * Put the bound markers in TEXTUAL order.
+     *
+     * While a drag is in flight `.sel-end` is the moving bound and `.sel-start`
+     * the anchor, so dragging backwards leaves the end marker earlier in the
+     * document than the start. That is the right model for dragging but the wrong
+     * one for painting: the edges are coloured by which marker they are, so a
+     * backwards drag showed the colours swapped. Once the gesture is complete the
+     * labels are re-assigned by document order, so start is always textually
+     * first — and in RTL that means it paints on the right.
+     */
+    normalizeBoundsOrder(): void;
+    /** Find an element within the root */
+    find(selector: string): Element | null;
+    /** Find all matching elements within the root */
+    findAll(selector: string): Element[];
+    /** Mark the selection between the current bounds */
+    markBounds(): void;
+    /** Remove selection bound markers */
+    removeBounds(): void;
+    /** Restore bounds to match the current .selected elements */
+    resetBounds(): this;
+    /** Extend the selection based on the current click mode */
+    extendSelection(): void;
+    /** Get the top-level child of root that contains `node` */
+    private topLevelAncestor;
+    /** Clear all selection markers */
+    unmark(): void;
+    /** Check if a node is a direct child of root (a "block") */
+    isBlock(node: Node): boolean;
+    /** Mark a range of elements as selected */
+    markRange(first: Element, last: Element): void;
+    /** The representations a dragged selection offers */
+    static DRAG_TYPES: string;
+    /** Make a selected element a draggable object */
+    private makeDraggable;
+    /** Mark a single node as selected */
+    private markNode;
+    /** Despanify all non-selected blocks */
+    despanify(): void;
+    normalize(): this;
+}

package/dist/table-utils.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Table utilities for the grid-based table editor.
+ *
+ * Tables are `<ul class="editor-table">` with CSS grid layout.
+ * Cells are `<li>` elements. Column count is derived from
+ * `grid-template-columns`. Header cells have class `table-header`.
+ */
+/** Check if a node is inside a table cell */
+export declare function isTableCell(node: Node): boolean;
+/** Find the <li> cell containing a node, or null */
+export declare function cellOf(node: Node): HTMLElement | null;
+/** Find the .editor-table <ul> containing a node, or null */
+export declare function tableOf(node: Node): HTMLElement | null;
+/** Get the number of columns from grid-template-columns */
+export declare function getColumnCount(table: HTMLElement): number;
+/** Get the column widths as an array of strings */
+export declare function getColumnWidths(table: HTMLElement): string[];
+/** Set the column widths from an array of strings */
+export declare function setColumnWidths(table: HTMLElement, widths: string[]): void;
+/** Get the index of a cell among its sibling <li> elements */
+export declare function cellIndex(cell: HTMLElement): number;
+/** Get which row a cell is in (0-based) */
+export declare function rowOfCell(cell: HTMLElement, colCount: number): number;
+/** Get which column a cell is in (0-based) */
+export declare function colOfCell(cell: HTMLElement, colCount: number): number;
+/** Get the cell in the same column one row down, or null */
+export declare function cellBelow(cell: HTMLElement): HTMLElement | null;
+/** Get the cell in the same column one row up, or null */
+export declare function cellAbove(cell: HTMLElement): HTMLElement | null;
+/** Get the next <li> sibling, or null */
+export declare function nextCell(cell: HTMLElement): HTMLElement | null;
+/** Get the previous <li> sibling, or null */
+export declare function prevCell(cell: HTMLElement): HTMLElement | null;
+/** Check if a cell is a header cell */
+export declare function isHeaderCell(cell: HTMLElement): boolean;
+/** Create a single table cell */
+export declare function createCell(isHeader?: boolean): HTMLElement;
+/** Get all cells in a specific row */
+export declare function getCellsInRow(table: HTMLElement, row: number, colCount: number): HTMLElement[];
+/** Get all cells in a specific column */
+export declare function getCellsInCol(table: HTMLElement, col: number, colCount: number): HTMLElement[];
+/** Get the total number of rows */
+export declare function getRowCount(table: HTMLElement): number;
+/**
+ * Create a complete table element.
+ * @param cols Number of columns
+ * @param rows Total number of rows (including header rows)
+ * @param headerRows Number of header rows (default 1)
+ */
+export declare function createTable(cols: number, rows?: number, headerRows?: number): HTMLElement;

package/dist/toolbar.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Toolbar factory for tosijs-styled-editor.
+ *
+ * Provides ready-made toolbar configurations using tosijs-ui icons and menus.
+ * Toolbar buttons fire commands via their `value` attribute.
+ * Menus use tosi-menu with actions that call doCommand on a provided editor.
+ */
+import type { TosijsStyledEditor } from './tosijs-styled-editor';
+/**
+ * The class we tag our own menu popups with, so menu styling can be scoped to
+ * this editor instead of every `tosi-menu` on the page.
+ */
+export declare const MENU_CLASS = "tosijs-styled-editor-menu";
+/**
+ * Create a toolbar command button with an icon.
+ * The button's `value` attribute holds the command string.
+ */
+export declare function commandButton(title: string, command: string, icon: SVGElement, shortcut?: string): HTMLButtonElement;
+/** Create a spacer for visual grouping */
+export declare function toolbarSpacer(width?: string): HTMLElement;
+/** A language picker for the menubar — flag only, no caption */
+export declare function localePickerWidget(): HTMLElement;
+/** Paragraph style menu */
+export declare function paragraphStyleMenu(editor: TosijsStyledEditor): HTMLElement;
+/** Justification menu */
+export declare function justificationMenu(editor: TosijsStyledEditor): HTMLElement;
+/** Font family menu */
+export declare function fontFamilyMenu(editor: TosijsStyledEditor): HTMLElement;
+/** Font size menu */
+export declare function fontSizeMenu(editor: TosijsStyledEditor): HTMLElement;
+/** Line spacing menu */
+export declare function lineSpacingMenu(editor: TosijsStyledEditor): HTMLElement;
+/** Character formatting buttons (toolbar) */
+export declare function characterStyleWidgets(): HTMLElement[];
+/** Paragraph formatting buttons (toolbar) */
+export declare function paragraphStyleWidgets(): HTMLElement[];
+/** Undo/redo buttons (toolbar) */
+export declare function undoRedoWidgets(): HTMLElement[];
+/** Debug toggle (toolbar) */
+export declare function debugWidget(): HTMLElement;
+/** Minimal toolbar: bold/italic/underline + undo/redo */
+export declare function minimalToolbar(): HTMLElement[];
+/** Default (full) toolbar */
+export declare function defaultToolbar(): HTMLElement[];
+/**
+ * Insert menu — link, image and footnote.
+ *
+ * Link and image need a URL, and the component has no dialog of its own yet, so
+ * these prompt. A host that wants its own UI can call the commands directly:
+ * `editor.doCommand('setLink <url> [target]')`.
+ */
+export declare function insertMenu(editor: TosijsStyledEditor): HTMLElement;
+/** Table menu */
+export declare function tableMenu(editor: TosijsStyledEditor): HTMLElement;
+/** Default menubar */
+export declare function defaultMenubar(editor: TosijsStyledEditor): HTMLElement[];

package/dist/tosijs-styled-editor.d.ts

@@ -0,0 +1,247 @@
+import { Component as WebComponent, ElementCreator, PartsMap, type TosiStyleSheet } from 'tosijs';
+import { Selectable } from './selection';
+import { type Command } from './commands';
+interface EditableParts extends PartsMap {
+    menubar: HTMLElement;
+    toolbar: HTMLElement;
+    doc: HTMLElement;
+    caret: HTMLElement;
+    edgeStart: HTMLElement;
+    edgeEnd: HTMLElement;
+}
+export declare class TosijsStyledEditor extends WebComponent<EditableParts> {
+    static formAssociated: boolean;
+    static preferredTagName: string;
+    static initAttributes: {
+        widgets: "none" | "minimal" | "default";
+        localized: boolean;
+        name: string;
+        required: boolean;
+    };
+    static shadowStyleSpec: TosiStyleSheet;
+    /**
+     * Toolbar buttons and menus are LIGHT DOM (slotted), and `::slotted()` rules
+     * lose the cascade to the host page's own `button` styles — which is how the
+     * buttons ended up as white chips on the tinted bars. A light stylesheet is
+     * scoped by tag name at document level, so it competes on equal terms.
+     */
+    static lightStyleSpec: TosiStyleSheet;
+    selectable: Selectable;
+    /** Set from `initAttributes` at runtime; `declare` so no field is emitted over it */
+    widgets: 'none' | 'minimal' | 'default';
+    /** Show a language picker — the built-in widgets are always translatable */
+    localized: boolean;
+    active: boolean;
+    pastemode: 'merge' | 'remove' | 'preserve' | 'paragraphs';
+    private undo;
+    private undoDepth;
+    private reasonForLastUndo?;
+    private lastKey;
+    private lastCursorX;
+    private isInitialized;
+    private touchAffordances;
+    private touchHandleStart;
+    private touchContextMenu;
+    private touchHandleEnd;
+    private touchMenuEl;
+    private isTouchInteraction;
+    private touchDrags;
+    private resizeTable;
+    private resizeCol;
+    private resizeStartX;
+    private resizeStartWidths;
+    private _value;
+    /** Get doc innerHTML excluding UI affordances */
+    private get docHTML();
+    /** Set doc innerHTML and re-attach UI affordances */
+    private set docHTML(value);
+    get value(): string;
+    set value(html: string);
+    /** The editable commands — extend this object to add custom commands */
+    commands: Record<string, Command>;
+    content: (HTMLDivElement | HTMLSlotElement)[];
+    formResetCallback(): void;
+    connectedCallback(): void;
+    /** Reflect whether a slot has assigned content onto the host, and keep it current */
+    private trackBar;
+    /**
+     * Populate the built-in toolbar/menubar named by the `widgets` attribute.
+     * Anything the author slotted themselves wins — this only fills an empty bar.
+     */
+    private applyWidgets;
+    disconnectedCallback(): void;
+    /**
+     * Position the caret (and, for an expanded selection, its two edges) over the
+     * document from the inert markers' rects. Nothing here is in the text, so
+     * nothing here can change how the text is shaped.
+     */
+    /**
+     * Where a bound marker is on screen.
+     *
+     * The markers are styled `display: contents` so they generate NO BOX — an
+     * inline box between two characters changed the line it sat in (in WebKit an
+     * empty marker with `font-size: 0` grew the paragraph by ~5px and shifted
+     * every block after it). With no box their own getBoundingClientRect() is
+     * meaningless, so position comes from the caret geometry beside them.
+     */
+    private markerRect;
+    private syncCaret;
+    /** Get the editing context for commands */
+    private getContext;
+    /** Execute a command string */
+    doCommand(commandString: string): void;
+    focus(): void;
+    normalize(): void;
+    /** Get all leaf nodes in the current selection */
+    selectedLeafNodes(): Node[];
+    /** Get the selected blocks */
+    selectedBlocks(): Element[];
+    /** Get the caret input if it exists in the doc */
+    insertionPoint(): HTMLInputElement | null;
+    /** Get the top-level block containing a node */
+    block(node: Node): Element | null;
+    /** Find the table cell containing the caret, if any */
+    private caretCell;
+    /** Find the list item (<li> in a non-table <ul>/<ol>) containing a node, or null */
+    private listItemOf;
+    /** Move the caret (bounds) into a cell, selecting all content */
+    private moveCaretToCell;
+    /** Insert a new row above the current cell and move caret into it */
+    private tableMoveUp;
+    /** Insert a new row below the current cell and move caret into it */
+    private tableMoveDown;
+    /** Exit the table, placing the caret in the block before or after it */
+    private exitTable;
+    /** Split a list item at the caret, creating a new <li> after it.
+     *  If the item is empty, exit the list instead (convert to <p>). */
+    private splitListItem;
+    /** Check if a list item is effectively empty (only whitespace/nbsp/bounds) */
+    private isListItemEmpty;
+    /** Remove a list item, merging with previous <li> or exiting the list */
+    private removeListItem;
+    /** Backspace inside a list item: delete within the <li>, or merge with previous <li> */
+    private listBackspace;
+    /** Forward delete inside a list item: delete within the <li>, or merge with next <li> */
+    private listForwardDelete;
+    /** Group spanified characters by visual line (rounded top value) */
+    private groupByLine;
+    /** Find the spanified char on a line closest to targetX */
+    private closestCharOnLine;
+    /** Position bounds at a spanified character, then despanify the block */
+    private positionAtSpanChar;
+    /** Move caret up or down by visual line */
+    private moveVertical;
+    /** Move caret into an empty container (no spanifiable content) */
+    private moveCaretToEmptyContainer;
+    /** Move caret vertically into a sibling block, handling lists and regular blocks */
+    private moveVerticalToBlock;
+    /** Insert a character at the caret */
+    private contentKey;
+    /**
+     * Typing left-to-right into a right-to-left block (or the reverse) put the
+     * caret on the wrong side of the line. The caret is an element, and bidi
+     * treats an empty inline as a NEUTRAL — so it resolves to the BLOCK's base
+     * direction rather than to the run being typed, and lands at the far end.
+     *
+     * We own the caret, so we do not have to guess: when the typed character
+     * disagrees with the block, put the run AND the caret inside a directional
+     * isolate. The caret is then a neutral among characters of its own run and
+     * resolves with them, and the run itself renders correctly too — the same
+     * bug class as an un-isolated URL inside an RTL paragraph.
+     *
+     * Returns the isolate in force, or null when none is needed.
+     */
+    private isolateForTyping;
+    /** Delete the character before the caret */
+    private backspace;
+    /** Forward delete */
+    private forwardDelete;
+    /** Delete the current selection, return true if something was deleted */
+    deleteSelection(): boolean;
+    /** Split the current block at the caret position (Enter key) */
+    private splitAtCaret;
+    /** Move caret left */
+    private arrowLeft;
+    /** Move caret right */
+    private arrowRight;
+    /** Move caret left by one word */
+    private moveWordLeft;
+    /** Move caret right by one word */
+    private moveWordRight;
+    /** Move bounds to before a target node */
+    private moveBoundsBefore;
+    /** Move bounds to after a target node */
+    private moveBoundsAfter;
+    /** Manage undo/redo stack */
+    /**
+     * The document's CONTENT, with every trace of the selection removed.
+     *
+     * Undo snapshots are full HTML and the selection lives in the DOM — bound
+     * markers are elements, `.selected` is a class and sometimes a wrapper span.
+     * So moving the caret changes the snapshot string even though nothing was
+     * edited, and every caret move pushed an undo step that undid nothing.
+     * Comparing signatures instead means only real edits create steps, while the
+     * snapshots themselves keep their markers so undo still restores a selection.
+     */
+    private signatureOf;
+    updateUndo(command?: string, reason?: string): void;
+    private updateUndoButtons;
+    /**
+     * A link inside the document is text you are editing, not navigation — a
+     * click there is placing the caret. Ctrl/Cmd-click still follows it, which is
+     * the convention every other editor uses.
+     */
+    private handleDocClick;
+    /** Handle shortcuts (ctrl/cmd+key) */
+    private handleShortcut;
+    private handleKeydown;
+    private handleKeypress;
+    private handleCopy;
+    private handleCut;
+    /**
+     * Insert transferred content at the caret, honouring `pastemode`.
+     *
+     * Shared by paste and drop deliberately: dropping and pasting the same
+     * content must produce the same document, and that only stays true if there
+     * is one implementation.
+     */
+    private insertTransfer;
+    private handlePaste;
+    /** True while a drag that STARTED in this editor is in flight */
+    private draggingSelection;
+    /**
+     * Offer the selection as a draggable object in both representations, so the
+     * receiver picks: styled markup for a rich target, clean text for a plain one.
+     */
+    private handleDragStart;
+    /**
+     * The drop indicator IS the caret — we own it, so there is no separate
+     * insertion bar to keep in sync with where the text will actually land.
+     */
+    private handleDragOver;
+    private handleDrop;
+    private handleDragEnd;
+    private clearDraggable;
+    /** Read dropped image files in as data URIs */
+    private insertDroppedImages;
+    /** Find the cell edge near a pointer position, returns [table, colIndex] or null */
+    private cellEdgeAt;
+    /** Update position of touch affordance handles based on selection bounds */
+    private updateTouchAffordances;
+    private positionAffordances;
+    private handleAffordanceDragStart;
+    private handleAffordanceDragMove;
+    private handleAffordanceDragEnd;
+    private handleTouchContextMenu;
+    private showTouchMenu;
+    private touchMenuDismiss;
+    private hideTouchMenu;
+    private handleResizePointerDown;
+    private handleResizePointerMove;
+    private handleResizePointerUp;
+    private isToolbarEvent;
+    private handleToolbarClick;
+    private handleToolbarChange;
+}
+export declare const tosijsStyledEditor: ElementCreator<TosijsStyledEditor>;
+export {};

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const version = "0.4.2";

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "tosijs-styled-editor",
+  "version": "0.4.2",
+  "description": "Rich text editor web component — no contentEditable, no browser selection APIs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tonioloewald/tosijs-editor.git"
+  },
+  "homepage": "https://editor.tosijs.net",
+  "bugs": {
+    "url": "https://github.com/tonioloewald/tosijs-editor/issues"
+  },
+  "source": "src/index.ts",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "./dist/module.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/module.js",
+      "browser": "./dist/index.js",
+      "default": "./dist/module.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/*.tsbuildinfo",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "start": "bun bin/site.ts",
+    "make": "bun bin/site.ts --build",
+    "test": "bun test",
+    "lint": "bun tsc --noEmit --noUnusedLocals --noUnusedParameters",
+    "format": "bun prettier --write .",
+    "haltija": "haltija --name tosijs-editor --port 8702 --server",
+    "tls": "bunx tosijs-dev-certs"
+  },
+  "author": "Tonio Loewald",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "tosijs": "^1.10.1",
+    "tosijs-ui": "^1.13.0"
+  },
+  "devDependencies": {
+    "bun-types": "^1.3.0",
+    "chokidar": "^4.0.3",
+    "haltija": "1.12.9",
+    "happy-dom": "^20.14.0",
+    "prettier": "^2",
+    "tjs-lang": "^0.13.1",
+    "tosijs": "^1.10.1",
+    "tosijs-ui": "^1.13.0",
+    "typescript": "^5.9.3"
+  },
+  "overrides": {
+    "ws": "^8.21.0"
+  }
+}