Text Editor Line Break Implementation

[Rish-it]

Current Issue

• Users cannot insert line breaks in text elements using Enter, Ctrl+Enter, or Command+Enter (Issue [bug] Cannot insert line break in text element using Enter, Ctrl+Enter, or Command+Enter #2065). The current ProseMirror configuration always exits the editor on Enter, preventing multi-line text editing.

Enter: () => {
    if (onEnter) {
        onEnter();
        return true;
    }
    return false;
},

the Enter key handler always calls onEnter() and returns true, overriding ProseMirror's default line break behavior.

Option 1: Modify ProseMirror Keymap Configuration

Use different key combinations for different actions

• Enter → Create new paragraph/line break
• Shift+Enter → Hard break within paragraph
• Ctrl/Cmd+Enter → Exit text editing
• Escape → Exit text editing

keymap({
    'Enter': splitBlock,
    'Shift-Enter': hardBreak,
    'Mod-Enter': () => onEnter(),
    'Escape': () => onEscape(),
})

Option 2: Conditional Enter Handling

Enter behavior based on content state

• Enter on empty paragraph → Exit editor
• Enter with content → Create line break
• Enter at end of single-line text → Exit editor

'Enter': (state, dispatch, view) => {
    const { $from } = state.selection;
    const isEmpty = $from.parent.content.size === 0;
    const atEnd = $from.parentOffset === $from.parent.content.size;
    
    if (isEmpty || (atEnd && $from.parent.textContent.trim() === '')) {
        return onEnter();
    }
    return splitBlock(state, dispatch);
}

Option 3: User Preference Setting

Add a user preference to control Enter behavior

• Setting: "Enter key behavior in text editor"
• "Create line break" (default)
• "Exit editor"
• Always provide Escape to exit

enterBehavior: 'linebreak' | 'exit' = 'linebreak'

'Enter': () => {
    if (settings.enterBehavior === 'exit') {
        return onEnter();
    }
    return splitBlock(state, dispatch);
}

My recommendation would be we implement the option 2 (Conditional Enter) for now because:

• No major UX changes.
• Solves the core issue immediately
• Can be refined based on user feedback
• Easy to migrate to Option 1 or 3 later if needed
• We can always add more sophisticated behavior in future iterations based on user feedback.
  @Kitenite @drfarrell @spartan-vutrannguyen

[codewithdhruba01]

• Assign different behaviors to different key combos:

  • Enter: Create new paragraph/line break
  • Shift+Enter: Hard break within paragraph
  • Ctrl/Cmd+Enter: Exit text editing
  • Escape: Exit text editing

• Example Keymap:

  keymap({
    'Enter': splitBlock,
    'Shift-Enter': hardBreak,
    'Mod-Enter': () => onEnter(),
    'Escape': () => onEscape(),
  })

---