feat: open TemplateBuilder in a modal

src/API.ts

@@ -1,16 +1,17 @@
 import { App, parseFrontMatterAliases } from "obsidian";
 
+import * as std from "@std";
+import { E, flow } from "@std";
+import { FormModal } from "./FormModal";
+import FormResult from "./core/FormResult";
 import { type FormDefinition, type FormOptions } from "./core/formDefinition";
 import { MigrationError } from "./core/formDefinitionSchema";
-import FormResult from "./core/FormResult";
 import { exampleModalDefinition } from "./exampleModalDefinition";
 import ModalFormPlugin from "./main";
-import { ModalFormError } from "./utils/ModalFormError";
-import { FormModal } from "./FormModal";
 import { log_error, log_notice } from "./utils/Log";
-import * as std from "@std";
+import { ModalFormError } from "./utils/ModalFormError";
 import { enrich_tfile, resolve_tfile } from "./utils/files";
-import { E, flow } from "@std";
+import { makeModel } from "./views/components/TemplateBuilder";
 
 type pickOption = { pick: string[] };
 type omitOption = { omit: string[] };
@@ -105,12 +106,16 @@ export class API {
     /**
      * Opens a named form, limiting/filtering the fields included
      * @param {string} name - The name of the form to open
-     * @param {limitOptions} limitOpts - The options to apply when filtering fields 
+     * @param {limitOptions} limitOpts - The options to apply when filtering fields
      * @param {FormOptions} formOpts - Form options to use when opening the form once filtered
      * @returns {Promise<FormResult>} - A promise that resolves with the form result
      * @throws {ModalFormError} - Throws an error if the form definition is not found
      */
-    public limitedForm(name: string, limitOpts: limitOptions, formOpts?: FormOptions): Promise<FormResult> {
+    public limitedForm(
+        name: string,
+        limitOpts: limitOptions,
+        formOpts?: FormOptions,
+    ): Promise<FormResult> {
         const formDefinition = this.getFormByName(name);
         let newFormDefinition: FormDefinition;
         if (formDefinition) {
@@ -123,7 +128,9 @@ export class API {
             } else if (isPickOption(limitOpts)) {
                 newFormDefinition = {
                     ...formDefinition,
-                    fields: formDefinition.fields.filter((field) => limitOpts.pick.includes(field.name)),
+                    fields: formDefinition.fields.filter((field) =>
+                        limitOpts.pick.includes(field.name),
+                    ),
                 };
             } else {
                 throw new ModalFormError(
@@ -155,4 +162,12 @@ export class API {
             return this.openModalForm(formReference, options);
         }
     }
+
+    public openInTemplateBuilder(name: string) {
+        const form = this.getFormByName(name);
+        if (form) {
+            const model = makeModel(form);
+            this.plugin.openTemplateBuilder(model);
+        }
+    }
 }

src/main.ts

@@ -1,32 +1,34 @@
+import { A, E, O, pipe } from "@std";
 import { Platform, Plugin, WorkspaceLeaf } from "obsidian";
+import { API } from "src/API";
+import { ModalFormSettingTab } from "src/ModalFormSettingTab";
 import FormResult from "src/core/FormResult";
+import { FormWithTemplate, type FormDefinition } from "src/core/formDefinition";
+import {
+    getDefaultSettings,
+    parseSettings,
+    type ModalFormSettings,
+    type OpenPosition,
+} from "src/core/settings";
 import { exampleModalDefinition } from "src/exampleModalDefinition";
-import { ModalFormSettingTab } from "src/ModalFormSettingTab";
-import { API } from "src/API";
+import { ModalFormError } from "src/utils/ModalFormError";
 import { EDIT_FORM_VIEW, EditFormView } from "src/views/EditFormView";
 import { MANAGE_FORMS_VIEW, ManageFormsView } from "src/views/ManageFormsView";
-import { ModalFormError } from "src/utils/ModalFormError";
-import { FormWithTemplate, type FormDefinition } from "src/core/formDefinition";
 import {
+    InvalidData,
+    MigrationError,
     formNeedsMigration,
     migrateToLatest,
-    MigrationError,
-    InvalidData,
 } from "./core/formDefinitionSchema";
-import {
-    parseSettings,
-    type ModalFormSettings,
-    type OpenPosition,
-    getDefaultSettings,
-} from "src/core/settings";
-import { log_error, log_notice } from "./utils/Log";
-import { settingsStore } from "./store/store";
-import { O, pipe, E, A } from "@std";
 import { executeTemplate } from "./core/template/templateParser";
+import { settingsStore } from "./store/store";
+import { FormPickerModal } from "./suggesters/FormPickerModal";
 import { NewNoteModal } from "./suggesters/NewNoteModal";
+import { log_error, log_notice } from "./utils/Log";
 import { file_exists } from "./utils/files";
-import { FormPickerModal } from "./suggesters/FormPickerModal";
 import { FormImportModal } from "./views/FormImportView";
+import { TemplateBuilderModal } from "./views/TemplateBuilderView";
+import { TemplateBuilderModel } from "./views/components/TemplateBuilder";
 
 type ViewType = typeof EDIT_FORM_VIEW | typeof MANAGE_FORMS_VIEW;
 
@@ -104,6 +106,10 @@ export default class ModalFormPlugin extends Plugin {
         importModal.open();
     }
 
+    openTemplateBuilder(model: TemplateBuilderModel) {
+        new TemplateBuilderModal(this.app, model).open();
+    }
+
     closeEditForm() {
         this.app.workspace.detachLeavesOfType(EDIT_FORM_VIEW);
     }

src/views/TemplateBuilderView.ts

@@ -0,0 +1,29 @@
+import { App, Modal } from "obsidian";
+import { TemplateBuilderModel } from "./components/TemplateBuilder";
+import TemplateBuilder from "./components/TemplateBuilder.svelte";
+/**
+ * This class is just the minimum glue code to bind our core logic
+ * with the  svelte UI and obsidian API modal.
+ */
+export class TemplateBuilderModal extends Modal {
+    _component!: TemplateBuilder;
+
+    constructor(
+        app: App,
+        private deps: TemplateBuilderModel,
+    ) {
+        super(app);
+    }
+
+    onClose() {
+        this._component.$destroy();
+    }
+
+    onOpen() {
+        const { contentEl } = this;
+        this._component = new TemplateBuilder({
+            target: contentEl,
+            props: { model: this.deps },
+        });
+    }
+}

src/views/components/TemplateBuilder.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-    import { FormDefinition } from "src/core/formDefinition";
-    import { makeModel, type TemplateBuilderModel } from "./TemplateBuilder";
+    import { type TemplateBuilderModel } from "./TemplateBuilder";
 
-    export let definition: FormDefinition;
-    export let model: TemplateBuilderModel = makeModel(definition);
+    export let model: TemplateBuilderModel;
 
     $: fields = model.fields;
 </script>
 
-<div class="flex gap-2">
+<div class="modal-form flex gap-2">
     <div>
         <h3>Fields to include in frontmatter</h3>
         {#each $fields as field}

styles.css

@@ -96,3 +96,10 @@ If your plugin does not need CSS, delete this file.
     padding: 4px 0;
     align-items: center;
 }
+
+.flex {
+    display: flex;
+}
+.gap-2 {
+    gap: 2rem;
+}