diff --git a/packages/ckeditor5/src/plugins.ts b/packages/ckeditor5/src/plugins.ts index 3310493c0..84750ddb5 100644 --- a/packages/ckeditor5/src/plugins.ts +++ b/packages/ckeditor5/src/plugins.ts @@ -27,6 +27,7 @@ import "@triliumnext/ckeditor5-math/index.css"; import CodeBlockToolbar from "./plugins/code_block_toolbar.js"; import CodeBlockLanguageDropdown from "./plugins/code_block_language_dropdown.js"; import MoveBlockUpDownPlugin from "./plugins/move_block_updown.js"; +import ScrollOnUndoRedoPlugin from "./plugins/scroll_on_undo_redo.js" /** * Plugins that are specific to Trilium and not part of the CKEditor 5 core, included in both text editors but not in the attribute editor. @@ -46,7 +47,8 @@ const TRILIUM_PLUGINS: typeof Plugin[] = [ SyntaxHighlighting, CodeBlockLanguageDropdown, CodeBlockToolbar, - MoveBlockUpDownPlugin + MoveBlockUpDownPlugin, + ScrollOnUndoRedoPlugin ]; /** diff --git a/packages/ckeditor5/src/plugins/scroll_on_undo_redo.ts b/packages/ckeditor5/src/plugins/scroll_on_undo_redo.ts new file mode 100644 index 000000000..ba09501eb --- /dev/null +++ b/packages/ckeditor5/src/plugins/scroll_on_undo_redo.ts @@ -0,0 +1,18 @@ +import { Plugin } from 'ckeditor5'; + +export default class ScrollOnUndoRedoPlugin extends Plugin { + init() { + const editor = this.editor; + + const scrollToSelection = () => { + // Ensure scroll happens in sync with DOM updates + requestAnimationFrame(() => { + editor.editing.view.scrollToTheSelection(); + }); + }; + + // Scroll to selection after undo/redo to keep cursor in view + editor.commands.get('undo')?.on('execute', scrollToSelection); + editor.commands.get('redo')?.on('execute', scrollToSelection); + } +}