feature: view pages

.gitignore

@@ -18,4 +18,12 @@ build/
 
 docs/root/api/**/*.*
 !docs/root/api/index.md
-.docuaurus/
+.docuaurus/
+
+# testing
+test-vault/.obsidian/plugins/**/*
+playwright-report/
+test-results/**/*
+
+# keep folders with .gitkeep
+!/**/.gitkeep

ROADMAP.md

@@ -33,7 +33,7 @@ Each view will have the following general functionality:
 
 Additionally, there is potential for a few extra nice features:
 
-- [ ] **View Pages**: Special page types which are just Datacore views and which can be put into the side bar or as
+- [X] **View Pages**: Special page types which are just Datacore views and which can be put into the side bar or as
   regular pages.
 
 ## Data Input

esbuild.config.mjs

@@ -20,17 +20,14 @@ async function build(prod) {
 		external: [
 			'obsidian',
 			'electron',
-			'@codemirror/autocomplete',
 			'@codemirror/collab',
 			'@codemirror/commands',
 			'@codemirror/language',
 			'@codemirror/lint',
 			'@codemirror/search',
 			'@codemirror/state',
 			'@codemirror/view',
-			'@lezer/common',
 			'@lezer/highlight',
-			'@lezer/lr',
 			"pdfjs-dist",
 			...builtins],
 			alias: {
@@ -55,4 +52,4 @@ async function build(prod) {
 }
 
 // Run the build.
-build(process.argv[2] === 'production');
+build(process.argv[2] === 'production');

package.json

@@ -24,7 +24,8 @@
   "author": "Michael Brenan",
   "license": "MIT",
   "devDependencies": {
-    "@codemirror/language": "https://github.com/lishid/cm-language",
+    "@codemirror/autocomplete": "^6.18.2",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.0.1",
     "@codemirror/view": "^6.0.1",
     "@types/jest": "^27.0.1",
@@ -42,10 +43,13 @@
     "typescript": "^5.4.2"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.2",
     "@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.2.1",
+    "codemirror": "^6.0.1",
     "emoji-regex": "^10.2.1",
     "flatqueue": "^2.0.3",
     "localforage": "1.10.0",
@@ -56,5 +60,6 @@
     "sorted-btree": "^1.8.1",
     "sucrase": "3.35.0",
     "yaml": "^2.3.3"
-  }
+  },
+  "packageManager": "[email protected]+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
 }

src/api/api.ts

@@ -17,6 +17,7 @@ import { Coerce } from "./coerce";
 import { DataArray } from "./data-array";
 import * as luxon from "luxon";
 import * as preact from "preact";
+import * as phooks from "preact/hooks";
 
 /** Exterally visible API for datacore.
  * @group Core
@@ -38,6 +39,9 @@ export class DatacoreApi {
     get app(): App {
         return this.core.app;
     }
+    get hooks(): typeof phooks {
+        return phooks;
+    }
 
     ///////////////
     // Local API //

src/main.ts

@@ -4,6 +4,7 @@ import { DateTime } from "luxon";
 import { App, Plugin, PluginSettingTab, Setting } from "obsidian";
 import { createElement, render } from "preact";
 import { DEFAULT_SETTINGS, Settings } from "settings";
+import { DatacoreQueryView as DatacoreJSView, VIEW_TYPE_DATACOREJS } from "ui/view-page";
 import { IndexStatusBar } from "ui/index-status";
 
 /** Reactive data engine for your Obsidian.md vault. */
@@ -52,6 +53,21 @@ export default class DatacorePlugin extends Plugin {
             -100
         );
 
+        // Views: DatacoreJS view.
+        // @ts-ignore be quiet
+        this.registerView(VIEW_TYPE_DATACOREJS, (leaf) => new DatacoreJSView(leaf, this.api));
+
+        // Add a command for creating a new view page.
+        this.addCommand({
+            id: "datacore-add-view-page",
+            name: "Create View Page",
+            callback: () => {
+                const newLeaf = this.app.workspace.getLeaf("tab");
+                newLeaf.setViewState({ type: VIEW_TYPE_DATACOREJS, active: true });
+                this.app.workspace.setActiveLeaf(newLeaf, { focus: true });
+            },
+        });
+
         // Register JS highlighting for codeblocks.
         this.register(this.registerCodeblockHighlighting());
 

src/typings/obsidian-ex.d.ts

@@ -1,9 +1,48 @@
+import { Extension } from "@codemirror/state";
 import type { DatacoreApi } from "api/api";
 import { CanvasMetadataIndex } from "index/types/json/canvas";
 import "obsidian";
