tasks: fix keyboard issue; also add really minimal jupyter search

Author: williamstein

src/packages/frontend/editors/task-editor/actions.ts

@@ -9,7 +9,6 @@ Task Actions
 
 import { fromJS, Map } from "immutable";
 import { throttle } from "lodash";
-import { delay } from "awaiting";
 import {
   close,
   copy_with,
@@ -120,7 +119,9 @@ export class TaskActions extends Actions<TaskState> {
   }
 
   public disable_key_handler(): void {
-    if (this.key_handler == null || this.redux == null) return;
+    if (this.key_handler == null || this.redux == null) {
+      return;
+    }
     this.frameActions.erase_active_key_handler(this.key_handler);
     delete this.key_handler;
   }
@@ -532,16 +533,22 @@ export class TaskActions extends Actions<TaskState> {
     this.set_local_task_state(task_id, { editing_desc: false });
   }
 
-  public edit_desc(task_id: string | undefined): void {
+  // null=unselect all.
+  public edit_desc(task_id: string | undefined | null): void {
     // close any that were currently in edit state before opening new one
     const local = this.getFrameData("local_task_state") ?? fromJS({});
     for (const [id, state] of local) {
       if (state.get("editing_desc")) {
         this.stop_editing_desc(id);
       }
     }
-
-    this.set_local_task_state(task_id, { editing_desc: true });
+    if (task_id !== null) {
+      this.set_local_task_state(task_id, { editing_desc: true });
+    }
+    this.disable_key_handler();
+    setTimeout(() => {
+      this.disable_key_handler();
+    }, 1);
   }
 
   public set_due_date(
@@ -748,10 +755,7 @@ export class TaskActions extends Actions<TaskState> {
     this.disable_key_handler();
   }
 
-  public async show(): Promise<void> {
-    await delay(1);
-    this.enable_key_handler();
-  }
+  public async show(): Promise<void> {}
 
   chatgptGetText(scope: "cell" | "all", current_id?): string {
     if (scope == "all") {

src/packages/frontend/editors/task-editor/keyboard.ts

@@ -13,7 +13,7 @@ import { is_sortable as is_sortable_header } from "./headings-info";
 
 function is_sortable(actions): boolean {
   return is_sortable_header(
-    actions.store.getIn(["local_view_state", "sort", "column"]) ?? HEADINGS[0]
+    actions.store.getIn(["local_view_state", "sort", "column"]) ?? HEADINGS[0],
   );
 }
 

src/packages/frontend/frame-editors/generic/search/index.tsx

@@ -15,12 +15,13 @@ import { useEffect, useMemo, useState } from "react";
 import { throttle } from "lodash";
 import useSearchIndex from "./use-search-index";
 import ShowError from "@cocalc/frontend/components/error";
-import { useEditorRedux } from "@cocalc/frontend/app-framework";
+import { useRedux } from "@cocalc/frontend/app-framework";
 
 export function createSearchEditor({
   Preview,
   updateField,
   previewStyle,
+  title,
 }: {
   // component for previewing search results.
   Preview?;
@@ -43,6 +44,7 @@ export function createSearchEditor({
         Preview={Preview}
         updateField={updateField}
         previewStyle={previewStyle}
+        title={title}
       />
     ),
   } as EditorDescription;
@@ -66,10 +68,7 @@ function Search({
   title,
 }: Props) {
   const { project_id, path, actions, id } = useFrameContext();
-  const useEditor = useEditorRedux({ project_id, path });
   // @ts-ignore
-  const messages = useEditor(updateField);
-  const [indexedMessages, setIndexedMessages] = useState<any>(messages);
   const [search, setSearch] = useState<string>(desc.get("data-search") ?? "");
   const [result, setResult] = useState<any>(null);
   const saveSearch = useMemo(
@@ -82,7 +81,12 @@ function Search({
     [project_id, path],
   );
 
-  const { error, setError, index, doRefresh, fragmentKey } = useSearchIndex();
+  const { error, setError, index, doRefresh, fragmentKey, reduxName } =
+    useSearchIndex();
+
+  const data = useRedux(reduxName ?? actions.name, updateField);
+
+  const [indexedData, setIndexedData] = useState<any>(data);
 
   useEffect(() => {
     if (index == null) {
@@ -99,11 +103,11 @@ function Search({
   }, [search, index]);
 
   useEffect(() => {
-    if (indexedMessages != messages) {
-      setIndexedMessages(messages);
+    if (indexedData != data) {
+      setIndexedData(data);
       doRefresh();
     }
-  }, [messages]);
+  }, [data]);
 
   return (
     <div className="smc-vfill">
@@ -123,7 +127,7 @@ function Search({
         <Input.Search
           style={{ fontSize }}
           allowClear
-          placeholder="Search messages..."
+          placeholder={`Search ${title}...`}
           value={search}
           onChange={(e) => {
             const search = e.target.value ?? "";

src/packages/frontend/frame-editors/generic/search/use-search-index.ts

@@ -14,6 +14,7 @@ export default function useSearchIndex() {
   const { val: refresh, inc: doRefresh } = useCounter();
   const [indexTime, setIndexTime] = useState<number>(0);
   const [fragmentKey, setFragmentKey] = useState<string>("id");
+  const [reduxName, setReduxName] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     if (
@@ -30,6 +31,7 @@ export default function useSearchIndex() {
         const newIndex = new SearchIndex({ actions });
         await newIndex.init();
         setFragmentKey(newIndex.fragmentKey ?? "id");
+        setReduxName(newIndex.reduxName);
         setIndex(newIndex);
         setIndexTime(Date.now() - t0);
         //index?.close();
@@ -39,14 +41,23 @@ export default function useSearchIndex() {
     })();
   }, [project_id, path, refresh]);
 
-  return { index, error, doRefresh, setError, indexTime, fragmentKey };
+  return {
+    index,
+    error,
+    doRefresh,
+    setError,
+    indexTime,
+    fragmentKey,
+    reduxName,
+  };
 }
 
 class SearchIndex {
   private actions?;
   private state: "init" | "ready" | "failed" | "closed" = "init";
   private db?;
   public fragmentKey?: string = "id";
+  public reduxName?: string = undefined;
 
   constructor({ actions }) {
     this.actions = actions;
@@ -76,8 +87,9 @@ class SearchIndex {
     if (this.actions == null || this.state != "init") {
       throw Error("not in init state");
     }
-    const { data, fragmentKey } = this.actions.getSearchIndexData();
+    const { data, fragmentKey, reduxName } = this.actions.getSearchIndexData();
     this.fragmentKey = fragmentKey;
+    this.reduxName = reduxName;
     if (data != null) {
       const docs: { id: string; content: string }[] = [];
       for (const id in data) {

src/packages/frontend/frame-editors/jupyter-editor/actions.ts

@@ -577,6 +577,22 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
       }
     }
   }
+
+  getSearchIndexData = () => {
+    const cells = this.jupyter_actions.store.get("cells");
+    if (cells == null) {
+      return {};
+    }
+    const data: { [id: string]: string } = {};
+    for (const [id, cell] of cells) {
+      let content = cell.get("input")?.trim();
+      if (!content) {
+        continue;
+      }
+      data[id] = content;
+    }
+    return { data, fragmentKey: "id", reduxName: this.jupyter_actions.name };
+  };
 }
 
 export { JupyterEditorActions as Actions };

src/packages/frontend/frame-editors/jupyter-editor/editor.ts

@@ -28,6 +28,7 @@ import { RawIPynb } from "./raw-ipynb";
 import { Slideshow } from "./slideshow-revealjs/slideshow";
 import { JupyterSnippets } from "./snippets";
 import { TableOfContents } from "./table-of-contents";
+import { search } from "./search";
 
 const SNIPPET_ICON_NAME = "magic";
 
@@ -50,6 +51,7 @@ const jupyterCommands = set([
   "help",
   "compute_server",
   "settings",
+  "show_search",
 ]);
 
 const jupyter_cell_notebook: EditorDescription = {
@@ -70,6 +72,7 @@ const jupyter_cell_notebook: EditorDescription = {
     "jupyter-nbgrader validate",
     "halt_jupyter",
     "guide",
+    "show_search",
   ]),
   customizeCommands: {
     guide: {
@@ -150,6 +153,7 @@ export const EDITOR_SPEC = {
   time_travel,
   jupyter_json,
   jupyter_raw,
+  search,
 } as const;
 
 const JUPYTER_MENUS = {

src/packages/frontend/frame-editors/jupyter-editor/search.tsx

@@ -0,0 +1,22 @@
+// import StaticMarkdown from "@cocalc/frontend/editors/slate/static-markdown";
+import { createSearchEditor } from "@cocalc/frontend/frame-editors/generic/search";
+
+export const DONE = "☑ ";
+
+function Preview({ content, fontSize }) {
+  return <pre style={{ fontSize }}>{content}</pre>;
+  //   return (
+  //     <StaticMarkdown
+  //       value={content}
+  //       style={{
+  //         marginBottom: "-10px" /* account for <p> */,
+  //       }}
+  //     />
+  //   );
+}
+
+export const search = createSearchEditor({
+  Preview,
+  updateField: "cells",
+  title: "Jupyter Notebook",
+});

src/packages/frontend/frame-editors/task-editor/actions.ts

@@ -144,6 +144,8 @@ export class Actions extends CodeEditorActions<TaskEditorState> {
     actions._init_frame(frameId, this);
     this.taskActions[frameId] = actions;
     actions.store = this.store;
+    // this makes sure nothing is initially in edit mode, mainly because our keyboard handling SUCKS.
+    actions.edit_desc(null);
     return actions;
   }
 

src/packages/frontend/jupyter/commands.ts

@@ -508,7 +508,7 @@ export function commands(actions: AllActions): {
 
     "find and replace": {
       i: "replace",
-      b: "Find",
+      b: "Replace",
       m: jupyter.commands.find_and_replace,
       k: [
         { mode: "escape", which: 70 },

src/packages/jupyter/redux/actions.ts

@@ -2803,6 +2803,9 @@ export abstract class JupyterActions extends Actions<JupyterStoreState> {
   // Currently only run in the browser, but could maybe be useful
   // elsewhere someday.
   updateRunProgress = () => {
+    if (this.store == null) {
+      return;
+    }
     if (this.store.get("backend_state") != "running") {
       this.setState({ runProgress: 0 });
       return;