diff --git a/docs/api/commands/focus.md b/docs/api/commands/focus.md index f75a19e9..67891796 100644 --- a/docs/api/commands/focus.md +++ b/docs/api/commands/focus.md @@ -10,6 +10,10 @@ See also: [setTextSelection](/api/commands/set-text-selection), [blur](/api/comm By default, it’s restoring the cursor position (and text selection). Pass a position to move the cursor too. +`options: { scrollIntoView: boolen }` + +Defines whether to scroll to the cursor when focusing. Defaults to `true`. + ## Usage ```js // Set the focus to the editor diff --git a/packages/core/src/commands/focus.ts b/packages/core/src/commands/focus.ts index 291817ca..1ae0c21e 100644 --- a/packages/core/src/commands/focus.ts +++ b/packages/core/src/commands/focus.ts @@ -44,17 +44,27 @@ declare module '@tiptap/core' { /** * Focus the editor at the given position. */ - focus: (position?: FocusPosition) => ReturnType, + focus: ( + position?: FocusPosition, + options?: { + scrollIntoView?: boolean, + }, + ) => ReturnType, } } } -export const focus: RawCommands['focus'] = (position = null) => ({ +export const focus: RawCommands['focus'] = (position = null, options) => ({ editor, view, tr, dispatch, }) => { + options = { + scrollIntoView: true, + ...options, + } + const delayedFocus = () => { // focus within `requestAnimationFrame` breaks focus on iOS // so we have to call this @@ -67,7 +77,10 @@ export const focus: RawCommands['focus'] = (position = null) => ({ requestAnimationFrame(() => { if (!editor.isDestroyed) { view.focus() - editor.commands.scrollIntoView() + + if (options?.scrollIntoView) { + editor.commands.scrollIntoView() + } } }) } diff --git a/packages/extension-task-item/src/task-item.ts b/packages/extension-task-item/src/task-item.ts index f6e2e859..c11dc1e7 100644 --- a/packages/extension-task-item/src/task-item.ts +++ b/packages/extension-task-item/src/task-item.ts @@ -118,7 +118,7 @@ export const TaskItem = Node.create({ if (editor.isEditable && typeof getPos === 'function') { editor .chain() - .focus() + .focus(undefined, { scrollIntoView: false }) .command(({ tr }) => { tr.setNodeMarkup(getPos(), undefined, { checked,