@formicoidea/labre-core 0.59.0 → 0.61.0

package/dist/_pkgs/data-view/property-presets/number/cell-renderer.js

@@ -39,6 +39,7 @@ import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { stopPropagation } from '../../core/utils/event.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
+import { TypingCommit } from '../typing-commit.js';
 import { numberInputStyle, numberStyle } from './cell-renderer-css.js';
 import { numberPropertyModelConfig } from './define.js';
 import { formatNumber, parseNumber, } from './utils/formatter.js';
@@ -63,14 +64,15 @@ let NumberCell = (() => {
                     });
                 }
             });
+            this._baseSet = false;
+            this._typing = new TypingCommit(() => this._commitTyped());
             this._setValue = (str = this._inputEle?.value) => {
-                if (!str) {
-                    this.valueSetNextTick(undefined);
+                this._typing.cancel();
+                // No input, nothing typed: never read as a cleared value.
+                if (str === undefined)
                     return;
-                }
-                const enableNewFormatting = this.view.featureFlags$.value.enable_number_formatting;
-                const value = enableNewFormatting ? parseNumber(str) : parseFloat(str);
-                if (isNaN(value)) {
+                const value = this._parse(str);
+                if (value === null) {
                     if (this._inputEle) {
                         this._inputEle.value = this.value
                             ? this._getFormattedString(this.value)
@@ -78,10 +80,11 @@ let NumberCell = (() => {
                     }
                     return;
                 }
-                if (this._inputEle) {
+                if (this._inputEle && value !== undefined) {
                     this._inputEle.value = this._getFormattedString(value);
                 }
-                this.valueSetNextTick(value);
+                if (this._changed(value))
+                    this.valueSetNextTick(value);
             };
             this.focusEnd = () => {
                 if (!this._inputEle)
@@ -111,6 +114,34 @@ let NumberCell = (() => {
                     : value.toString()
                 : '';
         }
+        /** Parsed input; `null` for text that is not a number yet. */
+        _parse(str) {
+            if (!str)
+                return undefined;
+            const enableNewFormatting = this.view.featureFlags$.value.enable_number_formatting;
+            const value = enableNewFormatting ? parseNumber(str) : parseFloat(str);
+            return isNaN(value) ? null : value;
+        }
+        _changed(value) {
+            const base = this._baseSet ? this._base : this.value;
+            if (value === base)
+                return false;
+            this._base = value;
+            this._baseSet = true;
+            return true;
+        }
+        /** While typing: a number commits, a half-typed one waits, the input is
+         *  left as typed. */
+        _commitTyped() {
+            this._typing.cancel();
+            const input = this._inputEle;
+            if (!input)
+                return;
+            const value = this._parse(input.value);
+            if (value === null || !this._changed(value))
+                return;
+            this.valueSetImmediate(value);
+        }
         _blur() {
             this.selectCurrentCell(false);
         }
@@ -125,14 +156,21 @@ let NumberCell = (() => {
         beforeExitEditingMode() {
             this._setValue();
         }
+        disconnectedCallback() {
+            if (this.isEditing$?.peek())
+                this._commitTyped();
+            this._typing.cancel();
+            super.disconnectedCallback();
+        }
         render() {
             if (this.isEditing$.value) {
-                const formatted = this.value ? this._getFormattedString(this.value) : '';
+                this._opened ??= this.value ? this._getFormattedString(this.value) : '';
                 return html `<input
         type="text"
         autocomplete="off"
-        .value="${formatted}"
+        .value="${this._opened}"
         @keydown="${this._keydown}"
+        @input="${() => this._typing.schedule()}"
         @blur="${this._blur}"
         @focus="${this._focus}"
         class="${numberInputStyle} number"
@@ -140,6 +178,9 @@ let NumberCell = (() => {
       />`;
             }
             else {
+                this._opened = undefined;
+                this._base = undefined;
+                this._baseSet = false;
                 return html ` <div class="${numberStyle} number">
         ${this._getFormattedString()}
       </div>`;

package/dist/_pkgs/data-view/property-presets/text/cell-renderer.d.ts

@@ -1,11 +1,33 @@
 import { BaseCellRenderer } from '../../core/property/index.js';
+/**
+ * The plain-text cell (a hosted source's text and title columns, the title
+ * band's text). What is typed is committed while typing (after a pause),
+ * when the input loses the focus, when the cell leaves the DOM and when the
+ * cell exits editing (Enter, Escape, Tab, another cell): leaving by a path
+ * no view reports, a click outside the editor, lost the edit (recette 3,
+ * P3-5, `text-cell-commit.unit.spec.ts`). Escape commits too: what was typed
+ * is kept, as in the table before. A commit writes only what changed since
+ * the editor opened or last committed, so an exit without typing writes
+ * nothing and a value another peer wrote meanwhile is not overwritten.
+ */
 export declare class TextCell extends BaseCellRenderer<string, string> {
     private accessor _inputEle;
+    /**
+     * The text the input opened with, bound while editing: a value the
+     * source echoes back mid-typing (a commit while typing, a remote write)
+     * must not rewrite the input under the caret.
+     */
+    private _opened;
+    /** The last text handed to the source in this edit session. */
+    private _sent;
+    private readonly _typing;
     private readonly _keydown;
-    private readonly _setValue;
+    private readonly _onBlur;
+    private _commit;
     focusEnd: () => void;
     afterEnterEditingMode(): void;
     beforeExitEditingMode(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export declare const textPropertyConfig: import("../../index.js").PropertyMetaConfig<"text", {}, string, string>;

package/dist/_pkgs/data-view/property-presets/text/cell-renderer.js

@@ -37,8 +37,20 @@ import { query } from 'lit/decorators.js';
 import { BaseCellRenderer } from '../../core/property/index.js';
 import { createFromBaseCellRenderer } from '../../core/property/renderer.js';
 import { createIcon } from '../../core/utils/uni-icon.js';
+import { TypingCommit } from '../typing-commit.js';
 import { textInputStyle, textStyle } from './cell-renderer-css.js';
 import { textPropertyModelConfig } from './define.js';
+/**
+ * The plain-text cell (a hosted source's text and title columns, the title
+ * band's text). What is typed is committed while typing (after a pause),
+ * when the input loses the focus, when the cell leaves the DOM and when the
+ * cell exits editing (Enter, Escape, Tab, another cell): leaving by a path
+ * no view reports, a click outside the editor, lost the edit (recette 3,
+ * P3-5, `text-cell-commit.unit.spec.ts`). Escape commits too: what was typed
+ * is kept, as in the table before. A commit writes only what changed since
+ * the editor opened or last committed, so an exit without typing writes
+ * nothing and a value another peer wrote meanwhile is not overwritten.
+ */
 let TextCell = (() => {
     let _classSuper = BaseCellRenderer;
     let __inputEle_decorators;
@@ -48,21 +60,26 @@ let TextCell = (() => {
         constructor() {
             super(...arguments);
             this.#_inputEle_accessor_storage = __runInitializers(this, __inputEle_initializers, void 0);
-            this._keydown = (__runInitializers(this, __inputEle_extraInitializers), (e) => {
+            /**
+             * The text the input opened with, bound while editing: a value the
+             * source echoes back mid-typing (a commit while typing, a remote write)
+             * must not rewrite the input under the caret.
+             */
+            this._opened = __runInitializers(this, __inputEle_extraInitializers);
+            this._typing = new TypingCommit(() => this._commit(false));
+            this._keydown = (e) => {
                 if (e.key === 'Enter' && !e.isComposing) {
-                    // Leaving commits, once, through `beforeExitEditingMode`. Committing
-                    // here as well reset the input to the old value, which the exit then
-                    // wrote back over the new one (standalone-cell.unit.spec.ts).
+                    // Leaving commits, through `beforeExitEditingMode`. Resetting the
+                    // input here as well made the exit write the old value back over the
+                    // new one (standalone-cell.unit.spec.ts).
                     setTimeout(() => {
                         this.selectCurrentCell(false);
                     });
                 }
-            });
-            this._setValue = (str = this._inputEle?.value) => {
-                if (this._inputEle) {
-                    this._inputEle.value = `${this.value ?? ''}`;
-                }
-                this.valueSetNextTick(str);
+            };
+            this._onBlur = () => {
+                if (this.isEditing$.peek())
+                    this._commit(false);
             };
             this.focusEnd = () => {
                 if (!this._inputEle)
@@ -81,23 +98,47 @@ let TextCell = (() => {
         #_inputEle_accessor_storage;
         get _inputEle() { return this.#_inputEle_accessor_storage; }
         set _inputEle(value) { this.#_inputEle_accessor_storage = value; }
+        _commit(nextTick) {
+            this._typing.cancel();
+            const input = this._inputEle;
+            if (!input)
+                return;
+            const str = input.value;
+            const base = this._sent ?? this._opened ?? `${this.value ?? ''}`;
+            if (str === base)
+                return;
+            this._sent = str;
+            if (nextTick)
+                this.valueSetNextTick(str);
+            else
+                this.valueSetImmediate(str);
+        }
         afterEnterEditingMode() {
             this.focusEnd();
         }
         beforeExitEditingMode() {
-            this._setValue();
+            this._commit(true);
+        }
+        disconnectedCallback() {
+            if (this.isEditing$?.peek())
+                this._commit(false);
+            this._typing.cancel();
+            super.disconnectedCallback();
         }
         render() {
             if (this.isEditing$.value) {
+                this._opened ??= `${this.value ?? ''}`;
                 return html `<input
-        .value="${this.value ?? ''}"
+        .value="${this._opened}"
         @keydown="${this._keydown}"
+        @input="${() => this._typing.schedule()}"
+        @blur="${this._onBlur}"
         class="${textInputStyle}"
       />`;
             }
-            else {
-                return html `<div class="${textStyle}">${this.value ?? ''}</div>`;
-            }
+            this._opened = undefined;
+            this._sent = undefined;
+            return html `<div class="${textStyle}">${this.value ?? ''}</div>`;
         }
     };
 })();

package/dist/_pkgs/data-view/property-presets/typing-commit.d.ts

@@ -0,0 +1,16 @@
+/**
+ * How long an in-place cell editor (text, number) waits after the last
+ * keystroke before it commits what is typed. Short enough that a value
+ * typed and left by any path (a click outside the editor, a closed tab) is
+ * already written; long enough that a host writing to a server does not
+ * write once per keystroke (recette 3, P3-5).
+ */
+export declare const TYPING_COMMIT_MS = 400;
+/** The one commit waiting for the typing to pause. */
+export declare class TypingCommit {
+    private readonly _commit;
+    private _timer;
+    constructor(_commit: () => void);
+    schedule(): void;
+    cancel(): void;
+}

package/dist/_pkgs/data-view/property-presets/typing-commit.js

@@ -0,0 +1,27 @@
+/**
+ * How long an in-place cell editor (text, number) waits after the last
+ * keystroke before it commits what is typed. Short enough that a value
+ * typed and left by any path (a click outside the editor, a closed tab) is
+ * already written; long enough that a host writing to a server does not
+ * write once per keystroke (recette 3, P3-5).
+ */
+export const TYPING_COMMIT_MS = 400;
+/** The one commit waiting for the typing to pause. */
+export class TypingCommit {
+    constructor(_commit) {
+        this._commit = _commit;
+    }
+    schedule() {
+        this.cancel();
+        this._timer = setTimeout(() => {
+            this._timer = undefined;
+            this._commit();
+        }, TYPING_COMMIT_MS);
+    }
+    cancel() {
+        if (this._timer === undefined)
+            return;
+        clearTimeout(this._timer);
+        this._timer = undefined;
+    }
+}

package/dist/_pkgs/data-view/view-presets/list/list-view.js

@@ -152,7 +152,7 @@ export class ListViewUI extends FlatViewUI {
     renderRow(rowId) {
         const view = this.view;
         const title = view.titleProperty$.value;
-        // A value still loading keeps its chip, as a skeleton.
+        // A value still loading keeps its chip, with its spinner.
         const chips = view.bodyProperties$.value.filter(property => {
             const cell = property.cellGetOrCreate(rowId);
             return cell.status$?.value === 'pending' || !cell.isEmpty$.value;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-core",
   "description": "Labre editor — the full BlockSuite-derived editor as one package.",
-  "version": "0.59.0",
+  "version": "0.61.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",