CMS-204 | Rework inline MDX props editor UI to be visually lighter and more intuitive

[woywro]

Summary by CodeRabbit

• New Features
  • Added edit and delete actions for MDX components, plus a drag handle for reordering
  • Visual selection state with updated left-border and background styling
• Bug Fixes
  • Stabilized form-field control identity so controls no longer remount when values change
  • Removed previous local-preview / unavailable/read-only guidance from component frames
• Tests
  • Updated/added tests for rendering, action buttons, and selection styling

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3026d4ec-94dd-40f1-b99a-b13ee7a1dbde

📥 Commits

Reviewing files that changed from the base of the PR and between 66c4b47 and 0bb6238.

📒 Files selected for processing (1)

• packages/studio/src/lib/runtime-ui/components/editor/mdx-component-node-view.tsx

---

📝 Walkthrough

Walkthrough

Stabilized React keys for form controls to stop remounts on value changes; added selection state, drag handle, and conditional edit/delete actions to MDX component node frames; simplified void-node rendering and removed several preview/placeholder messages; updated tests to match the new UI and behaviors.

Changes

Cohort / File(s)	Summary
Form control key stabilization packages/studio/src/lib/mdx-props-editor-host.tsx	Replaced value-dependent composite key values with stable controlId for multiple control types (input, textarea, select, slider, checkbox), changing React remount behavior when inputs update.
Component node frame UI & interactions packages/studio/src/lib/runtime-ui/components/editor/mdx-component-node-view.tsx	Added selected?: boolean, onEditProps?: () => void, onDelete?: () => void; introduced hover drag handle, chip-style header showing <ComponentName />, conditional edit/delete buttons wired to editor commands, selection-based styling, and removed prior preview/placeholder messages and void-content rendering.
Component node frame tests packages/studio/src/lib/runtime-ui/components/editor/mdx-component-node-view.test.tsx	Updated expectations to assert escaped self-closing tag labels, removed prior guidance text checks, added assertions for presence/absence of edit/delete aria-labels based on callbacks, and added style-state assertions for selected true/false.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Frame as MdxComponentNodeFrame
  participant Editor as Editor (commands)
  participant NodeAPI as Node API

  User->>Frame: click "Edit props" button
  Frame->>Editor: setNodeSelection(pos)
  Editor->>Frame: selection updated (selected=true)
  User->>Frame: click "Delete" button
  Frame->>NodeAPI: deleteNode()
  NodeAPI->>Frame: node removed / UI updated

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Poem

🐰 Keys snug as buttons, no more frantic remount,
frames don a handle and buttons to count.
I nibble at props, select, and delete with glee,
voids fade away — tidy as can be.
Hooray for small rabbits and cleaner MDX tree! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main objective of the changeset: reworking the inline MDX props editor UI to be visually lighter and more intuitive, which aligns with the substantive changes across mdx-component-node-view files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch CMS-204

---

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