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>