Use the latest dralbase

Also, we now support file-drops to cells with code (adds cell after it)

frontend/components/Cell.js

@@ -37,9 +37,8 @@ export const Cell = ({
 
     // cm_forced_focus is null, except when a line needs to be highlighted because it is part of a stack trace
     const [cm_forced_focus, set_cm_forced_focus] = useState(null)
-    const { saving_file, drag_active, event_handler, inactive_handler } = useDropHandler(pluto_actions, on_change, cell_id)
-    const has_code = code?.length > 0
-    const handler = !has_code ? event_handler : inactive_handler
+    const { saving_file, drag_active, event_handler } = useDropHandler()
+    const handler = event_handler
     const localTimeRunning = 10e5 * useMillisSinceTruthy(running)
     useEffect(() => {
         const focusListener = (e) => {
@@ -81,7 +80,6 @@ export const Cell = ({
                 code_differs: class_code_differs,
                 code_folded: class_code_folded,
                 drop_target: drag_active,
-                drop_invalid: has_code && !saving_file,
                 saving_file: saving_file,
             })}
             id=${cell_id}

frontend/components/CellInput.js

@@ -50,7 +50,8 @@ export const CellInput = ({
     on_change,
     on_update_doc_query,
     on_focus_neighbor,
-    on_drag_drop_events,    cell_id,
+    on_drag_drop_events,
+    cell_id,
     notebook_id,
 }) => {
     let pluto_actions = useContext(PlutoContext)
@@ -454,17 +455,10 @@ export const CellInput = ({
     //     }
     // }, [remote_code.timestamp])
 
-
     useEffect(() => {
         cm_ref.current.options.disableInput = disable_input
     }, [disable_input])
 
-    useEffect(() => {
-        if (cm_ref.current.value !== local_code) {
-            cm_ref.current.setValue(remote_code)
-        }
-    }, [local_code, remote_code])
-
     useEffect(() => {
         if (cm_ref.current.value !== local_code && local_code === remote_code) {
             cm_ref.current.setValue(remote_code)

frontend/components/Editor.js

@@ -141,14 +141,15 @@ export class Editor extends Component {
             send: (...args) => this.client.send(...args),
             update_notebook: (...args) => this.update_notebook(...args),
             set_doc_query: (query) => this.setState({ desired_doc_query: query }),
-            set_local_cell: (cell_id, new_val) => {
-                this.setState(
+            set_local_cell: (cell_id, new_val, callback) => {
+                return this.setState(
                     immer((state) => {
                         state.cell_inputs_local[cell_id] = {
                             code: new_val,
                         }
                         state.selected_cells = []
-                    })
+                    }),
+                    callback
                 )
             },
             focus_on_neighbor: (cell_id, delta, line = delta === -1 ? Infinity : -1, ch) => {
@@ -286,24 +287,24 @@ export class Editor extends Component {
                     notebook.cell_order = [...before, ...cell_ids, ...after]
                 })
             },
-            add_remote_cell_at: async (index) => {
+            add_remote_cell_at: async (index, code = "") => {
                 let id = uuidv4()
                 this.setState({ last_created_cell: id })
                 await update_notebook((notebook) => {
                     notebook.cell_inputs[id] = {
                         cell_id: id,
-                        code: "",
+                        code,
                         code_folded: false,
                     }
                     notebook.cell_order = [...notebook.cell_order.slice(0, index), id, ...notebook.cell_order.slice(index, Infinity)]
                 })
                 await this.client.send("run_multiple_cells", { cells: [id] }, { notebook_id: this.state.notebook.notebook_id })
+                return id
             },
-            add_remote_cell: async (cell_id, before_or_after) => {
+            add_remote_cell: async (cell_id, before_or_after, code) => {
                 const index = this.state.notebook.cell_order.indexOf(cell_id)
                 const delta = before_or_after == "before" ? 0 : 1
-
-                await this.actions.add_remote_cell_at(index + delta)
+                return await this.actions.add_remote_cell_at(index + delta, code)
             },
             confirm_delete_multiple: async (verb, cell_ids) => {
                 if (cell_ids.length <= 1 || confirm(`${verb} ${cell_ids.length} cells?`)) {
@@ -408,7 +409,7 @@ export class Editor extends Component {
                     },
                     true
                 )
-            }
+            },
         }
 
         // these are update message that are _not_ a response to a `send(*, *, {create_promise: true})`

frontend/components/useDropHandler.js

@@ -1,4 +1,5 @@
-import { useState, useMemo } from "../imports/Preact.js"
+import { PlutoContext } from "../common/PlutoContext.js"
+import { useState, useMemo, useContext } from "../imports/Preact.js"
 
 const MAGIC_TIMEOUT = 500
 const DEBOUNCE_MAGIC_MS = 250
@@ -15,44 +16,21 @@ const prepareFile = (file) =>
         fr.readAsArrayBuffer(file)
     })
 
-export const useDropHandler = (requests, on_change, cell_id) => {
+export const useDropHandler = () => {
+    let pluto_actions = useContext(PlutoContext)
     const [saving_file, set_saving_file] = useState(false)
     const [drag_active, set_drag_active_fast] = useState(false)
     const set_drag_active = useMemo(() => _.debounce(set_drag_active_fast, DEBOUNCE_MAGIC_MS), [set_drag_active_fast])
-    const inactive_handler = useMemo(
-        () => (ev) => {
-            if (ev.dataTransfer.types[0] === "text/pluto-cell") return
-            switch (ev.type) {
-                case "drop":
-                    ev.preventDefault() // don't file open
-                    break
-                case "dragover":
-                    ev.preventDefault()
-                    ev.dataTransfer.dropEffect = "none"
-                    set_drag_active(true)
-                    setTimeout(() => set_drag_active(false), MAGIC_TIMEOUT)
-                    break
-                case "dragenter":
-                    set_drag_active_fast(true)
-                    break
-                case "dragleave":
-                    set_drag_active(false)
-                    break
-                default:
-                    break
-            }
-        },
-        [set_drag_active, set_drag_active_fast]
-    )
-    const event_handler = useMemo(() => {
-        const uploadAndCreateCodeTemplate = async (file) => {
+
+    const eventFactory = useMemo(() => {
+        const uploadAndCreateCodeTemplate = async (file, drop_cell_id) => {
             if (!(file instanceof File)) return " #  File can't be read"
             set_saving_file(true)
             const {
                 message: { success, code },
             } = await prepareFile(file).then(
                 (preparedObj) => {
-                    return requests.write_file(cell_id, preparedObj)
+                    return pluto_actions.write_file(drop_cell_id, preparedObj)
                 },
                 () => alert("Pluto can't save this file 😥")
             )
@@ -73,14 +51,23 @@ export const useDropHandler = (requests, on_change, cell_id) => {
                 case "cmdrop":
                 case "drop":
                     ev.preventDefault() // don't file open
+                    const cell_element = ev.path.find((el) => el.tagName === "PLUTO-CELL")
+                    const drop_cell_id = cell_element?.id || document.querySelector("pluto-cell:last-child")?.id
+                    const drop_cell_value = cell_element?.querySelector(".CodeMirror")?.CodeMirror?.getValue()
+                    console.log(cell_element, drop_cell_id, drop_cell_value)
                     set_drag_active(false)
                     if (!ev.dataTransfer.files.length) {
                         return
                     }
-                    uploadAndCreateCodeTemplate(ev.dataTransfer.files[0]).then((code) => {
+                    uploadAndCreateCodeTemplate(ev.dataTransfer.files[0], drop_cell_id).then((code) => {
                         if (code) {
-                            on_change(code)
-                            requests.change_remote_cell(cell_id, code)
+                            if (drop_cell_value?.length > 0) {
+                                console.log("Add remote cell", code)
+                                pluto_actions.add_remote_cell(drop_cell_id, "after", code)
+                            } else {
+                                console.log("update this cell", drop_cell_id, code)
+                                pluto_actions.set_local_cell(drop_cell_id, code, () => pluto_actions.set_and_run_multiple([drop_cell_id]))
+                            }
                         }
                     })
                     break
@@ -99,7 +86,8 @@ export const useDropHandler = (requests, on_change, cell_id) => {
                 default:
             }
         }
-    }, [set_drag_active, set_drag_active_fast, set_saving_file, requests, cell_id, on_change])
-
+    }, [set_drag_active, set_drag_active_fast, set_saving_file, pluto_actions])
+    const event_handler = eventFactory
+    const inactive_handler = eventFactory
     return { saving_file, drag_active, event_handler, inactive_handler }
 }

src/webserver/Dynamic.jl

@@ -369,35 +369,35 @@ responses[:reshow_cell] = (session::ServerSession, body, notebook::Notebook, cel
     putnotebookupdates!(session, notebook, clientupdate_cell_output(notebook, cell))
 end
 
-responses[:write_file] = (session::ServerSession, body, notebook::Notebook, cell::Cell; initiator::Union{Initiator,Missing}=missing) -> let 
-    path = notebook.path
+responses[:write_file] = function (🙋::ClientRequest)
+    path = 🙋.notebook.path
     reldir = "$(path |> basename).assets"
     dir = joinpath(path |> dirname, reldir)
-    file_noext = reduce(*, split(body["name"], ".")[1:end - 1])
-    extension = split(body["name"], ".")[end]
+    file_noext = reduce(*, split(🙋.body["name"], ".")[1:end - 1])
+    extension = split(🙋.body["name"], ".")[end]
     save_path = numbered_until_new(joinpath(dir, file_noext); sep=" ", suffix=".$(extension)", create_file=false)
 
     if !ispath(dir)
         mkpath(dir)
     end
     success = try
         io = open(save_path, "w")
-        write(io, body["file"])
+        write(io, 🙋.body["file"])
         close(io)
         true
     catch e
         false
     end
 
-    code = get_template_code(basename(save_path), reldir, body["file"])
+    code = get_template_code(basename(save_path), reldir, 🙋.body["file"])
 
     msg = UpdateMessage(:write_file_reply, 
         Dict(
             :success => success,
             :code => code
-        ), notebook, nothing, initiator)
+        ), 🙋.notebook, nothing, 🙋.initiator)
 
-    putclientupdates!(session, initiator, msg)
+    putclientupdates!(🙋.session, 🙋.initiator, msg)
 end
 
 get_template_code = (filename, directory, iofilecontents) -> begin