🐛 Bug - Code block inside Box MDX component breaks page formatting

[suiyangqiu]

Requested by: @suiyangqiu via YakShaver.ai 🦬
cc: @edkranz, @suiyangqiu, @Marxoz, @PothieuG, @Freego1783

Hi Team!

  🟥  Watch the video (1 min 31 sec)

  Url from screen share: https://ssw.com.au/rules/admin/index.html#/rules/mcp-servers-for-context

Pain

When editing Rules (Content) using the visual editor, placing a code block inside a custom MDX Box component causes the entire page formatting to break after saving and refreshing. The issue occurs because the code snippet contains curly braces, which prematurely terminate the Box MDX component and are not properly escaped by the visual editor.

Acceptance Criteria

1. Code blocks can be safely added inside a Box MDX component without breaking page formatting.
2. Curly braces within code blocks are correctly escaped when nested inside custom MDX components.
3. Saving and refreshing the page preserves the expected layout and formatting.
4. The visual editor correctly serializes and renders MDX with nested Box and code block components.
5. No regression occurs for existing content that uses Box components or standalone code blocks.

Reproduce Steps

1. Open a page in Rules (Content) using the visual editor.
2. Add a code snippet inside a standard code block and verify formatting is correct.
3. Add a Box MDX component to the page.
4. Insert the same code snippet (containing curly braces) inside a code block within the Box component.
5. Save the page and refresh the browser.
6. Observe that the page formatting is broken after refresh.

Screenshot

Figure: Code block inside custom box breaks page formatting