Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable React Components Rendering in Preview for MDX with Next.js #7259

Open
ectuser opened this issue Aug 1, 2024 · 0 comments
Open

Enable React Components Rendering in Preview for MDX with Next.js #7259

ectuser opened this issue Aug 1, 2024 · 0 comments
Labels
area: ui/editor/preview-pane type: feature code contributing to the implementation of a feature and/or user facing functionality

Comments

@ectuser
Copy link

ectuser commented Aug 1, 2024

Is your feature request related to a problem? Please describe.

I'm using Decap CMS, mdx format (next-mdx-remote library) in the Next.js. I need React components to render in the preview after being included in the markdown widget.

Markdown widget content:

<div>
<Navigation />
Tweet:
<Tweet id="933354946111705097" />
</div>

Here’s how it appears in a published article:

Screenshot by Dropbox Capture

And here’s how it looks in the preview:

Screenshot by Dropbox Capture

As you can see, the React components are missing in the preview, and only the text Tweet is rendered.

The published version displays the page correctly, indicating that the preview lacks the necessary configuration to render React components.

Describe the solution you'd like
Adding missing configuration in public/admin/index.html, possibly including a script to render React components in the preview.

Describe alternatives you've considered

I tried CMS.registerPreviewTemplate("posts", PostPreview); and registerPreviewStyle in the index.html script, but these methods did not render React components in the markdown widget.

@ectuser ectuser added the type: feature code contributing to the implementation of a feature and/or user facing functionality label Aug 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: ui/editor/preview-pane type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Development

No branches or pull requests

2 participants