fix: handle shift-enter in text

[rohan-chidurala]

Description

Update the preload script so it can detect
elements with attributes (e.g.,
).

Right now, it’s still buggy when adding multiple line breaks. From what I can tell, the issue happens during sandbox updates/refreshes. The data and file changes look correct, but when the sandbox refreshes, only the current frame you’re working on glitches—the other frames are fine. I couldn’t fully figure out why, so someone else might need to dig deeper.

Related Issues

#2504

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

Testing

Screenshots (if applicable)

Additional Notes

---

Important

Fixes handling of <br> elements with attributes in extractTextContent() in text.ts.

• Behavior:
  • Update extractTextContent() in text.ts to handle <br> elements with attributes by modifying the regex to /\<br[^>]*\/?>/gi.
  • Fixes issue where <br> with attributes were not converted to newlines.
• Related Issues:
  • Fixes [bug] Line-breaks (SHIFT+ENTER) aren't writing to code – multi-line editing #2504.

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

Summary by CodeRabbit

• Bug Fixes
  • Improved HTML-to-text conversion to correctly handle line breaks from
    tags with attributes (e.g.,
    ), ensuring consistent newline formatting in extracted text across the app (previews, copies, exports).
• Chores
  • Minor internal adjustment to text extraction logic for broader
    tag support without changing public APIs or behavior elsewhere.

[vercel]

@rohan-chidurala is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Updated extractTextContent to normalize
tags with attributes by changing the regex from /<br\s*/?>/gi to /<br[^>]*/?>/gi. Other steps—removing remaining tags and decoding via a textarea—remain unchanged. No public API changes.

Changes

Cohort / File(s)	Summary
Text extraction regex update apps/web/preload/script/api/elements/text.ts	Broadened handling to match tags with attributes using /\<br[^>]*\/?>/gi, ensuring they convert to newlines. No other logic or exports changed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I hop through tags, a careful sleuth,
Where line breaks hide in bracketed truth;
Now brs with flair—class, id, and style—
Turn into newlines, neat as a file.
Thump-thump! says the reviewer’s heart:
One tiny regex, tidy art.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/preload/script/api/elements/text.ts (1)

91-95: Avoid innerHTML to prevent XSS and attribute loss; build DOM safely

Assigning innerHTML with raw content enables markup injection and drops any instrumentation attributes on existing nodes, which can contribute to the “glitch” you’re seeing during refreshes. Build a fragment from text nodes and <br> elements instead.

Apply this diff:

 function updateTextContent(el: HTMLElement, content: string): void {
-    // Convert newlines to <br> tags in the DOM
-    const htmlContent = content.replace(/\n/g, '<br>');
-    el.innerHTML = htmlContent;
+    // Safely rebuild children from text + <br> nodes (no HTML parsing)
+    const frag = document.createDocumentFragment();
+    const parts = content.split('\n');
+    for (let i = 0; i < parts.length; i++) {
+        if (i > 0) frag.appendChild(document.createElement('br'));
+        frag.appendChild(document.createTextNode(parts[i]));
+    }
+    el.replaceChildren(frag);
 }

🧹 Nitpick comments (3)

apps/web/preload/script/api/elements/text.ts (3)

78-85: Guard observers during live edits to avoid refresh glitches

Ensure any MutationObserver/bridge ignores subtrees marked with data-onlook-editing-text="true" so the editing frame isn’t re-instrumented mid-typing.

If not already, gate observer callbacks with:

• skip if node.closest('[data-onlook-editing-text="true"]') is truthy.
• batch updates until the attribute is removed in cleanUpElementAfterEditing.

---

29-33: Minor: broaden “editable text” detection only if needed

Current check allows only text nodes and <br> elements. If designers paste formatted text (e.g., <span> wrappers), editing will bail. If intentional, ignore; otherwise consider allowing inline wrappers while flattening them in extractTextContent.

---

106-108: Dead parameter

isChildTextEditable(oid) ignores its argument and always returns true. Either remove the param or implement the lookup.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9fc9c56 and 1bb61fb.

📒 Files selected for processing (1)

• apps/web/preload/script/api/elements/text.ts (1 hunks)

🔇 Additional comments (2)

apps/web/preload/script/api/elements/text.ts (2)

99-99: Regex fix for
with attributes — LGTM

Broader match /<br[^>]*\/?>/gi correctly handles <br> variants with attributes and self-closing forms. Nice, targeted fix.

---

97-104: Add unit tests for round-trip and edge cases

Cover:

• <br>, <br/>, <br />, <br data-oid=""> → newline
• Multiple consecutive breaks
• HTML entity decode ( , &)
• Round-trip: text with newlines → DOM → extracted text equals original

I can scaffold Jest tests for extractTextContent and updateTextContent if helpful.

[Kitenite]

will take a look thanks @rohan-chidurala !