implement editable vanilla table columns

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,41 @@ 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 { 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 } from "utils/task";
+import {
+    ControlledEditableTextField,
+    EditableTextField,
+    FieldCheckbox,
+    FieldSelect,
+    FieldSlider,
+    FieldSwitch,
+} from "ui/fields/editable-fields";
 
 /**
  * Local API provided to specific codeblocks when they are executing.
@@ -37,6 +51,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 +109,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 +208,35 @@ 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);
+    }
+
+    //////////////
+    // 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 +267,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 +329,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 +441,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 +467,40 @@ export class DatacoreLocalApi {
     public List = ListView;
     /** A single card which can be composed into a grid view. */
     public Card = Card;
+    public TaskList = TaskList;
 
     /////////////////////////
     // 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/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>}

src/api/ui/views/list.tsx

@@ -10,6 +10,8 @@ import { ControlledPager, useDatacorePaging } from "./paging";
 import { useAsElement } from "ui/hooks";
 import { CSSProperties, ReactNode } from "preact/compat";
 import { MarkdownListItem } from "index/types/markdown";
+import { BaseFieldProps } from "ui/fields/common-props";
+import { ControlledEditable, EditableElement } from "ui/fields/editable";
 
 /** The render type of the list view. */
 export type ListViewType = "ordered" | "unordered" | "block";
@@ -59,6 +61,8 @@ export interface ListViewProps<T> {
      * If null, child extraction is disabled and no children will be fetched. If undefined, uses the default.
      */
     childSource?: null | string | string[] | ((row: T) => T[]);
+		/** fields to display under each item in this task list */
+		displayedFields?: (BaseFieldProps<Literal> & { key: string })[];
 }
 
 /**
@@ -430,3 +434,27 @@ function fetchProps<T>(element: T, props: string[]): T[] {
 
     return result;
 }
+export function EditableListElement<T>({
+    element: item,
+    editor,
+    onUpdate,
+    file,
+    editorProps,
+}: {
+    editor: (value: T) => EditableElement<T>;
+    element: T;
+    file: string;
+    onUpdate: (value: T) => unknown;
+    editorProps: unknown;
+}) {
+    return (
+        <ControlledEditable<T>
+            props={editorProps}
+            sourcePath={file}
+            content={item}
+            editor={editor(item)}
+            onUpdate={onUpdate}
+            defaultRender={<DefaultListElement element={item} />}
+        />
+    );
+}

src/api/ui/views/lists.css

@@ -0,0 +1,54 @@
+.datacore-list-item-content {
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+}
+.datacore-list-item-content > :first-child {
+    flex-grow: 1;
+}
+
+:is(ul, ol) li:not(:first-of-type) p:first-of-type {
+    margin-block-start: unset !important;
+}
+ul.datacore.contains-task-list > li {
+    /* margin-inline-start: 0; */
+}
+input.datacore.task-list-item-checkbox {
+    /* position: absolute; */
+    float: left;
+    margin-inline-start: calc(var(--checkbox-size) * 0.1) !important;
+    /* margin-inline-start: 0 !important; */
+}
+
+li.datacore.task-list-item > *:nth-child(3) {
+    display: flow-root !important;
+    top: -5px;
+    padding-left: 0.5em;
+    position: relative;
+}
+
+.datacore-collapser,
+.datacore-collapser svg.svg-icon {
+    transition: transform 100ms ease-in-out;
+}
+.datacore-collapser.is-collapsed svg.svg-icon {
+    transform: rotate(calc(var(--direction) * -1 * 90deg));
+}
+li.datacore.datacore.task-list-item .datacore-collapser {
+    margin-right: 0.7em;
+    float: left;
+}
+/* li.datacore.task-list-item > :first-child {
+	display: flex;
+	float: left;
+} */
+li.datacore.task-list-item .datacore-collapser {
+    vertical-align: middle;
+    align-self: start;
+    top: -0.1em;
+    position: absolute;
+    margin-inline-start: calc(var(--checkbox-size) * -1.4);
+}
+li.datacore.task-list-item .datacore-collapser.no-children {
+    visibility: hidden;
+}