From e5e7079386cd18d15f3a3fad54deb18a6467eee6 Mon Sep 17 00:00:00 2001
From: jferg <justin@seesaw.me>
Date: Mon, 28 Oct 2024 20:47:09 -0600
Subject: [PATCH 1/6] Does some basic changes to get the plugin working again
 and upgrade packages and build to the latest versions.

---
 .eslintignore                 |  3 ++
 .eslintrc                     | 23 ++++++++++++++
 .gitignore                    | 22 ++++++++++++++
 .npmrc                        |  1 +
 esbuild.config.mjs            | 56 ++++++++++++++++-------------------
 package.json                  | 27 +++++++++--------
 src/ConfluencePerPageForm.tsx |  4 +++
 tsconfig.json                 | 37 ++++++++++++++++-------
 version-bump.mjs              | 15 ++++++++++
 versions.json                 |  3 ++
 10 files changed, 138 insertions(+), 53 deletions(-)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 create mode 100644 version-bump.mjs
 create mode 100644 versions.json

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..9ee3ee3
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules/
+
+main.js
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..d5e5590
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,23 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "env": { "node": true },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
+    "@typescript-eslint/ban-ts-comment": "off",
+    "no-prototype-builtins": "off",
+    "@typescript-eslint/no-empty-function": "off"
+  }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..906fc88
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,22 @@
+# vscode
+.vscode
+
+# Intellij
+*.iml
+.idea
+
+# npm
+node_modules
+
+# Don't include the compiled main.js file in the repo.
+# They should be uploaded to GitHub releases instead.
+main.js
+
+# Exclude sourcemaps
+*.map
+
+# obsidian
+data.json
+
+# Exclude macOS Finder (System Explorer) View States
+.DS_Store
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..b973752
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+tag-version-prefix=""
\ No newline at end of file
diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index 4c8a482..b58be3f 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -1,8 +1,6 @@
 import esbuild from "esbuild";
 import process from "process";
-import builtins from 'builtin-modules'
-import { writeFileSync } from 'fs';
-
+import builtins from "builtin-modules";
 
 const banner =
 `/*
@@ -11,45 +9,43 @@ if you want to view the source, please visit the github repository of this plugi
 */
 `;
 
-const prod = (process.argv[2] === 'production');
+const prod = (process.argv[2] === "production");
 
-const buildConfig = {
+const context = await esbuild.context({
 	banner: {
 		js: banner,
 	},
-	entryPoints: ['src/main.ts'],
+	entryPoints: ["src/main.ts"],
 	bundle: true,
 	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',
-		...builtins
-	],
-	format: 'cjs',
-	target: 'chrome106',
+		"obsidian",
+		"electron",
+		"@codemirror/autocomplete",
+		"@codemirror/collab",
+		"@codemirror/commands",
+		"@codemirror/language",
+		"@codemirror/lint",
+		"@codemirror/search",
+		"@codemirror/state",
+		"@codemirror/view",
+		"@lezer/common",
+		"@lezer/highlight",
+		"@lezer/lr",
+		...builtins],
+	format: "cjs",
+	target: "es2018",
 	logLevel: "info",
-	sourcemap: prod ? false : 'inline',
+	sourcemap: prod ? false : "inline",
 	treeShaking: true,
-	outdir: prod ? 'dist' : '../../dev-vault/.obsidian/plugins/obsidian-confluence',
+	outdir: 'dist',
 	mainFields: ['module', 'main'],
 	minify: true,
 	metafile: true,
-};
+});
 
 if (prod) {
-	const buildResult = await esbuild.build(buildConfig);
-	writeFileSync("./dist/meta.json", JSON.stringify(buildResult.metafile));
+	await context.rebuild();
+	process.exit(0);
 } else {
-	const context = await esbuild.context(buildConfig);
 	await context.watch();
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index a409db2..c22ad1d 100644
--- a/package.json
+++ b/package.json
@@ -6,10 +6,11 @@
     "type": "module",
     "scripts": {
         "dev": "node esbuild.config.mjs",
-        "build": "tsc && node esbuild.config.mjs production",
+        "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
         "fmt": "npx prettier --write src/",
         "lint": "eslint --ignore-path ../../.eslintignore --ext .jsx,tsx,.js,.ts src/",
-        "prettier-check": "npx prettier --check src/"
+        "prettier-check": "npx prettier --check src/",
+        "version": "node version-bump.mjs && git add manifest.json versions.json"
     },
     "keywords": [],
     "author": "andymac4182",
@@ -17,18 +18,18 @@
     "devDependencies": {
         "@types/mime-types": "^2.1.1",
         "@types/react-dom": "^18.0.11",
-        "obsidian": "1.1.1"
+        "obsidian": "^1.1.1"
     },
     "dependencies": {
-        "confluence.js": "^1.6.3",
-        "mime-types": "^2.1.35",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
-        "@markdown-confluence/lib": "5.5.2",
-        "@markdown-confluence/mermaid-electron-renderer": "5.5.2"
-    },
-    "resolutions": {
-        "prosemirror-model": "1.14.3"
+        "@markdown-confluence/lib": "^5.5.1",
+        "@markdown-confluence/mermaid-electron-renderer": "^5.5.1",
+        "@types/node": "^20.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.29.0",
+        "@typescript-eslint/parser": "^5.29.0",
+        "builtin-modules": "^3.3.0",
+        "esbuild": "^0.17.3",
+        "react": "^18.3.1",
+        "tslib": "^2.4.0",
+        "typescript": "^4.7.4"
     }
 }
