feat: ability to cancel edits to a form

fixes #8

main.ts

@@ -38,7 +38,13 @@ export default class ModalFormPlugin extends Plugin {
 	}
 
 	async editForm(formName: string) {
-		const formDefinition = this.settings?.formDefinitions.find(form => form.name === formName);
+		// By reading settings from the disk we get a copy of the form
+		// effectively preventing any unexpected side effects to the running configuration
+		// For example, mutating a form, cancelling the edit but the form is already mutated,
+		// then if you save another form you will unexpectedly save the mutated form too.
+		// Maybe we could instead do a deep copy instead, but until this proven to be a bottleneck I will leave it like this.
+		const savedSettings = await this.getSettings();
+		const formDefinition = savedSettings.formDefinitions.find(form => form.name === formName);
 		if (!formDefinition) {
 			throw new ModalFormError(`Form ${formName} not found`)
 		}

src/views/EditFormView.ts

@@ -35,8 +35,7 @@ function parseState(maybeState: unknown): maybeState is FormDefinition {
  * Simple, right?
  */
 export class EditFormView extends ItemView {
-	formState: FormDefinition = { title: 'New form', name: '', fields: [] };
-	editType: 'new-form' | 'edit-form' = 'new-form';
+	formState: FormDefinition = { title: '', name: '', fields: [] };
 	formEditor!: FormEditor;
 	constructor(readonly leaf: WorkspaceLeaf, readonly plugin: ModalFormPlugin) {
 		super(leaf);
@@ -61,12 +60,20 @@ export class EditFormView extends ItemView {
 					console.log(this.formState)
 					this.app.workspace.requestSaveLayout()
 				},
-				onSubmit: (formDefinition: FormDefinition) => { console.log({ formDefinition }); this.plugin.saveForm(formDefinition); this.plugin.closeEditForm() },
+				onSubmit: (formDefinition: FormDefinition) => {
+					console.log({ formDefinition });
+					this.plugin.saveForm(formDefinition);
+					this.plugin.closeEditForm()
+				},
+				onCancel: () => {
+					this.plugin.closeEditForm()
+				}
 			}
 		});
 	}
 
 	async onClose() {
+		console.log('onClose of edit form called')
 		this.formEditor.$destroy();
 	}
 

src/views/FormBuilder.svelte

@@ -20,6 +20,7 @@
 	export let app: App;
 	export let onChange: () => void;
 	export let onSubmit: (formDefinition: FormDefinition) => void;
+	export let onCancel: () => void;
 
 	$: isValid = isValidFormDefinition(definition);
 
@@ -100,6 +101,9 @@
 				>
 				<button type="submit" disabled={!isValid}>Save and close</button
 				>
+				<button type="button" class="mod-warning" on:click={onCancel}
+					>Cancel</button
+				>
 			</div>
 		</fieldset>