mdx-editor / editor

A rich text editor React component for markdown
https://mdxeditor.dev
MIT License
1.57k stars 124 forks source link

[BUG] markdownShortcutPlugin throws "Prism is not defined" error when minified #491

Open dylanpyle opened 4 weeks ago

dylanpyle commented 4 weeks ago

Describe the bug When the markdownShortcutPlugin is enabled - if you build your project using esbuild (a very popular bundler, also used in Vite/etc) with --minify enabled, at runtime the app throws the following error:

bundle.js:170 Uncaught ReferenceError: Prism is not defined

Reproduction As this is specific to a build process, I've set up a new minimal reproduction repo here as I'm not sure it's possible in codesandbox? https://github.com/dylanpyle/mdxeditor-esbuild

To Reproduce

Steps to reproduce the behavior:

To confirm that it's specific to the markdownShortcutPlugin, remove this plugin from app.tsx and run ./compile again; observe that the app now loads successfully.

Expected behavior The app loads the editor.

Screenshots

Screenshot 2024-06-12 at 11 48 51 Screenshot 2024-06-12 at 11 49 23

Desktop (please complete the following information):

Additional context

This issue is not present when the output bundle is not minified.

david10sing commented 3 weeks ago

I've reported it here.

https://github.com/facebook/lexical/pull/5828#issuecomment-2160350493

As a workaround, we've had to use the CDN version of prism and add it to the index.html... It's ugly but fixes it. Still trying to figure out how to avoid needing Prism.

Also @dylanpyle could you also confirm it happens only with production build and not with dev build?

Saw the --minify flag

petyosi commented 3 weeks ago

I'm almost certain that the shortcuts assume the inclusion of the default Lexical code block implementation. It's unlikely for Lexical to fix this, I believe. The proper way would be to inline the shortcut implementation in the MDXEditor and maybe drop the reference to @lexical/markdown. Which would be a shame, as the shortcut code is quite complex.

dylanpyle commented 3 weeks ago

For what it's worth - based on the docs I thought it was this plugin that provided the Command-[B/U/I/K] shortcuts, but they seem to work without it — so not pressing on my end. Worth updating the docs to specify that?