-       
\ No newline at end of file
diff --git a/src/ConfluencePerPageForm.tsx b/src/ConfluencePerPageForm.tsx
index e000923..afba299 100644
--- a/src/ConfluencePerPageForm.tsx
+++ b/src/ConfluencePerPageForm.tsx
@@ -36,7 +36,9 @@ export function mapFrontmatterToConfluencePerPageUIValues(
 
 			if (frontmatterValue !== undefined) {
 				result[propertyKey as keyof ConfluencePerPageUIValues] = {
+					// @ts-ignore
 					value: frontmatterValue,
+					// @ts-ignore
 					isSet: true,
 				};
 			} else {
@@ -44,11 +46,13 @@ export function mapFrontmatterToConfluencePerPageUIValues(
 					case "options":
 					case "array-text":
 						result[propertyKey as keyof ConfluencePerPageUIValues] =
+							// @ts-ignore
 							{ value: defaultValue as never, isSet: false };
 						break;
 					case "boolean":
 					case "text":
 						result[propertyKey as keyof ConfluencePerPageUIValues] =
+							// @ts-ignore
 							{ value: undefined, isSet: false };
 						break;
 					default:
diff --git a/tsconfig.json b/tsconfig.json
index 55bc5f3..4979bd6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +1,30 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions":{
-     "baseUrl":".",
-     "rootDir": "src",
-         "outDir": "dist",
-         "declarationDir": "dist",
-         "noEmit": true,
-         "skipLibCheck": true,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "jsx": "react-jsx",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "module": "ESNext",
+    "target": "ES6",
+    "allowJs": true,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "isolatedModules": true,
+    "strictNullChecks": true,
+    "lib": [
+      "DOM",
+      "ES5",
+      "ES6",
+      "ES7"
+    ]
   },
-  "include":[ "**/*.ts", "**/*.tsx"  ],
-    "exclude": ["node_modules", "packages/**/dist/*", "dist/*", "**/*.test.ts", "**/jest.config.ts"]
+  "include": [
+    "**/*.ts", "**/*.tsx"
+  ],
+  "exclude": ["node_modules", "packages/**/dist/*", "dist/*", "**/*.test.ts", "**/jest.config.ts"]
+
 }
\ No newline at end of file
diff --git a/version-bump.mjs b/version-bump.mjs
new file mode 100644
index 0000000..8747610
--- /dev/null
+++ b/version-bump.mjs
@@ -0,0 +1,15 @@
+
+import { readFileSync, writeFileSync } from "fs";
+
+const targetVersion = process.env.npm_package_version;
+
+// read minAppVersion from manifest.json and bump version to target version
+let manifest = JSON.parse(readFileSync("manifest.json", "utf8"));
+const { minAppVersion } = manifest;
+manifest.version = targetVersion;
+writeFileSync("manifest.json", JSON.stringify(manifest, null, "\t"));
+
+// update versions.json with target version and minAppVersion from manifest.json
+let versions = JSON.parse(readFileSync("versions.json", "utf8"));
+versions[targetVersion] = minAppVersion;
+writeFileSync("versions.json", JSON.stringify(versions, null, "\t"));
diff --git a/versions.json b/versions.json
new file mode 100644
index 0000000..f671e66
--- /dev/null
+++ b/versions.json
@@ -0,0 +1,3 @@
+{
+  "1.0.0": "0.15.0"
+}
\ No newline at end of file

From a110ae7511bdd1a5c40e569f558018d57d4387a4 Mon Sep 17 00:00:00 2001
From: jferg <justin@seesaw.me>
Date: Tue, 29 Oct 2024 10:44:02 -0600
Subject: [PATCH 2/6] Config file, versioning, linter issue cleanup.

---
 src/ConfluencePerPageForm.tsx | 954 +++++++++++++++++-----------------
 tsconfig.json                 |   1 +
 versions.json                 |   2 +-
 3 files changed, 478 insertions(+), 479 deletions(-)

diff --git a/src/ConfluencePerPageForm.tsx b/src/ConfluencePerPageForm.tsx
index afba299..bfe7a2b 100644
--- a/src/ConfluencePerPageForm.tsx
+++ b/src/ConfluencePerPageForm.tsx
@@ -1,529 +1,527 @@
-import { Modal, App, FrontMatterCache } from "obsidian";
+import {Modal, App, FrontMatterCache} from "obsidian";
 import ReactDOM from "react-dom";
-import React, { useState, ChangeEvent } from "react";
-import { ConfluencePageConfig } from "@markdown-confluence/lib";
-import { Property } from "csstype";
+import React, {useState, ChangeEvent} from "react";
+import {ConfluencePageConfig} from "@markdown-confluence/lib";
+import {Property} from "csstype";
 
 export type ConfluencePerPageUIValues = {
-	[K in keyof ConfluencePageConfig.ConfluencePerPageConfig]: {
-		value:
-			| ConfluencePageConfig.ConfluencePerPageConfig[K]["default"]
-			| undefined;
-		isSet: boolean;
-	};
+    [K in keyof ConfluencePageConfig.ConfluencePerPageConfig]: {
+        value:
+            | ConfluencePageConfig.ConfluencePerPageConfig[K]["default"]
+            | undefined;
+        isSet: boolean;
+    };
 };
 
 export function mapFrontmatterToConfluencePerPageUIValues(
-	frontmatter: FrontMatterCache | undefined,
+    frontmatter: FrontMatterCache | undefined,
 ): ConfluencePerPageUIValues {
-	const config = ConfluencePageConfig.conniePerPageConfig;
-	const result: Partial<ConfluencePerPageUIValues> = {};
+    const config = ConfluencePageConfig.conniePerPageConfig;
+    const result: Partial<ConfluencePerPageUIValues> = {};
 
-	if (!frontmatter) {
-		throw new Error("Missing frontmatter");
-	}
+    if (!frontmatter) {
+        throw new Error("Missing frontmatter");
+    }
 
-	for (const propertyKey in config) {
-		if (config.hasOwnProperty(propertyKey)) {
-			const {
-				key,
-				inputType,
-				default: defaultValue,
-			} = config[
-				propertyKey as keyof ConfluencePageConfig.ConfluencePerPageConfig
-			];
-			const frontmatterValue = frontmatter[key];
+    for (const propertyKey in config) {
+        if (config.hasOwnProperty(propertyKey)) {
+            const {
+                key,
+                inputType,
+                default: defaultValue,
+            } = config[
+                propertyKey as keyof ConfluencePageConfig.ConfluencePerPageConfig
+                ];
+            const frontmatterValue = frontmatter[key];
 
-			if (frontmatterValue !== undefined) {
-				result[propertyKey as keyof ConfluencePerPageUIValues] = {
-					// @ts-ignore
-					value: frontmatterValue,
-					// @ts-ignore
-					isSet: true,
-				};
-			} else {
-				switch (inputType) {
-					case "options":
-					case "array-text":
-						result[propertyKey as keyof ConfluencePerPageUIValues] =
-							// @ts-ignore
-							{ value: defaultValue as never, isSet: false };
-						break;
-					case "boolean":
-					case "text":
-						result[propertyKey as keyof ConfluencePerPageUIValues] =
-							// @ts-ignore
-							{ value: undefined, isSet: false };
-						break;
-					default:
-						throw new Error("Missing case for inputType");
-				}
-			}
-		}
-	}
-	return result as ConfluencePerPageUIValues;
+            if (frontmatterValue !== undefined) {
+                result[propertyKey as keyof ConfluencePerPageUIValues] = {
+                    value: frontmatterValue,
+                    isSet: true,
+                };
+            } else {
+                switch (inputType) {
+                    case "options":
+                    case "array-text":
+                        result[propertyKey as keyof ConfluencePerPageUIValues] =
+                            // @ts-ignore
+                            {value: defaultValue as never, isSet: false};
+                        break;
+                    case "boolean":
+                    case "text":
+                        result[propertyKey as keyof ConfluencePerPageUIValues] =
+                            // @ts-ignore
+                            {value: undefined, isSet: false};
+                        break;
+                    default:
+                        throw new Error("Missing case for inputType");
+                }
+            }
+        }
+    }
+    return result as ConfluencePerPageUIValues;
 }
 
 interface FormProps {
-	config: ConfluencePageConfig.ConfluencePerPageConfig;
-	initialValues: ConfluencePerPageUIValues;
-	onSubmit: (values: ConfluencePerPageUIValues) => void;
+    config: ConfluencePageConfig.ConfluencePerPageConfig;
+    initialValues: ConfluencePerPageUIValues;
+    onSubmit: (values: ConfluencePerPageUIValues) => void;
 }
 
 interface ModalProps {
-	config: ConfluencePageConfig.ConfluencePerPageConfig;
-	initialValues: ConfluencePerPageUIValues;
-	onSubmit: (values: ConfluencePerPageUIValues, close: () => void) => void;
+    config: ConfluencePageConfig.ConfluencePerPageConfig;
+    initialValues: ConfluencePerPageUIValues;
+    onSubmit: (values: ConfluencePerPageUIValues, close: () => void) => void;
 }
 
 const handleChange = (
-	key: string,
-	value: unknown,
-	inputValidator: ConfluencePageConfig.InputValidator<unknown>,
-	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
-	isSetValue: boolean,
+    key: string,
+    value: unknown,
+    inputValidator: ConfluencePageConfig.InputValidator<unknown>,
+    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+    isSetValue: boolean,
 ) => {
-	const validationResult = inputValidator(value);
+    const validationResult = inputValidator(value);
 
-	setValues((prevValues) => ({
-		...prevValues,
-		[key]: {
-			...prevValues[key as keyof ConfluencePerPageUIValues],
-			...(isSetValue ? { isSet: value } : { value }),
-		},
-	}));
-	setErrors((prevErrors) => ({
-		...prevErrors,
-		[key]: validationResult.valid ? [] : validationResult.errors,
-	}));
+    setValues((prevValues: any) => ({
+        ...prevValues,
+        [key]: {
+            ...prevValues[key as keyof ConfluencePerPageUIValues],
+            ...(isSetValue ? {isSet: value} : {value}),
+        },
+    }));
+    setErrors((prevErrors: any) => ({
+        ...prevErrors,
+        [key]: validationResult.valid ? [] : validationResult.errors,
+    }));
 };
 
 const styles = {
-	errorTd: {
-		columnSpan: "all" as Property.ColumnSpan,
-		color: "red",
-	},
+    errorTd: {
+        columnSpan: "all" as Property.ColumnSpan,
+        color: "red",
+    },
 };
 
 const renderTextInput = (
-	key: string,
-	config: ConfluencePageConfig.FrontmatterConfig<string, "text">,
-	values: ConfluencePerPageUIValues,
-	errors: Record<string, Error[]>,
-	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+    key: string,
+    config: ConfluencePageConfig.FrontmatterConfig<string, "text">,
+    values: ConfluencePerPageUIValues,
+    errors: Record<string, Error[]>,
+    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-	<>
-		<tr key={key}>
-			<td>
-				<label htmlFor={key}>{config.key}</label>
-			</td>
-			<td>
-				<input
-					type="text"
-					id={key}
-					value={
-						(values[key as keyof ConfluencePerPageUIValues]
-							.value as string) ?? ""
-					}
-					onChange={(e: ChangeEvent<HTMLInputElement>) =>
-						handleChange(
-							key,
-							e.target.value,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							false,
-						)
-					}
-				/>
-			</td>
-			<td>
-				<input
-					type="checkbox"
-					id={`${key}-isSet`}
-					checked={
-						values[key as keyof ConfluencePerPageUIValues]
-							.isSet as boolean
-					}
-					onChange={(e: ChangeEvent<HTMLInputElement>) =>
-						handleChange(
-							key,
-							e.target.checked,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							true,
-						)
-					}
-				/>
-			</td>
-		</tr>
-		<tr key={`${key}-errors`}>
-			{(errors[key]?.length ?? 0) > 0 && (
-				<td colSpan={3}>
-					<div className="error" style={styles.errorTd}>
-						{(errors[key] ?? []).map((error) => (
-							<p key={error.message}>{error.message}</p>
-						))}
-					</div>
-				</td>
-			)}
-		</tr>
-	</>
+    <>
+        <tr key={key}>
+            <td>
+                <label htmlFor={key}>{config.key}</label>
+            </td>
+            <td>
+                <input
+                    type="text"
+                    id={key}
+                    value={
+                        (values[key as keyof ConfluencePerPageUIValues]
+                            .value as string) ?? ""
+                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        handleChange(
+                            key,
+                            e.target.value,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            false,
+                        )
+                    }
+                />
+            </td>
+            <td>
+                <input
+                    type="checkbox"
+                    id={`${key}-isSet`}
+                    checked={
+                        values[key as keyof ConfluencePerPageUIValues]
+                            .isSet as boolean
+                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        handleChange(
+                            key,
+                            e.target.checked,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            true,
+                        )
+                    }
+                />
+            </td>
+        </tr>
+        <tr key={`${key}-errors`}>
+            {(errors[key]?.length ?? 0) > 0 && (
+                <td colSpan={3}>
+                    <div className="error" style={styles.errorTd}>
+                        {(errors[key] ?? []).map((error) => (
+                            <p key={error.message}>{error.message}</p>
+                        ))}
+                    </div>
+                </td>
+            )}
+        </tr>
+    </>
 );
 
 const renderArrayText = (
-	key: string,
-	config: ConfluencePageConfig.FrontmatterConfig<string[], "array-text">,
-	values: ConfluencePerPageUIValues,
-	errors: Record<string, Error[]>,
-	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+    key: string,
+    config: ConfluencePageConfig.FrontmatterConfig<string[], "array-text">,
+    values: ConfluencePerPageUIValues,
+    errors: Record<string, Error[]>,
+    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-	<>
-		<tr key={key}>
-			<td>
-				<label htmlFor={key}>{config.key}</label>
-			</td>
-			<td>
-				{(
-					values[key as keyof ConfluencePerPageUIValues]
-						.value as unknown as string[]
-				).map((value, index) => (
-					<input
-						key={`${key}-${index}`}
-						type="text"
-						value={value}
-						onChange={(e: ChangeEvent<HTMLInputElement>) => {
-							const newArray = [
-								...(values[
-									key as keyof ConfluencePerPageUIValues
-								].value as unknown as string[]),
-							];
-							newArray[index] = e.target.value;
-							handleChange(
-								key,
-								newArray,
-								config.inputValidator,
-								setValues,
-								setErrors,
-								false,
-							);
-						}}
-					/>
-				))}
-				<button
-					type="button"
-					onClick={() => {
-						const newArray = [
-							...(values[key as keyof ConfluencePerPageUIValues]
-								.value as string[]),
-							"",
-						];
-						handleChange(
-							key,
-							newArray,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							false,
-						);
-					}}
-				>
-					+
-				</button>
-			</td>
-			<td>
-				<input
-					type="checkbox"
-					id={`${key}-isSet`}
-					checked={
-						values[key as keyof ConfluencePerPageUIValues]
-							.isSet as boolean
-					}
-					onChange={(e: ChangeEvent<HTMLInputElement>) =>
-						handleChange(
-							key,
-							e.target.checked,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							true,
-						)
-					}
-				/>
-			</td>
-		</tr>
-		<tr key={`${key}-errors`}>
-			{(errors[key]?.length ?? 0) > 0 && (
-				<td colSpan={3}>
-					<div className="error" style={styles.errorTd}>
-						{(errors[key] ?? []).map((error) => (
-							<p key={error.message}>{error.message}</p>
-						))}
-					</div>
-				</td>
-			)}
-		</tr>
-	</>
+    <>
+        <tr key={key}>
+            <td>
+                <label htmlFor={key}>{config.key}</label>
+            </td>
+            <td>
+                {(
+                    values[key as keyof ConfluencePerPageUIValues]
+                        .value as unknown as string[]
+                ).map((value, index) => (
+                    <input
+                        key={`${key}-${index}`}
+                        type="text"
+                        value={value}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                            const newArray = [
+                                ...(values[
+                                    key as keyof ConfluencePerPageUIValues
+                                    ].value as unknown as string[]),
+                            ];
+                            newArray[index] = e.target.value;
+                            handleChange(
+                                key,
+                                newArray,
+                                config.inputValidator,
+                                setValues,
+                                setErrors,
+                                false,
+                            );
+                        }}
+                    />
+                ))}
+                <button
+                    type="button"
+                    onClick={() => {
+                        const newArray = [
+                            ...(values[key as keyof ConfluencePerPageUIValues]
+                                .value as string[]),
+                            "",
+                        ];
+                        handleChange(
+                            key,
+                            newArray,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            false,
+                        );
+                    }}
+                >
+                    +
+                </button>
+            </td>
+            <td>
+                <input
+                    type="checkbox"
+                    id={`${key}-isSet`}
+                    checked={
+                        values[key as keyof ConfluencePerPageUIValues]
+                            .isSet as boolean
+                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        handleChange(
+                            key,
+                            e.target.checked,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            true,
+                        )
+                    }
+                />
+            </td>
+        </tr>
+        <tr key={`${key}-errors`}>
+            {(errors[key]?.length ?? 0) > 0 && (
+                <td colSpan={3}>
+                    <div className="error" style={styles.errorTd}>
+                        {(errors[key] ?? []).map((error) => (
+                            <p key={error.message}>{error.message}</p>
+                        ))}
+                    </div>
+                </td>
+            )}
+        </tr>
+    </>
 );
 
 const renderBoolean = (
-	key: string,
-	config: ConfluencePageConfig.FrontmatterConfig<boolean, "boolean">,
-	values: ConfluencePerPageUIValues,
-	errors: Record<string, Error[]>,
-	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+    key: string,
+    config: ConfluencePageConfig.FrontmatterConfig<boolean, "boolean">,
+    values: ConfluencePerPageUIValues,
+    errors: Record<string, Error[]>,
+    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-	<>
-		<tr key={key}>
-			<td>
-				<label htmlFor={key}>{config.key}</label>
-			</td>
-			<td>
-				<input
-					type="checkbox"
-					id={key}
-					checked={
-						values[key as keyof ConfluencePerPageUIValues]
-							.value as boolean
-					}
-					onChange={(e: ChangeEvent<HTMLInputElement>) =>
-						handleChange(
-							key,
-							e.target.checked,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							false,
-						)
-					}
-				/>
-			</td>
-			<td>
-				<input
-					type="checkbox"
-					id={`${key}-isSet`}
-					checked={
-						values[key as keyof ConfluencePerPageUIValues]
-							.isSet as boolean
-					}
-					onChange={(e: ChangeEvent<HTMLInputElement>) =>
-						handleChange(
-							key,
-							e.target.checked,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							true,
-						)
-					}
-				/>
-			</td>
-		</tr>
-		<tr key={`${key}-errors`}>
-			{(errors[key]?.length ?? 0) > 0 && (
-				<td colSpan={3}>
-					<div className="error" style={styles.errorTd}>
-						{(errors[key] ?? []).map((error) => (
-							<p key={error.message}>{error.message}</p>
-						))}
-					</div>
-				</td>
-			)}
-		</tr>
-	</>
+    <>
+        <tr key={key}>
+            <td>
+                <label htmlFor={key}>{config.key}</label>
+            </td>
+            <td>
+                <input
+                    type="checkbox"
+                    id={key}
+                    checked={
+                        values[key as keyof ConfluencePerPageUIValues]
+                            .value as boolean
+                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        handleChange(
+                            key,
+                            e.target.checked,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            false,
+                        )
+                    }
+                />
+            </td>
+            <td>
+                <input
+                    type="checkbox"
+                    id={`${key}-isSet`}
+                    checked={
+                        values[key as keyof ConfluencePerPageUIValues]
+                            .isSet as boolean
+                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        handleChange(
+                            key,
+                            e.target.checked,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            true,
+                        )
+                    }
+                />
+            </td>
+        </tr>
+        <tr key={`${key}-errors`}>
+            {(errors[key]?.length ?? 0) > 0 && (
+                <td colSpan={3}>
+                    <div className="error" style={styles.errorTd}>
+                        {(errors[key] ?? []).map((error) => (
+                            <p key={error.message}>{error.message}</p>
+                        ))}
+                    </div>
+                </td>
+            )}
+        </tr>
+    </>
 );
 const renderOptions = (
-	key: string,
-	config: ConfluencePageConfig.FrontmatterConfig<
-		ConfluencePageConfig.PageContentType,
-		"options"
-	>,
-	values: ConfluencePerPageUIValues,
-	errors: Record<string, Error[]>,
-	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+    key: string,
+    config: ConfluencePageConfig.FrontmatterConfig<
+        ConfluencePageConfig.PageContentType,
+        "options"
+    >,
+    values: ConfluencePerPageUIValues,
+    errors: Record<string, Error[]>,
+    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-	<>
-		<tr key={key}>
-			<td>
-				<label htmlFor={key}>{config.key}</label>
-			</td>
-			<td>
-				<select
-					id={key}
-					value={
-						values[key as keyof ConfluencePerPageUIValues]
-							.value as ConfluencePageConfig.PageContentType
-					}
-					onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-						handleChange(
-							key,
-							e.target
-								.value as ConfluencePageConfig.PageContentType,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							false,
-						)
-					}
-				>
-					{config.selectOptions.map((option) => (
-						<option key={option} value={option}>
-							{option}
-						</option>
-					))}
-				</select>
-			</td>
-			<td>
-				<input
-					type="checkbox"
-					id={`${key}-isSet`}
-					checked={
-						values[key as keyof ConfluencePerPageUIValues]
-							.isSet as boolean
-					}
-					onChange={(e: ChangeEvent<HTMLInputElement>) =>
-						handleChange(
-							key,
-							e.target.checked,
-							config.inputValidator,
-							setValues,
-							setErrors,
-							true,
-						)
-					}
-				/>
-			</td>
-		</tr>
-		<tr key={`${key}-errors`}>
-			{(errors[key]?.length ?? 0) > 0 && (
-				<td colSpan={3}>
-					<div className="error" style={styles.errorTd}>
-						{(errors[key] ?? []).map((error) => (
-							<p key={error.message}>{error.message}</p>
-						))}
-					</div>
-				</td>
-			)}
-		</tr>
-	</>
+    <>
+        <tr key={key}>
+            <td>
+                <label htmlFor={key}>{config.key}</label>
+            </td>
+            <td>
+                <select
+                    id={key}
+                    value={
+                        values[key as keyof ConfluencePerPageUIValues]
+                            .value as ConfluencePageConfig.PageContentType
+                    }
+                    onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+                        handleChange(
+                            key,
+                            e.target
+                                .value as ConfluencePageConfig.PageContentType,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            false,
+                        )
+                    }
+                >
+                    {config.selectOptions.map((option) => (
+                        <option key={option} value={option}>
+                            {option}
+                        </option>
+                    ))}
+                </select>
+            </td>
+            <td>
+                <input
+                    type="checkbox"
+                    id={`${key}-isSet`}
+                    checked={
+                        values[key as keyof ConfluencePerPageUIValues]
+                            .isSet as boolean
+                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                        handleChange(
+                            key,
+                            e.target.checked,
+                            config.inputValidator,
+                            setValues,
+                            setErrors,
+                            true,
+                        )
+                    }
+                />
+            </td>
+        </tr>
+        <tr key={`${key}-errors`}>
+            {(errors[key]?.length ?? 0) > 0 && (
+                <td colSpan={3}>
+                    <div className="error" style={styles.errorTd}>
+                        {(errors[key] ?? []).map((error) => (
+                            <p key={error.message}>{error.message}</p>
+                        ))}
+                    </div>
+                </td>
+            )}
+        </tr>
+    </>
 );
 
 const ConfluenceForm: React.FC<FormProps> = ({
-	config,
-	initialValues,
-	onSubmit,
-}) => {
-	const [values, setValues] =
-		useState<ConfluencePerPageUIValues>(initialValues);
-	const [errors, setErrors] = useState<Record<string, Error[]>>({});
+                                                 config,
+                                                 initialValues,
+                                                 onSubmit,
+                                             }: { config: any, initialValues: any, onSubmit: any }) => {
+    const [values, setValues] =
+        useState<ConfluencePerPageUIValues>(initialValues);
+    const [errors, setErrors] = useState<Record<string, Error[]>>({});
 
-	const handleSubmit = (e: React.FormEvent) => {
-		e.preventDefault();
-		onSubmit(values as ConfluencePerPageUIValues);
-	};
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSubmit(values as ConfluencePerPageUIValues);
+    };
 
