edcharbeneau / blazedown

A Client-Side Markdown editor built using C# and .NET on Blazor.

BlazeDown

This is an experiment built on top of an experiment to kick the tires of Blazor.

This is a proof of concept using Blazor to create an online Markdown editor.

This experiment is in no way intended to be a product, or example of best practices. It’s here because it’s possible and that’s all.

Client Side C#

BlazeDown was built using Blazor, a client side experimental framework for building native web applications using .NET and C#. That’s right, this app was created with .NET and is running natively in the browser using WebAssembly.

Thanks to Blazor the app requires no plugins, this is because the code is compiled to WebAssembly, something your browser understands. Nearly everything you see here was written in .NET using C# with a few exceptions. Since Blazor is in the experimental phase (I can’t stress that enough), some small workarounds are required for certain features.

Building BlazeDown

This experiment was to test out Blazor and see how easy (or difficult) it was to use a .NET Standard library on the client.

BlazeDown is available online, you can read about the building of BlazeDown or view the latest version of the BlazeDown source code here on GitHub.

blazedown's Issues

Markdown Component does not work with latest preview version of Blazor

@EdCharbeneau

Blazor version = 0.5.0-preview1-10320

Uncaught (in promise) Error: Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException: No element is currently associated with component 2
Error: No element is currently associated with component 2
    at BrowserRenderer.updateComponent (BrowserRenderer.ts:30)
    at renderBatch (Renderer.ts:45)
    at Array.<anonymous> (mono.js:1)
    at _emscripten_asm_const_iiiiii (mono.js:1)
    at :63538/wasm-function[5333]:25
    at :63538/wasm-function[3576]:44
    at :63538/wasm-function[3584]:408
    at :63538/wasm-function[3585]:224
    at :63538/wasm-function[3761]:189
    at :63538/wasm-function[727]:15646
  at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,T2,TRes] (:63538/System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x1ec1fe8 + 0x00054> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,TRes] (:63538/System.String identifier, T0 arg0, T1 arg1) <0x1ec1f00 + 0x00022> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.UpdateDisplay (:63538/Microsoft.AspNetCore.Blazor.Rendering.RenderBatch& batch) <0x1ec1e18 + 0x0001c> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at :63538/Microsoft.AspNetCore.Blazor.Rendering.Renderer.ProcessRenderQueue () <0x1be0ae8 + 0x000a0> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.Renderer.AddToRenderQueue (:63538/System.Int32 componentId, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1bdd408 + 0x00068> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Components.RenderHandle.Render (:63538/Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1bdd0f0 + 0x00036> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at :63538/Microsoft.AspNetCore.Blazor.Components.BlazorComponent.StateHasChanged () <0x1bdcff8 + 0x00048> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Components.BlazorComponent.SetParameters (:63538/Microsoft.AspNetCore.Blazor.Components.ParameterCollection parameters) <0x1b82af0 + 0x000d0> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent (:63538/System.Type componentType, System.String domElementSelector) <0x1b0f6a8 + 0x0005e> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent[TComponent] (:63538/System.String domElementSelector) <0x1b0f398 + 0x00020> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at BlazeBlog.Program.Main (:63538/System.String[] args) <0x18be108 + 0x00036> in <782b7e02054b4a7286b1d3abc9652268>:0 
    at BrowserRenderer.updateComponent (BrowserRenderer.ts:30)
    at renderBatch (Renderer.ts:45)
    at Array.<anonymous> (mono.js:1)
    at _emscripten_asm_const_iiiiii (mono.js:1)
    at :63538/wasm-function[5333]:25
    at :63538/wasm-function[3576]:44
    at :63538/wasm-function[3584]:408
    at :63538/wasm-function[3585]:224
    at :63538/wasm-function[3761]:189
    at :63538/wasm-function[727]:15646
  at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,T2,TRes] (:63538/System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x1ec1fe8 + 0x00054> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Interop.RegisteredFunction.InvokeUnmarshalled[T0,T1,TRes] (:63538/System.String identifier, T0 arg0, T1 arg1) <0x1ec1f00 + 0x00022> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.UpdateDisplay (:63538/Microsoft.AspNetCore.Blazor.Rendering.RenderBatch& batch) <0x1ec1e18 + 0x0001c> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at :63538/Microsoft.AspNetCore.Blazor.Rendering.Renderer.ProcessRenderQueue () <0x1be0ae8 + 0x000a0> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Rendering.Renderer.AddToRenderQueue (:63538/System.Int32 componentId, Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1bdd408 + 0x00068> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Components.RenderHandle.Render (:63538/Microsoft.AspNetCore.Blazor.RenderFragment renderFragment) <0x1bdd0f0 + 0x00036> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at :63538/Microsoft.AspNetCore.Blazor.Components.BlazorComponent.StateHasChanged () <0x1bdcff8 + 0x00048> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Components.BlazorComponent.SetParameters (:63538/Microsoft.AspNetCore.Blazor.Components.ParameterCollection parameters) <0x1b82af0 + 0x000d0> in <1c7757c0c55745e0a917a5ee886bde7b>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent (:63538/System.Type componentType, System.String domElementSelector) <0x1b0f6a8 + 0x0005e> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at Microsoft.AspNetCore.Blazor.Browser.Rendering.BrowserRenderer.AddComponent[TComponent] (:63538/System.String domElementSelector) <0x1b0f398 + 0x00020> in <8e7b151653684e2ea904c3596e606ffc>:0 
  at BlazeBlog.Program.Main (:63538/System.String[] args) <0x18be108 + 0x00036> in <782b7e02054b4a7286b1d3abc9652268>:0 
    at Object.callMethod (MonoPlatform.ts:70)
    at Object.callEntryPoint (MonoPlatform.ts:47)
    at Boot.ts:38
    at step (UriHelper.ts:99)
    at Object.next (UriHelper.ts:99)
    at fulfilled (UriHelper.ts:99)

Getting errors on build - RenderTreeBuilder does not exist in namespace Microsoft.AspNetCore.Components.Rendering

Screenshot:

Visual Studio 2019 Enterprise 16.6.3.
OS is Windows 10, SDK is Core 3.1 latest.

Please add readme.md with demo link

After additional search I found live demo
I have seen it long time ago and remembered that this sample was live.

Please add link to readme.md for another people to see live demo and not to think it not exists.

Also I wonder why your project is not in community's samples list

Best Regards