Pluto ux process file drop

Project.toml

@@ -17,6 +17,7 @@ MsgPack = "99f44e22-a591-53d1-9472-aa23ef4bd671"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
 REPL = "3fa0cd96-eef1-5676-8a61-b3b8758bbffb"
 Sockets = "6462fe0b-24de-5631-8697-dd941f90decc"
+TableIOInterface = "d1efa939-5518-4425-949f-ab857e148477"
 Tables = "bd369af6-aec1-5ad0-b16a-f7cc5008161c"
 UUIDs = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"
 

frontend/components/Cell.js

@@ -1,9 +1,10 @@
-import { html, useState, useEffect, useLayoutEffect, useRef } from "../imports/Preact.js"
+import { html, useState, useEffect, useMemo, useRef } from "../imports/Preact.js"
 
 import { CellOutput } from "./CellOutput.js"
 import { CellInput } from "./CellInput.js"
 import { RunArea, useMillisSinceTruthy } from "./RunArea.js"
 import { cl } from "../common/ClassTable.js"
+import { useDropHandler } from "./useDropHandler.js"
 
 /**
  * @typedef {Object} CodeState
@@ -92,6 +93,9 @@ 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(requests, on_change, cell_id)
+    const has_code = local_code.body?.length > 0
+    const handler = !has_code ? event_handler : inactive_handler
     const localTimeRunning = 10e5 * useMillisSinceTruthy(running)
     useEffect(() => {
         const focusListener = (e) => {
@@ -120,13 +124,20 @@ export const Cell = ({
 
     return html`
         <pluto-cell
+            onDragOver=${handler}
+            onDrop=${handler}
+            onDragEnter=${handler}
+            onDragLeave=${handler}
             class=${cl({
                 queued: queued,
                 running: running,
                 errored: errored,
                 selected: selected,
                 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}
         >
@@ -163,6 +174,7 @@ export const Cell = ({
                 scroll_into_view_after_creation=${scroll_into_view_after_creation}
                 cm_forced_focus=${cm_forced_focus}
                 set_cm_forced_focus=${set_cm_forced_focus}
+                on_drag_drop_events=${event_handler}
                 on_submit=${(new_code) => {
                     requests.change_remote_cell(cell_id, new_code)
                 }}

frontend/components/CellInput.js

@@ -30,6 +30,7 @@ export const CellInput = ({
     on_change,
     on_update_doc_query,
     on_focus_neighbor,
+    on_drag_drop_events,
     client,
     cell_id,
     notebook_id,
@@ -310,6 +311,25 @@ export const CellInput = ({
             }
             return true
         }
+
+        cm.on("dragover", (cm_, e) => {
+            on_drag_drop_events(e)
+            return true
+        })
+        cm.on("drop", (cm_, e) => {
+            on_drag_drop_events(e)
+            e.preventDefault()
+            return true
+        })
+        cm.on("dragenter", (cm_, e) => {
+            on_drag_drop_events(e)
+            return true
+        })
+        cm.on("dragleave", (cm_, e) => {
+            on_drag_drop_events(e)
+            return true
+        })
+
         cm.on("cursorActivity", () => {
             setTimeout(() => {
                 if (!cm.hasFocus()) return
@@ -387,12 +407,18 @@ export const CellInput = ({
     }, [])
 
     useEffect(() => {
-        if (!remote_code.submitted_by_me) {
+        if (!remote_code.submitted_by_me || cm_ref.current.value !== local_code.body) {
             cm_ref.current.setValue(remote_code.body)
         }
         cm_ref.current.options.disableInput = disable_input
     }, [remote_code.timestamp])
 
+    useEffect(() => {
+        if (cm_ref.current.value !== local_code.body && local_code.body === remote_code.body) {
+            cm_ref.current.setValue(remote_code.body)
+        }
+    }, [local_code.body, remote_code.body])
+
     useEffect(() => {
         if (cm_forced_focus == null) {
             clear_selection(cm_ref.current)

frontend/components/DropRuler.js

@@ -48,17 +48,20 @@ export class DropRuler extends Component {
             }
         })
         document.addEventListener("dragenter", (e) => {
+            if (e.dataTransfer.types[0] !== "text/pluto-cell") return
             if (!this.state.drag_target) this.precompute_cell_edges()
             this.lastenter = e.target
             this.setState({ drag_target: true })
         })
         document.addEventListener("dragleave", (e) => {
+            if (e.dataTransfer.types[0] !== "text/pluto-cell") return
             if (e.target === this.lastenter) {
                 this.setState({ drag_target: false })
             }
         })
         document.addEventListener("dragover", (e) => {
             // Called continuously during drag
+            if (e.dataTransfer.types[0] !== "text/pluto-cell") return
             this.mouse_position = e
 
             this.setState({
@@ -76,6 +79,10 @@ export class DropRuler extends Component {
         })
         document.addEventListener("drop", (e) => {
             // Guaranteed to fire before the 'dragend' event
+            // Ignore files
+            if (e.dataTransfer.types[0] !== "text/pluto-cell") {
+                return
+            }
             this.setState({
                 drag_target: false,
             })

frontend/components/Editor.js

@@ -501,6 +501,17 @@ export class Editor extends Component {
 
         // these are things that can be done to the remote notebook
         this.requests = {
+            write_file: (cell_id, { file, name, type }) => {
+                return this.client.send(
+                    "write_file",
+                    { file, name, type, path: this.state.notebook.path },
+                    {
+                        notebook_id: this.state.notebook.notebook_id,
+                        cell_id: cell_id,
+                    },
+                    true
+                )
+            },
             change_remote_cell: (cell_id, new_code, create_promise = false) => {
                 this.counter_statistics.numEvals++
                 // set_cell_state(cell_id, { running: true })

frontend/components/useDropHandler.js

@@ -0,0 +1,105 @@
+import { useState, useMemo } from "../imports/Preact.js"
+
+const MAGIC_TIMEOUT = 500
+const DEBOUNCE_MAGIC_MS = 250
+
+const prepareFile = (file) =>
+    new Promise((resolve, reject) => {
+        const { name, type } = file
+        const fr = new FileReader()
+        fr.onerror = () => reject("Failed to read file!")
+        fr.onloadstart = () => {}
+        fr.onprogress = ({ loaded, total }) => {}
+        fr.onload = () => {}
+        fr.onloadend = ({ target: { result } }) => resolve({ file: result, name, type })
+        fr.readAsArrayBuffer(file)
+    })
+
+export const useDropHandler = (requests, on_change, cell_id) => {
+    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) => {
+            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)
+                },
+                () => alert("Pluto can't save this file 😥")
+            )
+            set_saving_file(false)
+            set_drag_active_fast(false)
+            if (!success) {
+                alert("Pluto can't save this file 😥")
+                return "# File save failed"
+            }
+            if (code) return code
+            alert("Pluto doesn't know what to do with this file 😥. Feel that's wrong? Open an issue!")
+            return ""
+        }
+        return (ev) => {
+            // dataTransfer is in Protected Mode here. see type, let Pluto DropRuler handle it.
+            if (ev.dataTransfer.types[0] === "text/pluto-cell") return
+            switch (ev.type) {
+                case "cmdrop":
+                case "drop":
+                    ev.preventDefault() // don't file open
+                    set_drag_active(false)
+                    if (!ev.dataTransfer.files.length) {
+                        return
+                    }
+                    uploadAndCreateCodeTemplate(ev.dataTransfer.files[0]).then((code) => {
+                        if (code) {
+                            on_change(code)
+                            requests.change_remote_cell(cell_id, code)
+                        }
+                    })
+                    break
+                case "dragover":
+                    ev.preventDefault()
+                    ev.dataTransfer.dropEffect = "copy"
+                    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:
+            }
+        }
+    }, [set_drag_active, set_drag_active_fast, set_saving_file, requests, cell_id, on_change])
+
+    return { saving_file, drag_active, event_handler, inactive_handler }
+}

frontend/editor.css

@@ -989,6 +989,37 @@ pluto-cell.running.errored > pluto-trafficlight::after {
     background-size: 4px var(--patternHeight); /* 16 * sqrt(2) */
 }
 