-	return (
-		<form onSubmit={handleSubmit}>
-			<h1>Update Confluence Page Settings</h1>
-			<table>
-				<thead>
-					<tr>
-						<td>YAML Key</td>
-						<td>Value</td>
-						<td>Update</td>
-					</tr>
-				</thead>
-				<tbody>
-					{Object.entries(config).map(([key, config]) => {
-						switch (config.inputType) {
-							case "text":
-								return renderTextInput(
-									key,
-									config as ConfluencePageConfig.FrontmatterConfig<
-										string,
-										"text"
-									>,
-									values,
-									errors,
-									setValues,
-									setErrors,
-								);
-							case "array-text":
-								return renderArrayText(
-									key,
-									config as ConfluencePageConfig.FrontmatterConfig<
-										string[],
-										"array-text"
-									>,
-									values,
-									errors,
-									setValues,
-									setErrors,
-								);
-							case "boolean":
-								return renderBoolean(
-									key,
-									config as ConfluencePageConfig.FrontmatterConfig<
-										boolean,
-										"boolean"
-									>,
-									values,
-									errors,
-									setValues,
-									setErrors,
-								);
-							case "options":
-								return renderOptions(
-									key,
-									config as ConfluencePageConfig.FrontmatterConfig<
-										ConfluencePageConfig.PageContentType,
-										"options"
-									>,
-									values,
-									errors,
-									setValues,
-									setErrors,
-								);
-							default:
-								return null;
-						}
-					})}
-				</tbody>
-			</table>
-			<button type="submit">Submit</button>
-		</form>
-	);
+    return (
+        <form onSubmit={handleSubmit}>
+            <h1>Update Confluence Page Settings</h1>
+            <table>
+                <thead>
+                <tr>
+                    <td>YAML Key</td>
+                    <td>Value</td>
+                    <td>Update</td>
+                </tr>
+                </thead>
+                <tbody>
+                {Object.entries(config).map(([key, config]: [string, any]) => {
+                    switch (config.inputType) {
+                        case "text":
+                            return renderTextInput(
+                                key,
+                                config as ConfluencePageConfig.FrontmatterConfig<
+                                    string,
+                                    "text"
+                                >,
+                                values,
+                                errors,
+                                setValues,
+                                setErrors,
+                            );
+                        case "array-text":
+                            return renderArrayText(
+                                key,
+                                config as ConfluencePageConfig.FrontmatterConfig<
+                                    string[],
+                                    "array-text"
+                                >,
+                                values,
+                                errors,
+                                setValues,
+                                setErrors,
+                            );
+                        case "boolean":
+                            return renderBoolean(
+                                key,
+                                config as ConfluencePageConfig.FrontmatterConfig<
+                                    boolean,
+                                    "boolean"
+                                >,
+                                values,
+                                errors,
+                                setValues,
+                                setErrors,
+                            );
+                        case "options":
+                            return renderOptions(
+                                key,
+                                config as ConfluencePageConfig.FrontmatterConfig<
+                                    ConfluencePageConfig.PageContentType,
+                                    "options"
+                                >,
+                                values,
+                                errors,
+                                setValues,
+                                setErrors,
+                            );
+                        default:
+                            return null;
+                    }
+                })}
+                </tbody>
+            </table>
+            <button type="submit">Submit</button>
+        </form>
+    );
 };
 
 export class ConfluencePerPageForm extends Modal {
-	modalProps: ModalProps;
+    modalProps: ModalProps;
 
-	constructor(app: App, modalProps: ModalProps) {
-		super(app);
-		this.modalProps = modalProps;
-	}
+    constructor(app: App, modalProps: ModalProps) {
+        super(app);
+        this.modalProps = modalProps;
+    }
 
-	override onOpen() {
-		const { contentEl } = this;
-		const test: FormProps = {
-			...this.modalProps,
-			onSubmit: (values) => {
-				const boundClose = this.close.bind(this);
-				this.modalProps.onSubmit(values, boundClose);
-			},
-		};
-		ReactDOM.render(React.createElement(ConfluenceForm, test), contentEl);
-	}
+    override onOpen() {
+        const {contentEl} = this;
+        const test: FormProps = {
+            ...this.modalProps,
+            onSubmit: (values) => {
+                const boundClose = this.close.bind(this);
+                this.modalProps.onSubmit(values, boundClose);
+            },
+        };
+        ReactDOM.render(React.createElement(ConfluenceForm, test), contentEl);
+    }
 
-	override onClose() {
-		const { contentEl } = this;
-		ReactDOM.unmountComponentAtNode(contentEl);
-		contentEl.empty();
-	}
+    override onClose() {
+        const {contentEl} = this;
+        ReactDOM.unmountComponentAtNode(contentEl);
+        contentEl.empty();
+    }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 4979bd6..1f49485 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
     "importHelpers": true,
     "isolatedModules": true,
     "strictNullChecks": true,
+    "allowSyntheticDefaultImports": true,
     "lib": [
       "DOM",
       "ES5",
diff --git a/versions.json b/versions.json
index f671e66..8218806 100644
--- a/versions.json
+++ b/versions.json
@@ -1,3 +1,3 @@
 {
-  "1.0.0": "0.15.0"
+  "5.5.3": "1.0.0"
 }
\ No newline at end of file

From 265e8dc4adfb17be24a66c87d6b18350f468cda7 Mon Sep 17 00:00:00 2001
From: jferg <justin@seesaw.me>
Date: Tue, 29 Oct 2024 10:48:38 -0600
Subject: [PATCH 3/6] Removing some unnecessary changes.

---
 esbuild.config.mjs | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index b58be3f..743c40e 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -18,26 +18,26 @@ const context = await esbuild.context({
 	entryPoints: ["src/main.ts"],
 	bundle: true,
 	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",
+		'obsidian',
+		'electron',
+		'@codemirror/autocomplete',
+		'@codemirror/collab',
+		'@codemirror/commands',
+		'@codemirror/language',
+		'@codemirror/lint',
+		'@codemirror/search',
+		'@codemirror/state',
+		'@codemirror/view',
+		'@lezer/common',
+		'@lezer/highlight',
+		'@lezer/lr',
 		...builtins],
-	format: "cjs",
-	target: "es2018",
+	format: 'cjs',
+	target: 'es2018',
 	logLevel: "info",
-	sourcemap: prod ? false : "inline",
+	sourcemap: prod ? false : 'inline',
 	treeShaking: true,
-	outdir: 'dist',
+	outdir: prod ? 'dist' : 'dev-dist',
 	mainFields: ['module', 'main'],
 	minify: true,
 	metafile: true,

From fb558c4a231bac7e79346f003b63ce0b85f62e49 Mon Sep 17 00:00:00 2001
From: jferg <justin@seesaw.me>
Date: Tue, 29 Oct 2024 11:06:26 -0600
Subject: [PATCH 4/6] Fixing versioning, other minor cleanups.

---
 esbuild.config.mjs | 4 ++--
 manifest.json      | 4 ++--
 package.json       | 2 +-
 versions.json      | 3 ++-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index 743c40e..6316958 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -9,13 +9,13 @@ if you want to view the source, please visit the github repository of this plugi
 */
 `;
 
-const prod = (process.argv[2] === "production");
+const prod = (process.argv[2] === 'production');
 
 const context = await esbuild.context({
 	banner: {
 		js: banner,
 	},
-	entryPoints: ["src/main.ts"],
+	entryPoints: ['src/main.ts'],
 	bundle: true,
 	external: [
 		'obsidian',
diff --git a/manifest.json b/manifest.json
index a41f281..d5079c8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,10 +1,10 @@
 {
 	"id": "confluence-integration",
 	"name": "Confluence Integration",
-	"version": "5.5.2",
+	"version": "5.5.3",
 	"minAppVersion": "1.0.0",
 	"description": "This plugin allows you to publish your notes to Confluence",
 	"author": "andymac4182",
 	"authorUrl": "https://github.com/andymac4182",
 	"isDesktopOnly": true
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index c22ad1d..84525df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "obsidian-confluence",
-    "version": "5.5.2",
+    "version": "5.5.3",
     "description": "This library allows you to publish your notes to Confluence",
     "main": "main.js",
     "type": "module",
diff --git a/versions.json b/versions.json
index 8218806..fe52713 100644
--- a/versions.json
+++ b/versions.json
@@ -1,3 +1,4 @@
 {
-  "5.5.3": "1.0.0"
+	"5.5.3": "1.0.0",
+	"5.5.2": "1.0.0"
 }
\ No newline at end of file

From 1ecfbc6f019e90b97d5406c0a52e53a2e8179ac2 Mon Sep 17 00:00:00 2001
From: jferg <justin@seesaw.me>
Date: Tue, 29 Oct 2024 11:23:31 -0600
Subject: [PATCH 5/6] Cleaning up tabs vs. spaces.

---
 src/ConfluencePerPageForm.tsx | 944 +++++++++++++++++-----------------
 1 file changed, 472 insertions(+), 472 deletions(-)

diff --git a/src/ConfluencePerPageForm.tsx b/src/ConfluencePerPageForm.tsx
index bfe7a2b..fbf5d7c 100644
--- a/src/ConfluencePerPageForm.tsx
+++ b/src/ConfluencePerPageForm.tsx
@@ -5,523 +5,523 @@ import {ConfluencePageConfig} from "@markdown-confluence/lib";
 import {Property} from "csstype";
 
 export type ConfluencePerPageUIValues = {
-    [K in keyof ConfluencePageConfig.ConfluencePerPageConfig]: {
-        value:
-            | ConfluencePageConfig.ConfluencePerPageConfig[K]["default"]
-            | undefined;
-        isSet: boolean;
-    };
+	[K in keyof ConfluencePageConfig.ConfluencePerPageConfig]: {
+	    value:
+	   	 | ConfluencePageConfig.ConfluencePerPageConfig[K]["default"]
+	   	 | undefined;
+	    isSet: boolean;
+	};
 };
 
 export function mapFrontmatterToConfluencePerPageUIValues(
-    frontmatter: FrontMatterCache | undefined,
+	frontmatter: FrontMatterCache | undefined,
 ): ConfluencePerPageUIValues {
-    const config = ConfluencePageConfig.conniePerPageConfig;
-    const result: Partial<ConfluencePerPageUIValues> = {};
+	const config = ConfluencePageConfig.conniePerPageConfig;
+	const result: Partial<ConfluencePerPageUIValues> = {};
 
-    if (!frontmatter) {
-        throw new Error("Missing frontmatter");
-    }
+	if (!frontmatter) {
+	    throw new Error("Missing frontmatter");
+	}
 
-    for (const propertyKey in config) {
-        if (config.hasOwnProperty(propertyKey)) {
-            const {
-                key,
-                inputType,
-                default: defaultValue,
-            } = config[
-                propertyKey as keyof ConfluencePageConfig.ConfluencePerPageConfig
-                ];
-            const frontmatterValue = frontmatter[key];
+	for (const propertyKey in config) {
+	    if (config.hasOwnProperty(propertyKey)) {
+	   	 const {
+	   	     key,
+	   	     inputType,
+	   	     default: defaultValue,
+	   	 } = config[
+	   	     propertyKey as keyof ConfluencePageConfig.ConfluencePerPageConfig
+	   	     ];
+	   	 const frontmatterValue = frontmatter[key];
 
-            if (frontmatterValue !== undefined) {
-                result[propertyKey as keyof ConfluencePerPageUIValues] = {
-                    value: frontmatterValue,
-                    isSet: true,
-                };
-            } else {
-                switch (inputType) {
-                    case "options":
-                    case "array-text":
-                        result[propertyKey as keyof ConfluencePerPageUIValues] =
-                            // @ts-ignore
-                            {value: defaultValue as never, isSet: false};
-                        break;
-                    case "boolean":
-                    case "text":
-                        result[propertyKey as keyof ConfluencePerPageUIValues] =
-                            // @ts-ignore
-                            {value: undefined, isSet: false};
-                        break;
-                    default:
-                        throw new Error("Missing case for inputType");
-                }
-            }
-        }
-    }
-    return result as ConfluencePerPageUIValues;
+	   	 if (frontmatterValue !== undefined) {
+	   	     result[propertyKey as keyof ConfluencePerPageUIValues] = {
+	   	   	  value: frontmatterValue,
+	   	   	  isSet: true,
+	   	     };
+	   	 } else {
+	   	     switch (inputType) {
+	   	   	  case "options":
+	   	   	  case "array-text":
+	   	   	      result[propertyKey as keyof ConfluencePerPageUIValues] =
+	   	   	   	   // @ts-ignore
+	   	   	   	   {value: defaultValue as never, isSet: false};
+	   	   	      break;
+	   	   	  case "boolean":
+	   	   	  case "text":
+	   	   	      result[propertyKey as keyof ConfluencePerPageUIValues] =
+	   	   	   	   // @ts-ignore
+	   	   	   	   {value: undefined, isSet: false};
+	   	   	      break;
+	   	   	  default:
+	   	   	      throw new Error("Missing case for inputType");
+	   	     }
+	   	 }
+	    }
+	}
+	return result as ConfluencePerPageUIValues;
 }
 
 interface FormProps {
-    config: ConfluencePageConfig.ConfluencePerPageConfig;
-    initialValues: ConfluencePerPageUIValues;
-    onSubmit: (values: ConfluencePerPageUIValues) => void;
+	config: ConfluencePageConfig.ConfluencePerPageConfig;
+	initialValues: ConfluencePerPageUIValues;
+	onSubmit: (values: ConfluencePerPageUIValues) => void;
 }
 
 interface ModalProps {
-    config: ConfluencePageConfig.ConfluencePerPageConfig;
-    initialValues: ConfluencePerPageUIValues;
-    onSubmit: (values: ConfluencePerPageUIValues, close: () => void) => void;
+	config: ConfluencePageConfig.ConfluencePerPageConfig;
+	initialValues: ConfluencePerPageUIValues;
+	onSubmit: (values: ConfluencePerPageUIValues, close: () => void) => void;
 }
 
 const handleChange = (
-    key: string,
-    value: unknown,
-    inputValidator: ConfluencePageConfig.InputValidator<unknown>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
-    isSetValue: boolean,
+	key: string,
+	value: unknown,
+	inputValidator: ConfluencePageConfig.InputValidator<unknown>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	isSetValue: boolean,
 ) => {
-    const validationResult = inputValidator(value);
+	const validationResult = inputValidator(value);
 
-    setValues((prevValues: any) => ({
-        ...prevValues,
-        [key]: {
-            ...prevValues[key as keyof ConfluencePerPageUIValues],
-            ...(isSetValue ? {isSet: value} : {value}),
-        },
-    }));
-    setErrors((prevErrors: any) => ({
-        ...prevErrors,
-        [key]: validationResult.valid ? [] : validationResult.errors,
-    }));
+	setValues((prevValues: any) => ({
+	    ...prevValues,
+	    [key]: {
+	   	 ...prevValues[key as keyof ConfluencePerPageUIValues],
+	   	 ...(isSetValue ? {isSet: value} : {value}),
+	    },
+	}));
+	setErrors((prevErrors: any) => ({
+	    ...prevErrors,
+	    [key]: validationResult.valid ? [] : validationResult.errors,
+	}));
 };
 
 const styles = {
-    errorTd: {
-        columnSpan: "all" as Property.ColumnSpan,
-        color: "red",
-    },
+	errorTd: {
+	    columnSpan: "all" as Property.ColumnSpan,
+	    color: "red",
+	},
 };
 
 const renderTextInput = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<string, "text">,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<string, "text">,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                <input
-                    type="text"
-                    id={key}
-                    value={
-                        (values[key as keyof ConfluencePerPageUIValues]
-                            .value as string) ?? ""
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.value,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        )
-                    }
-                />
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+	    <tr key={key}>
+	   	 <td>
+	   	     <label htmlFor={key}>{config.key}</label>
+	   	 </td>
+	   	 <td>
+	   	     <input
+	   	   	  type="text"
+	   	   	  id={key}
+	   	   	  value={
+	   	   	      (values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   .value as string) ?? ""
+	   	   	  }
+	   	   	  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   e.target.value,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   false,
+	   	   	      )
+	   	   	  }
+	   	     />
+	   	 </td>
+	   	 <td>
+	   	     <input
+	   	   	  type="checkbox"
+	   	   	  id={`${key}-isSet`}
+	   	   	  checked={
+	   	   	      values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   .isSet as boolean
+	   	   	  }
+	   	   	  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   e.target.checked,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   true,
+	   	   	      )
+	   	   	  }
+	   	     />
+	   	 </td>
+	    </tr>
+	    <tr key={`${key}-errors`}>
+	   	 {(errors[key]?.length ?? 0) > 0 && (
+	   	     <td colSpan={3}>
+	   	   	  <div className="error" style={styles.errorTd}>
+	   	   	      {(errors[key] ?? []).map((error) => (
+	   	   	   	   <p key={error.message}>{error.message}</p>
+	   	   	      ))}
+	   	   	  </div>
+	   	     </td>
+	   	 )}
+	    </tr>
+	</>
 );
 
 const renderArrayText = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<string[], "array-text">,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<string[], "array-text">,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                {(
-                    values[key as keyof ConfluencePerPageUIValues]
-                        .value as unknown as string[]
-                ).map((value, index) => (
-                    <input
-                        key={`${key}-${index}`}
-                        type="text"
-                        value={value}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                            const newArray = [
-                                ...(values[
-                                    key as keyof ConfluencePerPageUIValues
-                                    ].value as unknown as string[]),
-                            ];
-                            newArray[index] = e.target.value;
-                            handleChange(
-                                key,
-                                newArray,
-                                config.inputValidator,
-                                setValues,
-                                setErrors,
-                                false,
-                            );
-                        }}
-                    />
-                ))}
-                <button
-                    type="button"
-                    onClick={() => {
-                        const newArray = [
-                            ...(values[key as keyof ConfluencePerPageUIValues]
-                                .value as string[]),
-                            "",
-                        ];
-                        handleChange(
-                            key,
-                            newArray,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        );
-                    }}
-                >
-                    +
-                </button>
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+	    <tr key={key}>
+	   	 <td>
+	   	     <label htmlFor={key}>{config.key}</label>
+	   	 </td>
+	   	 <td>
+	   	     {(
+	   	   	  values[key as keyof ConfluencePerPageUIValues]
+	   	   	      .value as unknown as string[]
+	   	     ).map((value, index) => (
+	   	   	  <input
+	   	   	      key={`${key}-${index}`}
+	   	   	      type="text"
+	   	   	      value={value}
+	   	   	      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+	   	   	   	   const newArray = [
+	   	   	   	   	...(values[
+	   	   	   	   	    key as keyof ConfluencePerPageUIValues
+	   	   	   	   	    ].value as unknown as string[]),
+	   	   	   	   ];
+	   	   	   	   newArray[index] = e.target.value;
+	   	   	   	   handleChange(
+	   	   	   	   	key,
+	   	   	   	   	newArray,
+	   	   	   	   	config.inputValidator,
+	   	   	   	   	setValues,
+	   	   	   	   	setErrors,
+	   	   	   	   	false,
+	   	   	   	   );
+	   	   	      }}
+	   	   	  />
+	   	     ))}
+	   	     <button
+	   	   	  type="button"
+	   	   	  onClick={() => {
+	   	   	      const newArray = [
+	   	   	   	   ...(values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   	.value as string[]),
+	   	   	   	   "",
+	   	   	      ];
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   newArray,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   false,
+	   	   	      );
+	   	   	  }}
+	   	     >
+	   	   	  +
+	   	     </button>
+	   	 </td>
+	   	 <td>
+	   	     <input
+	   	   	  type="checkbox"
+	   	   	  id={`${key}-isSet`}
+	   	   	  checked={
+	   	   	      values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   .isSet as boolean
+	   	   	  }
+	   	   	  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   e.target.checked,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   true,
+	   	   	      )
+	   	   	  }
+	   	     />
+	   	 </td>
+	    </tr>
+	    <tr key={`${key}-errors`}>
+	   	 {(errors[key]?.length ?? 0) > 0 && (
+	   	     <td colSpan={3}>
+	   	   	  <div className="error" style={styles.errorTd}>
+	   	   	      {(errors[key] ?? []).map((error) => (
+	   	   	   	   <p key={error.message}>{error.message}</p>
+	   	   	      ))}
+	   	   	  </div>
+	   	     </td>
+	   	 )}
+	    </tr>
+	</>
 );
 
 const renderBoolean = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<boolean, "boolean">,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<boolean, "boolean">,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={key}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .value as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        )
-                    }
-                />
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+	    <tr key={key}>
+	   	 <td>
+	   	     <label htmlFor={key}>{config.key}</label>
+	   	 </td>
+	   	 <td>
+	   	     <input
+	   	   	  type="checkbox"
+	   	   	  id={key}
+	   	   	  checked={
+	   	   	      values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   .value as boolean
+	   	   	  }
+	   	   	  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   e.target.checked,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   false,
+	   	   	      )
+	   	   	  }
+	   	     />
+	   	 </td>
+	   	 <td>
+	   	     <input
+	   	   	  type="checkbox"
+	   	   	  id={`${key}-isSet`}
+	   	   	  checked={
+	   	   	      values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   .isSet as boolean
+	   	   	  }
+	   	   	  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   e.target.checked,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   true,
+	   	   	      )
+	   	   	  }
+	   	     />
+	   	 </td>
+	    </tr>
+	    <tr key={`${key}-errors`}>
+	   	 {(errors[key]?.length ?? 0) > 0 && (
+	   	     <td colSpan={3}>
+	   	   	  <div className="error" style={styles.errorTd}>
+	   	   	      {(errors[key] ?? []).map((error) => (
+	   	   	   	   <p key={error.message}>{error.message}</p>
+	   	   	      ))}
+	   	   	  </div>
+	   	     </td>
+	   	 )}
+	    </tr>
+	</>
 );
 const renderOptions = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<
-        ConfluencePageConfig.PageContentType,
-        "options"
-    >,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<
+	    ConfluencePageConfig.PageContentType,
+	    "options"
+	>,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                <select
-                    id={key}
-                    value={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .value as ConfluencePageConfig.PageContentType
-                    }
-                    onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-                        handleChange(
-                            key,
-                            e.target
-                                .value as ConfluencePageConfig.PageContentType,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        )
-                    }
-                >
-                    {config.selectOptions.map((option) => (
-                        <option key={option} value={option}>
-                            {option}
-                        </option>
-                    ))}
-                </select>
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+	    <tr key={key}>
+	   	 <td>
+	   	     <label htmlFor={key}>{config.key}</label>
+	   	 </td>
+	   	 <td>
+	   	     <select
+	   	   	  id={key}
+	   	   	  value={
+	   	   	      values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   .value as ConfluencePageConfig.PageContentType
+	   	   	  }
+	   	   	  onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   e.target
+	   	   	   	   	.value as ConfluencePageConfig.PageContentType,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   false,
+	   	   	      )
+	   	   	  }
+	   	     >
+	   	   	  {config.selectOptions.map((option) => (
+	   	   	      <option key={option} value={option}>
+	   	   	   	   {option}
+	   	   	      </option>
+	   	   	  ))}
+	   	     </select>
+	   	 </td>
+	   	 <td>
+	   	     <input
+	   	   	  type="checkbox"
+	   	   	  id={`${key}-isSet`}
+	   	   	  checked={
+	   	   	      values[key as keyof ConfluencePerPageUIValues]
+	   	   	   	   .isSet as boolean
+	   	   	  }
+	   	   	  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+	   	   	      handleChange(
+	   	   	   	   key,
+	   	   	   	   e.target.checked,
+	   	   	   	   config.inputValidator,
+	   	   	   	   setValues,
+	   	   	   	   setErrors,
+	   	   	   	   true,
+	   	   	      )
+	   	   	  }
+	   	     />
+	   	 </td>
+	    </tr>
+	    <tr key={`${key}-errors`}>
+	   	 {(errors[key]?.length ?? 0) > 0 && (
+	   	     <td colSpan={3}>
+	   	   	  <div className="error" style={styles.errorTd}>
+	   	   	      {(errors[key] ?? []).map((error) => (
+	   	   	   	   <p key={error.message}>{error.message}</p>
+	   	   	      ))}
+	   	   	  </div>
+	   	     </td>
+	   	 )}
+	    </tr>
+	</>
 );
 
 const ConfluenceForm: React.FC<FormProps> = ({
-                                                 config,
-                                                 initialValues,
-                                                 onSubmit,
-                                             }: { config: any, initialValues: any, onSubmit: any }) => {
-    const [values, setValues] =
-        useState<ConfluencePerPageUIValues>(initialValues);
-    const [errors, setErrors] = useState<Record<string, Error[]>>({});
+	   	   	   	   	   	   	   config,
+	   	   	   	   	   	   	   initialValues,
+	   	   	   	   	   	   	   onSubmit,
+	   	   	   	   	   	      }: { config: any, initialValues: any, onSubmit: any }) => {
+	const [values, setValues] =
+	    useState<ConfluencePerPageUIValues>(initialValues);
+	const [errors, setErrors] = useState<Record<string, Error[]>>({});
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        onSubmit(values as ConfluencePerPageUIValues);
-    };
+	const handleSubmit = (e: React.FormEvent) => {
+	    e.preventDefault();
+	    onSubmit(values as ConfluencePerPageUIValues);
+	};
 
-    return (
-        <form onSubmit={handleSubmit}>
-            <h1>Update Confluence Page Settings</h1>
-            <table>
-                <thead>
-                <tr>
-                    <td>YAML Key</td>
-                    <td>Value</td>
-                    <td>Update</td>
-                </tr>
-                </thead>
-                <tbody>
-                {Object.entries(config).map(([key, config]: [string, any]) => {
-                    switch (config.inputType) {
-                        case "text":
-                            return renderTextInput(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    string,
-                                    "text"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        case "array-text":
-                            return renderArrayText(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    string[],
-                                    "array-text"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        case "boolean":
-                            return renderBoolean(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    boolean,
-                                    "boolean"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        case "options":
-                            return renderOptions(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    ConfluencePageConfig.PageContentType,
-                                    "options"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        default:
-                            return null;
-                    }
-                })}
-                </tbody>
-            </table>
-            <button type="submit">Submit</button>
-        </form>
-    );
+	return (
+	    <form onSubmit={handleSubmit}>
+	   	 <h1>Update Confluence Page Settings</h1>
+	   	 <table>
+	   	     <thead>
+	   	     <tr>
+	   	   	  <td>YAML Key</td>
+	   	   	  <td>Value</td>
+	   	   	  <td>Update</td>
+	   	     </tr>
+	   	     </thead>
+	   	     <tbody>
+	   	     {Object.entries(config).map(([key, config]: [string, any]) => {
+	   	   	  switch (config.inputType) {
+	   	   	      case "text":
+	   	   	   	   return renderTextInput(
+	   	   	   	   	key,
+	   	   	   	   	config as ConfluencePageConfig.FrontmatterConfig<
+	   	   	   	   	    string,
+	   	   	   	   	    "text"
+	   	   	   	   	>,
+	   	   	   	   	values,
+	   	   	   	   	errors,
+	   	   	   	   	setValues,
+	   	   	   	   	setErrors,
+	   	   	   	   );
+	   	   	      case "array-text":
+	   	   	   	   return renderArrayText(
+	   	   	   	   	key,
+	   	   	   	   	config as ConfluencePageConfig.FrontmatterConfig<
+	   	   	   	   	    string[],
+	   	   	   	   	    "array-text"
+	   	   	   	   	>,
+	   	   	   	   	values,
+	   	   	   	   	errors,
+	   	   	   	   	setValues,
+	   	   	   	   	setErrors,
+	   	   	   	   );
+	   	   	      case "boolean":
+	   	   	   	   return renderBoolean(
+	   	   	   	   	key,
+	   	   	   	   	config as ConfluencePageConfig.FrontmatterConfig<
+	   	   	   	   	    boolean,
+	   	   	   	   	    "boolean"
+	   	   	   	   	>,
+	   	   	   	   	values,
+	   	   	   	   	errors,
+	   	   	   	   	setValues,
+	   	   	   	   	setErrors,
+	   	   	   	   );
+	   	   	      case "options":
+	   	   	   	   return renderOptions(
+	   	   	   	   	key,
+	   	   	   	   	config as ConfluencePageConfig.FrontmatterConfig<
+	   	   	   	   	    ConfluencePageConfig.PageContentType,
+	   	   	   	   	    "options"
+	   	   	   	   	>,
+	   	   	   	   	values,
+	   	   	   	   	errors,
+	   	   	   	   	setValues,
+	   	   	   	   	setErrors,
+	   	   	   	   );
+	   	   	      default:
+	   	   	   	   return null;
+	   	   	  }
+	   	     })}
+	   	     </tbody>
+	   	 </table>
+	   	 <button type="submit">Submit</button>
+	    </form>
+	);
 };
 
 export class ConfluencePerPageForm extends Modal {
-    modalProps: ModalProps;
+	modalProps: ModalProps;
 
-    constructor(app: App, modalProps: ModalProps) {
-        super(app);
-        this.modalProps = modalProps;
-    }
+	constructor(app: App, modalProps: ModalProps) {
+	    super(app);
+	    this.modalProps = modalProps;
+	}
 
-    override onOpen() {
-        const {contentEl} = this;
-        const test: FormProps = {
-            ...this.modalProps,
-            onSubmit: (values) => {
-                const boundClose = this.close.bind(this);
-                this.modalProps.onSubmit(values, boundClose);
-            },
-        };
-        ReactDOM.render(React.createElement(ConfluenceForm, test), contentEl);
-    }
+	override onOpen() {
+	    const {contentEl} = this;
+	    const test: FormProps = {
+	   	 ...this.modalProps,
+	   	 onSubmit: (values) => {
+	   	     const boundClose = this.close.bind(this);
+	   	     this.modalProps.onSubmit(values, boundClose);
+	   	 },
+	    };
+	    ReactDOM.render(React.createElement(ConfluenceForm, test), contentEl);
+	}
 
-    override onClose() {
-        const {contentEl} = this;
-        ReactDOM.unmountComponentAtNode(contentEl);
-        contentEl.empty();
-    }
+	override onClose() {
+	    const {contentEl} = this;
+	    ReactDOM.unmountComponentAtNode(contentEl);
+	    contentEl.empty();
+	}
 }

From 056aa280f1fe7e01c40425b766f31ff37e77bbac Mon Sep 17 00:00:00 2001
From: jferg <justin@seesaw.me>
Date: Tue, 29 Oct 2024 11:23:31 -0600
Subject: [PATCH 6/6] Cleaning up tabs vs. spaces.

---
 src/ConfluencePerPageForm.tsx | 944 +++++++++++++++++-----------------
 1 file changed, 472 insertions(+), 472 deletions(-)

diff --git a/src/ConfluencePerPageForm.tsx b/src/ConfluencePerPageForm.tsx
index bfe7a2b..4d31dbb 100644
--- a/src/ConfluencePerPageForm.tsx
+++ b/src/ConfluencePerPageForm.tsx
@@ -5,523 +5,523 @@ import {ConfluencePageConfig} from "@markdown-confluence/lib";
 import {Property} from "csstype";
 
 export type ConfluencePerPageUIValues = {
-    [K in keyof ConfluencePageConfig.ConfluencePerPageConfig]: {
-        value:
-            | ConfluencePageConfig.ConfluencePerPageConfig[K]["default"]
-            | undefined;
-        isSet: boolean;
-    };
+	[K in keyof ConfluencePageConfig.ConfluencePerPageConfig]: {
+		value:
+			| ConfluencePageConfig.ConfluencePerPageConfig[K]["default"]
+			| undefined;
+		isSet: boolean;
+	};
 };
 
 export function mapFrontmatterToConfluencePerPageUIValues(
-    frontmatter: FrontMatterCache | undefined,
+	frontmatter: FrontMatterCache | undefined,
 ): ConfluencePerPageUIValues {
-    const config = ConfluencePageConfig.conniePerPageConfig;
-    const result: Partial<ConfluencePerPageUIValues> = {};
+	const config = ConfluencePageConfig.conniePerPageConfig;
+	const result: Partial<ConfluencePerPageUIValues> = {};
 
-    if (!frontmatter) {
-        throw new Error("Missing frontmatter");
-    }
+	if (!frontmatter) {
+		throw new Error("Missing frontmatter");
+	}
 
-    for (const propertyKey in config) {
-        if (config.hasOwnProperty(propertyKey)) {
-            const {
-                key,
-                inputType,
-                default: defaultValue,
-            } = config[
-                propertyKey as keyof ConfluencePageConfig.ConfluencePerPageConfig
-                ];
-            const frontmatterValue = frontmatter[key];
+	for (const propertyKey in config) {
+		if (config.hasOwnProperty(propertyKey)) {
+			const {
+				key,
+				inputType,
+				default: defaultValue,
+			} = config[
+				propertyKey as keyof ConfluencePageConfig.ConfluencePerPageConfig
+				];
+			const frontmatterValue = frontmatter[key];
 
-            if (frontmatterValue !== undefined) {
-                result[propertyKey as keyof ConfluencePerPageUIValues] = {
-                    value: frontmatterValue,
-                    isSet: true,
-                };
-            } else {
-                switch (inputType) {
-                    case "options":
-                    case "array-text":
-                        result[propertyKey as keyof ConfluencePerPageUIValues] =
-                            // @ts-ignore
-                            {value: defaultValue as never, isSet: false};
-                        break;
-                    case "boolean":
-                    case "text":
-                        result[propertyKey as keyof ConfluencePerPageUIValues] =
-                            // @ts-ignore
-                            {value: undefined, isSet: false};
-                        break;
-                    default:
-                        throw new Error("Missing case for inputType");
-                }
-            }
-        }
-    }
-    return result as ConfluencePerPageUIValues;
+			if (frontmatterValue !== undefined) {
+				result[propertyKey as keyof ConfluencePerPageUIValues] = {
+					value: frontmatterValue,
+					isSet: true,
+				};
+			} else {
+				switch (inputType) {
+					case "options":
+					case "array-text":
+						result[propertyKey as keyof ConfluencePerPageUIValues] =
+							// @ts-ignore
+							{value: defaultValue as never, isSet: false};
+						break;
+					case "boolean":
+					case "text":
+						result[propertyKey as keyof ConfluencePerPageUIValues] =
+							// @ts-ignore
+							{value: undefined, isSet: false};
+						break;
+					default:
+						throw new Error("Missing case for inputType");
+				}
+			}
+		}
+	}
+	return result as ConfluencePerPageUIValues;
 }
 
 interface FormProps {
-    config: ConfluencePageConfig.ConfluencePerPageConfig;
-    initialValues: ConfluencePerPageUIValues;
-    onSubmit: (values: ConfluencePerPageUIValues) => void;
+	config: ConfluencePageConfig.ConfluencePerPageConfig;
+	initialValues: ConfluencePerPageUIValues;
+	onSubmit: (values: ConfluencePerPageUIValues) => void;
 }
 
 interface ModalProps {
-    config: ConfluencePageConfig.ConfluencePerPageConfig;
-    initialValues: ConfluencePerPageUIValues;
-    onSubmit: (values: ConfluencePerPageUIValues, close: () => void) => void;
+	config: ConfluencePageConfig.ConfluencePerPageConfig;
+	initialValues: ConfluencePerPageUIValues;
+	onSubmit: (values: ConfluencePerPageUIValues, close: () => void) => void;
 }
 
 const handleChange = (
-    key: string,
-    value: unknown,
-    inputValidator: ConfluencePageConfig.InputValidator<unknown>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
-    isSetValue: boolean,
+	key: string,
+	value: unknown,
+	inputValidator: ConfluencePageConfig.InputValidator<unknown>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	isSetValue: boolean,
 ) => {
-    const validationResult = inputValidator(value);
+	const validationResult = inputValidator(value);
 
-    setValues((prevValues: any) => ({
-        ...prevValues,
-        [key]: {
-            ...prevValues[key as keyof ConfluencePerPageUIValues],
-            ...(isSetValue ? {isSet: value} : {value}),
-        },
-    }));
-    setErrors((prevErrors: any) => ({
-        ...prevErrors,
-        [key]: validationResult.valid ? [] : validationResult.errors,
-    }));
+	setValues((prevValues: any) => ({
+		...prevValues,
+		[key]: {
+			...prevValues[key as keyof ConfluencePerPageUIValues],
+			...(isSetValue ? {isSet: value} : {value}),
+		},
+	}));
+	setErrors((prevErrors: any) => ({
+		...prevErrors,
+		[key]: validationResult.valid ? [] : validationResult.errors,
+	}));
 };
 
 const styles = {
-    errorTd: {
-        columnSpan: "all" as Property.ColumnSpan,
-        color: "red",
-    },
+	errorTd: {
+		columnSpan: "all" as Property.ColumnSpan,
+		color: "red",
+	},
 };
 
 const renderTextInput = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<string, "text">,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<string, "text">,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                <input
-                    type="text"
-                    id={key}
-                    value={
-                        (values[key as keyof ConfluencePerPageUIValues]
-                            .value as string) ?? ""
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.value,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        )
-                    }
-                />
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+		<tr key={key}>
+			<td>
+				<label htmlFor={key}>{config.key}</label>
+			</td>
+			<td>
+				<input
+					type="text"
+					id={key}
+					value={
+						(values[key as keyof ConfluencePerPageUIValues]
+							.value as string) ?? ""
+					}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						handleChange(
+							key,
+							e.target.value,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							false,
+						)
+					}
+				/>
+			</td>
+			<td>
+				<input
+					type="checkbox"
+					id={`${key}-isSet`}
+					checked={
+						values[key as keyof ConfluencePerPageUIValues]
+							.isSet as boolean
+					}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						handleChange(
+							key,
+							e.target.checked,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							true,
+						)
+					}
+				/>
+			</td>
+		</tr>
+		<tr key={`${key}-errors`}>
+			{(errors[key]?.length ?? 0) > 0 && (
+				<td colSpan={3}>
+					<div className="error" style={styles.errorTd}>
+						{(errors[key] ?? []).map((error) => (
+							<p key={error.message}>{error.message}</p>
+						))}
+					</div>
+				</td>
+			)}
+		</tr>
+	</>
 );
 
 const renderArrayText = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<string[], "array-text">,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<string[], "array-text">,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                {(
-                    values[key as keyof ConfluencePerPageUIValues]
-                        .value as unknown as string[]
-                ).map((value, index) => (
-                    <input
-                        key={`${key}-${index}`}
-                        type="text"
-                        value={value}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                            const newArray = [
-                                ...(values[
-                                    key as keyof ConfluencePerPageUIValues
-                                    ].value as unknown as string[]),
-                            ];
-                            newArray[index] = e.target.value;
-                            handleChange(
-                                key,
-                                newArray,
-                                config.inputValidator,
-                                setValues,
-                                setErrors,
-                                false,
-                            );
-                        }}
-                    />
-                ))}
-                <button
-                    type="button"
-                    onClick={() => {
-                        const newArray = [
-                            ...(values[key as keyof ConfluencePerPageUIValues]
-                                .value as string[]),
-                            "",
-                        ];
-                        handleChange(
-                            key,
-                            newArray,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        );
-                    }}
-                >
-                    +
-                </button>
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+		<tr key={key}>
+			<td>
+				<label htmlFor={key}>{config.key}</label>
+			</td>
+			<td>
+				{(
+					values[key as keyof ConfluencePerPageUIValues]
+						.value as unknown as string[]
+				).map((value, index) => (
+					<input
+						key={`${key}-${index}`}
+						type="text"
+						value={value}
+						onChange={(e: ChangeEvent<HTMLInputElement>) => {
+							const newArray = [
+								...(values[
+									key as keyof ConfluencePerPageUIValues
+									].value as unknown as string[]),
+							];
+							newArray[index] = e.target.value;
+							handleChange(
+								key,
+								newArray,
+								config.inputValidator,
+								setValues,
+								setErrors,
+								false,
+							);
+						}}
+					/>
+				))}
+				<button
+					type="button"
+					onClick={() => {
+						const newArray = [
+							...(values[key as keyof ConfluencePerPageUIValues]
+								.value as string[]),
+							"",
+						];
+						handleChange(
+							key,
+							newArray,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							false,
+						);
+					}}
+				>
+					+
+				</button>
+			</td>
+			<td>
+				<input
+					type="checkbox"
+					id={`${key}-isSet`}
+					checked={
+						values[key as keyof ConfluencePerPageUIValues]
+							.isSet as boolean
+					}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						handleChange(
+							key,
+							e.target.checked,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							true,
+						)
+					}
+				/>
+			</td>
+		</tr>
+		<tr key={`${key}-errors`}>
+			{(errors[key]?.length ?? 0) > 0 && (
+				<td colSpan={3}>
+					<div className="error" style={styles.errorTd}>
+						{(errors[key] ?? []).map((error) => (
+							<p key={error.message}>{error.message}</p>
+						))}
+					</div>
+				</td>
+			)}
+		</tr>
+	</>
 );
 
 const renderBoolean = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<boolean, "boolean">,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<boolean, "boolean">,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={key}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .value as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        )
-                    }
-                />
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+		<tr key={key}>
+			<td>
+				<label htmlFor={key}>{config.key}</label>
+			</td>
+			<td>
+				<input
+					type="checkbox"
+					id={key}
+					checked={
+						values[key as keyof ConfluencePerPageUIValues]
+							.value as boolean
+					}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						handleChange(
+							key,
+							e.target.checked,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							false,
+						)
+					}
+				/>
+			</td>
+			<td>
+				<input
+					type="checkbox"
+					id={`${key}-isSet`}
+					checked={
+						values[key as keyof ConfluencePerPageUIValues]
+							.isSet as boolean
+					}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						handleChange(
+							key,
+							e.target.checked,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							true,
+						)
+					}
+				/>
+			</td>
+		</tr>
+		<tr key={`${key}-errors`}>
+			{(errors[key]?.length ?? 0) > 0 && (
+				<td colSpan={3}>
+					<div className="error" style={styles.errorTd}>
+						{(errors[key] ?? []).map((error) => (
+							<p key={error.message}>{error.message}</p>
+						))}
+					</div>
+				</td>
+			)}
+		</tr>
+	</>
 );
 const renderOptions = (
-    key: string,
-    config: ConfluencePageConfig.FrontmatterConfig<
-        ConfluencePageConfig.PageContentType,
-        "options"
-    >,
-    values: ConfluencePerPageUIValues,
-    errors: Record<string, Error[]>,
-    setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
-    setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
+	key: string,
+	config: ConfluencePageConfig.FrontmatterConfig<
+		ConfluencePageConfig.PageContentType,
+		"options"
+	>,
+	values: ConfluencePerPageUIValues,
+	errors: Record<string, Error[]>,
+	setValues: React.Dispatch<React.SetStateAction<ConfluencePerPageUIValues>>,
+	setErrors: React.Dispatch<React.SetStateAction<Record<string, Error[]>>>,
 ) => (
-    <>
-        <tr key={key}>
-            <td>
-                <label htmlFor={key}>{config.key}</label>
-            </td>
-            <td>
-                <select
-                    id={key}
-                    value={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .value as ConfluencePageConfig.PageContentType
-                    }
-                    onChange={(e: ChangeEvent<HTMLSelectElement>) =>
-                        handleChange(
-                            key,
-                            e.target
-                                .value as ConfluencePageConfig.PageContentType,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            false,
-                        )
-                    }
-                >
-                    {config.selectOptions.map((option) => (
-                        <option key={option} value={option}>
-                            {option}
-                        </option>
-                    ))}
-                </select>
-            </td>
-            <td>
-                <input
-                    type="checkbox"
-                    id={`${key}-isSet`}
-                    checked={
-                        values[key as keyof ConfluencePerPageUIValues]
-                            .isSet as boolean
-                    }
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        handleChange(
-                            key,
-                            e.target.checked,
-                            config.inputValidator,
-                            setValues,
-                            setErrors,
-                            true,
-                        )
-                    }
-                />
-            </td>
-        </tr>
-        <tr key={`${key}-errors`}>
-            {(errors[key]?.length ?? 0) > 0 && (
-                <td colSpan={3}>
-                    <div className="error" style={styles.errorTd}>
-                        {(errors[key] ?? []).map((error) => (
-                            <p key={error.message}>{error.message}</p>
-                        ))}
-                    </div>
-                </td>
-            )}
-        </tr>
-    </>
+	<>
+		<tr key={key}>
+			<td>
+				<label htmlFor={key}>{config.key}</label>
+			</td>
+			<td>
+				<select
+					id={key}
+					value={
+						values[key as keyof ConfluencePerPageUIValues]
+							.value as ConfluencePageConfig.PageContentType
+					}
+					onChange={(e: ChangeEvent<HTMLSelectElement>) =>
+						handleChange(
+							key,
+							e.target
+								.value as ConfluencePageConfig.PageContentType,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							false,
+						)
+					}
+				>
+					{config.selectOptions.map((option) => (
+						<option key={option} value={option}>
+							{option}
+						</option>
+					))}
+				</select>
+			</td>
+			<td>
+				<input
+					type="checkbox"
+					id={`${key}-isSet`}
+					checked={
+						values[key as keyof ConfluencePerPageUIValues]
+							.isSet as boolean
+					}
+					onChange={(e: ChangeEvent<HTMLInputElement>) =>
+						handleChange(
+							key,
+							e.target.checked,
+							config.inputValidator,
+							setValues,
+							setErrors,
+							true,
+						)
+					}
+				/>
+			</td>
+		</tr>
+		<tr key={`${key}-errors`}>
+			{(errors[key]?.length ?? 0) > 0 && (
+				<td colSpan={3}>
+					<div className="error" style={styles.errorTd}>
+						{(errors[key] ?? []).map((error) => (
+							<p key={error.message}>{error.message}</p>
+						))}
+					</div>
+				</td>
+			)}
+		</tr>
+	</>
 );
 
 const ConfluenceForm: React.FC<FormProps> = ({
-                                                 config,
-                                                 initialValues,
-                                                 onSubmit,
-                                             }: { config: any, initialValues: any, onSubmit: any }) => {
-    const [values, setValues] =
-        useState<ConfluencePerPageUIValues>(initialValues);
-    const [errors, setErrors] = useState<Record<string, Error[]>>({});
+												 config,
+												 initialValues,
+												 onSubmit,
+											 }: { config: any, initialValues: any, onSubmit: any }) => {
+	const [values, setValues] =
+		useState<ConfluencePerPageUIValues>(initialValues);
+	const [errors, setErrors] = useState<Record<string, Error[]>>({});
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        onSubmit(values as ConfluencePerPageUIValues);
-    };
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		onSubmit(values as ConfluencePerPageUIValues);
+	};
 
-    return (
-        <form onSubmit={handleSubmit}>
-            <h1>Update Confluence Page Settings</h1>
-            <table>
-                <thead>
-                <tr>
-                    <td>YAML Key</td>
-                    <td>Value</td>
-                    <td>Update</td>
-                </tr>
-                </thead>
-                <tbody>
-                {Object.entries(config).map(([key, config]: [string, any]) => {
-                    switch (config.inputType) {
-                        case "text":
-                            return renderTextInput(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    string,
-                                    "text"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        case "array-text":
-                            return renderArrayText(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    string[],
-                                    "array-text"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        case "boolean":
-                            return renderBoolean(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    boolean,
-                                    "boolean"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        case "options":
-                            return renderOptions(
-                                key,
-                                config as ConfluencePageConfig.FrontmatterConfig<
-                                    ConfluencePageConfig.PageContentType,
-                                    "options"
-                                >,
-                                values,
-                                errors,
-                                setValues,
-                                setErrors,
-                            );
-                        default:
-                            return null;
-                    }
-                })}
-                </tbody>
-            </table>
-            <button type="submit">Submit</button>
-        </form>
-    );
+	return (
+		<form onSubmit={handleSubmit}>
+			<h1>Update Confluence Page Settings</h1>
+			<table>
+				<thead>
+				<tr>
+					<td>YAML Key</td>
+					<td>Value</td>
+					<td>Update</td>
+				</tr>
+				</thead>
+				<tbody>
+				{Object.entries(config).map(([key, config]: [string, any]) => {
+					switch (config.inputType) {
+						case "text":
+							return renderTextInput(
+								key,
+								config as ConfluencePageConfig.FrontmatterConfig<
+									string,
+									"text"
+								>,
+								values,
+								errors,
+								setValues,
+								setErrors,
+							);
+						case "array-text":
+							return renderArrayText(
+								key,
+								config as ConfluencePageConfig.FrontmatterConfig<
+									string[],
+									"array-text"
+								>,
+								values,
+								errors,
+								setValues,
+								setErrors,
+							);
+						case "boolean":
+							return renderBoolean(
+								key,
+								config as ConfluencePageConfig.FrontmatterConfig<
+									boolean,
+									"boolean"
+								>,
+								values,
+								errors,
+								setValues,
+								setErrors,
+							);
+						case "options":
+							return renderOptions(
+								key,
+								config as ConfluencePageConfig.FrontmatterConfig<
+									ConfluencePageConfig.PageContentType,
+									"options"
+								>,
+								values,
+								errors,
+								setValues,
+								setErrors,
+							);
+						default:
+							return null;
+					}
+				})}
+				</tbody>
+			</table>
+			<button type="submit">Submit</button>
+		</form>
+	);
 };
 
 export class ConfluencePerPageForm extends Modal {
-    modalProps: ModalProps;
+	modalProps: ModalProps;
 
-    constructor(app: App, modalProps: ModalProps) {
-        super(app);
-        this.modalProps = modalProps;
-    }
+	constructor(app: App, modalProps: ModalProps) {
+		super(app);
+		this.modalProps = modalProps;
+	}
 
-    override onOpen() {
-        const {contentEl} = this;
-        const test: FormProps = {
-            ...this.modalProps,
-            onSubmit: (values) => {
-                const boundClose = this.close.bind(this);
-                this.modalProps.onSubmit(values, boundClose);
-            },
-        };
-        ReactDOM.render(React.createElement(ConfluenceForm, test), contentEl);
-    }
+	override onOpen() {
+		const {contentEl} = this;
+		const test: FormProps = {
+			...this.modalProps,
+			onSubmit: (values) => {
+				const boundClose = this.close.bind(this);
+				this.modalProps.onSubmit(values, boundClose);
+			},
+		};
+		ReactDOM.render(React.createElement(ConfluenceForm, test), contentEl);
+	}
 
-    override onClose() {
-        const {contentEl} = this;
-        ReactDOM.unmountComponentAtNode(contentEl);
-        contentEl.empty();
-    }
+	override onClose() {
+		const {contentEl} = this;
+		ReactDOM.unmountComponentAtNode(contentEl);
+		contentEl.empty();
+	}
 }