fix: rich input space behaviour

This commit is contained in:
Timothy J. Baek 2024-10-19 14:56:30 -07:00
parent 3436523b79
commit 60dd3230ae

View File

@ -20,6 +20,7 @@
import { DOMParser, DOMSerializer, Schema } from 'prosemirror-model'; import { DOMParser, DOMSerializer, Schema } from 'prosemirror-model';
import { marked } from 'marked'; // Import marked for markdown parsing import { marked } from 'marked'; // Import marked for markdown parsing
import { dev } from '$app/environment';
export let className = 'input-prose'; export let className = 'input-prose';
export let shiftEnter = false; export let shiftEnter = false;
@ -117,33 +118,34 @@
} }
// Initialize Editor State and View // 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; 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 storedMarks = state.storedMarks || state.selection.$from.marks();
const hasBold = storedMarks.some((mark) => mark.type === state.schema.marks.strong); const hasBold = storedMarks.some((mark) => mark.type === state.schema.marks.strong);
const hasItalic = storedMarks.some((mark) => mark.type === state.schema.marks.em); 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) { if (hasBold) {
tr = tr.removeMark(from, from + 1, state.schema.marks.strong); tr = tr.removeMark(from - 1, from, state.schema.marks.strong);
} }
if (hasItalic) { 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); dispatch(tr);
} }
return false; return true;
} }
function toggleMark(markType) { function toggleMark(markType) {
@ -251,8 +253,6 @@
...baseKeymap, ...baseKeymap,
'Mod-z': undo, 'Mod-z': undo,
'Mod-y': redo, 'Mod-y': redo,
Space: handleSpace,
Enter: (state, dispatch, view) => { Enter: (state, dispatch, view) => {
if (shiftEnter) { if (shiftEnter) {
eventDispatch('enter'); eventDispatch('enter');
@ -331,6 +331,10 @@
view.updateState(newState); view.updateState(newState);
value = serializeEditorContent(newState.doc); // Convert ProseMirror content to markdown text value = serializeEditorContent(newState.doc); // Convert ProseMirror content to markdown text
if (dev) {
console.log(value);
}
eventDispatch('input', { value }); eventDispatch('input', { value });
}, },
handleDOMEvents: { handleDOMEvents: {
@ -378,6 +382,14 @@
// For all other cases (text, formatted text, etc.), let ProseMirror handle it // For all other cases (text, formatted text, etc.), let ProseMirror handle it
return false; 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 } attributes: { id }