tree table view

package.json

@@ -25,9 +25,12 @@
   "author": "Michael Brenan",
   "license": "MIT",
   "devDependencies": {
+    "@codemirror/autocomplete": "^6.18.6",
+    "@codemirror/commands": "^6.8.1",
     "@codemirror/language": "https://github.com/lishid/cm-language",
+    "@codemirror/search": "^6.5.10",
     "@codemirror/state": "^6.0.1",
-    "@codemirror/view": "^6.0.1",
+    "@codemirror/view": "^6.36.7",
     "@microsoft/api-extractor": "^7.52.7",
     "@types/jest": "^27.0.1",
     "@types/luxon": "^2.3.2",
@@ -45,17 +48,19 @@
     "typescript": "^5.4.2"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.3",
     "@datastructures-js/queue": "^4.2.3",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@replit/codemirror-vim": "^6.3.0",
     "emoji-regex": "^10.2.1",
     "flatqueue": "^2.0.3",
     "localforage": "1.10.0",
     "luxon": "^2.4.0",
     "parsimmon": "^1.18.0",
-    "preact": "^10.17.1",
-    "react-select": "^5.8.0",
+    "preact": "^10.26.6",
+    "react-select": "^5.10.1",
     "sorted-btree": "^1.8.1",
     "sucrase": "3.35.0",
     "yaml": "^2.3.3"

src/api/local-api.tsx

@@ -7,27 +7,42 @@ import { Datacore } from "index/datacore";
 import { SearchResult } from "index/datastore";
 import { IndexQuery } from "index/types/index-query";
 import { Indexable } from "index/types/indexable";
-import { MarkdownPage } from "index/types/markdown";
+import { MarkdownListItem, MarkdownPage, MarkdownTaskItem } from "index/types/markdown";
 import { App } from "obsidian";
-import { useFileMetadata, useFullQuery, useIndexUpdates, useInterning, useQuery } from "ui/hooks";
+import { useAsync, useFileMetadata, useFullQuery, useIndexUpdates, useInterning, useQuery } from "ui/hooks";
 import * as luxon from "luxon";
 import * as preact from "preact";
 import * as hooks from "preact/hooks";
 import { Result } from "./result";
 import { Group, Stack } from "./ui/layout";
 import { Embed, LineSpanEmbed } from "api/ui/embed";
-import { CURRENT_FILE_CONTEXT, ErrorMessage, Lit, Markdown, ObsidianLink } from "ui/markdown";
-import { CSSProperties } from "preact/compat";
+import { APP_CONTEXT, COMPONENT_CONTEXT, CURRENT_FILE_CONTEXT, DATACORE_CONTEXT, ErrorMessage, Lit, Markdown, ObsidianLink, SETTINGS_CONTEXT } from "ui/markdown";
+import { CSSProperties, Suspense } from "preact/compat";
 import { Literal, Literals } from "expression/literal";
 import { Button, Checkbox, Icon, Slider, Switch, Textbox, VanillaSelect } from "./ui/basics";
 import { TableView } from "./ui/views/table";
 import { Callout } from "./ui/views/callout";
+import { TaskList } from "./ui/views/task";
 import { DataArray } from "./data-array";
 import { Coerce } from "./coerce";
 import { ScriptCache } from "./script-cache";
 import { Expression } from "expression/expression";
 import { Card } from "./ui/views/cards";
 import { ListView } from "./ui/views/list";
+import { Modal, Modals, SubmittableModal, useModalContext } from "./ui/views/modal";
+import * as obsidian from "obsidian";
+import { ControlledEditable } from "ui/fields/editable";
+import { setTaskText, useSetField } from "utils/fields";
+import { completeTask, insertListOrTaskItemAt } from "utils/task";
+import {
+    ControlledEditableTextField,
+    EditableTextField,
+    FieldCheckbox,
+    FieldSelect,
+    FieldSlider,
+    FieldSwitch,
+} from "ui/fields/editable-fields";
+import { TreeTableView } from "./ui/views/tree-table";
 
 /**
  * Local API provided to specific codeblocks when they are executing.
@@ -37,6 +52,8 @@ export class DatacoreLocalApi {
     /** @internal The cache of all currently loaded scripts in this context. */
     private scriptCache: ScriptCache;
 
+		private modalTypes: Modals = new Modals();
+
     public constructor(public api: DatacoreApi, public path: string) {
         this.scriptCache = new ScriptCache(this.core.datastore);
     }
@@ -93,6 +110,9 @@ export class DatacoreLocalApi {
      * ```
      */
     public async require(path: string | Link): Promise<unknown> {
+        if (typeof path === "string" && path === "obsidian") {
+            return Result.success(obsidian);
+        }
         const result = await this.scriptCache.load(path, { dc: this });
         return result.orElseThrow();
     }
@@ -189,6 +209,60 @@ export class DatacoreLocalApi {
     public tryFullQuery<T extends Indexable = Indexable>(query: string | IndexQuery): Result<SearchResult<T>, string>;
     public tryFullQuery(query: string | IndexQuery): Result<SearchResult<Indexable>, string> {
         return this.api.tryFullQuery(query);
+		}
+    /** Sets the text of a given task programmatically. */
+    public setTaskText(newText: string, task: MarkdownTaskItem, newFields: Record<string, Literal> = {}): void {
+        setTaskText(this.app, this.core, newText, task, newFields);
+    }
+
+    /** Sets the completion status of a given task programmatically. */
+    public setTaskCompletion(completed: boolean, task: MarkdownTaskItem): void {
+        completeTask(completed, task, this.app.vault, this.core);
+    }
+
+    /** inserts the provided markdown string at the given position in a file. */
+    public async insertMarkdownAt(line: number, path: string, markdown: string) {
+        const file = this.app.vault.getFileByPath(path);
+        if (file != null) {
+            const content = await this.app.vault.read(file);
+            const lines = content.split(/\r\n|\r|\n/u);
+            if (line < lines.length) {
+                if (line < 0) line = lines.length + line;
+                lines.splice(line, 0, markdown);
+                await this.app.vault.modify(file, lines.join(content.contains("\r") ? "\r\n" : "\n"));
+            }
+        }
+    }
+
+    public async insertListOrTaskItemAt(
+        parent: MarkdownTaskItem | MarkdownListItem | number,
+        atEnd: boolean,
+        status: string,
+        text: string,
+        path?: string,
+        fields: Record<string, any> = {}
+    ) {
+        await insertListOrTaskItemAt(this.app, parent, atEnd, status, text, path, fields);
+    }
+
+    //////////////
+    // Contexts //
+    //////////////
+
+    // export the necessary contexts to enable rendering
+    // datacore components outside the datacore plugin
+    // itself
+    get SETTINGS_CONTEXT(): typeof SETTINGS_CONTEXT {
+        return SETTINGS_CONTEXT;
+    }
+    get COMPONENT_CONTEXT(): typeof COMPONENT_CONTEXT {
+        return COMPONENT_CONTEXT;
+    }
+    get DATACORE_CONTEXT(): typeof DATACORE_CONTEXT {
+        return DATACORE_CONTEXT;
+    }
+    get APP_CONTEXT(): typeof APP_CONTEXT {
+        return APP_CONTEXT;
     }
 
     /////////////
@@ -219,6 +293,8 @@ export class DatacoreLocalApi {
      * React's reference-equality-based caching.
      */
     public useInterning = useInterning;
+    public useAsync = useAsync;
+    public useSetField = useSetField;
 
     /** Memoize the input automatically and process it using a DataArray; returns a vanilla array back. */
     public useArray<T, U>(
@@ -279,6 +355,8 @@ export class DatacoreLocalApi {
     /** Horizontal flexbox container; good for putting items together in a row. */
     public Group = Group;
 
+   public Suspense = Suspense; 
+
     /** Renders a literal value in a pretty way that respects settings. */
     public Literal = (({ value, sourcePath, inline }: { value: Literal; sourcePath?: string; inline?: boolean }) => {
         const implicitSourcePath = hooks.useContext(CURRENT_FILE_CONTEXT);
@@ -389,6 +467,19 @@ export class DatacoreLocalApi {
         return <ErrorMessage message={`No valid embedding for element '${element.$id}' from '${element.$file}'`} />;
     }).bind(this);
 
+		/** Accessor for raw modal classes. */
+		public get modals() {
+			return this.modalTypes;
+		}
+
+		/** Wrapper around an obsidian modal. */
+		public Modal = Modal;
+
+		/** Wrapper around an obsidian modal that returns a result when submitted. */
+		public SubmittableModal = SubmittableModal;
+
+		public useModalContext = useModalContext;
+
     ///////////
     // Views //
     ///////////
@@ -402,16 +493,41 @@ export class DatacoreLocalApi {
     public List = ListView;
     /** A single card which can be composed into a grid view. */
     public Card = Card;
+    public TaskList = TaskList;
+		public TreeTable = TreeTableView;
 
     /////////////////////////
     // Interative elements //
     /////////////////////////
 
+    public ControlledEditable = ControlledEditable;
     public Button = Button;
     public Textbox = Textbox;
     public Callout = Callout;
     public Checkbox = Checkbox;
     public Slider = Slider;
     public Switch = Switch;
     public VanillaSelect = VanillaSelect;
+    public VanillaTextBox = ControlledEditableTextField;
+
+    ////////////////////////////////////
+    // Stateful / internal components //
+    ////////////////////////////////////
+
+    /**
+     * Updates the path for the local API; usually only called by the top-level script renderer on
+     * path changes (such as renaming a file).
+     * @internal
+     */
+    updatePath(path: string): void {
+        this.path = path;
+    }
+    /////////////////////////
+    //    field editors    //
+    /////////////////////////
+    public FieldCheckbox = FieldCheckbox;
+    public FieldSlider = FieldSlider;
+    public FieldSelect = FieldSelect;
+    public FieldSwitch = FieldSwitch;
+    public TextField = EditableTextField;
 }

src/api/ui/table-types.tsx

@@ -0,0 +1,130 @@
+import { App } from "obsidian";
+import { GroupElement, Grouping, Literal } from "expression/literal";
+import { TreeTableRowData } from "utils/tree";
+import { GroupingConfig, TableColumn } from "./views/table";
+import { Context as ReactContext, createContext, Dispatch, PropsWithChildren, ReactNode, useContext } from "preact/compat";
+import { SortDirection, SortOn } from "./views/table-dispatch";
+
+export type TableKind = "table" | "tree-table";
+
+export type TableData<T, K extends TableKind> = K extends "tree-table" ? TreeTableRowData<T> : T;
+
+type CreateRowFn<E, K extends TableKind = "table"> = K extends "table"
+    ? (
+          prevElement: TableData<E, "table"> | null,
+          parentGroup: GroupElement<TableData<E, "table">> | null,
+          app: App
+      ) => Promise<unknown>
+    : (
+          prevElement: TableData<E, "tree-table"> | null,
+          parentElement: TableData<E, "tree-table"> | null,
+          parentGroup: GroupElement<TableData<E, "tree-table">> | null,
+          app: App
+      ) => Promise<unknown>;
+
+type ClickCallbackFn<T, K extends TableKind = "table"> = K extends "table"
+    ? (
+          previousElement: GroupElement<T> | T | null,
+          element: GroupElement<T> | T | null,
+          groupConfig?: GroupingConfig<T>
+      ) => () => Promise<void>
+    : (
+          previousElement: GroupElement<TreeTableRowData<T>> | TreeTableRowData<T> | null,
+          parent: TreeTableRowData<T> | null,
+          maybeGroup: GroupElement<TreeTableRowData<T>> | TreeTableRowData<T> | null,
+          groupConfig?: GroupingConfig<TreeTableRowData<T>>
+      ) => () => Promise<void>;
+
+type TreeTableProps<T> = {
+    id?: (obj: T) => string;
+    childSelector: (raw: T) => T[];
+};
+
+export type GenericTableViewProps<T, K extends TableKind = "table"> = {
+    /** The type of table to render. */
+    type: K;
+    /** The columns to render in the table. */
+    columns: TableColumn<T>[];
+    /** The rows to render; may potentially be grouped or just a plain array. */
+    rows: T[] | Grouping<T>;
+    groupings?:
+        | GroupingConfig<TableData<T, K>>
+        | GroupingConfig<TableData<T, K>>[]
+        | ((key: Literal, rows: Grouping<TableData<T, K>>) => Literal | ReactNode);
+    /**
+     * If set to a boolean - enables or disables paging.
+     * If set to a number, paging will be enabled with the given number of rows per page.
+     */
+    paging?: boolean | number;
+
+    /**
+     * Whether the view will scroll to the top automatically on page changes. If true, will always scroll on page changes.
+     * If a number, will scroll only if the number is greater than the current page size.
+     **/
+    scrollOnPaging?: boolean | number;
+
+    /** The fields to sort the view on, if relevant. */
+    sortOn?: SortOn[];
+
+    /** whether this table allows creation new elements. */
+    creatable?: boolean;
+    createRow?: CreateRowFn<T, K>;
+} & (K extends "tree-table" ? TreeTableProps<T> : {});
+
+export type GenericTableState<T, K extends TableKind = "table"> = {
+    /** mapping of column ids to sort directions */
+    sorts: Record<string, SortDirection>;
+} & (K extends "tree-table"
+    ? {
+          /** mapping of row ids to whether they are open or not */
+          openMap: Map<string, boolean>;
+          /** function to get the id of a row */
+          id: (obj: T) => string;
+      }
+    : {});
+
+export type GenericTableAction<T, K extends TableKind = "table"> =
+    | {
+          type: "sort-column";
+          column: string;
+          direction: SortDirection | undefined;
+      }
+    | (K extends "tree-table"
+          ?
+                | {
+                      type: "row-expand";
+                      row: T;
+                      newValue: boolean;
+                  }
+                | { type: "open-map-changed"; newValue: Map<string, boolean> }
+          : never);
+
+export type GenericTableContext<T, K extends TableKind = "table"> = {
+    state: GenericTableState<T, K>;
+    dispatch: Dispatch<GenericTableAction<T, K>>;
+    clickCallbackFactory: ClickCallbackFn<T, K>;
+};
+
+export const GENERIC_TABLE_CONTEXT = createContext<GenericTableContext<any, any> | null>(null);
+
+export function useGenericTableContext<T, K extends TableKind = "table">() {
+    return useContext(GENERIC_TABLE_CONTEXT) as GenericTableContext<T, K>;
+}
+
+export function typedTableContext<T, K extends TableKind = "table">() {
+    return GENERIC_TABLE_CONTEXT as ReactContext<GenericTableContext<T, K>>;
+}
+
+/**
+ * Provides a context for a generic table.
+ * @hidden
+ * @group Components
+ */
+
+export function TableContextProvider<T, K extends TableKind = "table">({
+    children,
+    ...props
+}: PropsWithChildren<GenericTableContext<T, K>>) {
+    const Context = typedTableContext<T, K>();
+	return <Context.Provider value={props}>{children}</Context.Provider>;
+}

src/api/ui/views/callout.tsx

@@ -53,7 +53,7 @@ export function Callout({
             data-callout-metadata={type?.split(METADATA_SPLIT_REGEX)?.[1]}
             data-callout={type?.split(METADATA_SPLIT_REGEX)?.[0]}
             data-callout-fold={open ? "+" : "-"}
-            className={combineClasses("datacore", "callout", collapsible ? "is-collapsible" : undefined)}
+            className={combineClasses("datacore", "callout", collapsible ? "is-collapsible" : undefined, !open ? "is-collapsed" : undefined)}
         >
             <div className="callout-title" onClick={() => collapsible && setOpen(!open)}>
                 {icon && <div className="callout-icon">{icon}</div>}