Playzor.Blazor.Editor 1.0.1

Playzor.Blazor.Editor

The Playzor playground as a Blazor component: monaco editors for any number of files, roslyn compiling in the browser, dockable panels for file tree, preview, errors and console, and a tool bar whose built in buttons can be picked and extended.

Looking for the small iframe embed of the hosted playground instead? That is Playzor.Blazor.

@using Playzor.Blazor.Editor.Components

<PlayzorEditor Height="100%" DefaultSnippet="@("<h3>Hi</h3>")" />

Setup

// Program.cs
builder.Services.AddScoped(_ => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddPlayzor();   // pass a MudEx configuration to let it add MudBlazor too

<link href="_content/Playzor.Blazor.Editor/css/playzor-editor.css" rel="stylesheet" />
<script src="_content/Playzor.Blazor.Editor/lib/monaco-editor/min/vs/loader.js"></script>
<script src="_content/Playzor.Blazor.Editor/js/playzor-editor.js"></script>


<script src="_content/MudBlazor.Extensions/js/mudExPopoutEvents.js"></script>

Panels can be dragged into their own browser window. Blazor delivers dom events through the document of the page it started in, so a panel over there would be dead without that last script: it records the listeners and replays them into the popout window.

Two more things are needed, and the editor tells you when one is missing:

• A package proxy. nuget.org answers without CORS headers, so a .nupkg cannot be fetched from the browser. Add Playzor.Server and app.MapPlayzorApi(), or point the editor at a public playground: AddPlayzor(o => o.BaseAddress = PlayzorApiOptions.PlayzorNet).
• A preview page. The compiled component runs in a second WebAssembly instance. Reference Playzor.UserComponents, follow its readme, then point CompiledPreviewUrl at that route.

Content

Tool bar and panels

Save, Embed, Samples and Theme need someone to answer: their button appears once the matching event (OnSaveRequested, OnEmbedRequested, OnSampleSelected + Samples, DarkModeChanged) is wired — or, for save and samples, once an IPlayzorSnippetStore is registered. ToolButtons="PlayzorToolButtons.Standalone" gives you everything that works alone.

<PlayzorEditor ToolButtons="PlayzorToolButtons.Standalone | PlayzorToolButtons.Theme"
               DarkMode="@_dark" DarkModeChanged="@(d => _dark = d)">
    <ToolBarContent>
        <MudIconButton Icon="@Icons.Material.Outlined.Share" OnClick="@ShareAsync" />
    </ToolBarContent>
    <HeaderContent>
        <MudText Typo="Typo.h6" Class="ml-2">My playground</MudText>
    </HeaderContent>
    <ChildContent>
        <MudExDockItem Id="docs" Title="Docs" Direction="DockDirection.Right">
            <MyDocsPanel />
        </MudExDockItem>
    </ChildContent>
</PlayzorEditor>

Preview, theme and layout

Methods: TriggerCompileAsync(), GetFiles(), SetFilesAsync(files), OpenFileAsync(path), ResetLayoutAsync(), ReloadPreview().