🚧 This project is still a work-in-progress 🚧
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.
- 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.
- 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
- 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
Experience Blazor CodeMirror 6 in action! Visit the live demo at https://gaelj.github.io/BlazorCodeMirror6/ to see the component's capabilities.
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 inExamples.Common/Example.razor
. - For build issues:
run dotnet clean
followed bydotnet build
.
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.
- 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
andCodeMirror6Wrapper.razor.cs
- The example component is in
Examples.Common/Example.razor
The Node project is automatically built with the .Net project.
- If you have npm / rollup errors when building (for example after pulling recent changes),
dotnet clean
will delete thenode_modules
directory. Then rundotnet build
again.
- initial development 🚧
Blazor CodeMirror 6 is released under the MIT License. See the LICENSE for more details.
File an issue or open a discussion