feat: Enable line breaks in text editor without splitBlock - Add hard…

[Rish-it]

Description

This PR implements line break functionality in the text editor without using ProseMirror's splitBlock command. The solution provides context-aware Enter key behavior that preserves the existing quick-edit workflow while enabling multi-line text editing through <br> tags.

Key Implementation Details:

• Added hard_break node to ProseMirror schema for semantic <br> tag support
• Implemented smart Enter key handler that exits on empty paragraphs but creates line breaks during normal editing
• Built bidirectional content conversion system between newlines (\n) and HTML break tags (<br>)
• Enhanced text editor component with proper multi-line content initialization and extraction
• Updated preload text handlers for consistent line break processing across the application

Technical Benefits:

• Maintains simple DOM structure using <br> tags instead of complex paragraph splitting
• Preserves existing user workflows while adding expected text editing behavior
• Provides type-safe implementation with proper ProseMirror state handling
• Ensures consistent data flow throughout the editor, preload, and DOM layers

Related Issues

Fixes #2065 Related to #2083 (provides alternative implementation approach)

Type of Change

• [x] Bug fix
• [x] New feature
• [ ] Documentation update
• [ ] Release
• [x] Refactor
• [ ] Other (please describe):

Testing

Manual Testing Performed:

1. Quick Exit Workflow (Preserved)

   • Click on text element → Press Enter immediately → Verifies editor exits
   • Type text → Move cursor to end → Press Enter → Verifies editor exits

2. Multi-line Text Creation (New)

   • Type "First line" → Press Enter → Type "Second line" → Verifies line break creation
   • Position cursor mid-text → Press Enter → Verifies text splitting with line break
   • Create multiple paragraphs → Press Escape → Verifies content persistence

3. Content Conversion (New)

   • Create multi-line text → Save → Reload → Verifies \n ↔ <br> conversion
   • Inspect DOM → Verifies proper <br> tag insertion
   • Check editor state → Verifies proper ProseMirror document structure

4. Edge Cases

   • Empty text + Enter → Exits (preserves quick-edit)
   • Any text present + Enter → Creates line break
   • Escape key → Always exits regardless of content
   • Focus/blur behavior → Maintains existing functionality

Code Quality Verification:

• All TypeScript errors resolved with proper ProseMirror imports
• Formatted code follows project standards (Prettier)
• Optimized performance by moving helper functions outside component scope
• Removed redundant comments and simplified logic where appropriate

Screenshots (if applicable)

https://github.com/user-attachments/assets/66a4d907-5edb-4de3-8845-c1f9745fa851

Additional Notes

Why This Approach Over splitBlock:

• Simpler DOM: Single <p> with <br> tags vs multiple <p> elements
• Better UX: Maintains element as single editable unit, avoiding editing complexity
• Performance: Fewer DOM manipulations and simpler content conversion
• Maintainability: Cleaner codebase with less complex state management

Backward Compatibility:

• No breaking changes to existing text editing functionality
• All existing hotkeys and behaviors preserved
• Seamless upgrade path for users

---

[!IMPORTANT] Enables line breaks in text editor using <br> tags, updating ProseMirror schema and content handling functions.

• Behavior:
  • Adds hard_break node to ProseMirror schema in index.ts for <br> tag support.
  • Implements smart Enter key handler in index.ts to create line breaks or exit on empty paragraphs.
  • Converts between newlines and <br> tags in text.tsx and insert.ts.
• Functions:
  • createNodesFromContent and extractContentWithNewlines in text.tsx handle content conversion.
  • createSmartEnterHandler in index.ts manages Enter key behavior.
  • updateTextContent and extractTextContent in text.ts and insert.ts handle DOM content updates.
• Misc:
  • Updates TextEditor component in text.tsx for multi-line content handling.
  • Refactors createElement in insert.ts to convert newlines to <br> tags.
  • Adjusts startEditingText and stopEditingText in text.ts for consistent content handling.

^{This description was created by for 233c2729f8204c13e7c9dd0606bd525cbe333705. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[Rish-it]

@Kitenite go through it and let me know if this till needs anymore conditions handling Key Changes:

• Added Shift+Enter handler for line breaks
• Modified Enter behaviour to always exit as before
• Enhanced BR tag detection in text elements
• Improved content conversion between \n and
  

[Kitenite]

@Rish-it sorry for the late reply, it's still missing the write to code part. Right now it's not writing the new line, perhaps needs the other PR I opened merged?

[Rish-it]

No worries at all! @Kitenite I had intentionally held off on merging your earlier PR while I was testing out this approach. We’ll likely need to incorporate parts of your changes to fully resolve the issue. I’ve just merged it and will review everything together, then update the PR after validating the expected behavior. This definitely deserves a bit more attention. Appreciate your input as always!

[Rish-it]

Type of Change

• [ ] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Release
• [x] Refactor
• [ ] Other (please describe):

https://github.com/user-attachments/assets/e9a93e41-f036-4d24-8bb2-da2b0cf4ad36