flexdesk 0.17.0 → 0.17.2

package/src/ui/components/cell_grid.js

@@ -13,8 +13,11 @@
 
 import { CellSelection } from './cell_selection.js';
 import { CellEditorHost, createTextEditor } from './cell_editor_host.js';
+import { CELL_EDITORS, editorTypeOf } from './cell_editors.js';
 import { StagedEdits } from './staged_edits.js';
 import { FillHandle } from './fill_handle.js';
+import { CellPaste } from './cell_paste.js';
+import { ISO_DATE, formatDate } from './table_values.js';
 
 /** Is this a cell somebody filled? What Ctrl+arrow stops at. */
 export function isFilledValue(value) {
@@ -35,6 +38,27 @@ const ARROWS = {
     ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1],
 };
 
+/**
+ * STORY-0085. A cell's raw value as the text a copy carries — never the text
+ * it is drawn as (no `formatValue`, typed-column format, rounding or
+ * `nullDisplay`): `null`/`undefined` (and an invalid Date) are empty, a
+ * number is `String(n)` (1234.5, not "1,234.50"). Dates are ISO 8601: a
+ * `Date` is `toISOString()`, except in a column declared `'date'`, where it is
+ * the calendar day `YYYY-MM-DD` in the table's zone (`dateTimeZone`); a number
+ * in a column declared `'date'` or `'datetime'` is read as epoch ms the same
+ * way. Text is copied as it is.
+ */
+function copyText(value, { kind, utc }) {
+    if (value === null || value === undefined) return '';
+    const dated = kind === 'date' || kind === 'datetime';
+    if (value instanceof Date || (dated && typeof value === 'number')) {
+        const t = value instanceof Date ? value.getTime() : value;
+        if (!Number.isFinite(t)) return '';
+        return kind === 'date' ? formatDate(t, ISO_DATE, { utc }) : new Date(t).toISOString();
+    }
+    return String(value);
+}
+
 /**
  * DataTable's cell mode. Built by the table when `selectionMode` is 'cells';
  * it reads the table, never the other way round, except through the few hooks
@@ -64,6 +88,7 @@ export class CellGrid {
         this.editor = new CellEditorHost({
             onCommit: (s, value, move, reason) => this._committed(s, value, move, reason),
             onCancel: (s, reason) => this._closed(s, reason),
+            onRefuse: (s, error, text, reason) => this._refused(s, error, text, reason),
         });
         /** STORY-0088 `staged`: commits are staged here instead of sent. */
         this.staged = null;
@@ -77,6 +102,12 @@ export class CellGrid {
             if (this.staged) this.fill = new FillHandle(this);
             else console.warn('[DataTable] `fillHandle` needs `staged`; ignored.');
         }
+        /** STORY-0090 `pasteable`: a tab-separated block pasted at the cursor. */
+        this.paste = null;
+        if (this._cfg().pasteable) {
+            if (this.staged) this.paste = new CellPaste(this);
+            else console.warn('[DataTable] `pasteable` needs `staged`; ignored.');
+        }
     }
 
     // ── what the table is, read through its own helpers ──────────────────
@@ -226,6 +257,30 @@ export class CellGrid {
         this._changed();
     }
 
