From 60dd3230ae1c220126ed6144fd54305363db210f Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 19 Oct 2024 14:56:30 -0700
Subject: [PATCH] fix: rich input space behaviour

---
 .../components/common/RichTextInput.svelte    | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/common/RichTextInput.svelte b/src/lib/components/common/RichTextInput.svelte
index 59d6be99f..d4cd19d18 100644
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@@ -20,6 +20,7 @@
 	import { DOMParser, DOMSerializer, Schema } from 'prosemirror-model';
 
 	import { marked } from 'marked'; // Import marked for markdown parsing
+	import { dev } from '$app/environment';
 
 	export let className = 'input-prose';
 	export let shiftEnter = false;
@@ -117,33 +118,34 @@
 	}
 
 	// Initialize Editor State and View
-	function handleSpace(state, dispatch) {
+	function afterSpacePress(state, dispatch) {
+		// Get the position right after the space was naturally inserted by the browser.
 		let { from, to, empty } = state.selection;
-		console.log('Space key pressed', from, to, empty);
-		if (dispatch) {
-			let tr = state.tr.insertText(' ', state.selection.from, state.selection.to);
 
-			// // After inserting space, check for any active marks at `from + 1`
+		if (dispatch && empty) {
+			let tr = state.tr;
+
+			// Check for any active marks at `from - 1` (the space we just inserted)
 			const storedMarks = state.storedMarks || state.selection.$from.marks();
 
 			const hasBold = storedMarks.some((mark) => mark.type === state.schema.marks.strong);
 			const hasItalic = storedMarks.some((mark) => mark.type === state.schema.marks.em);
 
-			console.log('Stored marks:', storedMarks, hasBold, hasItalic);
+			console.log('Stored marks after space:', storedMarks, hasBold, hasItalic);
 
-			// Step 2: Remove marks only for the space character inserted
+			// Remove marks from the space character (marks applied to the space character will be marked as false)
 			if (hasBold) {
-				tr = tr.removeMark(from, from + 1, state.schema.marks.strong);
+				tr = tr.removeMark(from - 1, from, state.schema.marks.strong);
 			}
 			if (hasItalic) {
-				tr = tr.removeMark(from, from + 1, state.schema.marks.em);
+				tr = tr.removeMark(from - 1, from, state.schema.marks.em);
 			}
 
-			// Final step: Dispatch the transaction
+			// Dispatch the resulting transaction to update the editor state
 			dispatch(tr);
 		}
 
-		return false;
+		return true;
 	}
 
 	function toggleMark(markType) {
@@ -251,8 +253,6 @@
 					...baseKeymap,
 					'Mod-z': undo,
 					'Mod-y': redo,
-					Space: handleSpace,
-
 					Enter: (state, dispatch, view) => {
 						if (shiftEnter) {
 							eventDispatch('enter');
@@ -331,6 +331,10 @@
 				view.updateState(newState);
 
 				value = serializeEditorContent(newState.doc); // Convert ProseMirror content to markdown text
+
+				if (dev) {
+					console.log(value);
+				}
 				eventDispatch('input', { value });
 			},
 			handleDOMEvents: {
@@ -378,6 +382,14 @@
 
 					// For all other cases (text, formatted text, etc.), let ProseMirror handle it
 					return false;
+				},
+				// Handle space input after browser has completed it
+				keyup: (view, event) => {
+					console.log('Keyup event:', event);
+					if (event.key === ' ' && event.code === 'Space') {
+						afterSpacePress(view.state, view.dispatch);
+					}
+					return false;
 				}
 			},
 			attributes: { id }