add ability to create views for queries that are treated like any other file view (e.g., they can be dragged into the sidebar)

Author: GamerGirlandCo

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/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;
+}