+    /**
+     * STORY-0085. What a copy of the selection puts on the clipboard: the
+     * range's cells as text, one array per row in the order SHOWN (after the
+     * sort and the filters), its shown columns left to right (a hidden column
+     * inside it is not one of them). With no range beyond the cursor, the
+     * cursor cell alone. A cell is its RAW value as text (`copyText`), not
+     * the text it is drawn as: the value the cell holds now, a staged,
+     * pending or refused one included. Null with nothing selected.
+     */
+    copyMatrix() {
+        this._sync();
+        const r = this.sel.range();
+        if (!r) return null;
+        const t = this.table;
+        const utc = t._utc();
+        const out = [];
+        for (let p = r.top; p <= r.bottom; p++) {
+            const rowIdx = this.rowIndexAt(p);
+            out.push(r.columns.map((col) =>
+                copyText(this.shownValue(rowIdx, col), { kind: t._valueKind(col), utc })));
+        }
+        return out;
+    }
+
     /** New rows (`setData({rows})`): the marks were about the old ones. */
     newRows() {
         this.generation++;
@@ -235,6 +290,7 @@ export class CellGrid {
         this.rowsWaiting.clear();
         this.staged?.clear();
         this.fill?.clearMarks();
+        this.paste?.clearMarks();
     }
 
     isEditing() {
@@ -284,6 +340,7 @@ export class CellGrid {
         if (cursor) td.setAttribute('aria-selected', 'true');
         else td.removeAttribute('aria-selected');
         this.fill?.paintCell(td, pos, col);   // STORY-0089
+        this.paste?.paintCell(td, col);       // STORY-0090
     }
 
     paint() {
@@ -303,6 +360,7 @@ export class CellGrid {
     _changed({ reveal = false } = {}) {
         const t = this.table;
         this.fill?.clearMarks();   // STORY-0089: a skipped mark lasts until the selection moves
+        this.paste?.clearMarks();  // STORY-0090: and so does a paste's
         if (reveal && this.sel.focus) t.scrollToRow(this.rowIndexAt(this.sel.focus.row));
         this.paint();
         const before = t.getSelection().join();
@@ -375,6 +433,19 @@ export class CellGrid {
                 ev.stopImmediatePropagation();
             }
         });
+        // STORY-0090. Ctrl+V on the focused table: the browser's paste event
+        // carries the clipboard's text, with no permission to ask for. In an
+        // editor (or any field) the paste is the field's.
+        if (this.paste) {
+            on(table, 'paste', (ev) => {
+                if (inEditor(ev.target)) return;
+                if (ev.target !== table && ev.target?.closest?.('input, select, textarea, [contenteditable="true"]')) return;
+                const text = ev.clipboardData?.getData?.('text/plain');
+                if (typeof text !== 'string') return;
+                ev.preventDefault();
+                this.paste.paste(text);
+            });
+        }
         // An editor that was open across a render of its row (an `updateRow`)
         // is still the editor; the paint follows the model.
         this.paint();
@@ -457,21 +528,41 @@ export class CellGrid {
         return false;
     }
 
-    /** The column's type, as `editors` is keyed by: the declared one, else the
-     *  detected one. */
-    _typeOf(col) {
+    /** STORY-0087. The column's `editTypes` entry, as `{type, ...}`, or null. */
+    _editSpec(col) {
+        const all = this._cfg().editTypes;
+        let spec = all && typeof all === 'object' ? all[col] : null;
+        if (typeof spec === 'string') spec = { type: spec };
+        return spec && typeof spec === 'object' ? spec : null;
+    }
+
+    /** The column's type as it is named: `editTypes`', else the declared one
+     *  (`columnTypes`), else the detected one. */
+    _rawType(col) {
+        const spec = this._editSpec(col);
+        if (spec?.type) return String(spec.type);
         const declared = this._cfg().columnTypes?.[col];
         return declared || this.table._columnTypes?.[col] || 'text';
     }
 
+    /** The column's type as `editors` and the built-in editors know it:
+     *  'num' is 'number', 'date' is 'datetime'. */
+    _typeOf(col) {
+        return editorTypeOf(this._rawType(col));
+    }
+
+    /** By column index, then by type (as named, then as the built-ins name
+     *  it), then the built-in editor for the type, else the text box. */
     _factoryFor(col) {
         const editors = this._cfg().editors;
         if (editors && typeof editors === 'object') {
-            if (typeof editors[col] === 'function') return editors[col];
-            const type = this._typeOf(col);
-            if (typeof editors[type] === 'function') return editors[type];
+            for (const k of [col, this._rawType(col), this._typeOf(col)]) {
+                if (typeof editors[k] === 'function') return editors[k];
+            }
         }
-        return createTextEditor;
+        const builtIn = Object.prototype.hasOwnProperty.call(CELL_EDITORS, this._typeOf(col))
+            ? CELL_EDITORS[this._typeOf(col)] : null;
+        return builtIn ? builtIn.create : createTextEditor;
     }
 
     /**
@@ -494,7 +585,12 @@ export class CellGrid {
             pos, colIdx: col, rowIdx, row,
             generation: this.generation,
             value: this.shownValue(rowIdx, col),
-            column: { index: col, header: headers[col], type: this._typeOf(col) },
+            column: { ...this._editSpec(col), index: col, header: headers[col], type: this._typeOf(col) },
+            args: {
+                locale: this._cfg().locale ?? undefined,
+                utc: this.table._utc(),
+                messages: this._cfg().editorMessages ?? undefined,
+            },
             initialText,
         });
     }
@@ -509,6 +605,7 @@ export class CellGrid {
 
     dispose() {
         this.fill?.dispose();
+        this.paste?.dispose();
         this.editor.cancel('dispose');
         this.renderWaiting = false;
         this.rowsWaiting.clear();
@@ -568,6 +665,22 @@ export class CellGrid {
         t.updateRow(rowIdx, row);
     }
 
+    /** STORY-0087. The editor closed holding text that does not parse (the
+     *  focus left it, or its row left the window): nothing is committed, and
+     *  the cell keeps the text, marked with the message, as a refused commit's
+     *  would be. */
+    _refused(s, error, text, reason) {
+        if (s.generation === this.generation) {
+            const key = `${s.rowIdx}:${s.colIdx}`;
+            this.errors.set(key, { value: text, message: error });
+            // Any older commit of the cell still out no longer owns its marks.
+            this.latest.set(key, {});
+            this.pending.delete(key);
+            this._redraw(s.rowIdx, s.colIdx);
+        }
+        this._closed(s, reason);
+    }
+
     _committed(s, value, move, reason) {
         if (move) {
             this._sync();

package/src/ui/components/cell_paste.js

@@ -0,0 +1,243 @@
+/**
+ * cell_paste.js — STORY-0090. DataTable's PASTE (`pasteable: true`, with
+ * `staged`). INTERNAL to the table, like `cell_grid.js` and `fill_handle.js`:
+ * built by the cell grid, and reading the table through it.
+ *
+ * A block of tab-separated text (`tsv.js` `fromTSV`, what Excel and Google
+ * Sheets put on the clipboard) lands at the CURSOR cell and fills right, over
+ * the columns shown, and down, over the rows in the order shown. Each value is
+ * read by its column's editor's parse (`cell_editors.js`, or an injected
+ * editor's own `parse`), and every cell that reads is STAGED
+ * (`staged_edits.js`) as ONE undo entry.
+ *
+ *   - Columns past the last one shown are dropped, with a warning naming how
+ *     many.
+ *   - Rows past the last loaded row ask `onPasteOverrun({rows: n})` first:
+ *     anything but `true` (or a Promise of it) stages nothing; `true` stages
+ *     the rows that fit and hands the extra ones to `onRowsAppend`.
+ *   - A value that does not parse marks its cell (`twm-dt-cell--error`, the
+ *     message as `title` and `data-error`, the text kept in the cell, as an
+ *     editor's refusal is) and the rest of the block still stages.
+ *   - A cell `editable` refuses is skipped — nothing is staged in it — and
+ *     drawn `twm-dt-cell--paste-skipped` until the selection moves, the next
+ *     paste or fill, or new rows.
+ */
+
+import { fromTSV } from './tsv.js';
+import { CELL_EDITORS } from './cell_editors.js';
+
+const key = (rowIdx, colIdx) => `${rowIdx}:${colIdx}`;
+
+export class CellPaste {
+    /** @param {import('./cell_grid.js').CellGrid} grid */
+    constructor(grid) {
+        this.grid = grid;
+        /** `rowIdx:colIdx` of the cells the last paste skipped. */
+        this.skipped = new Set();
+        /** True while a paste waits for `onPasteOverrun` or `onRowsAppend`. */
+        this.busy = false;
+    }
+
+    // ── painting (called by the grid for every cell it paints) ───────────
+
+    paintCell(td, col) {
+        const rowIdx = td.parentNode?.__rowIndex;
+        td.classList.toggle('twm-dt-cell--paste-skipped', this.skipped.has(key(rowIdx, col)));
+    }
+
+    /** The selection moved, or new rows came: the skipped marks are over. */
+    clearMarks() {
+        this.skipped.clear();
+    }
+
+    // ── reading a value ──────────────────────────────────────────────────
+
+    /**
+     * The parse a column's pasted text is read with: an injected editor's
+     * own (`editors[k].parse`, looked up as the editor is), else the built-in
+     * editor's for the column's type, else the text as it is.
+     */
+    _parserFor(col) {
+        const g = this.grid;
+        const editors = g._cfg().editors;
+        if (editors && typeof editors === 'object') {
+            for (const k of [col, g._rawType(col), g._typeOf(col)]) {
+                const f = editors[k];
+                if (typeof f === 'function') {
+                    if (typeof f.parse === 'function') return f.parse;
+                    break;
+                }
+            }
+        }
+        const type = g._typeOf(col);
+        return Object.prototype.hasOwnProperty.call(CELL_EDITORS, type)
+            ? CELL_EDITORS[type].parse : CELL_EDITORS.text.parse;
+    }
+
+    /** One column's reader: `(text) => {ok: true, value} | {ok: false, error}`. */
+    _reader(col) {
+        const g = this.grid;
+        const cfg = g._cfg();
+        const spec = g._editSpec(col) || {};
+        const parse = this._parserFor(col);
+        const ctx = {
+            locale: cfg.locale ?? undefined,
+            utc: g.table._utc(),
+            messages: cfg.editorMessages ?? undefined,
+            options: spec.options,
+            allowOther: !!spec.allowOther,
+        };
+        return (text) => {
+            let r;
+            try { r = parse(text, ctx); } catch (err) {
+                return { ok: false, error: err?.message || String(err ?? 'Not pasted') };
+            }
+            if (r && r.ok === true) return { ok: true, value: r.value };
+            if (r && r.ok === false) return { ok: false, error: String(r.error ?? 'Not pasted') };
+            return { ok: false, error: 'Not pasted' };
+        };
+    }
+
+    /** The position of the last loaded row: the rows held in the order shown
+     *  (all of them filtered and sorted; a server's page, the rows it sent). */
+    _lastLoaded() {
+        const t = this.grid.table;
+        if (t._isServerSide()) return this.grid.span()[1];
+        return t._getProcessedRows().length - 1;
+    }
+
+    _warn(message) {
+        console.warn(`[DataTable] paste: ${message}`);
+        this.grid.table._notify('Paste', message, 'warn');
+    }
+
+    // ── the paste ────────────────────────────────────────────────────────
+
+    /**
+     * Paste tab-separated `text` at the cursor. Resolves `{rows, cols, staged,
+     * skipped, refused, droppedColumns, appended}` — `staged` the NUMBER of
+     * cells that changed, `skipped` the cells `editable` refused and `refused`
+     * the ones whose text did not parse (`{row, col, rowIdx}`, `refused` with
+     * its `text` and `error`), `droppedColumns` the columns past the last one,
+     * `appended` the rows handed to `onRowsAppend` — or null when nothing was
+     * pasted: empty text, no cursor, an editor open, a commit or another paste
+     * out, an overrun declined, or new rows while `onPasteOverrun` was asked.
+     */
+    async paste(text) {
+        const g = this.grid;
+        const matrix = fromTSV(text);
+        if (!matrix.length || this.busy) return null;
+        g._sync();
+        const at = g.sel.focus ? { ...g.sel.focus } : null;
+        if (!at || g.isEditing() || g.staged.committing) return null;
+        const cfg = g._cfg();
+        const cols = g.columns();
+        const width = Math.max(...matrix.map((line) => line.length));
+        const targetCols = cols.slice(cols.indexOf(at.col), cols.indexOf(at.col) + width);
+        const droppedColumns = width - targetCols.length;
+        const last = this._lastLoaded();
+        const fit = Math.max(0, Math.min(matrix.length, last - at.row + 1));
+        const extra = matrix.length - fit;
+        const generation = g.generation;
+
+        if (extra > 0) {
+            const ask = cfg.onPasteOverrun;
+            let answer = false;
+            if (typeof ask === 'function') {
+                this.busy = true;
+                try { answer = await ask({ rows: extra }); } catch (err) {
+                    console.error('[DataTable] onPasteOverrun threw', err);
+                    answer = false;
+                } finally {
+                    this.busy = false;
+                }
+            } else {
+                console.warn(`[DataTable] paste: ${extra} row(s) past the last loaded row and no \`onPasteOverrun\`; nothing pasted.`);
+            }
+            if (answer !== true) return null;
+            if (generation !== g.generation || g.isEditing() || g.staged.committing) return null;
+        }
+
+        // What lands in the loaded rows: each cell read, or skipped.
+        const cells = [];
+        const skipped = [];
+        const refused = [];
+        const readers = new Map(targetCols.map((col) => [col, this._reader(col)]));
+        for (let r = 0; r < fit; r++) {
+            const pos = at.row + r;
+            const rowIdx = g.rowIndexAt(pos);
+            targetCols.forEach((col, c) => {
+                if (c >= matrix[r].length) return;   // a short line: nothing there
+                if (!g.canEdit(pos, col)) { skipped.push({ row: pos, col, rowIdx }); return; }
+                const text = matrix[r][c];
+                const read = readers.get(col)(text);
+                if (read.ok) cells.push({ rowIdx, colIdx: col, value: read.value });
+                else refused.push({ row: pos, col, rowIdx, text, error: read.error });
+            });
+        }
+
+        // The rows past the last loaded one, as data rows: every pasted
+        // column read; one that does not read is null, and listed.
+        let appended = 0;
+        if (extra > 0) {
+            const n = (cfg.headers || []).length;
+            const rows = [];
+            const errors = [];
+            for (let r = fit; r < matrix.length; r++) {
+                const row = new Array(n).fill(null);
+                targetCols.forEach((col, c) => {
+                    if (c >= matrix[r].length) return;
+                    const text = matrix[r][c];
+                    const read = readers.get(col)(text);
+                    if (read.ok) row[col] = read.value;
+                    else errors.push({ row: rows.length, colIdx: col, text, error: read.error });
+                });
+                rows.push(row);
+            }
+            const append = cfg.onRowsAppend;
+            if (typeof append === 'function') {
+                appended = rows.length;
+                this.busy = true;
+                try { await append({ rows, errors }); } catch (err) {
+                    console.error('[DataTable] onRowsAppend threw', err);
+                } finally {
+                    this.busy = false;
+                }
+            } else {
+                this._warn(`${rows.length} row(s) past the last loaded row were not pasted (no \`onRowsAppend\`).`);
+            }
+        }
+
+        const staged = g.staged.stageMany(cells, `paste ${cells.length} cell(s)`);
+
+        // The range covers the block that landed, the cursor where it began.
+        const lastCol = targetCols[targetCols.length - 1] ?? at.col;
+        const lastRow = at.row + Math.max(0, fit - 1);
+        g.set({ row: at.row, col: at.col }, { row: lastRow, col: lastCol });
+
+        // Marked after the selection moved, which clears the last marks.
+        for (const s of skipped) this.skipped.add(key(s.rowIdx, s.col));
+        const redraw = new Set();
+        for (const f of refused) {
+            const k = key(f.rowIdx, f.col);
+            g.errors.set(k, { value: f.text, message: f.error });
+            // Any older commit of the cell still out no longer owns its marks.
+            g.latest.set(k, {});
+            g.pending.delete(k);
+            redraw.add(f.rowIdx);
+        }
+        for (const rowIdx of redraw) g._redraw(rowIdx);
+        if (skipped.length) g.paint();
+
+        if (droppedColumns > 0) {
+            this._warn(`${droppedColumns} column(s) past the last column were not pasted.`);
+        }
+        return {
+            rows: matrix.length, cols: width, staged, skipped, refused, droppedColumns, appended,
+        };
+    }
+
+    dispose() {
+        this.skipped.clear();
+    }
+}