Skip to content

gaelj/BlazorCodeMirror6

Repository files navigation

Blazor CodeMirror 6

🚧 This project is still a work-in-progress 🚧

codemirror.svg

Blazor CodeMirror 6 brings the power of the CodeMirror 6 code editor to Blazor, offering a comprehensive .NET 7 / .NET 8 component. It's tailored for both general and specialized use-cases, supporting a range of languages and Markdown editing.

Why Blazor CodeMirror 6?

  • Seamless Integration: Easily embeddable within Blazor applications.
  • Feature-Rich: Extensive support for syntax highlighting, auto-completion, custom linting, themes, and more.
  • Versatile: From Markdown editing to collaborative features (to be implemented), it's a one-stop solution for various editing needs.

Features

General

  • 2-way-binding of the document contents
  • setting tab size & indentation unit
  • setting a placeholder text
  • applying preset themes
  • setting ReadOnly and Editable attributes
  • applying syntax highlighting and auto-completion for 13 different languages
  • manual resizing of the editor (similar to html textarea)
  • image preview
  • custom linting
  • insert text at cursor / at position
  • allow undo / redo toolbar buttons
  • configure which plugins are active at startup
  • optionally scroll to the bottom of the document & place the cursor on the last line
  • support long line wrapping
  • toolbar with toolbar button template
  • support read-only paragraphs
  • diff viewer
  • Implement cursor tooltips
  • Implement Copilot/AI style suggestions
  • allow setting the Starting selection
  • Retrieve keybindings
  • Implement search & replace
  • Highlight edited lines
  • Allow toggling console debug mode
  • collaborative editing
  • Add C# language needs a backend, see mirrorsharp
  • voice recognition
  • automatic translation
  • update doc in dotnet either on text changes or on blur / add GetText()
  • deleting a file link deletes the file from the server

For Markdown language

  • apply Markdown syntax
  • report Markdown syntax at selection(s)
  • Resized header text proportional to header #
  • keybindings to set text in bold (Ctrl-B) or italic (Ctrl-I)
  • support emoji: replace on type
  • format lists
  • Implement @user mentions with dropdown list
  • emojis: view :emoji_codes: in the raw text as the emoji
  • emojis: add auto-complete
  • Show horizontal rule instead of ------
  • style Markdown quote lines and paragraphs
  • add increase / decrease selected header (#) level
  • format inline html
  • support file uploads
  • better highlight markdown inline code and code blocks
  • format links, make them clickable
  • use latest header
  • format tables
  • customize markdown header sizes
  • support toolbar toggling of checklist items even if checked
  • Apply Markdown style toggles to whole words
  • Toggling-off a Markdown style should always select the whole styled text block
  • Add mermaid language highlighting
  • Implement kroki / mermaid preview
  • add color picker extension

Screenshots

image

Try It Out

Experience Blazor CodeMirror 6 in action! Visit the live demo at https://gaelj.github.io/BlazorCodeMirror6/ to see the component's capabilities.

Quick Start

Currently there is no Nuget package available, but it is planned.

To get started with Blazor CodeMirror 6:

  • Clone the repository: git clone https://github.com/gaelj/BlazorCodeMirror6.git
  • Reference in your project: <ProjectReference Include="..\CodeMirror6\CodeMirror6.csproj" />
  • Install node.js and npx: npm install npx
  • Add @using CodeMirror6 in your _Imports.razor or page/component.
  • Use the <CodeMirror6Wrapper /> component as demonstrated in Examples.Common/Example.razor.
  • For build issues: run dotnet clean followed by dotnet build.

Examples

See Examples.Common/Example.razor

JS / CSS resources are loaded automatically (nothing to add in _Host.cshtml / index.html).

Just add @using CodeMirror6, @using CodeMirror6.Commands and @using CodeMirror6.Models in _Imports.razor or in your razor page / component and use <CodeMirror6Wrapper /> as in the examples.

Modification

  • The javascript-side initialization is in CodeMirror6/NodeLib/src/index.ts
  • Interop from .Net to JS is in CodeMirror6/CodeMirrorJsInterop.cs
  • Interop from JS to .Net is in CodeMirror6Wrapper.razor.cs
  • The blazor component is in CodeMirror6Wrapper.razor and CodeMirror6Wrapper.razor.cs
  • The example component is in Examples.Common/Example.razor

The Node project is automatically built with the .Net project.

FAQs / Troubleshooting

  • If you have npm / rollup errors when building (for example after pulling recent changes), dotnet clean will delete the node_modules directory. Then run dotnet build again.

Changelog

  • initial development 🚧

License

Blazor CodeMirror 6 is released under the MIT License. See the LICENSE for more details.

Contact

File an issue or open a discussion