feat: add scrollIntoView option to focus command, fix #2172
This commit is contained in:
@@ -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.
|
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
|
## Usage
|
||||||
```js
|
```js
|
||||||
// Set the focus to the editor
|
// Set the focus to the editor
|
||||||
|
|||||||
@@ -44,17 +44,27 @@ declare module '@tiptap/core' {
|
|||||||
/**
|
/**
|
||||||
* Focus the editor at the given position.
|
* 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,
|
editor,
|
||||||
view,
|
view,
|
||||||
tr,
|
tr,
|
||||||
dispatch,
|
dispatch,
|
||||||
}) => {
|
}) => {
|
||||||
|
options = {
|
||||||
|
scrollIntoView: true,
|
||||||
|
...options,
|
||||||
|
}
|
||||||
|
|
||||||
const delayedFocus = () => {
|
const delayedFocus = () => {
|
||||||
// focus within `requestAnimationFrame` breaks focus on iOS
|
// focus within `requestAnimationFrame` breaks focus on iOS
|
||||||
// so we have to call this
|
// so we have to call this
|
||||||
@@ -67,7 +77,10 @@ export const focus: RawCommands['focus'] = (position = null) => ({
|
|||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
if (!editor.isDestroyed) {
|
if (!editor.isDestroyed) {
|
||||||
view.focus()
|
view.focus()
|
||||||
editor.commands.scrollIntoView()
|
|
||||||
|
if (options?.scrollIntoView) {
|
||||||
|
editor.commands.scrollIntoView()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export const TaskItem = Node.create<TaskItemOptions>({
|
|||||||
if (editor.isEditable && typeof getPos === 'function') {
|
if (editor.isEditable && typeof getPos === 'function') {
|
||||||
editor
|
editor
|
||||||
.chain()
|
.chain()
|
||||||
.focus()
|
.focus(undefined, { scrollIntoView: false })
|
||||||
.command(({ tr }) => {
|
.command(({ tr }) => {
|
||||||
tr.setNodeMarkup(getPos(), undefined, {
|
tr.setNodeMarkup(getPos(), undefined, {
|
||||||
checked,
|
checked,
|
||||||
|
|||||||
Reference in New Issue
Block a user