+import { App } from "obsidian";
+import * as hooks from "preact/hooks";
 
 /** @hidden */
 declare module "obsidian" {
+    interface WorkspaceLeaf {
+        serialize(): {
+            id: string;
+            type: "leaf";
+            state: {
+                type: string;
+                state: any;
+            };
+        };
+        tabHeaderEl: HTMLElement;
+        tabHeaderInnerTitleEl: HTMLElement;
+    }
+    interface View {
+        getState(): any;
+    }
+    interface ItemView {
+        titleEl: HTMLElement;
+        getState(): any;
+    }
+
+    interface InternalPlugin<T> {
+        id: string;
+        name: string;
+        description: string;
+        instance: T;
+    }
+    export interface PagePreviewPlugin {
+        onLinkHover: (
+            view: View,
+            hovered: HTMLElement,
+            hoveredPath: string,
+            sourcePath: string,
+            _unknown: unknown
+        ) => void;
+    }
+
     interface FileManager {
         linkUpdaters: {
             canvas: {
@@ -15,6 +54,9 @@ declare module "obsidian" {
             };
         };
     }
+    interface Vault {
+        getConfig: (conf: string) => any;
+    }
     interface App {
         appId?: string;
         plugins: {
@@ -23,8 +65,15 @@ declare module "obsidian" {
                 datacore?: {
                     api: DatacoreApi;
                 };
+                "datacore-addon-autocomplete"?: {
+                    readonly extensions: Extension[];
+                };
             };
         };
+        internalPlugins: {
+            getPluginById: <T>(id: string) => InternalPlugin<T>;
+        };
+
         embedRegistry: {
             embedByExtension: {
                 [key: string]: unknown;
@@ -50,5 +99,10 @@ declare module "obsidian" {
 declare global {
     interface Window {
         datacore?: DatacoreApi;
+        app: App;
+        CodeMirror: {
+            defineMode: (mode: string, conf: (config: any) => any) => unknown;
+            [key: string]: any;
+        };
     }
 }

src/ui/fields/fields.css

@@ -50,21 +50,36 @@
     font-size: 1.3rem;
 }
 
-.datacore-editable-outer .prompt-input {
+.datacore-selectable__input-container,
+.datacore-selectable__input-container input {
+    min-width: 100% !important;
+    width: 100% !important;
+    display: inline-flex !important;
+}
+
+.datacore-editable-outer .prompt-input.datacore-selectable__input-container {
     display: inline-block !important;
     flex-grow: 1;
 }
+.datacore-selectable__input-container input {
+    width: inherit !important;
+    min-width: max-content !important;
+    display: inline-block;
+}
 
 .datacore-selectable__menu {
     z-index: 99999 !important;
     top: 0 !important;
 }
 
-.datacore-editable-outer .prompt-input input:after {
+.prompt-input.datacore-selectable__input-container::after {
     content: none !important;
 }
 
-.datacore-editable-outer > .suggestion-container:has(.datacore-selectable__control--menu-is-open) {
+.value-container.datacore-selectable__value-container {
+}
+
+.suggestion-container:has(.datacore-selectable__control--menu-is-open) {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 }
@@ -84,13 +99,13 @@
     color: var(--text-on-accent-inverted);
 }
 
-.datacore-editable-outer .datacore-multi-select-container {
+.datacore-multi-select-container {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
 }
 
-.datacore-editable-outer .datacore-multi-select-value {
+.datacore-multi-select-value {
     background-color: var(--interactive-accent);
     border-radius: var(--tag-radius);
     padding: var(--tag-padding-y) var(--tag-padding-x);

src/ui/markdown.tsx

@@ -1,7 +1,7 @@
 /** Provides core preact / rendering utilities for all view types.
  * @module ui
  */
-import { App, MarkdownRenderer } from "obsidian";
+import { App, MarkdownRenderer, MarkdownView, PagePreviewPlugin } from "obsidian";
 import { Component } from "obsidian";
 import { Link, Literal, Literals } from "expression/literal";
 import { Datacore } from "index/datacore";
@@ -53,7 +53,8 @@ export function DatacoreContextProvider({
  * @hidden
  */
 export function RawLink({ link, sourcePath: maybeSourcePath }: { link: Link | string; sourcePath?: string }) {
-    const workspace = useContext(APP_CONTEXT)?.workspace;
+    const app = useContext(APP_CONTEXT);
+    const workspace = app.workspace;
     const currentPath = useContext(CURRENT_FILE_CONTEXT);
     const sourcePath = maybeSourcePath ?? currentPath ?? "";
     const parsed = useMemo(() => (Literals.isLink(link) ? link : Link.infer(link)), [link]);
@@ -65,17 +66,26 @@ export function RawLink({ link, sourcePath: maybeSourcePath }: { link: Link | st
         },
         [parsed, sourcePath]
     );
+    const linkRef = useRef<HTMLAnchorElement>(null);
+    const hoverCallback = useCallback(() => {
+        let pagePreview = app.internalPlugins.getPluginById<PagePreviewPlugin>("page-preview").instance;
+        const leaf = app.workspace.getMostRecentLeaf();
+        if (linkRef.current && leaf && !(leaf.view instanceof MarkdownView))
+            // this last condition prevents duplicate popovers in markdown views
+            pagePreview.onLinkHover(leaf.view, linkRef.current, parsed.obsidianLink(), sourcePath, null);
+    }, [linkRef.current]);
 
     return (
         <a
+            ref={linkRef}
             aria-label={parsed.displayOrDefault()}
             onClick={onClick}
             className="internal-link"
             target="_blank"
             rel="noopener"
             data-tooltip-position="top"
             data-href={parsed.obsidianLink()}
-            href={parsed.obsidianLink()}
+            onMouseOver={hoverCallback}
         >
             {parsed.displayOrDefault()}
         </a>

src/ui/view-page.css

@@ -0,0 +1,24 @@
+.dc-cm-editor .cm-gutters {
+    flex: 0 0 auto;
+    background-color: transparent;
+    color: var(--text-faint) !important;
+    border-right: none !important;
+    margin-inline-end: var(--file-folding-offset);
+    font-size: var(--font-ui-smaller);
+    z-index: 1;
+    font-variant: tabular-nums;
+}
+.cm-typeName {
+    color: var(--headers);
+}
+.dc-cm-editor {
+    padding: 1em;
+    border-radius: 0.5em;
+    border: 1px solid var(--h5-color);
+}
+.cm-tooltip.cm-tooltip-autocomplete {
+    background: var(--embed-bg);
+}
+.dc-cm-editor img.cm-widgetBuffer[aria-hidden="true"] {
+    display: none;
+}