Skip to content

Commit 015370e

Browse files
authored
feat: Theme Editor undo/redo shortcuts (#17449)
Support undo/redo shortcuts for a Theme Editor. Fixes #17402
1 parent dac95bb commit 015370e

File tree

1 file changed

+21
-0
lines changed
  • vaadin-dev-server/frontend/theme-editor

1 file changed

+21
-0
lines changed

vaadin-dev-server/frontend/theme-editor/editor.ts

+21
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ export class ThemeEditor extends LitElement {
7272
@state()
7373
private effectiveTheme: ComponentTheme | null = null;
7474

75+
private undoRedoListener;
76+
7577
static get styles() {
7678
return css`
7779
:host {
@@ -208,6 +210,19 @@ export class ThemeEditor extends LitElement {
208210
this.historyActions = this.history.allowedActions;
209211
this.api.markAsUsed();
210212

213+
this.undoRedoListener = (evt: KeyboardEvent) => {
214+
const isZKey = evt.key === 'Z' || evt.key === 'z';
215+
if (isZKey && (evt.ctrlKey || evt.metaKey) && evt.shiftKey) {
216+
if (this.historyActions?.allowRedo) {
217+
this.handleRedo();
218+
}
219+
} else if (isZKey && (evt.ctrlKey || evt.metaKey)) {
220+
if (this.historyActions?.allowUndo) {
221+
this.handleUndo();
222+
}
223+
}
224+
}
225+
211226
// When the theme is updated due to HMR, remove optimistic updates from
212227
// theme preview. Also refresh the base theme as default property values may
213228
// have changed.
@@ -216,6 +231,8 @@ export class ThemeEditor extends LitElement {
216231
this.refreshTheme();
217232
});
218233

234+
document.addEventListener('keydown', this.undoRedoListener);
235+
219236
this.dispatchEvent(new CustomEvent('before-open'));
220237
}
221238

@@ -237,8 +254,12 @@ export class ThemeEditor extends LitElement {
237254
disconnectedCallback() {
238255
super.disconnectedCallback();
239256
this.removeElementHighlight(this.context?.component.element);
257+
240258
componentOverlayManager.hideOverlay();
241259
componentOverlayManager.reset();
260+
261+
document.removeEventListener('keydown', this.undoRedoListener);
262+
242263
this.dispatchEvent(new CustomEvent('after-close'));
243264
}
244265

0 commit comments

Comments
 (0)