editor?.editorType === 'codeblock', contents: () => },\
{ when: (editor) => editor?.editorType === 'sandpack', contents: () => },\
{\
fallback: () => (\
<>\
\
\
\
)\
}\
]}\
/>\
)\
})\
]}
/>
)
}
Blocks of code
JavaScript:
```js
export default function App() {
return Hello world from a markdown
}
```
CSS:
```css
body {
color: red;
}
```
React Sandpack:
```tsx live react
export default function App() {
return Hello world from a markdown
}
```
Configuring the CodeMirror editor
---------------------------------
The code mirror editor plugin enables editing of fenced code blocks with basic code editing features like syntax highlighting, indentation and bracket matching. A set of toolbar component utilities support the display of a language selector when the block is in focus, while hiding the rich text editor controls. The plugin accepts supported languages as a parameter option.
Configuring the Sandpack editor
-------------------------------
Compared to the code mirror editor, the Sandpack one is a bit more complex, as Sandpack needs to know the context of the code block in order to execute it correctly. Before diving in, it's good to [understand Sandpack configuration](https://sandpack.codesandbox.io/)
itself. MDXEditor supports multiple Sandpack configurations, based on the meta data of the code block. To configure the supported presets, pass a `sandpackConfig` option in the plugin initialization. For more details, refer to the [SandpackConfig interface](../api/editor.sandpackconfig)
and the [SandpackPreset interface](../api/editor.sandpackpreset)
.
Build a custom code block editor
--------------------------------
You can implement your own stack of custom code editors by passing a code block editor descriptor to the `codeBlockPlugin`. The next example uses a plain text textarea to edit the code block content. More details about each of the constructs in the example can be found in the API reference.
const PlainTextCodeEditorDescriptor: CodeBlockEditorDescriptor = {
// always use the editor, no matter the language or the meta of the code block
match: (language, meta) => true,
// You can have multiple editors with different priorities, so that there's a "catch-all" editor (with the lowest priority)
priority: 0,
// The Editor is a React component
Editor: (props) => {
const cb = useCodeBlockEditorContext()
// stops the propagation so that the parent lexical editor does not handle certain events.
return (
e.nativeEvent.stopImmediatePropagation()}>