Xeku.Editors.Blazor 0.0.0.7

Xeku.Editors.Blazor

Xeku.Editors.Blazor provides advanced Blazor-specific property editors for XAF applications, including rich text editing and modern UI controls.

Features

• Tiptap Rich Text Editor: Modern WYSIWYG editor based on Tiptap 2.x.
• Excalidraw Whiteboard: Interactive whiteboard/diagram editor based on Excalidraw.
• Monaco Code Editor: Professional code editor with syntax highlighting for 80+ languages.
• Reveal.js Presentation Editor: Powerful presentation authoring tool based on Reveal.js and Monaco, supporting live Markdown preview.
• Custom Property Editors:
  • Hyperlink: Clickable links for URL/Email properties.
  • ButtonEdit: Text boxes with embedded action buttons.
  • ToggleSwitch: Modern switch UI for boolean properties.
  • EnumRadioButton: Item-based radio button groups for Enums.
• Mermaid Diagram Viewer: Renders complex diagrams (Flowcharts, Sequence Diagrams, etc.) from string properties.
• TreeView Enhancements: Advanced ITreeNode support with virtual scrolling and action control.

Usage Examples

1. Registering Editors

Assign the alias in your Business Object:

using Xeku.Editors.Attributes;

public class MyDemoObject : BaseObject
{
 [EditorAlias(XekuEditorAlias.HyperLink)]
 public string WebSite { get; set; }

 [EditorAlias(XekuEditorAlias.ToggleSwitch)]
 public bool IsActive { get; set; }

 [EditorAlias(XekuEditorAlias.EnumRadioButton)]
 public MyStatus Status { get; set; }

 // Monaco code editor for scripts
 [EditorAlias(XekuEditorAlias.Monaco)]
 [Size(SizeAttribute.Unlimited)]
 public string ScriptContent { get; set; }

 // Button edit for custom actions
 [EditorAlias(XekuEditorAlias.ButtonEditor)]
 public string CustomActionField { get; set; }

 // Reveal.js presentation editor (with live Markdown preview)
 [EditorAlias(XekuEditorAlias.Reveal)]
 [Size(SizeAttribute.Unlimited)]
 public string PresentationContent { get; set; }

 // Mermaid diagram viewer
 [EditorAlias(XekuEditorAlias.Mermaid)]
 [Size(SizeAttribute.Unlimited)]
 public string DiagramDefinition { get; set; }

 // Excalidraw whiteboard editor
 [EditorAlias(XekuEditorAlias.Excalidraw)]
 [Size(SizeAttribute.Unlimited)]
 [ModelDefault("RowCount", "40")] // Height = 40 * 20 = 800px
 public string WhiteboardData { get; set; }
}

2. Handling Button Clicks

Subscribe to events in a Blazor Controller:

using Xeku.Editors.Blazor.PropertyEditors;

public class MyButtonController : ObjectViewController<DetailView, MyDemoObject>
{
 protected override void OnActivated()
 {
 base.OnActivated();
 View.CustomizeViewItemControl<ButtonEditPropertyEditor>(this, (editor) => {
 editor.ButtonClicked += (s, propertyName) => {
 // Your custom logic here
 Application.ShowViewStrategy.ShowMessage($"Button clicked on {propertyName}!");
 };
 });
 }
}

AI Agent Integration

Use Cases

• Content Generation: AI Agents can directly interact with the Tiptap editor to generate, refactor, or summarize rich text content.
• UI State Debugging: Agents can inspect the ComponentModel state to diagnose rendering issues.

System Architecture

graph TD
 subgraph UI ["#e1f5ff Blazor Presentation"]
 Renderer["Razor Renderers"]
 Adapter["XAF Component Adapters"]
 Model["Component Models"]
 end

 subgraph Logic ["#fff4e1 XAF Integration"]
 PropEditor["PropertyEditors"]
 Module["EditorsBlazorModule"]
 end

 subgraph External ["#f3e5f5 External Libs"]
 Tiptap["Tiptap JS"]
 Monaco["Monaco Editor (BlazorMonaco)"]
 Reveal["Reveal.js 5.0 (Vite Bundle)"]
 end

 PropEditor --> Adapter
 Adapter --> Model
 Model --> Renderer
 Renderer -.-> Tiptap
 Module --> PropEditor

 style UI fill:#e1f5ff,stroke:#005cbf
 style Logic fill:#fff4e1,stroke:#d39e00
 style External fill:#f3e5f5,stroke:#6f42c1

Installation

dotnet add package Xeku.Editors.Blazor

Frontend Build

This module uses Vite to bundle frontend assets:

npm install
npm run build

Monaco Editor Setup

Since Monaco Editor relies on global scripts, you must add the following references to your Blazor Server _Host.cshtml or Blazor WebAssembly index.html file:

<script src="_content/BlazorMonaco/jsInterop.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
<script src="_content/Blazorade.Mermaid/blazorade-mermaid.js"></script>

Mermaid Editor Setup

This editor relies on Blazorade.Mermaid. The library handles JavaScript module loading automatically. However, ensure that static assets are correctly served in your application. No manual <script> tags are typically needed for Mermaid 2.x when using it as a module, but if you encounter loading issues, you can try adding:

<script src="_content/Blazorade.Mermaid/blazorade-mermaid.js"></script>