mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-10-03 18:25:02 +08:00
Disable autoscroll when focusing in insert mode (#355)
This commit is contained in:
parent
c5a3575589
commit
3df6508b56
2 changed files with 24 additions and 12 deletions
|
@ -124,7 +124,11 @@ const Cell = {
|
|||
|
||||
input.addEventListener("blur", (event) => {
|
||||
if (this.state.isFocused && this.state.insertMode) {
|
||||
input.focus();
|
||||
// We are still in the insert mode, so focus the input
|
||||
// back once other handlers complete
|
||||
setTimeout(() => {
|
||||
input.focus();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -171,7 +175,7 @@ function getInput(hook) {
|
|||
*/
|
||||
function handleCellsEvent(hook, event) {
|
||||
if (event.type === "cell_focused") {
|
||||
handleCellFocused(hook, event.cellId);
|
||||
handleCellFocused(hook, event.cellId, event.scroll);
|
||||
} else if (event.type === "insert_mode_changed") {
|
||||
handleInsertModeChanged(hook, event.enabled);
|
||||
} else if (event.type === "cell_moved") {
|
||||
|
@ -183,11 +187,13 @@ function handleCellsEvent(hook, event) {
|
|||
}
|
||||
}
|
||||
|
||||
function handleCellFocused(hook, cellId) {
|
||||
function handleCellFocused(hook, cellId, scroll) {
|
||||
if (hook.props.cellId === cellId) {
|
||||
hook.state.isFocused = true;
|
||||
hook.el.setAttribute("data-js-focused", "true");
|
||||
smoothlyScrollToElement(hook.el);
|
||||
if (scroll) {
|
||||
smoothlyScrollToElement(hook.el);
|
||||
}
|
||||
} else if (hook.state.isFocused) {
|
||||
hook.state.isFocused = false;
|
||||
hook.el.removeAttribute("data-js-focused");
|
||||
|
|
|
@ -342,11 +342,19 @@ function handleDocumentMouseDown(hook, event) {
|
|||
// Find the cell element, if one was clicked
|
||||
const cell = event.target.closest(`[data-element="cell"]`);
|
||||
const cellId = cell ? cell.dataset.cellId : null;
|
||||
const insertMode = editableElementClicked(event, cell);
|
||||
|
||||
if (cellId !== hook.state.focusedCellId) {
|
||||
setFocusedCell(hook, cellId);
|
||||
setFocusedCell(hook, cellId, !insertMode);
|
||||
}
|
||||
|
||||
// Depending on whether the click targets editor disable/enable insert mode
|
||||
if (hook.state.insertMode !== insertMode) {
|
||||
setInsertMode(hook, insertMode);
|
||||
}
|
||||
}
|
||||
|
||||
function editableElementClicked(event, cell) {
|
||||
if (cell) {
|
||||
const editorContainer = cell.querySelector(
|
||||
`[data-element="editor-container"]`
|
||||
|
@ -354,12 +362,10 @@ function handleDocumentMouseDown(hook, event) {
|
|||
const input = cell.querySelector(`[data-element="input"]`);
|
||||
const editableElement = editorContainer || input;
|
||||
|
||||
const editorClicked = editableElement.contains(event.target);
|
||||
const insertMode = editorClicked;
|
||||
if (hook.state.insertMode !== insertMode) {
|
||||
setInsertMode(hook, insertMode);
|
||||
}
|
||||
return editableElement.contains(event.target);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -644,7 +650,7 @@ function insertFirstCell(hook, type) {
|
|||
}
|
||||
}
|
||||
|
||||
function setFocusedCell(hook, cellId) {
|
||||
function setFocusedCell(hook, cellId, scroll = true) {
|
||||
hook.state.focusedCellId = cellId;
|
||||
|
||||
if (hook.state.focusedCellId) {
|
||||
|
@ -658,7 +664,7 @@ function setFocusedCell(hook, cellId) {
|
|||
hook.state.focusedSectionId = null;
|
||||
}
|
||||
|
||||
globalPubSub.broadcast("cells", { type: "cell_focused", cellId });
|
||||
globalPubSub.broadcast("cells", { type: "cell_focused", cellId, scroll });
|
||||
|
||||
setInsertMode(hook, false);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue