From 65f422f5be154e9aba46a10d2ab0b0bf1418f882 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Fri, 29 Mar 2024 19:44:15 +0100 Subject: [PATCH 1/6] Update codemirror to latest versions --- frontend/components/CellInput/pluto_autocomplete.js | 5 +++-- frontend/imports/CodemirrorPlutoSetup.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/components/CellInput/pluto_autocomplete.js b/frontend/components/CellInput/pluto_autocomplete.js index 2756d8f70d..2023fcb068 100644 --- a/frontend/components/CellInput/pluto_autocomplete.js +++ b/frontend/components/CellInput/pluto_autocomplete.js @@ -10,6 +10,7 @@ import { syntaxTree, StateField, StateEffect, + Transaction, } from "../../imports/CodemirrorPlutoSetup.js" import { get_selected_doc_from_state } from "./LiveDocsFromCursor.js" import { cl } from "../../common/ClassTable.js" @@ -25,7 +26,7 @@ let { autocompletion, completionKeymap, completionStatus, acceptCompletion } = a const getActiveResult = (view, source) => view.state.field(completionState).active.find((a) => a.source == source) // These should be imported from @codemirror/autocomplete, but they are not exported. -let completionState = autocompletion()[0] +let completionState = autocompletion()[1] let applyCompletion = (/** @type {EditorView} */ view, option) => { let apply = option.completion.apply || option.completion.label let result = getActiveResult(view, option.source) @@ -48,7 +49,7 @@ const tabCompletionState = StateField.define({ return false }, - update(value, tr) { + update(value, /** @type {Transaction} */ tr) { // Tab was pressed for (let effect of tr.effects) { if (effect.is(TabCompletionEffect)) return true diff --git a/frontend/imports/CodemirrorPlutoSetup.js b/frontend/imports/CodemirrorPlutoSetup.js index acb00b9ce1..f65ea15146 100644 --- a/frontend/imports/CodemirrorPlutoSetup.js +++ b/frontend/imports/CodemirrorPlutoSetup.js @@ -64,7 +64,7 @@ import { linter, setDiagnostics, //@ts-ignore -} from "https://cdn.jsdelivr.net/gh/JuliaPluto/codemirror-pluto-setup@1234.2.0/dist/index.es.min.js" +} from "https://cdn.jsdelivr.net/gh/JuliaPluto/codemirror-pluto-setup@update-cm-deps-29-03-2024/dist/index.es.min.js" export { linter, From 7333405dd89a695a8b8cc71d9d7a440d7bf39086 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Fri, 29 Mar 2024 20:30:10 +0100 Subject: [PATCH 2/6] update to release --- frontend/imports/CodemirrorPlutoSetup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/imports/CodemirrorPlutoSetup.js b/frontend/imports/CodemirrorPlutoSetup.js index f65ea15146..a207ef132c 100644 --- a/frontend/imports/CodemirrorPlutoSetup.js +++ b/frontend/imports/CodemirrorPlutoSetup.js @@ -64,7 +64,7 @@ import { linter, setDiagnostics, //@ts-ignore -} from "https://cdn.jsdelivr.net/gh/JuliaPluto/codemirror-pluto-setup@update-cm-deps-29-03-2024/dist/index.es.min.js" +} from "https://cdn.jsdelivr.net/gh/JuliaPluto/codemirror-pluto-setup@1234.3.0/dist/index.es.min.js" export { linter, From 847bfd9c7a2fb683a5886c81babf9a7852723171 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Fri, 29 Mar 2024 20:30:18 +0100 Subject: [PATCH 3/6] remove outdated patch --- frontend/components/ExportBanner.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/frontend/components/ExportBanner.js b/frontend/components/ExportBanner.js index 36e891c5df..d0a8810e1d 100644 --- a/frontend/components/ExportBanner.js +++ b/frontend/components/ExportBanner.js @@ -80,15 +80,6 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook }, [print_title] ) - // https://github.com/codemirror/dev/issues/1354 - useEventListener( - window.matchMedia("print"), - "change", - () => { - // window.dispatchEvent(new CustomEvent("beforeprint", { detail: { fake: true } })) - }, - [] - ) const element_ref = useRef(/** @type {HTMLDialogElement?} */ (null)) From ca37618f5fa2d88ab642270d2d1394a350b60202 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Fri, 29 Mar 2024 20:30:33 +0100 Subject: [PATCH 4/6] fix animation flash in dark mode --- frontend/components/Notebook.js | 13 ++++++++++++- frontend/editor.css | 4 +++- test/frontend/helpers/pluto.js | 4 +++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/frontend/components/Notebook.js b/frontend/components/Notebook.js index c7938be760..7b38939e3f 100644 --- a/frontend/components/Notebook.js +++ b/frontend/components/Notebook.js @@ -1,3 +1,4 @@ +import { cl } from "../common/ClassTable.js" import { PlutoActionsContext } from "../common/PlutoContext.js" import { html, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "../imports/Preact.js" @@ -159,6 +160,7 @@ export const Notebook = ({ }, render_cell_outputs_delay(notebook.cell_order.length)) } }, [cell_outputs_delayed, notebook.cell_order.length]) + let global_definition_locations = useMemo( () => Object.fromEntries( @@ -180,8 +182,17 @@ export const Notebook = ({ } }, [cell_outputs_delayed]) + const [animations_enabled, set_animations_enabled] = useState(false) + useLayoutEffect(() => { + if (!cell_outputs_delayed) { + setTimeout(() => { + set_animations_enabled(true) + }, 1000) + } + }, [cell_outputs_delayed]) + return html` - + ${notebook.cell_order .filter((_, i) => !(cell_outputs_delayed && i > render_cell_outputs_minimum)) .map( diff --git a/frontend/editor.css b/frontend/editor.css index e71f7c84ff..e29b524484 100644 --- a/frontend/editor.css +++ b/frontend/editor.css @@ -1354,12 +1354,14 @@ pluto-input .cm-editor { border-bottom-right-radius: 4px; border: 1px solid var(--normal-cell-color); border-left: none; - transition: border-color 0.15s ease-in-out; /* Make sure that scrolling an editor into view gives some breathing room */ scroll-margin-block: 20vh; min-height: 25px; } +pluto-notebook.animations_enabled pluto-input .cm-editor { + transition: border-color 0.15s ease-in-out; +} pluto-input:focus-within .cm-editor { /* z-index increased by 1 to make sure that the autocomplete window shows above all other editors, see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */ z-index: 21; diff --git a/test/frontend/helpers/pluto.js b/test/frontend/helpers/pluto.js index b0856babdb..636eac433e 100644 --- a/test/frontend/helpers/pluto.js +++ b/test/frontend/helpers/pluto.js @@ -149,6 +149,7 @@ const waitForPlutoBusy = async (page, iWantBusiness, options) => { // @ts-ignore document?.body?._js_init_set?.size, document?.body?.classList?.contains("loading"), + document.querySelector(`pluto-notebook:not(.animations_enabled)`), document?.querySelector(`#process-status-tab-button.something_is_happening`)?.id, document?.querySelector(`pluto-cell.running, pluto-cell.queued, pluto-cell.internal_test_queued`)?.id, ] @@ -158,7 +159,8 @@ const waitForPlutoBusy = async (page, iWantBusiness, options) => { (quiet_vals[1] ?? 0) === 0 && quiet_vals[2] === false && quiet_vals[3] == null && - quiet_vals[4] == null + quiet_vals[4] == null && + quiet_vals[5] == null window["quiet_vals"] = quiet_vals From 34cccfdd1b3cfe0a626bffb254506798046074c5 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Fri, 29 Mar 2024 21:01:43 +0100 Subject: [PATCH 5/6] Remove the animation because there were still issues and this looks snappier anyways --- frontend/components/Notebook.js | 12 +----------- frontend/editor.css | 4 ---- 2 files changed, 1 insertion(+), 15 deletions(-) diff --git a/frontend/components/Notebook.js b/frontend/components/Notebook.js index 7b38939e3f..7ada590c0d 100644 --- a/frontend/components/Notebook.js +++ b/frontend/components/Notebook.js @@ -1,4 +1,3 @@ -import { cl } from "../common/ClassTable.js" import { PlutoActionsContext } from "../common/PlutoContext.js" import { html, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "../imports/Preact.js" @@ -182,17 +181,8 @@ export const Notebook = ({ } }, [cell_outputs_delayed]) - const [animations_enabled, set_animations_enabled] = useState(false) - useLayoutEffect(() => { - if (!cell_outputs_delayed) { - setTimeout(() => { - set_animations_enabled(true) - }, 1000) - } - }, [cell_outputs_delayed]) - return html` - + ${notebook.cell_order .filter((_, i) => !(cell_outputs_delayed && i > render_cell_outputs_minimum)) .map( diff --git a/frontend/editor.css b/frontend/editor.css index e29b524484..74b6dee8d1 100644 --- a/frontend/editor.css +++ b/frontend/editor.css @@ -1359,9 +1359,6 @@ pluto-input .cm-editor { scroll-margin-block: 20vh; min-height: 25px; } -pluto-notebook.animations_enabled pluto-input .cm-editor { - transition: border-color 0.15s ease-in-out; -} pluto-input:focus-within .cm-editor { /* z-index increased by 1 to make sure that the autocomplete window shows above all other editors, see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */ z-index: 21; @@ -1525,7 +1522,6 @@ body:not(.___) pluto-cell.code_folded > pluto-trafficlight { @media screen and (any-pointer: fine) { body:not(.disable_ui) pluto-cell:hover > pluto-trafficlight { background: var(--normal-cell-color); - transition: background 0.05s ease-in; } } From 7bec4cc622209eea47599232b8b268f8f5919dda Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Fri, 29 Mar 2024 21:01:46 +0100 Subject: [PATCH 6/6] Update cell_movement_plugin.js --- frontend/components/CellInput/cell_movement_plugin.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/components/CellInput/cell_movement_plugin.js b/frontend/components/CellInput/cell_movement_plugin.js index 1e752cfbe6..26b4de2d94 100644 --- a/frontend/components/CellInput/cell_movement_plugin.js +++ b/frontend/components/CellInput/cell_movement_plugin.js @@ -1,8 +1,5 @@ import { EditorView, autocomplete, EditorState, keymap } from "../../imports/CodemirrorPlutoSetup.js" -// Why am I like this? -let completionState = autocomplete.autocompletion()[0] - /** * Cell movement plugin! * @@ -148,8 +145,8 @@ export let prevent_holding_a_key_from_doing_things_across_cells = EditorView.dom // Because of the "hacky" way this works, we need to check if autocompletion is open... // else we'll block the ability to press ArrowDown for autocomplete.... - // Adopted from https://github.com/codemirror/autocomplete/blob/a53f7ff19dc3a0412f3ce6e2751b08b610e1d762/src/view.ts#L15 - let autocompletion_open = view.state.field(completionState, false)?.open ?? false + + let autocompletion_open = autocomplete.completionStatus(view.state) === "active" // If we have a cursor instead of a multicharacter selection: if (event.key === "ArrowUp" && !autocompletion_open) {