From a56e9cd9c232c034b5639041e8b68991f87e8f8f Mon Sep 17 00:00:00 2001
From: Badri Sunderarajan <badrihippo@gmail.com>
Date: Fri, 28 May 2021 21:37:04 +0530
Subject: [PATCH] Prettify preview and add "From" option

---
 src/App.svelte | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index e771027..4660976 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -12,7 +12,9 @@
 	let step = 0
 	let tkList = []
 
-	let cookiePreviewText = ''
+	let fromEmail = ''
+
+	let cookiePreviewData = { text: '', email: ''}
 	let cookiePreviewRow = 0
 
 	function showEmail() {
@@ -63,7 +65,7 @@
 			node: editor,
 			columns: columns,
 			onChange(data) {
-				cookiePreviewText = getPreview()
+				cookiePreviewData = getPreview()
 			}
 		})
 
@@ -127,7 +129,7 @@
 		sheetOne.setData(newData)
 
 		// don't forget to refresh the preview!
-		cookiePreviewText = getPreview()
+		cookiePreviewData = getPreview()
 	}
 
 	function incrementPreviewRow() {
@@ -171,17 +173,20 @@
 
 		for (let tk of tkList) {
 			// figure out which column holds values for this TK
-			let tkIndex = window.sheetOne.columns.findIndex(t => t.label == tk)
+			let tkIndex = sheetOne.columns.findIndex(t => t.label == tk)
 
 			// replace it!
 			previewText = previewText.replace(new RegExp(`\\[TK ${tk}\\]`, 'g'), r[tkIndex])
 		}
 
-		return previewText
+		// save the email
+		let previewEmail = r[sheetOne.columns.findIndex(t => t.label == 'email')]
+
+		return { text: previewText, email: previewEmail }
 	}
 
 	// automatically update
-	$: cookiePreviewText = getPreview(cookiePreviewRow)
+	$: cookiePreviewData = getPreview(cookiePreviewRow)
 
 	function next() {
 		step += 1
@@ -205,7 +210,9 @@
 	<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>
+
 	<div class="email-content">
+		<p>From: <input type="text" bind:value={fromEmail}/></p>
 		<textarea bind:value={emailContent}/>
 		<p>
 			<strong>Detected fields:</strong>
@@ -298,5 +305,7 @@
 		text-align: left;
 		max-width: 640px;
 		margin: auto;
+		padding: 1em;
+		border: 1px solid black;
 	}
 </style>