From 1e54ccac72775b4a1e3b9452998c53897fd5679e Mon Sep 17 00:00:00 2001 From: Supanat Potiwarakorn Date: Mon, 5 Oct 2020 17:55:46 +0700 Subject: [PATCH 1/8] Rewrite LiveDocs in functional component --- frontend/components/LiveDocs.js | 121 ++++++++++++++------------------ 1 file changed, 51 insertions(+), 70 deletions(-) diff --git a/frontend/components/LiveDocs.js b/frontend/components/LiveDocs.js index e000b303f7..27538669ff 100644 --- a/frontend/components/LiveDocs.js +++ b/frontend/components/LiveDocs.js @@ -1,96 +1,77 @@ -import { html, Component } from "../common/Preact.js" +import { html, Component, useState, useEffect, useRef } from "../common/Preact.js" import observablehq from "../common/SetupCellEnvironment.js" import { cl } from "../common/ClassTable.js" import { RawHTMLContainer } from "./CellOutput.js" -export class LiveDocs extends Component { - constructor() { - super() - this.state = { - shown_query: null, - searched_query: null, - body: "Start typing in a cell to learn more!", - hidden: true, - loading: false, - } - this.updateDocTimer = undefined +export const LiveDocs = ({ desired_doc_query, on_update_doc_query, client, notebook }) => { + const [shown_query, set_shown_query] = useState(null) + const [searched_query, set_searched_query] = useState(null) + const [body, set_body] = useState("Start typing in a cell to learn more!") + const [hidden, set_hidden] = useState(true) + const [loading, set_loading] = useState(false) + + const liveDocRef = useRef() + + const fetch_docs = () => { + const new_query = desired_doc_query + set_loading(true) + set_searched_query(new_query) + + Promise.race([ + observablehq.Promises.delay(2000, false), + client.send("docs", { query: new_query }, { notebook_id: notebook.notebook_id }).then((u) => { + if (u.message.status === "⌛") { + return false + } + if (u.message.status === "👍") { + set_shown_query(new_query) + set_body(u.message.doc) + return true + } + }) + ]).then(() => { + set_loading(false) + }) } - componentDidMount() { + useEffect(() => { window.addEventListener("open_live_docs", () => { // https://github.com/fonsp/Pluto.jl/issues/321 - this.setState({ - hidden: false, - }) - if (window.getComputedStyle(this.base).display === "none") { + set_hidden(false) + if (window.getComputedStyle(liveDocRef.current).display === "none") { alert("This browser window is too small to show docs.\n\nMake the window bigger, or try zooming out.") } }) - } + }, []) - componentDidUpdate() { - if (this.state.hidden || this.state.loading) { + useEffect(() => { + if (hidden || loading) { return } - if (!/[^\s]/.test(this.props.desired_doc_query)) { + if (!/[^\s]/.test(desired_doc_query)) { // only whitespace return } - if (this.state.searched_query === this.props.desired_doc_query) { + if (searched_query === desired_doc_query) { return } - this.fetch_docs() - } - - fetch_docs() { - const new_query = this.props.desired_doc_query - this.setState({ - loading: true, - searched_query: new_query, - }) - Promise.race([ - observablehq.Promises.delay(2000, false), - this.props.client.send("docs", { query: new_query }, { notebook_id: this.props.notebook.notebook_id }).then((u) => { - if (u.message.status === "⌛") { - return false - } - if (u.message.status === "👍") { - this.setState({ - shown_query: new_query, - body: u.message.doc, - }) - return true - } - }), - ]).then(() => { - this.setState({ - loading: false, - }) - }) - } + fetch_docs() + }) - render() { - return html` - - ` - } + return html` + + ` } const resolve_doc_reference_links = (node, on_update_doc_query) => { From bb6847f988074fea1f55134a4e01160cc56684a1 Mon Sep 17 00:00:00 2001 From: Supanat Potiwarakorn Date: Mon, 5 Oct 2020 18:08:45 +0700 Subject: [PATCH 2/8] Allow normal backspace in livedocs search field --- frontend/components/Editor.js | 2 +- frontend/components/LiveDocs.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/components/Editor.js b/frontend/components/Editor.js index d584d2e3c8..d73db81aa9 100644 --- a/frontend/components/Editor.js +++ b/frontend/components/Editor.js @@ -694,7 +694,7 @@ export class Editor extends Component { // TODO: let user know that the notebook autosaves } e.preventDefault() - } else if (e.key === "Backspace" || e.key === "Delete") { + } else if (e.target.id !== "live-docs-search" && (e.key === "Backspace" || e.key === "Delete")) { this.delete_selected("Delete") e.preventDefault() } else if ((e.key === "?" && has_ctrl_or_cmd_pressed(e)) || e.key === "F1") { diff --git a/frontend/components/LiveDocs.js b/frontend/components/LiveDocs.js index 27538669ff..76ec3c5005 100644 --- a/frontend/components/LiveDocs.js +++ b/frontend/components/LiveDocs.js @@ -64,7 +64,9 @@ export const LiveDocs = ({ desired_doc_query, on_update_doc_query, client, noteb return html`