Allow re-editing draft after table has been generated

This does two things:

1. If the TKs in the draft has changed, add/remove the corresponding
   columns from the table

2. Either way, update the preview so it matches the draft text

All this only happens once you click the "Refresh" button, because
we don't want to be putting *too much* load on the app also 😜

src/App.svelte

@@ -73,6 +73,63 @@
 		window.sheetOne = sheetOne
 	}
 
+	/**
+	 * Refresh sheet
+	 *
+	 * Destroys the current sheet, but saves the data first so if
+	 * there are any columns in the new sheet that matches the old
+	 * ones, it'll add them back. (Columns meaning TKs, of course)
+	 */
+
+	function refreshSheet() {
+		let oldData = sheetOne.getData()
+		let oldColumns = sheetOne.columns.map(c => c.label)
+
+		sheetOne.destroy()
+
+		// now, make it up again with the new TKs
+		showSheet()
+
+		// figure out the new data
+		let newData = []
+		let tkOrder = []
+
+		// first, we figure out how the old column order corresponds to
+		// the new one
+
+		for (let col of sheetOne.columns.map(c => c.label)) {
+			tkOrder.push(oldColumns.indexOf(col))
+		}
+
+		// now we fill this, row by row
+		for (let oldRow of oldData) {
+
+			// skip empty rows
+			if (oldRow.every(v => !v)) continue
+
+			// now, we figure out what to put for the new row
+			let newRow = []
+			for (let tkIndex of tkOrder) {
+				if (tkIndex <= -1) {
+					// new TK; leave it blank
+					newRow.push('')
+				} else {
+					// old TK; keep it filled!
+					newRow.push(oldRow[tkIndex])
+				}
+			}
+
+			// and finally, when all is done, we save it.
+			newData.push(newRow)
+		}
+
+		// fill it with the new data
+		sheetOne.setData(newData)
+
+		// don't forget to refresh the preview!
+		cookiePreviewText = getPreview()
+	}
+
 	function incrementPreviewRow() {
 		let sheetLength = sheetOne.getData().length
 
@@ -144,7 +201,7 @@
 		<button on:click={showEmail}>Start Drafting</button>
 	{/if}
 
-	{#if step == 1}
+	{#if step >= 1}
 	<div class="instructions">
 		<p>Compose your email below, leaving [TK stuff] to be replaced in the table. Make sure each TK is a single word: no spaces allowed!</p>
 	</div>
@@ -164,12 +221,17 @@
 		<p>Now, fill in the fields for each user. (You can also copy-paste rows and columns directly from Air, if the ordering is right!)</p>
 	</div>
 	{/if}
-	<div id="editor" bind:this={editor}></div>
 
 	{#if step == 1}
 	<button on:click={showSheet}>Next</button>
 	{/if}
 
+	{#if step > 1}
+	<button on:click={refreshSheet}>Refresh</button>
+	{/if}
+
+	<div id="editor" bind:this={editor}></div>
+
 	{#if step == 2 && !!cookiePreviewText}
 	<h4 class="mt-3">Preview</h4>
 	<div class="cookie-preview">{@html converter.makeHtml(cookiePreviewText)}</div>