From 49757b23a57f12eedfbcbc7deec3b92edab76b27 Mon Sep 17 00:00:00 2001 From: Garrett Michael Flynn Date: Thu, 11 Apr 2024 09:22:48 -0700 Subject: [PATCH 1/2] Avoid needless selections and clear on transition --- src/renderer/src/stories/Dashboard.js | 6 +++++ src/renderer/src/stories/table/Cell.ts | 4 +++- src/renderer/src/stories/table/cells/base.ts | 24 ++++++++++++++++---- tests/e2e/workflow.ts | 1 - 4 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/renderer/src/stories/Dashboard.js b/src/renderer/src/stories/Dashboard.js index 0cb5f33e8..8e871fb1c 100644 --- a/src/renderer/src/stories/Dashboard.js +++ b/src/renderer/src/stories/Dashboard.js @@ -202,6 +202,9 @@ export class Dashboard extends LitElement { } setMain(page) { + + window.getSelection().empty() // Remove user selection before transitioning + // Update Previous Page const info = page.info; const previous = this.page; @@ -238,8 +241,10 @@ export class Dashboard extends LitElement { this.subSidebar.hide(); } + this.page.set(toPass, false); + this.page.checkSyncState().then(() => { const projectName = info.globalState?.project?.name; @@ -265,6 +270,7 @@ export class Dashboard extends LitElement { if (previous && previous.info.previous === this.page) this.page.onTransition(-1); else this.page.onTransition(1); } + }); } diff --git a/src/renderer/src/stories/table/Cell.ts b/src/renderer/src/stories/table/Cell.ts index 3027f6a5b..d41b4c8cd 100644 --- a/src/renderer/src/stories/table/Cell.ts +++ b/src/renderer/src/stories/table/Cell.ts @@ -219,7 +219,9 @@ export class TableCell extends LitElement { else if (this.schema.format === "date-time") { cls = DateTimeCell this.type = "date-time" - } else if (this.schema.type === "object") { + } + + else if (this.schema.type === "object") { cls = NestedInputCell this.type = "table" } diff --git a/src/renderer/src/stories/table/cells/base.ts b/src/renderer/src/stories/table/cells/base.ts index dfb75862f..ec56bd87d 100644 --- a/src/renderer/src/stories/table/cells/base.ts +++ b/src/renderer/src/stories/table/cells/base.ts @@ -201,17 +201,33 @@ export class TableCellBase extends LitElement { set(value: any, runOnChange = true) { - if (document.execCommand) { + // Ensure all operations are undoable + if (typeof InputEvent === 'function') { this.#editable.setAttribute('contenteditable', '') this.#editable.focus(); - document.execCommand('selectAll'); - document.execCommand('insertText', false, value); + + const range = document.createRange(); + range.selectNodeContents(this.#editable); + const sel = window.getSelection()!; + sel.removeAllRanges(); + sel.addRange(range); + + const inputEvent = new InputEvent('input', { + bubbles: true, + cancelable: false, + data: value, + inputType: 'insertText', + }); + + this.#editable.dispatchEvent(inputEvent); + this.setText(value, undefined, runOnChange) this.#editable.blur(); this.#editable.removeAttribute('contenteditable') } - else this.setText(value, undefined, runOnChange) // Ensure value is still set + + else this.setText(value, undefined, runOnChange) // Just set value } #render(property: 'renderer' | 'editor') { diff --git a/tests/e2e/workflow.ts b/tests/e2e/workflow.ts index f3b4390c6..fd097e01a 100644 --- a/tests/e2e/workflow.ts +++ b/tests/e2e/workflow.ts @@ -379,7 +379,6 @@ export default async function runWorkflow(name, workflow, identifier) { const page = dashboard.page const firstSessionForm = page.forms[0].form firstSessionForm.accordions["NWBFile"].toggle(true) - window.getSelection().empty() // Remove annoying user-select highlight }) await takeScreenshot(join(identifier, 'metadata-nwbfile'), 100) From 501ba01041beefe02aa08091705b621fced3916c Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 11 Apr 2024 16:25:06 +0000 Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/renderer/src/stories/Dashboard.js | 6 +----- src/renderer/src/stories/table/Cell.ts | 4 ++-- src/renderer/src/stories/table/cells/base.ts | 6 +++--- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/renderer/src/stories/Dashboard.js b/src/renderer/src/stories/Dashboard.js index 8e871fb1c..bf7727d8d 100644 --- a/src/renderer/src/stories/Dashboard.js +++ b/src/renderer/src/stories/Dashboard.js @@ -202,8 +202,7 @@ export class Dashboard extends LitElement { } setMain(page) { - - window.getSelection().empty() // Remove user selection before transitioning + window.getSelection().empty(); // Remove user selection before transitioning // Update Previous Page const info = page.info; @@ -241,10 +240,8 @@ export class Dashboard extends LitElement { this.subSidebar.hide(); } - this.page.set(toPass, false); - this.page.checkSyncState().then(() => { const projectName = info.globalState?.project?.name; @@ -270,7 +267,6 @@ export class Dashboard extends LitElement { if (previous && previous.info.previous === this.page) this.page.onTransition(-1); else this.page.onTransition(1); } - }); } diff --git a/src/renderer/src/stories/table/Cell.ts b/src/renderer/src/stories/table/Cell.ts index d41b4c8cd..d554f8a62 100644 --- a/src/renderer/src/stories/table/Cell.ts +++ b/src/renderer/src/stories/table/Cell.ts @@ -219,8 +219,8 @@ export class TableCell extends LitElement { else if (this.schema.format === "date-time") { cls = DateTimeCell this.type = "date-time" - } - + } + else if (this.schema.type === "object") { cls = NestedInputCell this.type = "table" diff --git a/src/renderer/src/stories/table/cells/base.ts b/src/renderer/src/stories/table/cells/base.ts index ec56bd87d..565818de0 100644 --- a/src/renderer/src/stories/table/cells/base.ts +++ b/src/renderer/src/stories/table/cells/base.ts @@ -218,15 +218,15 @@ export class TableCellBase extends LitElement { data: value, inputType: 'insertText', }); - + this.#editable.dispatchEvent(inputEvent); - + this.setText(value, undefined, runOnChange) this.#editable.blur(); this.#editable.removeAttribute('contenteditable') } - + else this.setText(value, undefined, runOnChange) // Just set value }