+pluto-cell.drop_target {
+    position: relative;
+}
+
+pluto-cell.drop_target pluto-input::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    background-color: rgba(255, 255, 255, 0.75);
+    content: "+ Drop file here";
+}
+
+pluto-cell.drop_target.saving_file pluto-input::after {
+    content: "The 💾 File you dropped is being saved... ";
+    color: white;
+    background-color: rgba(3, 92, 151, 0.75);
+}
+
+pluto-cell.drop_target.drop_invalid pluto-input::after {
+    background-color: #ece5e5bf;
+    color: rgba(0, 0, 0, 0.85);
+    content: "Try dropping your file in an empty cell!";
+}
+
 /* Define --patternHeight for this keyframes animation to work! */
 @keyframes scrollbackground {
     0% {

src/notebook/Notebook.jl

@@ -94,7 +94,7 @@ function save_notebook(io, notebook::Notebook)
         print(io, c.code)
         print(io, _cell_suffix)
     end
-
+    
     println(io, _cell_id_delimiter, "Cell order:")
     for c in notebook.cells
         delim = c.code_folded ? _order_delimiter_folded : _order_delimiter
@@ -107,7 +107,7 @@ function save_notebook(notebook::Notebook, path::String)
     open(path, "w") do io
         save_notebook(io, notebook)
     end
-end
+    end
 
 save_notebook(notebook::Notebook) = save_notebook(notebook, notebook.path)
 
@@ -231,5 +231,8 @@ function move_notebook!(notebook::Notebook, newpath::String)
     if oldpath_tame != newpath_tame
         rm(oldpath_tame)
     end
+    if isdir("$oldpath_tame.assets")
+        mv("$oldpath_tame.assets", "$newpath_tame.assets")
+    end
     notebook
 end