Skip to content

Commit

Permalink
⌨️ Keyboard shortcut for folding cell (#2922)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fonsp
fonsp authored May 21, 2024
1 parent 65e7e6d commit 5069ee4
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 26 deletions.
11 changes: 9 additions & 2 deletions frontend/components/CellInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -628,6 +628,11 @@ export const CellInput = ({
return direction === 1 ? moveLineDown(cm) : moveLineUp(cm)
}
}
const keyMapFold = (/** @type {EditorView} */ cm, new_value) => {
set_cm_forced_focus(true)
pluto_actions.fold_remote_cells([cell_id], new_value)
return true
}

const plutoKeyMaps = [
{ key: "Shift-Enter", run: keyMapSubmit },
Expand All @@ -645,7 +650,8 @@ export const CellInput = ({
{ key: "Ctrl-Backspace", run: keyMapBackspace },
{ key: "Alt-ArrowUp", run: (x) => keyMapMoveLine(x, -1) },
{ key: "Alt-ArrowDown", run: (x) => keyMapMoveLine(x, 1) },

{ key: "Ctrl-Shift-[", mac: "Cmd-Alt-[", run: (x) => keyMapFold(x, true) },
{ key: "Ctrl-Shift-]", mac: "Cmd-Alt-]", run: (x) => keyMapFold(x, false) },
mod_d_command,
]

Expand Down Expand Up @@ -917,6 +923,7 @@ export const CellInput = ({
head: cm.state.selection.main.head,
},
})
} else if (cm_forced_focus === true) {
} else {
let new_selection = {
anchor: line_and_ch_to_cm6_position(cm.state.doc, cm_forced_focus[0]),
Expand Down Expand Up @@ -1032,7 +1039,7 @@ const InputContextMenu = ({ on_delete, cell_id, run_cell, skip_as_script, runnin
})
}

useEventListener(window, "keydown", (e) => {
useEventListener(window, "keydown", (/** @type {KeyboardEvent} */ e) => {
if (e.key === "Escape") {
setOpen(false)
}
Expand Down
55 changes: 32 additions & 23 deletions frontend/components/Editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,7 @@ export class Editor extends Component {
fold_remote_cells: async (cell_ids, new_value) => {
await update_notebook((notebook) => {
for (let cell_id of cell_ids) {
notebook.cell_inputs[cell_id].code_folded = new_value
notebook.cell_inputs[cell_id].code_folded = new_value ?? !notebook.cell_inputs[cell_id].code_folded
}
})
},
Expand Down Expand Up @@ -1188,6 +1188,10 @@ patch: ${JSON.stringify(
this.run_selected = () => {
return this.actions.set_and_run_multiple(this.state.selected_cells)
}
this.fold_selected = (new_val) => {
if (_.isEmpty(this.state.selected_cells)) return
return this.actions.fold_remote_cells(this.state.selected_cells, new_val)
}
this.move_selected = (/** @type {KeyboardEvent} */ e, /** @type {1|-1} */ delta) => {
if (this.state.selected_cells.length > 0) {
const current_indices = this.state.selected_cells.map((id) => this.state.notebook.cell_order.indexOf(id))
Expand Down Expand Up @@ -1253,6 +1257,8 @@ patch: ${JSON.stringify(
// TODO: let user know that the notebook autosaves
}
e.preventDefault()
} else if (["BracketLeft", "BracketRight"].includes(e.code) && (is_mac_keyboard ? e.altKey && e.metaKey : e.ctrlKey && e.shiftKey)) {
this.fold_selected(e.code === "BracketLeft")
} else if (e.key === "Backspace" || e.key === "Delete") {
if (this.delete_selected("Delete")) {
e.preventDefault()
Expand All @@ -1267,29 +1273,32 @@ patch: ${JSON.stringify(
// On mac "cmd+shift+?" is used by chrome, so that is why this needs to be ctrl as well on mac
// Also pressing "ctrl+shift" on mac causes the key to show up as "/", this madness
// I hope we can find a better solution for this later - Dral

const fold_prefix = is_mac_keyboard ? `⌥${and}⌘` : `Ctrl${and}Shift`

alert(
`Shortcuts 🎹
⇧${and}Enter: run cell
${ctrl_or_cmd_name}${and}Enter: run cell and add cell below
${ctrl_or_cmd_name}${and}S: submit all changes
Delete or Backspace: delete empty cell
page up or fn${and}↑: jump to cell above
page down or fn${and}↓: jump to cell below
${alt_or_options_name}${and}↑: move line/cell up
${alt_or_options_name}${and}↓: move line/cell down
Select multiple cells by dragging a selection box from the space between cells.
${ctrl_or_cmd_name}${and}C: copy selected cells
${ctrl_or_cmd_name}${and}X: cut selected cells
${ctrl_or_cmd_name}${and}V: paste selected cells
${control_name}${and}M: toggle markdown
${ctrl_or_cmd_name}${and}Q: interrupt notebook
The notebook file saves every time you run a cell.`
`
⇧${and}Enter: run cell
${ctrl_or_cmd_name}${and}Enter: run cell and add cell below
${ctrl_or_cmd_name}${and}S: submit all changes
Delete or Backspace: delete empty cell
PageUp or fn${and}↑: jump to cell above
PageDown or fn${and}↓: jump to cell below
${alt_or_options_name}${and}↑: move line/cell up
${alt_or_options_name}${and}↓: move line/cell down
${control_name}${and}M: toggle markdown
${fold_prefix}${and}[: hide cell code
${fold_prefix}${and}]: show cell code
${ctrl_or_cmd_name}${and}Q: interrupt notebook
Select multiple cells by dragging a selection box from the space between cells.
${ctrl_or_cmd_name}${and}C: copy selected cells
${ctrl_or_cmd_name}${and}X: cut selected cells
${ctrl_or_cmd_name}${and}V: paste selected cells
The notebook file saves every time you run a cell.`
)
e.preventDefault()
} else if (e.key === "Escape") {
Expand Down
3 changes: 2 additions & 1 deletion frontend/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1887,7 +1887,8 @@ pluto-input > .preview_hidden_code_info {
pointer-events: none;
}

body:not(.process_waiting_for_permission) pluto-cell.code_folded pluto-input > .preview_hidden_code_info {
body:not(.process_waiting_for_permission) pluto-cell.code_folded pluto-input > .preview_hidden_code_info,
pluto-cell.code_folded:focus-within pluto-input > .preview_hidden_code_info {
display: block;
}

Expand Down

0 comments on commit 5069ee4

Please sign in to comment.