From 0b38584e52c0e90e2eaf08c4540360d5251d309c Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 25 Oct 2024 11:51:49 -0700
Subject: [PATCH] refac: rich text input paste behaviour

---
 src/app.css                                   |  2 +-
 .../components/common/RichTextInput.svelte    | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index c20656fb2..ca5249bbd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -189,7 +189,7 @@ input[type='number'] {
 }
 
 .ProseMirror {
-	@apply h-full  min-h-fit max-h-full;
+	@apply h-full  min-h-fit max-h-full whitespace-pre-wrap;
 }
 
 .ProseMirror:focus {
diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index 62a0ec54a..d6c4d7e40 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -288,6 +288,12 @@
 		return false;
 	}
 
+	// Replace tabs with four spaces
+	function handleTabIndentation(text: string): string {
+		// Replace each tab character with four spaces
+		return text.replace(/\t/g, '    ');
+	}
+
 	onMount(() => {
 		const initialDoc = markdownToProseMirrorDoc(value || ''); // Convert the initial content
 
@@ -403,6 +409,22 @@
 				},
 				paste: (view, event) => {
 					if (event.clipboardData) {
+						// Extract plain text from clipboard and paste it without formatting
+						const plainText = event.clipboardData.getData('text/plain');
+						if (plainText) {
+							const modifiedText = handleTabIndentation(plainText);
+							console.log(modifiedText);
+
+							// Replace the current selection with the plain text content
+							const tr = view.state.tr.replaceSelectionWith(
+								view.state.schema.text(modifiedText),
+								false
+							);
+							view.dispatch(tr.scrollIntoView());
+							event.preventDefault(); // Prevent the default paste behavior
+							return true;
+						}
+
 						// Check if the pasted content contains image files
 						const hasImageFile = Array.from(event.clipboardData.files).some((file) =>
 							file.type.startsWith('image/')