Blazor for v6?

v6
1

Has anyone gotten v6 to work with Blazor yet/has an example repo I could look at?

I’ve tried adding the npm packages but haven’t figured out how to get it to work just yet. As an example, here is my index.js:

import {basicSetup, EditorView} from "codemirror"
import {EditorState, Compartment} from "@codemirror/state"
import {python} from "@codemirror/lang-python"

let language = new Compartment, tabSize = new Compartment

let state = EditorState.create({
    extensions: [
        basicSetup,
        language.of(python()),
        tabSize.of(EditorState.tabSize.of(8))
    ]
})

let view = new EditorView({
    state,
    parent: document.body
})

function setTabSize(view, size) {
    view.dispatch({
        effects: tabSize.reconfigure(EditorState.tabSize.of(size))
    })
}

My Index.razor looks like:

@page "/"
@inject IJSRuntime JSRuntime;

<editor></editor>
<textarea id="codearea">select * from test</textarea>

<br />
<br />

Input Code: @UserCodeInput

@code{

    public string UserCodeInput { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("window.initCodeMirror");
        }
    }

    [JSInvokable("UpdateField")]
    public Task UpdateField(string codeValue)
    {
        UserCodeInput = codeValue;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

And my _Host.cshtml is:

@page "/"
@namespace BlazorApp1.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered"/>

<!DOCTYPE html>
<html>
    
<head>
    <title>NPM_Demo</title>
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>
    
<body>
………………..
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script src="js/index.bundle.js"></script>
<script>
window.initCodeMirror = function () {
    var textArea = document.getElementById('codemirror');
      
    var editor = CodeMirror.fromTextArea(textArea);

    editor.on('change', function () {
        textArea.innerHTML = editor.getValue();
        textArea.dispatchEvent(new Event('change', { bubbles: true }));
    });
}
</script>
</body>
    
</html>

The error message I keep getting is:

CodeMirror is not defined

Which I assume is because that’s v5 syntax, but I’m not sure where to go from here. Any help would be greatly appreciated!

2

Did you get it to work?

3

I made a working example in Blazor. It’s pretty basic right now, I will be adding more features and publishing as an official Nuget package.

Check it out here: GitHub - gaelj/BlazorCodeMirror6: Blazor wrapper for CodeMirror 6