feat: Schema Validator Page

dendron-main.code-workspace

@@ -100,7 +100,9 @@
     "pasteImage.prefix": "/",
     "editor.suggest.snippetsPreventQuickSuggestions": false,
     "editor.suggest.showSnippets": true,
-    "editor.tabCompletion": "on"
+    "editor.tabCompletion": "on",
+    "markdown-preview-enhanced.enableWikiLinkSyntax": true,
+    "markdown-preview-enhanced.wikiLinkFileExtension": ".md"
   },
   "extensions": {
     "recommendations": ["esbenp.prettier-vscode"]

packages/common-all/src/constants/views.ts

@@ -20,6 +20,7 @@ export enum DendronEditorViewKey {
   SCHEMA_GRAPH = "dendron.graph-schema",
   NOTE_PREVIEW = "dendron.note-preview",
   SEED_BROWSER = "dendron.seed-browser",
+  SCHEMA_VALIDATOR = "dendron.schema-validator",
 }
 
 export enum DendronTreeViewKey {
@@ -64,6 +65,12 @@ export const EDITOR_VIEWS: Record<DendronEditorViewKey, DendronViewEntry> = {
     bundleName: "SeedBrowser",
     type: "webview",
   },
+  [DendronEditorViewKey.SCHEMA_VALIDATOR]: {
+    desc: "Schema Validator",
+    label: "Schema Validator",
+    bundleName: "DendronSchemaValidator",
+    type: "webview",
+  },
 };
 
 /**

packages/common-all/src/dnode.ts

@@ -399,7 +399,7 @@ export class NoteUtils {
       notePath: noteOpts.fname,
       schemaModDict: engine.schemas,
     });
-    if (maybeMatch) {
+    if (maybeMatch && !maybeMatch.partial) {
       const { schema, schemaModule } = maybeMatch;
       NoteUtils.addSchema({ note, schemaModule, schema });
     }
@@ -1273,6 +1273,10 @@ type SchemaMatchResult = {
   schema: SchemaProps;
   namespace: boolean;
   notePath: string;
+  /**
+   * True if only a partial match.
+   */
+  partial: boolean;
 };
 
 export class SchemaUtils {
@@ -1668,14 +1672,26 @@ export class SchemaUtils {
           notePath,
           namespace: domainSchema.data.namespace || false,
           schemaModule: match,
+          partial: false,
         };
       }
-      return SchemaUtils.matchPathWithSchema({
+      const result = SchemaUtils.matchPathWithSchema({
         notePath,
         matched: "",
         schemaCandidates: [domainSchema],
         schemaModule: match,
       });
+      // If cannot go deeper, return what we have partially
+      if (result === undefined) {
+        return {
+          schema: domainSchema,
+          notePath,
+          namespace: domainSchema.data.namespace || false,
+          schemaModule: match,
+          partial: true,
+        };
+      }
+      return result;
     }
   }
 
@@ -1723,6 +1739,7 @@ export class SchemaUtils {
           schema,
           namespace,
           notePath,
+          partial: false,
         };
       }
 
@@ -1733,13 +1750,27 @@ export class SchemaUtils {
       const nextSchemaCandidates = matchNextNamespace
         ? schema.children.map((id) => schemaModule.schemas[id])
         : [schema];
-      return SchemaUtils.matchPathWithSchema({
+
+      // recursive step
+      const next = SchemaUtils.matchPathWithSchema({
         notePath,
         matched: nextNotePath,
         schemaCandidates: nextSchemaCandidates,
         schemaModule,
         matchNamespace: matchNextNamespace,
       });
+      // If cannot go deeper, return what we have partially
+      if (next === undefined) {
+        // possible bug: next itself is partial
+        return {
+          schemaModule,
+          schema,
+          namespace,
+          notePath,
+          partial: true,
+        };
+      }
+      return next;
     }
     return;
   }
@@ -1772,6 +1803,7 @@ export class SchemaUtils {
         namespace,
         notePath,
         schemaModule,
+        partial: false,
       };
     }
     return;

packages/dendron-plugin-views/src/components/DendronSchemaValidator.tsx

