diff --git a/resources/js/wysiwyg/ui/framework/core.ts b/resources/js/wysiwyg/ui/framework/core.ts index 9c524dff0..68a80d2e1 100644 --- a/resources/js/wysiwyg/ui/framework/core.ts +++ b/resources/js/wysiwyg/ui/framework/core.ts @@ -30,7 +30,7 @@ export function isUiBuilderDefinition(object: any): object is EditorUiBuilderDef export abstract class EditorUiElement { protected dom: HTMLElement|null = null; private context: EditorUiContext|null = null; - private abortController: AbortController = new AbortController(); + protected abortController: AbortController = new AbortController(); protected abstract buildDOM(): HTMLElement; diff --git a/resources/js/wysiwyg/ui/framework/toolbars.ts b/resources/js/wysiwyg/ui/framework/toolbars.ts index 95f0af11c..ec8e9772b 100644 --- a/resources/js/wysiwyg/ui/framework/toolbars.ts +++ b/resources/js/wysiwyg/ui/framework/toolbars.ts @@ -18,9 +18,20 @@ export class EditorContextToolbar extends EditorContainerUiElement { } protected buildDOM(): HTMLElement { - return el('div', { + const toolbar = el('div', { class: 'editor-context-toolbar', }, this.getChildren().map(child => child.getDOMElement())); + + // Focus back on the editor on escape press + toolbar.addEventListener('keydown', (event: KeyboardEvent) => { + if (event.key === 'Escape') { + event.preventDefault(); + event.stopPropagation(); + this.getContext().editor.focus(); + } + }, {signal: this.abortController.signal}); + + return toolbar; } /**