114 lines
3.9 KiB
Plaintext
114 lines
3.9 KiB
Plaintext
@page "/"
|
|
@using BlazorMonaco
|
|
@using BlazorMonaco.Editor
|
|
@using BlazorMonaco.Languages
|
|
@using Inspectron.PrintServer.TemplateEditor.Services
|
|
@inject IJSRuntime JSRuntime
|
|
|
|
<div class="editor-container">
|
|
<div class="toolbar">
|
|
<button class="toolbar-btn" title="New">New</button>
|
|
<button class="toolbar-btn" title="Open">Open</button>
|
|
<button class="toolbar-btn" title="Save">Save</button>
|
|
<div class="toolbar-separator"></div>
|
|
<button class="toolbar-btn" title="Load JSON data file for expression completions" @onclick="LoadJsonAsync">Load JSON</button>
|
|
@if (!string.IsNullOrEmpty(_loadedJsonFile))
|
|
{
|
|
<span class="json-indicator" title="@_loadedJsonFile">@_loadedJsonFile</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="split-pane">
|
|
<div class="pane pane-editor">
|
|
<div class="pane-header">Editor</div>
|
|
<StandaloneCodeEditor @ref="_editor" Id="my-editor-id"
|
|
ConstructionOptions="EditorConstructionOptions"
|
|
OnDidInit="OnEditorInitAsync"
|
|
OnDidChangeModelContent="OnContentChanged" />
|
|
</div>
|
|
|
|
<div class="pane pane-preview">
|
|
<div class="pane-header">Preview</div>
|
|
<div class="preview-content">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private StandaloneCodeEditor _editor = null!;
|
|
private string _editorContent = "";
|
|
private string? _loadedJsonFile;
|
|
private readonly TemplateCompletionProvider _completionProvider = new();
|
|
|
|
private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
|
|
{
|
|
return new StandaloneEditorConstructionOptions
|
|
{
|
|
AutomaticLayout = true,
|
|
Language = "receipt-xml",
|
|
Theme = "receipt-dark"
|
|
};
|
|
}
|
|
|
|
private async Task OnEditorInitAsync()
|
|
{
|
|
// Register custom language and theme
|
|
await JSRuntime.InvokeVoidAsync("receiptLanguage.register");
|
|
await JSRuntime.InvokeVoidAsync("receiptLanguage.defineTheme");
|
|
|
|
// Apply the theme now that it's defined
|
|
await BlazorMonaco.Editor.Global.SetTheme(JSRuntime, "receipt-dark");
|
|
|
|
// Wire up content accessor for the completion provider
|
|
_completionProvider.SetEditorContentAccessor(() => _editorContent);
|
|
|
|
// Register completion provider
|
|
await BlazorMonaco.Languages.Global.RegisterCompletionItemProvider(
|
|
JSRuntime,
|
|
"receipt-xml",
|
|
_completionProvider.ProvideCompletionItems,
|
|
_completionProvider.ResolveCompletionItem);
|
|
}
|
|
|
|
private async Task OnContentChanged(ModelContentChangedEvent e)
|
|
{
|
|
_editorContent = await _editor.GetValue();
|
|
}
|
|
|
|
private async Task LoadJsonAsync()
|
|
{
|
|
try
|
|
{
|
|
var result = await FilePicker.Default.PickAsync(new PickOptions
|
|
{
|
|
PickerTitle = "Select a JSON data file",
|
|
FileTypes = new FilePickerFileType(new Dictionary<DevicePlatform, IEnumerable<string>>
|
|
{
|
|
{ DevicePlatform.WinUI, new[] { ".json" } },
|
|
{ DevicePlatform.macOS, new[] { "json" } },
|
|
{ DevicePlatform.iOS, new[] { "public.json" } },
|
|
{ DevicePlatform.Android, new[] { "application/json" } },
|
|
})
|
|
});
|
|
|
|
if (result is null)
|
|
return;
|
|
|
|
using var stream = await result.OpenReadAsync();
|
|
using var reader = new StreamReader(stream);
|
|
var json = await reader.ReadToEndAsync();
|
|
|
|
var paths = JsonPathExtractor.Extract(json);
|
|
_completionProvider.SetJsonPaths(paths);
|
|
_loadedJsonFile = result.FileName;
|
|
|
|
StateHasChanged();
|
|
}
|
|
catch (Exception)
|
|
{
|
|
// User cancelled or file read failed
|
|
}
|
|
}
|
|
}
|