@@ -0,0 +1,176 @@
+import { DendronProps } from "../types";
+import { Select, AutoComplete } from "antd";
+import { useEffect, useState } from "react";
+import {
+  SchemaModuleProps,
+  SchemaProps,
+  SchemaUtils,
+} from "@dendronhq/common-all";
+
+function generatePath(module: SchemaModuleProps, schema: SchemaProps): string {
+  const partString = schema.data.pattern
+    ? `${schema.data.pattern}`
+    : schema.data.namespace
+    ? `${schema.id}.*`
+    : schema.id;
+  if (schema.parent && schema.parent !== "root") {
+    return (
+      generatePath(module, module.schemas[schema.parent]) + "." + partString
+    );
+  }
+  return partString;
+}
+
+function getCompletions(
+  schemaModule: SchemaModuleProps,
+  schema: SchemaProps
+): { label: string; value: string }[] {
+  const path = generatePath(schemaModule, schema);
+  return [
+    { label: path, value: path },
+    ...schema.children
+      .map((child) => getCompletions(schemaModule, schemaModule.schemas[child]))
+      .flat(),
+  ];
+}
+
+function SchemaBox({
+  schema,
+  schemaModule,
+  currentMatch,
+  partialMatch,
+}: {
+  schema: SchemaProps;
+  schemaModule: SchemaModuleProps;
+  currentMatch: string | null;
+  partialMatch: boolean;
+}) {
+  const match = currentMatch === schema.id;
+  return (
+    <div
+      style={{
+        backgroundColor:
+          match && !partialMatch
+            ? "#b1ffb6"
+            : match && partialMatch
+            ? "#e4ffb1"
+            : "#FFFFFF",
+        borderRadius: "5px",
+        margin: "10px",
+        border: "1px solid #a9a9a9",
+      }}
+    >
+      <h2
+        style={{
+          fontSize: "15px",
+          color: "#1d1d1d",
+        }}
+      >
+        {schema.title}{" "}
+        <span style={{ color: "#5e5e5e", paddingLeft: "5px" }}>
+          {match && (partialMatch ? "(partial match)" : "(match)")}
+        </span>
+      </h2>
+      <h3
+        style={{
+          fontSize: "12px",
+          color: "#1d1d1d",
+        }}
+      >
+        ({generatePath(schemaModule, schema)})
+      </h3>
+      <div style={{ paddingLeft: "12px" }}>
+        {schema.children.map((childID) => (
+          <SchemaBox
+            key={childID}
+            partialMatch={partialMatch}
+            schema={schemaModule.schemas[childID]}
+            schemaModule={schemaModule}
+            currentMatch={currentMatch}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function DendronSchemaValidator({ engine }: DendronProps) {
+  const [selectedDomain, setSelectedDomain] = useState<string | null>(null);
+  const [inputtedHierarchy, setInputtedHierarchy] = useState<string>("");
+  useEffect(() => {
+    window.postMessage({
+      type: "onDidChangeActiveTextEditor",
+      data: { note: { id: "" }, sync: true },
+      source: "vscode",
+    });
+  }, []);
+  useEffect(() => {
+    if (selectedDomain !== null) {
+      setInputtedHierarchy(selectedDomain);
+    }
+  }, [selectedDomain]);
+  useEffect(() => {
+    const schemas = Object.keys(engine.schemas);
+    if (selectedDomain === null && schemas.length > 0) {
+      setSelectedDomain(schemas[0]);
+      setInputtedHierarchy(schemas[0]);
+    }
+  }, [engine.schemas, selectedDomain]);
+  const schemaModule =
+    selectedDomain !== null ? engine.schemas[selectedDomain] : null;
+  const match =
+    schemaModule !== null
+      ? SchemaUtils.matchPathWithSchema({
+          notePath: inputtedHierarchy,
+          matched: "",
+          schemaCandidates: [schemaModule.schemas[schemaModule.root.id]],
+          schemaModule,
+        })
+      : undefined;
+  const schemaValues = Object.entries(engine.schemas).map(([id, schema]) => ({
+    value: id,
+    label: schema.root.fname,
+  }));
+  return (
+    <div style={{ padding: "1em" }}>
+      <h1>Schema Validator</h1>
+      <div>select a schema file</div>
+      <div style={{ padding: "1em" }}>
+        <Select
+          value={selectedDomain}
+          options={schemaValues}
+          onChange={setSelectedDomain}
+          style={{ width: "100%" }}
+          showSearch={true}
+        />
+      </div>
+      {schemaModule !== null && (
+        <div style={{ padding: "1em" }}>
+          <div>enter a schema path to validate it</div>
+          <div>
+            <AutoComplete
+              placeholder={`type a schema hierarchy starting with ${selectedDomain}`}
+              size="large"
+              style={{ width: "100%" }}
+              value={inputtedHierarchy}
+              onChange={setInputtedHierarchy}
+              options={
+                match !== undefined
+                  ? getCompletions(schemaModule, match.schema)
+                  : []
+              }
+            />
+          </div>
+          <div style={{ padding: "10px" }}>
+            <SchemaBox
+              schema={schemaModule.schemas[schemaModule.root.id]}
+              schemaModule={schemaModule}
+              currentMatch={match !== undefined ? match.schema.id : null}
+              partialMatch={match !== undefined ? match.partial : false}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

packages/dendron-plugin-views/src/index.tsx

@@ -9,6 +9,7 @@ const VALID_NAMES = [
   "DendronSchemaGraphPanel",
   "DendronSideGraphPanel",
   "SeedBrowser",
+  "DendronSchemaValidator",
 ];
 
 const elem = window.document.getElementById("root")!;

packages/plugin-core/package.json

@@ -488,6 +488,10 @@
         "command": "dendron.showSchemaGraphView",
         "title": "Dendron: Show Schema Graph"
       },
+      {
+        "command": "dendron.showSchemaValidator",
+        "title": "Dendron: Show Schema Validator"
+      },
       {
         "command": "dendron.showLegacyPreview",
         "title": "Dendron: Show Preview (legacy)"
@@ -836,6 +840,10 @@
           "command": "dendron.showSchemaGraphView",
           "when": "dendron:pluginActive"
         },
+        {
+          "command": "dendron.showSchemaValidator",
+          "when": "dendron:pluginActive"
+        },
         {
           "command": "dendron.showLegacyPreview",
           "when": "dendron:pluginActive && dendron:hasLegacyPreview"
@@ -1292,7 +1300,7 @@
       },
       {
         "command": "dendron.togglePreview",
-        "windows": "ctrl+k v",
+        "key": "ctrl+k v",
         "mac": "cmd+ctrl+p",
         "when": "dendron:pluginActive"
       }
@@ -1404,4 +1412,4 @@
       "restrictedConfigurations": []
     }
   }
-}
+}

packages/plugin-core/src/_extension.ts

@@ -37,10 +37,12 @@ import {
 import { SeedRemoveCommand } from "./commands/SeedRemoveCommand";
 import { ShowNoteGraphCommand } from "./commands/ShowNoteGraph";
 import { ShowSchemaGraphCommand } from "./commands/ShowSchemaGraph";
+import { ShowSchemaValidatorCommand } from "./commands/ShowSchemaValidator";
 import { TogglePreviewCommand } from "./commands/TogglePreview";
 import { NoteGraphPanelFactory } from "./components/views/NoteGraphViewFactory";
 import { PreviewPanelFactory } from "./components/views/PreviewViewFactory";
 import { SchemaGraphViewFactory } from "./components/views/SchemaGraphViewFactory";
+import { SchemaValidatorViewFactory } from "./components/views/SchemaValidatorViewFactory";
 import { DendronContext, DENDRON_COMMANDS } from "./constants";
 import { codeActionProvider } from "./features/codeActionProvider";
 import { completionProvider } from "./features/completionProvider";
@@ -609,6 +611,21 @@ async function _setupCommands({
       );
     }
 
+    if (
+      !existingCommands.includes(DENDRON_COMMANDS.SHOW_SCHEMA_VALIDATOR.key)
+    ) {
+      context.subscriptions.push(
+        vscode.commands.registerCommand(
+          DENDRON_COMMANDS.SHOW_SCHEMA_VALIDATOR.key,
+          sentryReportingCallback(async () => {
+            await new ShowSchemaValidatorCommand(
+              SchemaValidatorViewFactory.create(ext)
+            ).run();
+          })
+        )
+      );
+    }
+
     if (!existingCommands.includes(DENDRON_COMMANDS.SHOW_NOTE_GRAPH.key)) {
       context.subscriptions.push(
         vscode.commands.registerCommand(