Migrate to Prism code editor?

[jonpyt]

Hi @hunghg255,

Author of Prism code editor here. Thank you for using my library!

I have seen that you decided to make a fork instead. Based on this commit, your reason for forking was the usage of browser APIs in module scope, which breaks SSR in React. This was already fixed in development 8 months earlier, but wasn't in a stable release yet. I'm therefore suggesting to migrate to Prism code editor for the CodeBlock extension, so that users of your library can use newer versions of Prism code editor. This is obviously a breaking change, but I'd appreciate it if you planned it for v2.0.0.

Migration steps

Migrating to Prism code editor v5 should be easy despite two major releases. The first thing you need to change is some CSS variables in the code block styles. Refer to the migration guide for which variables to change. Lastly, the indentGuides() extension now requires extra styling from prism-code-editor/guides.css.

Current issues

I have identified a few issues with how you're using the library that I'd recommend fixing:

• You're not importing anything from prism-code-editor/languages. This means automatic indentation and comment toggling won't work. Refer to this guide for how
• It is sometimes possible to write outside the code editor's textarea (for example inside the language <Select>) due to the <NodeViewCodeBlock> component inheriting contentEditable. Adding contentEditable={false} to the compoenent should fix this
• The selection color of the editor gets overridden by this selector with a bright gray. This looks really ugly. Change the selector to something like :not(.image-view, .search-result, textarea)::selection
• Many languages you've imported such as xml, jsx, graphql, scss, ruby, and many more are not in the languages list making them inaccessible in the code block
• Writing ``` followed by an invalid language and pressing enter makes the language <Select> empty in the new code block
• The most important issue is that Tiptap often steals focus away from the code editor after typing a single character. I have no idea what causes this, but it makes the code editor almost unusable

An alternative

An alternative to Prism code editor would be prism-react-editor, which is a rewrite made to be easier to use with React, which should make your CodeBlock extension easier to maintain. In addition, the <IndentGuides /> extension doesn't require any extra CSS.

Feel free to ask if you have any questions about the migration.

[hunghg255]

Thank you for your support. I will consider migrating this issue.