Display TK-filled preview based on table data

This preview is as yet unformatted...but stay tuned; we're soon to
add Markdown! 😉

src/App.svelte

@@ -9,6 +9,9 @@
 	let step = 0
 	let tkList = []
 
+	let cookiePreviewText = ''
+	let cookiePreviewRow = 0
+
 	function showEmail() {
 		step = 1
 	}
@@ -53,6 +56,9 @@
 		sheetOne = new Importabular({
 			node: editor,
 			columns: columns,
+			onChange(data) {
+				cookiePreviewText = getPreview()
+			}
 		})
 
 		step = 2
@@ -61,6 +67,59 @@
 		window.sheetOne = sheetOne
 	}
 
+	function incrementPreviewRow() {
+		let sheetLength = sheetOne.getData().length
+
+		// make sure it's not too big...
+		if (cookiePreviewRow >= sheetLength-1) {
+			cookiePreviewRow = sheetLength - 1
+		} else if (cookiePreviewRow < 0) {
+			// ...and not too small
+			cookiePreviewRow = 0
+		} else {
+			// if not, then make it "just right"! :)
+			cookiePreviewRow++
+		}
+	}
+
+	function decrementPreviewRow() {
+		let sheetLength = sheetOne.getData().length
+		// make sure it's not too small...
+		if (cookiePreviewRow >= sheetLength) {
+			// ...and not too big
+			cookiePreviewRow = sheetLength - 1
+		} else if (cookiePreviewRow <= 0) {
+			// if not, then make it "just right"! :)
+			cookiePreviewRow = 0
+		} else {
+			cookiePreviewRow--
+		}
+	}
+
+	function getPreview(row) {
+		if (!row) row = cookiePreviewRow
+		let previewText = emailContent
+
+		// get the row we're working on
+		if (!sheetOne) return '' // no sheet to get data from :(
+		let data = sheetOne.getData()
+		if (row < 0 || data.length < row) return previewText // no row to apply :(
+		let r = data[row]
+
+		for (let tk of tkList) {
+			// figure out which column holds values for this TK
+			let tkIndex = window.sheetOne.columns.findIndex(t => t.label == tk)
+
+			// replace it!
+			previewText = previewText.replace(new RegExp(`\\[TK ${tk}\\]`, 'g'), r[tkIndex])
+		}
+
+		return previewText
+	}
+
+	// automatically update
+	$: cookiePreviewText = getPreview(cookiePreviewRow)
+
 	function next() {
 		step += 1
 	}
@@ -104,6 +163,13 @@
 	{#if step == 1}
 	<button on:click={showSheet}>Next</button>
 	{/if}
+
+	{#if step == 2}
+	<button on:click={decrementPreviewRow}>&lt; Prev</button>
+	<button on:click={incrementPreviewRow}>Next &gt;</button>
+	<pre id="cookiePreview">{cookiePreviewText}</pre>
+	{/if}
+
 </main>
 
 <style>