@formicoidea/labre-core 0.60.0 → 0.61.0

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.60.0",
+  "version": "0.61.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",