Skip to content

Conversation

@technicaldirector
Copy link
Contributor

Changes

  • Used React’s built-in useId() to give each TypeScript CodeBlock instance a unique Monaco defaultPath. This ensures every TS code block creates its own Monaco model instead of reusing a single shared model.
  • Exported the Horizontal Rule node from the client exports so it’s available to consumers.

Why I did it

Issue + Video mentioned here
According to the @monaco-editor/react documentation, the path/defaultPath parameter is used as an identifier for the model:

There are three parameters to create a model - value, language and path (monaco.editor.createModel(value, language, monaco.Uri.parse(path))). You can consider last one (path) as an identifier for the model. The Editor component, now, has a path prop. When you specify a path prop, the Editor component checks if it has a model by that path or not. If yes, the existing model will be shown, otherwise, a new one will be created (and stored).

When multiple code blocks share the same defaultPath: 'file.tsx', @monaco-editor/react treats them as the same model identifier, causing:

  • Model reuse across different code block instances
  • Content synchronization between blocks
  • Loss of independent state per block

Copy link
Member

@AlessioGr AlessioGr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you!

@AlessioGr AlessioGr enabled auto-merge (squash) October 25, 2025 21:11
@AlessioGr AlessioGr merged commit 5caebd1 into payloadcms:main Oct 25, 2025
96 checks passed
@github-actions
Copy link
Contributor

🚀 This is included in version v3.62.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants