@a3s-lab/office 0.48.1 → 0.50.0

package/dist/0~controlled-editor-composition.js

@@ -1,22 +1,114 @@
 const COMPOSITION_SETTLE_RETRY_MS = 20;
 const MAX_COMPOSITION_SETTLE_RETRIES = 4;
+const COMPOSITION_SETTLE_QUIET_MS = 24;
+const COMPOSITION_SETTLE_MAX_MS = 240;
+function inputTypeOf(event) {
+    const inputType = event.inputType;
+    return 'string' == typeof inputType ? inputType : '';
+}
+function inputDataOf(event) {
+    const data = event.data;
+    return 'string' == typeof data ? data : null;
+}
+function isCommittedInput(event) {
+    return 'insertFromComposition' === inputTypeOf(event);
+}
 class ControlledEditorComposition {
     active = false;
+    committedInputSeen = false;
+    committedText = null;
+    compositionData = null;
+    deadline = 0;
     generation = 0;
+    awaitingCommittedTransaction = false;
+    range = null;
+    rangeFrozen = false;
     settling = false;
+    settleAt = 0;
+    settleHandler = null;
+    settleEditor = null;
+    sessionId = 0;
     timer = null;
-    start() {
+    start(editor) {
+        if (this.active) {
+            if (!this.range && editor && !editor.isDestroyed) this.range = this.selectionRange(editor);
+            return;
+        }
         this.generation += 1;
         this.cancelTimer();
         this.active = true;
+        this.awaitingCommittedTransaction = false;
+        this.committedInputSeen = false;
+        this.committedText = null;
+        this.compositionData = null;
+        this.deadline = 0;
+        this.range = editor && !editor.isDestroyed ? this.selectionRange(editor) : null;
+        this.rangeFrozen = false;
         this.settling = false;
+        this.settleAt = 0;
+        this.settleEditor = null;
+        this.settleHandler = null;
+        this.sessionId += 1;
     }
-    end(editor, onSettled) {
+    recordTransaction(transaction) {
+        if (!this.active && !this.settling || !this.range || this.rangeFrozen || !transaction.docChanged) return;
+        const from = transaction.mapping.map(this.range.from, -1);
+        const to = transaction.mapping.map(this.range.to, 1);
+        this.range = {
+            from: Math.min(from, to),
+            to: Math.max(from, to)
+        };
+        if (this.settling && this.awaitingCommittedTransaction) {
+            this.awaitingCommittedTransaction = false;
+            this.rangeFrozen = true;
+        }
+    }
+    noteInput(event) {
+        const data = inputDataOf(event);
+        const committed = isCommittedInput(event);
+        if (this.active) {
+            if (committed && data) {
+                this.committedInputSeen = true;
+                this.committedText = data;
+                this.awaitingCommittedTransaction = true;
+            }
+            return;
+        }
+        if (!this.settling) return;
+        const matchesCompositionData = Boolean(data && this.compositionData && data === this.compositionData);
+        if (!committed && !matchesCompositionData) {
+            if (data) {
+                this.awaitingCommittedTransaction = false;
+                this.rangeFrozen = true;
+                this.scheduleQuietSettlement();
+            }
+            return;
+        }
+        if (data) this.committedText = data;
+        this.committedInputSeen = true;
+        this.awaitingCommittedTransaction = true;
+        this.scheduleQuietSettlement();
+    }
+    end(editor, dataOrHandler, maybeHandler) {
+        const legacySettlement = 'function' == typeof dataOrHandler;
+        const data = legacySettlement ? null : dataOrHandler;
+        const handler = 'function' == typeof dataOrHandler ? dataOrHandler : maybeHandler;
+        if (!handler || !this.active && !this.settling) return;
+        if ('string' == typeof data) {
+            this.compositionData = data;
+            if (data && !this.committedText) this.committedText = data;
+            if (data && this.currentRangeText(editor) === data) this.committedInputSeen = true;
+        }
         const generation = ++this.generation;
         this.cancelTimer();
         this.active = false;
         this.settling = true;
-        this.scheduleSettlement(editor, onSettled, generation, 0);
+        this.deadline = Date.now() + COMPOSITION_SETTLE_MAX_MS;
+        this.settleEditor = editor;
+        this.settleHandler = handler;
+        this.settleAt = legacySettlement ? Date.now() : this.committedInputSeen ? Date.now() + COMPOSITION_SETTLE_QUIET_MS : this.deadline;
+        if (legacySettlement) this.deadline = Date.now() + COMPOSITION_SETTLE_RETRY_MS * MAX_COMPOSITION_SETTLE_RETRIES;
+        this.scheduleSettlement(generation);
     }
     isBlocking(editor) {
         return this.active || this.settling || Boolean(editor && !editor.isDestroyed && editor.view.composing);
@@ -26,24 +118,84 @@ class ControlledEditorComposition {
         this.cancelTimer();
         this.active = false;
         this.settling = false;
+        this.committedInputSeen = false;
+        this.committedText = null;
+        this.compositionData = null;
+        this.deadline = 0;
+        this.range = null;
+        this.rangeFrozen = false;
+        this.settleAt = 0;
+        this.settleEditor = null;
+        this.settleHandler = null;
+    }
+    selectionRange(editor) {
+        return {
+            from: editor.state.selection.from,
+            to: editor.state.selection.to
+        };
+    }
+    currentRangeText(editor) {
+        if (!this.range || editor.isDestroyed) return null;
+        const maximum = editor.state.doc.content.size;
+        if (this.range.from < 0 || this.range.to < this.range.from || this.range.to > maximum) return null;
+        return editor.state.doc.textBetween(this.range.from, this.range.to, '\n', '\n');
     }
-    scheduleSettlement(editor, onSettled, generation, retry) {
-        const delay = 0 === retry ? 0 : COMPOSITION_SETTLE_RETRY_MS;
+    snapshot(editor) {
+        const maximum = editor.state.doc.content.size;
+        const from = this.range ? Math.max(0, Math.min(maximum, this.range.from)) : null;
+        const to = this.range ? Math.max(0, Math.min(maximum, this.range.to)) : null;
+        return {
+            id: this.sessionId,
+            range: null === from || null === to ? null : {
+                from: Math.min(from, to),
+                to: Math.max(from, to)
+            },
+            text: this.committedText
+        };
+    }
+    scheduleQuietSettlement() {
+        if (!this.settling) return;
+        this.settleAt = Math.min(this.deadline, Date.now() + COMPOSITION_SETTLE_QUIET_MS);
+        this.scheduleSettlement(this.generation);
+    }
+    scheduleSettlement(expectedGeneration) {
+        this.cancelTimer();
+        const wait = Math.max(0, this.settleAt - Date.now());
         this.timer = setTimeout(()=>{
             this.timer = null;
-            if (generation !== this.generation) return;
-            if (editor.isDestroyed) {
-                this.settling = false;
-                return;
-            }
+            if (expectedGeneration !== this.generation || !this.settling) return;
+            const editor = this.settleEditor;
+            const handler = this.settleHandler;
+            if (!editor || !handler || editor.isDestroyed) return void this.clearSettlement();
             if (editor.view.composing) {
-                if (retry < MAX_COMPOSITION_SETTLE_RETRIES) this.scheduleSettlement(editor, onSettled, generation, retry + 1);
-                else this.settling = false;
+                if (Date.now() < this.deadline) {
+                    this.settleAt = Math.min(this.deadline, Date.now() + COMPOSITION_SETTLE_RETRY_MS);
+                    this.scheduleSettlement(expectedGeneration);
+                } else this.clearSettlement();
                 return;
             }
-            this.settling = false;
-            onSettled(editor);
-        }, delay);
+            if (Date.now() < this.settleAt) return void this.scheduleSettlement(expectedGeneration);
+            const snapshot = this.snapshot(editor);
+            try {
+                handler(editor, snapshot);
+            } finally{
+                this.clearSettlement();
+            }
+        }, wait);
+    }
+    clearSettlement() {
+        this.active = false;
+        this.awaitingCommittedTransaction = false;
+        this.settling = false;
+        this.committedInputSeen = false;
+        this.committedText = null;
+        this.compositionData = null;
+        this.deadline = 0;
+        this.range = null;
+        this.rangeFrozen = false;
+        this.settleAt = 0;
+        this.settleEditor = null;
+        this.settleHandler = null;
     }
     cancelTimer() {
         if (null === this.timer) return;