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

• Bug fix
• New feature
• Documentation update
• Release
• 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)

Screen.Recording.2025-06-09.at.5.18.24.PM.mov

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 233c272. You can customize this summary. It will automatically update as commits are pushed.}

[vercel]

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

A member of the Team first needs to authorize it.

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to 233c272 in 1 minute and 57 seconds. Click for details.

• Reviewed 278 lines of code in 5 files
• Skipped 0 files when reviewing.
• Skipped posting 2 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. apps/web/preload/script/api/elements/text.ts:84

• Draft comment:
  Consider consolidating the newline-to-
  conversion logic into a shared helper to avoid duplication across files.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. apps/web/preload/dist/index.js:12941

• Draft comment:
  Typographical note: In the extractTextContent function, the replacement string using a multi-line template literal might be unintentional. If the intent is to replace
  with a newline character, consider using "\n" for clarity instead of a template literal spanning multiple lines.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

Workflow ID: wflow_m6Zf4NuUIDZOm0Fu

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[Kitenite]

Hey @Rish-it , this is great!
One more thing to consider is how this new change gets written to code. I've opened a PR here with an example of replacing the new newline content with a
. We can update this with whatever format we're deciding to write back to code.

Rish-it#1

One last thing to handle is that if an element actually has a <br/> or \n in between, we're able to read that in and edit.

It may require updating the conditions here in order to get the expected text content. Nice work so far, this is super complex so I'm very impressed that you got here. Can be tested by adding a <br/> in existing code and seeing how it handles.

onlook/apps/web/preload/script/api/elements/text.ts

Line 16 in 20b98b4

export function startEditingText(domId: string): EditTextResult | null {

[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
• Refactor
• Other (please describe):

writeToCode.mp4

[Kitenite]

This won't be necessary since we already handle write on text.end() but nice!

[Kitenite]

Amazing work! This was probably very hard to test and is a very complex issue. I've avoided it for a while for its complexity. Thank you @Rish-it :)