FIX: Small delay when auto-adding list item in composer (#27661)

Followup 30fdd7738e,

The issue with keyup is that it happens too late. maybeContinueList
itself runs in about 1 or 2 ms. But we show the linebreak in the
textarea on keydown and we handle it in keyup, which causes the “lag”.

The fix here is “hacking” itsatrap and textarea behavior to allow us to handle
it right away after the linebreak is inserted.

Full credit to Joffrey Jaffeux for this fix, I am making him
"co-author" below.

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
This commit is contained in:
Martin Brennan 2024-07-02 09:37:10 +10:00 committed by GitHub
parent 9e8d8d37fa
commit 947990b7f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 7 deletions

View File

@ -326,7 +326,12 @@ export default Component.extend(TextareaTextManipulation, {
this._itsatrap.bind(`${PLATFORM_KEY_MODIFIER}+shift+.`, () => this._itsatrap.bind(`${PLATFORM_KEY_MODIFIER}+shift+.`, () =>
this.send("insertCurrentTime") this.send("insertCurrentTime")
); );
this._itsatrap.bind("enter", () => this.maybeContinueList(), "keyup"); this._itsatrap.bind("enter", () => {
// Check the textarea value after a brief delay to ensure the input event has updated the value
setTimeout(() => {
this.maybeContinueList();
}, 0);
});
// disable clicking on links in the preview // disable clicking on links in the preview
this.element this.element

View File

@ -989,7 +989,7 @@ third line`
const initialValue = "* first item in list\n"; const initialValue = "* first item in list\n";
this.set("value", initialValue); this.set("value", initialValue);
setCaretPosition(textarea, initialValue.length); setCaretPosition(textarea, initialValue.length);
await triggerKeyEvent(textarea, "keyup", "Enter"); await triggerKeyEvent(textarea, "keydown", "Enter");
assert.strictEqual(this.value, initialValue + "* "); assert.strictEqual(this.value, initialValue + "* ");
} }
); );
@ -1000,7 +1000,7 @@ third line`
const initialValue = "- first item in list\n"; const initialValue = "- first item in list\n";
this.set("value", initialValue); this.set("value", initialValue);
setCaretPosition(textarea, initialValue.length); setCaretPosition(textarea, initialValue.length);
await triggerKeyEvent(textarea, "keyup", "Enter"); await triggerKeyEvent(textarea, "keydown", "Enter");
assert.strictEqual(this.value, initialValue + "- "); assert.strictEqual(this.value, initialValue + "- ");
} }
); );
@ -1011,7 +1011,7 @@ third line`
const initialValue = "1. first item in list\n"; const initialValue = "1. first item in list\n";
this.set("value", initialValue); this.set("value", initialValue);
setCaretPosition(textarea, initialValue.length); setCaretPosition(textarea, initialValue.length);
await triggerKeyEvent(textarea, "keyup", "Enter"); await triggerKeyEvent(textarea, "keydown", "Enter");
assert.strictEqual(this.value, initialValue + "2. "); assert.strictEqual(this.value, initialValue + "2. ");
} }
); );
@ -1022,7 +1022,7 @@ third line`
const initialValue = "* first item in list\n\n* second item in list"; const initialValue = "* first item in list\n\n* second item in list";
this.set("value", initialValue); this.set("value", initialValue);
setCaretPosition(textarea, 21); setCaretPosition(textarea, 21);
await triggerKeyEvent(textarea, "keyup", "Enter"); await triggerKeyEvent(textarea, "keydown", "Enter");
assert.strictEqual( assert.strictEqual(
this.value, this.value,
"* first item in list\n* \n* second item in list" "* first item in list\n* \n* second item in list"
@ -1036,7 +1036,7 @@ third line`
const initialValue = "1. first item in list\n\n2. second item in list"; const initialValue = "1. first item in list\n\n2. second item in list";
this.set("value", initialValue); this.set("value", initialValue);
setCaretPosition(textarea, 22); setCaretPosition(textarea, 22);
await triggerKeyEvent(textarea, "keyup", "Enter"); await triggerKeyEvent(textarea, "keydown", "Enter");
assert.strictEqual( assert.strictEqual(
this.value, this.value,
"1. first item in list\n2. \n3. second item in list" "1. first item in list\n2. \n3. second item in list"
@ -1050,7 +1050,7 @@ third line`
const initialValue = "* first item in list with empty line\n* \n"; const initialValue = "* first item in list with empty line\n* \n";
this.set("value", initialValue); this.set("value", initialValue);
setCaretPosition(textarea, initialValue.length); setCaretPosition(textarea, initialValue.length);
await triggerKeyEvent(textarea, "keyup", "Enter"); await triggerKeyEvent(textarea, "keydown", "Enter");
assert.strictEqual(this.value, "* first item in list with empty line\n"); assert.strictEqual(this.value, "* first item in list with empty line\n");
} }
); );