Fix Monaco editor syntax highlighting in Preview block

[slate20]

The Preview block's CodeEditPreview component was not passing file information to Monaco editor, preventing automatic language detection from file extensions.

Changes:

• Add fileName prop to CodeEditor component
• Pass actual file path to Monaco with fallback to random UUID

Fixes syntax highlighting for all text files opened in Preview blocks while maintaining backward compatibility with existing CodeEditor usage.

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds an optional fileName?: string prop to CodeEditor and uses it to compute a stable editorPath (falls back to a UUID stored in a ref when fileName is not provided). preview-edit.tsx exports a shellFileMap, derives fileName from fileInfo.path || fileInfo.name, infers language from the map, and forwards fileName and language to CodeEditor. Onboarding components (onboarding-command.tsx, onboarding-layout.tsx) were updated to create/pass editorFileName and editorLanguage into FakeBlock, which forwards them to CodeEditor.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "Fix Monaco editor syntax highlighting in Preview block" directly aligns with the main objective of the changeset, which is to enable automatic language detection and syntax highlighting in the Preview block's code editor. The changes introduce a fileName prop to pass file information to Monaco, supporting this core goal. The title is concise, specific, and clearly communicates the primary change without unnecessary verbosity.
Description Check	✅ Passed	The description is clearly related to the changeset and accurately describes both the problem (Preview block not passing file information to Monaco) and the solution (adding fileName prop and passing file path). It explains the specific changes made and identifies the intended benefit (syntax highlighting for text files), while also noting backward compatibility is maintained. The description provides meaningful information that corresponds to the actual file modifications in the PR.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8d67304 and 8cd3bd2.

📒 Files selected for processing (4)

• frontend/app/onboarding/onboarding-command.tsx (3 hunks)
• frontend/app/onboarding/onboarding-layout.tsx (2 hunks)
• frontend/app/view/codeeditor/codeeditor.tsx (1 hunks)
• frontend/app/view/preview/preview-edit.tsx (2 hunks)

---

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: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 64d24cd and 8d67304.

📒 Files selected for processing (2)

• frontend/app/view/codeeditor/codeeditor.tsx (1 hunks)
• frontend/app/view/preview/preview-edit.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

frontend/app/view/codeeditor/codeeditor.tsx (2)

frontend/app/store/global.ts (1)

• useOverrideConfigAtom (858-858)

frontend/util/util.ts (1)

• boundNumber (411-411)

🔇 Additional comments (4)

frontend/app/view/codeeditor/codeeditor.tsx (2)

111-111: LGTM! Optional prop maintains backward compatibility.

The addition of the optional fileName prop to the interface is well-designed and maintains backward compatibility with existing CodeEditor usage.

---

116-116: LGTM! Function signature correctly implements the interface.

frontend/app/view/preview/preview-edit.tsx (2)

19-19: Good defensive programming with optional chaining.

The derivation logic correctly prefers path over name and uses optional chaining to safely handle nullable fileInfo. This approach ensures that if file metadata is unavailable, the CodeEditor will fall back to a UUID (as implemented in line 124 of codeeditor.tsx).

---

69-69: LGTM! This change achieves the PR objective.

Passing the derived fileName to CodeEditor enables Monaco's automatic language detection based on file extensions, which fixes the syntax highlighting issue described in the PR objectives.

[sawka]

@slate20 thanks for tracking this down (#2427)! I see it now, I had a regression from this commit a month ago (Sep 15) -- 77bbf74

i swapped from the filename to a UUID, which now I see lost the language detection / highlighting!

---

the issue that my commit fixed for an issue where the model was getting initialized with an empty filename (which bound the 'internal' monaco model). that was particularly bad when two files were bound with empty string and then they would cross talk and overwrite each other.

---

i'll just need to verify we dont re-introduce that bug with this fix. will work on getting this merged on monday so it will make the next patch release (should be this week).