Enhance Language Selection: Add Dropdown for Syntax Highlighters & Validate Language Before Updating Editor

[keertyverma]

👉🏻 Refer this Demo video

✨ New Features

✅ Dropdown for Predefined Languages

• Added a dropdown that allows users to select from a predefined list of languages, reducing typos and invalid entries.
• Customization: Users can override the default predefined list by passing their own custom language mapping. If no custom mapping is provided, the default language list is used.

✅ Language Validation (Input & Select)

• When users enter a language manually or select one from the dropdown, the input is validated against PrismJS's supported languages and aliases.
• If the language is invalid, an error message is displayed at the top of the editor (with a dismiss button).
• Ensures only valid languages are passed to EditorJS and PrismJS, preventing syntax highlighter issues.

✅ Reset to PlainText

• Users can now select "PlainText" from the dropdown (mapped to "none") or manually enter "none" to reset the language to plaintext.
• This ensures consistency and avoids unexpected behavior.

---

🛠️ Fixes

⚠️ Fix: Prism.js Autoloader Breaks on Invalid Language Input

• Previously, entering an invalid language containing special characters (e.g., c#, c++) caused the PrismJS autoloader to break. This prevented valid languages like csharp and cpp from being loaded afterward.
• Now, invalid languages are blocked before updating the editor, preventing this issue.

🔠 Enforce Lowercase for PrismJS Compatibility

• PrismJS is case-sensitive and expects lowercase language identifiers.
  If an uppercase language (e.g., HTML) was passed, it could cause caching issues and incorrect syntax highlighting.
• Fix: Always convert the language to lowercase before passing it to PrismJS.
  Ensures consistent syntax highlighting and prevents failures when data.language is set incorrectly.

[calumk]

I have made some modifications in #13 - please check it out.

A few layout changes / fixes.

The biggest change is that now it will render either the lang-select or the lang-input, but not both,

Why :

I removed the default languages embeded in the library - its doesnt make much sense to hard-code a list of ~12 languages, its too big or too small for most peoples use case. much better to let people specify it themselves using the config.languages property as you already had.

If they dont assign anything to config.languages, then we get the language-input box as before.

If you /really/ want both, then i added a flag forceShowLanguageInput

[keertyverma]

Keeping only one of them visible at a time helps streamline the UI and avoids redundancy. Looks good to me! 👍

I have reviewed your PR #13. Please have a look at my comments and let me know if those make sense.

[keertyverma]

@calumk Any update on PR #13 ?