diff --git a/packages/views/editor/extensions/blur-shortcut.ts b/packages/views/editor/extensions/blur-shortcut.ts new file mode 100644 index 0000000000..ea0b0a18f5 --- /dev/null +++ b/packages/views/editor/extensions/blur-shortcut.ts @@ -0,0 +1,20 @@ +import { Extension } from "@tiptap/core"; + +/** + * Escape → blur the editor. Without this, pressing ESC inside the + * contenteditable does nothing (browsers don't blur contenteditables by + * default), leaving users stuck in the editor with no keyboard escape hatch. + */ +export function createBlurShortcutExtension() { + return Extension.create({ + name: "blurShortcut", + addKeyboardShortcuts() { + return { + Escape: ({ editor }) => { + editor.commands.blur(); + return true; + }, + }; + }, + }); +} diff --git a/packages/views/editor/extensions/index.ts b/packages/views/editor/extensions/index.ts index b0af1c2be7..d750244f1d 100644 --- a/packages/views/editor/extensions/index.ts +++ b/packages/views/editor/extensions/index.ts @@ -40,6 +40,7 @@ import { createMentionSuggestion } from "./mention-suggestion"; import { CodeBlockView } from "./code-block-view"; import { createMarkdownPasteExtension } from "./markdown-paste"; import { createSubmitExtension } from "./submit-shortcut"; +import { createBlurShortcutExtension } from "./blur-shortcut"; import { createFileUploadExtension } from "./file-upload"; import { FileCardExtension } from "./file-card"; import { ImageView } from "./image-view"; @@ -137,6 +138,7 @@ export function createEditorExtensions( }, { submitOnEnter: options.submitOnEnter ?? false }, ), + createBlurShortcutExtension(), createFileUploadExtension(options.onUploadFileRef!), ); }