### Custom Tools Example

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/05-api-summary.md

Provides an example of how to define custom tools for the toolbar, combining built-in tools with custom implementations.

```csharp
new[] {
    QuillTools.Bold(),
    new CustomTool((_, e) => Task.CompletedTask, "icon_name", "tooltip")
}
```

--------------------------------

### Install MudExRichTextEditor NuGet Package

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Install the MudExRichTextEditor NuGet package using the .NET CLI.

```bash
dotnet add package MudExRichTextEditor
```

--------------------------------

### Basic MudExRichTextEditor Setup

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Demonstrates the basic setup of the MudExRichTextEdit component with a reference, value binding, height, and placeholder. Includes a save button to log the content.

```razor
@page "/"
@using MudExRichTextEditor
@using MudExRichTextEditor.Types

<MudExRichTextEdit @ref="Editor"
                   @bind-Value="Content"
                   Height="400"
                   Placeholder="Enter content...">
</MudExRichTextEdit>

<MudButton OnClick="@SaveContent">Save</MudButton>

@code {
    private MudExRichTextEdit Editor;
    private string Content = "";

    private async Task SaveContent()
    {
        Console.WriteLine("Content: " + Content);
    }
}
```

--------------------------------

### Example: GetQuillJsCreationConfigAsync Implementation

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Provides a sample implementation for GetQuillJsCreationConfigAsync, returning a configuration object for an ImageCompressor module with a quality setting of 0.7.

```csharp
public override Task<object> GetQuillJsCreationConfigAsync(IJSRuntime jsRuntime, MudExRichTextEdit editor)
{
    return Task.FromResult<object>(new { ImageCompressor = new { quality = 0.7 } });
}
```

--------------------------------

### Custom Modules Example

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/05-api-summary.md

Demonstrates how to create a custom module by inheriting from the QuillModule base class and overriding properties like JsFiles.

```csharp
class MyModule : QuillModule {
    public override string[] JsFiles => new[] { "path/to/file.js" };
}
```

--------------------------------

### QuillBetterTableModule Usage Examples

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Demonstrates how to instantiate the QuillBetterTableModule using different constructor overloads for default colors, theme colors, and custom color arrays.

```csharp
// Using default colors
var tableModule = new QuillBetterTableModule();

// Using theme colors
var tableModule = new QuillBetterTableModule(AppTheme, isDarkMode);

// Using custom colors
var colors = new[] { Color.Primary, Color.Secondary, Color.Info };
var tableModule = new QuillBetterTableModule(colors);
```

--------------------------------

### Example: GetMentionsFromContentAsync Usage

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Demonstrates how to call the GetMentionsFromContentAsync method and iterate through the retrieved mentions to display their values and denotation characters.

```csharp
var mentions = await mentionModule.GetMentionsFromContentAsync();
foreach (var mention in mentions)
{
    Console.WriteLine($"Found mention: {mention.Value} ({mention.DenotationChar})");
}
```

--------------------------------

### Custom MudExRichTextEdit Configuration

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Provides a detailed example of a custom MudExRichTextEdit setup, including custom tools, modules, default tool handlers, and various styling and behavior properties.

```razor
<MudExRichTextEdit @bind-Value="Content"
                   Tools="@CustomTools"
                   Modules="@CustomModules"
                   DefaultToolHandlers="@CustomHandlers"
                   Height="400"
                   BackgroundColor="@MudExColor.Surface"
                   ToolBarBackgroundColor="@MudExColor.Primary"
                   EnableResize="true"
                   Immediate="true">
</MudExRichTextEdit>

@code {
    private QuillTool[] CustomTools => new[]
    {
        QuillTools.Header(group: 1),
        QuillTools.Bold(group: 2),
        QuillTools.Italic(group: 2),
        QuillTools.Underline(group: 2),
        QuillTools.Strike(group: 2),
        QuillTools.Link(group: 3),
        QuillTools.Image(group: 3),
        new CustomTool(
            onClick: async (_, editor) => await SaveAsync(),
            icon: Icons.Material.Filled.Save,
            tooltip: "Save document",
            color: Color.Success,
            group: 99
        )
    };

    private IQuillModule[] CustomModules => new[]
    {
        new QuillBlotFormatterModule(),
        new QuillImageCompressorModule(),
        new QuillTableBetterModule()
    };

    private DefaultToolHandler[] CustomHandlers => new[]
    {
        new DefaultToolHandler("save", async (editor, args) =>
        {
            var html = await editor.GetSemanticHTML();
            // Handle save
        })
    };

    private async Task SaveAsync()
    {
        // Save logic
    }
}
```

--------------------------------

### Instantiate CustomTool with Static Properties

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Example of creating a CustomTool instance using static values for icon, tooltip, and color. This is suitable for buttons with fixed appearances and actions.

```csharp
new CustomTool(
    onClick: async (tool, editor) => await DoSomething(),
    icon: Icons.Material.Filled.Print,
    tooltip: "Print document",
    color: Color.Primary,
    group: 7
)
```

--------------------------------

### Get All Standard Quill Tools

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Returns an enumerable collection of all predefined standard Quill toolbar tools. Use this as a starting point for creating custom toolbars.

```csharp
public static IEnumerable<QuillTool> All()
}
```

--------------------------------

### Create Custom Validation Module

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/07-advanced-usage.md

Implement a custom module for content validation. This example shows how to monitor text changes and log a warning if the content exceeds a character limit.

```csharp
public class ValidationModule : QuillModule
{
    public override string[] JsFiles => Array.Empty<string>();

    protected override async Task OnModuleCreatedAsync(IJSRuntime jsRuntime, MudExRichTextEdit editor)
    {
        // Monitor content changes for validation
        await jsRuntime.InvokeVoidAsync("eval", @"
            if (window.__quillEditor) {
                window.__quillEditor.on('text-change', (delta, oldDelta, source) => {
                    const text = window.__quillEditor.getText();
                    if (text.length > 5000) {
                        console.warn('Content exceeds 5000 characters');
                    }
                });
            }
        ");
    }
}
```

--------------------------------

### Instantiate CustomTool with Dynamic Properties

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Example of creating a CustomTool instance where icon, tooltip, and color are determined by functions, allowing for dynamic button states based on editor properties like read-only status.

```csharp
new CustomTool(
    onClick: async (tool, editor) => await DoSomething(),
    icon: (tool, editor) => editor.ReadOnly ? Icons.Material.Filled.Lock : Icons.Material.Filled.Edit,
    tooltip: (tool, editor) => editor.ReadOnly ? "Locked" : "Editable",
    color: (tool, editor) => editor.ReadOnly ? Color.Error : Color.Success,
    group: 7
)
```

--------------------------------

### Real-time Content Change Tracking

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/07-advanced-usage.md

Enable real-time tracking of content changes in the editor. This example binds the editor's value and updates a timestamp and character count on each change.

```csharp
@page "/collaborative-editor"
@using MudExRichTextEditor

<MudExRichTextEdit @ref="Editor"
                   @bind-Value="@Content"
                   Immediate="true"
                   Height="400">
</MudExRichTextEdit>

<MudText Typo="Typo.Caption">
    Last change: @LastChangeTime
    Characters: @Content.Length
</MudText>

@code {
    private MudExRichTextEdit Editor;
    private string Content = "";
    private DateTime LastChangeTime = DateTime.Now;

    // Called via binding
    private async Task ContentChanged()
    {
        LastChangeTime = DateTime.Now;
        
        // Send to server for real-time sync
        await NotifyRemoteClientsAsync(Content);
    }

    private async Task NotifyRemoteClientsAsync(string content)
    {
        // Use SignalR or WebSocket to sync
    }
}
```

--------------------------------

### Compress Image Before Upload

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/07-advanced-usage.md

Customize the file upload process to compress images before they are sent to the server. This example uses placeholder methods for compression and upload.

```csharp
@page "/image-compression"
@using MudExRichTextEditor
@using MudBlazor.Extensions.Core

<MudExRichTextEdit @ref="Editor"
                   CustomUploadFunc="@CompressAndUpload"
                   Height="400">
</MudExRichTextEdit>

@code {
    private MudExRichTextEdit Editor;

    private async Task<string> CompressAndUpload(UploadableFile file)
    {
        // Only handle images
        if (!file.ContentType.StartsWith("image/"))
        {
            return null;
        }

        // Compress image (simplified example)
        // In production, use ImageSharp or similar
        var compressedData = await CompressImageAsync(file.Data, file.ContentType);

        // Upload compressed image
        var url = await UploadToServerAsync(compressedData, file.FileName);

        return url;
    }

    private async Task<byte[]> CompressImageAsync(byte[] imageData, string contentType)
    {
        // Use ImageSharp.Web or similar to compress
        // This is a placeholder
        return imageData;
    }

    private async Task<string> UploadToServerAsync(byte[] data, string fileName)
    {
        // Upload to server and return URL
        using var content = new MultipartFormDataContent();
        content.Add(new ByteArrayContent(data), "file", fileName);

        var response = await HttpClient.PostAsync("/api/upload", content);
        return await response.Content.ReadAsStringAsync();
    }
}
```

--------------------------------

### Get Content in Various Formats

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Shows how to retrieve the editor's content in different formats: semantic HTML, raw HTML, plain text, and Quill Delta (JSON). Requires an IJSRuntime instance.

```csharp
@page "/formats"
@using MudExRichTextEditor
@using MudExRichTextEditor.Types
@inject IJSRuntime JS

<MudExRichTextEdit @ref="@Editor" Height="300" />

<MudButton OnClick="@GetFormats" Variant="Variant.Filled">Get Formats</MudButton>

@code {
    private MudExRichTextEdit Editor;

    private async Task GetFormats()
    {
        // Get semantic HTML (recommended)
        var semanticHtml = await Editor.GetSemanticHTML();
        
        // Get raw HTML
        var rawHtml = await Editor.GetHtml();
        
        // Get plain text only
        var text = await Editor.GetText();
        
        // Get Quill Delta format (JSON)
        var deltaJson = await Editor.GetContent();

        Console.WriteLine($"Semantic: {semanticHtml}");
        Console.WriteLine($"Raw: {rawHtml}");
        Console.WriteLine($"Text: {text}");
        Console.WriteLine($"Delta: {deltaJson}");
    }
}
```

--------------------------------

### Override OnModuleCreatedAsync in MudExRichTextEditor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Override this method to perform setup after the Quill instance has been created. It receives the JavaScript runtime and the editor instance.

```csharp
protected virtual Task OnModuleCreatedAsync(IJSRuntime jsRuntime, MudExRichTextEdit editor)
```

--------------------------------

### MudExRichTextEdit with QuillMentionModule

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Shows a complete example of integrating the QuillMentionModule into a MudExRichTextEdit component. It includes defining a User type, initializing the module with a data retrieval function, and setting up an event handler for mention selection.

```csharp
public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public override string ToString() => Name;
}

<MudExRichTextEdit @ref="Editor"
                   @bind-Value="Content"
                   Modules="@new[] { MentionModule }"
                   Height="400">
</MudExRichTextEdit>

@code {
    private MudExRichTextEdit Editor;
    private string Content = "";
    private QuillMentionModule<User> MentionModule;

    protected override void OnInitialized()
    {
        MentionModule = new QuillMentionModule<User>(GetUsers, '@');
        MentionModule.AfterMentionSelect = async (user) =>
        {
            Console.WriteLine($"Selected: {user.Name}");
        };
    }

    private async Task<IEnumerable<User>> GetUsers(char denotationChar, string searchTerm)
    {
        // Return filtered user list based on search term
        return new[]
        {
            new User { Id = 1, Name = "Alice" },
            new User { Id = 2, Name = "Bob" }
        }.Where(u => u.Name.Contains(searchTerm, StringComparison.OrdinalIgnoreCase));
    }
}
```

--------------------------------

### Get Content in Specific Format

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/05-api-summary.md

Shows how to retrieve the editor's content in a specific format, such as Semantic HTML, using the GetValue method.

```csharp
var html = await editor.GetValue(GetHtmlBehavior.SemanticHtml);
```

--------------------------------

### Modules and Extensibility API

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/README.md

Details how to extend the editor with custom modules. It covers the `IQuillModule` interface, `QuillModule` base class, built-in module implementations, and guides for creating custom modules.

```APIDOC
## Modules and Extensibility API

### Description
This section outlines the API for extending the MudExRichTextEditor with custom modules, including interface specifications, base classes, and built-in module details.

### `IQuillModule` Interface
- Specification of the `IQuillModule` interface.

### `QuillModule` Base Class
- Documentation for the `QuillModule` base class.

### Built-in Modules
- API details for all 6 built-in module implementations.

### Custom Module Creation
- Guide and API references for creating custom modules.

### `Mention<T>` Type Reference
- Documentation for the `Mention<T>` data type used in mention functionality.

```

--------------------------------

### Basic MudExRichTextEdit Component Usage

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/README.md

This example demonstrates the basic usage of the MudExRichTextEdit component, including binding to a read-only state and setting a custom height and placeholder. Ensure MudExRichTextEditor is added to your _Imports.razor file.

```csharp
@page "/"

<MudCheckBox Label="Read only" @bind-Checked="_readOnly" />

<MudExRichTextEdit @ref="@Editor"
                   ReadOnly="@_readOnly"
                   Height="444"
                   Class="m-2"
                   Placeholder="Edit html">
		
</MudExRichTextEdit>

@code {	
    bool _readOnly = false;
	MudExRichTextEdit Editor;	
}
```

--------------------------------

### Get Module Instance by Type

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Retrieves a loaded module instance by its interface or class type. Returns null if the module is not found.

```csharp
public T GetModule<T>() where T : IQuillModule
{
    // ... implementation details ...
}
```

```csharp
// Get the mention module
var mentionModule = _editor.GetModule<QuillMentionModule<User>>();
if (mentionModule != null)
{
    var mentions = await mentionModule.GetMentionsFromContentAsync();
}
```

--------------------------------

### Getting Content Flow (Editor to Parent)

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Illustrates the process of retrieving content from the editor and propagating it back to the parent component, triggered by JavaScript events.

```sequence
JavaScript event (content-changed, blur, mouse-leave)
    ↓
OnContentChanged / OnBlur / OnMouseLeave
    ↓ (if appropriate timing)
RaiseValueChangeForCurrentValue()
    ↓
GetValue(ValueHtmlBehavior)
    ↓
GetHtml() | GetSemanticHTML() | GetText() | GetContent()
    ↓ (JavaScript)
ValueChanged.InvokeAsync(content)
    ↓
Parent Component detects change
```

--------------------------------

### JavaScript Interoperability with DInvokeAsync

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Provides an example of using BlazorJS's `DInvokeAsync` pattern for cleaner and more robust JavaScript calls, including automatic `window` and element passing.

```csharp
await JsRuntime.DInvokeAsync<T>((window, element, ...args) => {
    // Arrow function with window, element, and custom args
    return window.Quill.getEditor(element).__quill.doSomething();
}, ElementReference, ...args);
```

--------------------------------

### Example: OnLoadedAsync Implementation for Module Registration

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Demonstrates how to use OnLoadedAsync to register a custom Quill module named 'myModule' with the JavaScript Quill instance. It returns null, indicating no JSObjectReference is needed.

```csharp
protected override async Task<IJSObjectReference> OnLoadedAsync(IJSRuntime jsRuntime, MudExRichTextEdit editor)
{
    await jsRuntime.InvokeVoidAsync("eval", "Quill.register('modules/myModule', MyModule)");
    return null;
}
```

--------------------------------

### Override OnModuleLoadedAsync in MudExRichTextEditor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Override this method to perform setup when the module's JavaScript files are loaded. It receives the JavaScript runtime and the editor instance.

```csharp
protected virtual Task<IJSObjectReference> OnModuleLoadedAsync(IJSRuntime jsRuntime, MudExRichTextEdit editor)
```

--------------------------------

### Register DefaultToolHandlers for Editor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Example of creating an array of DefaultToolHandler instances to register custom event handlers for tools. These handlers can interact with the editor and perform actions based on arguments passed from JavaScript.

```csharp
var handlers = new[]
{
    new DefaultToolHandler(
        identifier: "custom-format",
        handler: async (editor, args) =>
        {
            var format = args[0]?.ToString() ?? "";
            await editor.InsertHtmlAsync($"<div class='{format}'>Content</div>");
        }
    ),
    new DefaultToolHandler(
        identifier: "save-draft",
        handler: async (editor, args) =>
        {
            var content = await editor.GetSemanticHTML();
            await SaveToDatabaseAsync(content);
        }
    )
};

<MudExRichTextEdit DefaultToolHandlers="@handlers" />
```

--------------------------------

### Custom Toolbar with Additional Tools for Rich Text Editor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Create a custom toolbar for the rich text editor by defining an array of QuillTool objects. This example includes standard tools and a custom button that logs editor content.

```csharp
@page "/custom-tools"
@using MudExRichTextEditor
@using MudExRichTextEditor.Types

<MudExRichTextEdit @ref="@Editor"
                   Tools="@CustomTools"
                   Height="400">
</MudExRichTextEdit>

@code {
    private MudExRichTextEdit Editor;

    private QuillTool[] CustomTools => new[]
    {
        QuillTools.Header(group: 1),
        QuillTools.Bold(group: 2),
        QuillTools.Italic(group: 2),
        QuillTools.Underline(group: 2),
        QuillTools.OrderedList(group: 3),
        QuillTools.BulletList(group: 3),
        QuillTools.Link(group: 4),
        QuillTools.Image(group: 4),
        
        // Custom button
        new CustomTool(
            onClick: HandleCustomButton,
            icon: "more_horiz",
            tooltip: "Custom Action",
            color: Color.Primary,
            group: 99
        )
    };

    private async Task HandleCustomButton(CustomTool tool, MudExRichTextEdit editor)
    {
        var content = await editor.GetText();
        Console.WriteLine($"Custom action: {content}");
    }
}
```

--------------------------------

### Get HTML Content with Semantic Option

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

A convenience overload to get HTML in either raw or semantic form. Pass true for semantic HTML or false for raw HTML.

```csharp
// Get semantic HTML
var html = await _editor.GetHtml(true);
// Equivalent to
var html2 = await _editor.GetSemanticHTML();
```

--------------------------------

### Create Custom Quill Toolbar Tools

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Demonstrates creating custom Quill toolbar tools, including a basic bold tool and a header tool with options. Useful for tailoring the editor's toolbar.

```csharp
// Get all standard tools
var allTools = QuillTool.All().ToArray();

// Create custom tool
var boldTool = new QuillTool(cls: "ql-bold", group: 2);

// Tool with options
var headerTool = new QuillTool(cls: "ql-header", group: 1, options: ["", "1", "2", "3"]);
```

--------------------------------

### Module Lifecycle Overview

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Illustrates the sequence of methods called during a module's lifecycle, from creation to disposal. Key stages include OnLoadedAsync, GetQuillJsCreationConfigAsync, and OnCreatedAsync.

```text
Create → OnLoadedAsync() → GetQuillJsCreationConfigAsync() → 
Quill Constructor → OnCreatedAsync() → Use → DisposeAsync()
```

--------------------------------

### Using Standard Quill Presets

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Demonstrates how to initialize the MudExRichTextEditor with a standard set of tools and modules provided by QuillPresets.Standard. Set the editor's height to 400 pixels.

```csharp
<MudExRichTextEdit @ref="Editor"
                   @bind-Value="Content"
                   Tools="@QuillPresets.Standard.Tools"
                   Modules="@QuillPresets.Standard.Modules"
                   Height="400">
</MudExRichTextEdit>

@code {
    private MudExRichTextEdit Editor;
    private string Content = "";
}
```

--------------------------------

### Using Quill Presets in MudExRichTextEdit

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Demonstrates how to apply Minimal, Standard, and Full Quill presets to the MudExRichTextEdit component. Also shows how to create a custom combination of tools and modules.

```razor
// Use Minimal preset
<MudExRichTextEdit Tools="@QuillPresets.Minimal.Tools" 
                   Modules="@QuillPresets.Minimal.Modules" />

// Use Standard preset
<MudExRichTextEdit Tools="@QuillPresets.Standard.Tools" 
                   Modules="@QuillPresets.Standard.Modules" />

// Use Full preset
<MudExRichTextEdit Tools="@QuillPresets.Full.Tools" 
                   Modules="@QuillPresets.Full.Modules" />

// Custom combination
<MudExRichTextEdit Tools="@new[] { QuillTools.Bold(), QuillTools.Italic(), QuillTools.Header() }" 
                   Modules="@new[] { new QuillBlotFormatterModule() }" />
```

--------------------------------

### GetHtml(bool semantic)

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

A convenience overload to get HTML in either raw or semantic form based on the provided boolean parameter.

```APIDOC
## GetHtml(bool semantic)

### Description
Convenience overload to get HTML in either raw or semantic form.

### Method
GET

### Endpoint
/api/editor/html

### Parameters
#### Query Parameters
- **semantic** (bool) - Required - If true, returns semantic HTML; if false, returns raw HTML

### Returns
Task<string>

### Request Example
```csharp
// Get semantic HTML
var html = await _editor.GetHtml(true);
```

### Response Example
```html
<p><strong>Bold text</strong></p>
```
```

--------------------------------

### Get Plain Text Content

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Retrieves only the plain text content of the editor, stripping all formatting. Use when only the textual content is required.

```csharp
public async Task<string> GetText()
{
    string plainText = await _editor.GetText();
}
```

--------------------------------

### Immediate vs Deferred Updates

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Control how content updates are handled. Use `Immediate="true"` for real-time updates as the user types, or `Immediate="false"` (default) for deferred updates to reduce re-renders. This is useful for performance optimization.

```csharp
@page "/updates"
@using MudExRichTextEditor

<MudSwitch @bind-Checked="@Immediate" Label="Immediate updates" />

<MudExRichTextEdit @bind-Value="@Content"
                   Immediate="@Immediate"
                   Height="300"
                   Placeholder="Start typing...">
</MudExRichTextEdit>

<MudText>Last content: @Content</MudText>

@code {
    private bool Immediate = false;
    private string Content = "";
}
```

--------------------------------

### Pre-fill and Insert Content

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Demonstrates methods to pre-fill the editor with HTML content using `SetHtml` and insert HTML at the current cursor position using `InsertHtmlAsync`.

```csharp
@page "/prefill"
@using MudExRichTextEditor

<MudButton OnClick="@SetContent">Set Content</MudButton>
<MudButton OnClick="@InsertText">Insert at Cursor</MudButton>

<MudExRichTextEdit @ref="@Editor" Height="300" />

@code {
    private MudExRichTextEdit Editor;

    private async Task SetContent()
    {
        await Editor.SetHtml("<h2>Welcome</h2><p>This content is pre-filled</p>");
    }

    private async Task InsertText()
    {
        await Editor.InsertHtmlAsync("<p><em>Inserted text</em></p>");
    }
}
```

--------------------------------

### Instantiate QuillBetterTableModule with Theme

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Instantiate QuillBetterTableModule by passing the current MudBlazor theme and dark mode status. This allows the module to use theme palette colors for table cells.

```csharp
var module = new QuillBetterTableModule(theme, isDarkMode);
// Uses theme palette colors for table cells
```

--------------------------------

### Editor with Presets

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Shows how to use pre-configured presets (Minimal, Standard, Full) for the MudExRichTextEdit component to quickly set up different feature sets.

```csharp
@page "/editor"
@using MudExRichTextEditor
@using MudExRichTextEditor.Types

<!-- Minimal: Basic formatting only -->
<MudExRichTextEdit @bind-Value="@Content"
                   Tools="@QuillPresets.Minimal.Tools"
                   Modules="@QuillPresets.Minimal.Modules"
                   Height="300">
</MudExRichTextEdit>

<!-- Standard: Common features with image resizing -->
<MudExRichTextEdit @bind-Value="@Content"
                   Tools="@QuillPresets.Standard.Tools"
                   Modules="@QuillPresets.Standard.Modules"
                   Height="400">
</MudExRichTextEdit>

<!-- Full: All features including tables, colors, video -->
<MudExRichTextEdit @bind-Value="@Content"
                   Tools="@QuillPresets.Full.Tools"
                   Modules="@QuillPresets.Full.Modules"
                   Height="500">
</MudExRichTextEdit>

@code {
    private string Content = "";
}
```

--------------------------------

### Deferred vs. Immediate Content Updates

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Compares the behavior of deferred updates (default, false) with immediate updates. Deferred updates fire OnBlur once, while immediate updates fire OnContentChanged per keystroke, impacting parent re-renders.

```text
Without Immediate: OnBlur fires once
With Immediate: OnContentChanged fires per keystroke
```

--------------------------------

### Define Get HTML Behavior

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Determines the format returned when retrieving editor content. Options include InnerHtml, SemanticHtml, Text, and Content (Delta JSON).

```csharp
public enum GetHtmlBehavior
{
    InnerHtml,
    SemanticHtml,
    Text,
    Content
}
```

--------------------------------

### Use Preset Configuration

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/05-api-summary.md

Illustrates how to apply a pre-configured set of tools and modules to the MudExRichTextEdit component using QuillPresets.

```razor
<MudExRichTextEdit Tools="@QuillPresets.Standard.Tools"
                   Modules="@QuillPresets.Standard.Modules" />
```

--------------------------------

### API Summary

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/README.md

A quick reference API summary with condensed tables for the component class signature, parameter categorization, method summaries, and type definitions.

```APIDOC
## API Summary

### Description
This provides a condensed reference to the MudExRichTextEditor's API, including its class signature, parameters, methods, and types.

### Component Class Signature
- Overview of the `MudExRichTextEdit` component's signature.

### Parameter Categorization
- Grouped lists of component parameters.

### Method Summaries
- Brief descriptions of all available public methods.

### Type Definitions at a Glance
- Quick reference for key types and enums.

### Dependencies and Version Info
- Details on package dependencies and version compatibility.

```

--------------------------------

### Custom Tools and Handlers

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Shows how to configure the MudExRichTextEditor with custom toolbar tools and default tool handlers. Includes a 'print' tool that outputs semantic HTML and a custom handler for 'custom-action' that logs text to the console.

```csharp
<MudExRichTextEdit @ref="Editor"
                   @bind-Value="Content"
                   Tools="@CustomTools"
                   DefaultToolHandlers="@Handlers"
                   Height="400">
</MudExRichTextEdit>

@code {
    private MudExRichTextEdit Editor;
    private string Content = "";

    private QuillTool[] CustomTools => new[]
    {
        QuillTools.Bold(),
        QuillTools.Italic(),
        new CustomTool((_, _) => PrintContent(), "print", "Print content", group: 99)
    };

    private DefaultToolHandler[] Handlers => new[]
    {
        new DefaultToolHandler("custom-action", async (editor, args) =>
        {
            var text = await editor.GetText();
            Console.WriteLine("Custom action: " + text);
        })
    };

    private async Task PrintContent()
    {
        var html = await Editor.GetSemanticHTML();
        Console.WriteLine(html);
    }
}
```

--------------------------------

### Generate Cache Buster Query Parameter

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Generates a cache buster query parameter using the assembly version for production or a random GUID for development. This ensures resources are not cached inappropriately.

```csharp
public static string CacheBuster => 
    $"?c={AssemblyVersion}{(Debugger.IsAttached ? Guid.NewGuid().ToFormattedId() : "")}";
```

--------------------------------

### SetHtml(string html)

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Sets the HTML content of the editor. It waits up to 10 seconds for initialization if called before the editor is ready.

```APIDOC
## SetHtml(string html)

### Description
Sets the HTML content of the editor. Waits up to 10 seconds for initialization if called before the editor is ready.

### Method
POST

### Endpoint
/api/editor/html

### Parameters
#### Request Body
- **html** (string) - Required - HTML content to set

### Returns
Task<string> (HTML that was set)

### Throws
Attempts to set content even if initialization times out, but may return null or incomplete results

### Request Example
```csharp
await _editor.SetHtml("<p><strong>Pre-filled content</strong></p>");
```

### Response Example
```html
<p><strong>Pre-filled content</strong></p>
```
```

--------------------------------

### Get Editor Content in Delta Format

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Retrieves the editor content in Quill's Delta format, represented as a JSON string. This format precisely captures the document's content and formatting.

```csharp
public async Task<string> GetContent()
{
    string deltaJson = await _editor.GetContent();
    // Returns: {"ops":[{"insert":"Hello "},{"insert":"world","attributes":{"bold":true}}]}
}
```

--------------------------------

### Get Semantic HTML Content

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Retrieves semantically correct HTML using Quill's getSemanticHTML() method. This normalizes formatting to semantic equivalents for cleaner output. Use for more structured HTML.

```csharp
public async Task<string> GetSemanticHTML()
{
    string semanticHtml = await _editor.GetSemanticHTML();
    // Returns cleaner, more semantic HTML than GetHtml()
}
```

--------------------------------

### Implement QuillImageCompressorModule for Image Compression

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Automatically compresses images on insertion to reduce file sizes. Configure quality, dimensions, and image type for compression.

```csharp
public class QuillImageCompressorModule : QuillModule
{
    public override string[] JsFiles => [$"./_content/MudExRichTextEditor/modules/quill.imageCompressor.min.js{MudExRichTextEdit.CacheBuster}"];
    public override string JsConfigFunction => @"imageCompress: {
      quality: 0.7,
      maxWidth: 1000,
      maxHeight: 1000,
      imageType: 'image/jpeg',
      debug: true,
    }";
}
```

```cshtml
Modules="@new[] { new QuillImageCompressorModule() }"
```

--------------------------------

### Enable Image Resizing with QuillBlotFormatterModule

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/README.md

To enable image resizing in custom configurations, include the QuillBlotFormatterModule. This allows images inserted in the editor to be resized directly.

```csharp
@using MudExRichTextEditor.Extensibility

<MudExRichTextEdit Modules="@_modules" />

@code {
    private IQuillModule[] _modules = [
        new QuillBlotFormatterModule(),
        // other modules...
    ];
}
```

--------------------------------

### Get Raw HTML Content

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Retrieves the raw HTML content from the editor's root element. This includes all formatting but without semantic normalization. Use when precise HTML representation is needed.

```csharp
public async Task<string> GetHtml()
{
    string html = await _editor.GetHtml();
    Console.WriteLine(html); // <p><strong>Bold text</strong></p>
}
```

--------------------------------

### Get Editor Content in Different Formats

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Retrieve the editor's content using the GetValue method. Specify the desired format using the GetHtmlBehavior enum. Recommended for most use cases is SemanticHtml.

```csharp
string html = await _editor.GetValue(GetHtmlBehavior.SemanticHtml);

string text = await _editor.GetValue(GetHtmlBehavior.Text);

string delta = await _editor.GetValue(GetHtmlBehavior.Content);
```

--------------------------------

### Retrieve Editor Content with Specific Behavior

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Gets the editor's content using a specified behavior. Useful for obtaining raw HTML, semantic HTML, plain text, or Delta JSON.

```csharp
string html = await editor.GetValue(GetHtmlBehavior.InnerHtml);
string semHtml = await editor.GetValue(GetHtmlBehavior.SemanticHtml);
string text = await editor.GetValue(GetHtmlBehavior.Text);
string delta = await editor.GetValue(GetHtmlBehavior.Content);
```

--------------------------------

### Set HTML with User Input

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Demonstrates setting HTML content directly from user input without sanitization. It is recommended to sanitize HTML server-side if storing user-generated content.

```csharp
await editor.SetHtml(userInput);  // ⚠️ No sanitization
```

--------------------------------

### Minimal Editor Configuration

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Configures a MudExRichTextEdit with the Minimal preset, specifying height and theme.

```razor
<MudExRichTextEdit @bind-Value="Content"
                   Tools="@QuillPresets.Minimal.Tools"
                   Height="200"
                   Theme="@QuillTheme.Snow">
</MudExRichTextEdit>
```

--------------------------------

### AllModules

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Provides a read-only enumerable of all active modules within the editor. This includes both explicitly set modules and recommended modules if configured.

```APIDOC
## AllModules

### Description
Read-only enumerable of all active modules. Combines explicitly set `Modules` with recommended modules if `AlwaysUseRecommendedModules` is true.

### Method
`AllModules` (Property)

### Parameters
None

### Request Example
```csharp
foreach (var module in _editor.AllModules)
{
    Console.WriteLine(module.GetType().Name);
}
```

### Response
#### Success Response (200)
IEnumerable<IQuillModule>

#### Response Example
None provided.
```

--------------------------------

### Project Structure Overview

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Illustrates the directory layout and key files within the MudExRichTextEditor project, highlighting the separation of concerns for components, extensibility, and types.

```tree
MudExRichTextEditor/
├── MudExRichTextEdit.razor.cs        # Main component implementation
├── Extensibility/                     # Extension interfaces and implementations
│   ├── IQuillModule.cs               # Module interface
│   ├── QuillModule.cs                # Module base class
│   ├── IQuillModule.cs               # Plugin marker interface
│   ├── QuillBlotFormatterModule.cs   # Image resizing module
│   ├── QuillImageCompressorModule.cs # Image compression module
│   ├── QuillTableBetterModule.cs     # Table module
│   ├── QuillBetterTableModule.cs     # Alternative table module
│   ├── QuillMentionModule.cs         # Mention/autocomplete module
│   ├── IMention.cs                   # Mention data type
│   └── QuillModules.cs               # Module registry
└── Types/                             # Type definitions and enums
    ├── QuillTheme.cs                 # Theme enum
    ├── QuillDebugLevel.cs            # Debug level enum
    ├── GetHtmlBehavior.cs            # Output format enum
    ├── Tool.cs                       # Tool and CustomTool classes
    ├── DefaultToolHandler.cs         # Handler for custom tools
    └── QuillPresets.cs               # Preset configurations
```

--------------------------------

### Custom Upload Handler for Rich Text Editor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Implement a custom upload function to handle file uploads in the rich text editor. This example shows how to convert the uploaded file to a base64 data URL.

```csharp
@page "/upload"
@using MudExRichTextEditor
@using MudBlazor.Extensions.Core

<MudExRichTextEdit @ref="@Editor"
                   CustomUploadFunc="@HandleUpload"
                   Height="400">
</MudExRichTextEdit>

@code {
    private MudExRichTextEdit Editor;

    private async Task<string> HandleUpload(UploadableFile file)
    {
        // Example: Convert to base64 data URL
        await file.EnsureDataLoadedAsync();
        var base64 = Convert.ToBase64String(file.Data);
        return $"data:{file.ContentType};base64,{base64}";

        // Or upload to server
        // using var content = new MultipartFormDataContent();
        // content.Add(new StreamContent(new MemoryStream(file.Data)), "file", file.FileName);
        // var response = await httpClient.PostAsync("/api/upload", content);
        // return await response.Content.ReadAsStringAsync();
    }
}
```

--------------------------------

### QuillTool Static Method

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/05-api-summary.md

Retrieves all standard toolbar tools available for the Quill editor.

```csharp
static All() → IEnumerable<QuillTool> - All standard tools
```

--------------------------------

### Color Picker Tools for Rich Text Editor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Add color picker tools for text color and background highlight to the rich text editor's toolbar. This example uses custom palettes for both text and background colors.

```csharp
@page "/colors"
@using MudExRichTextEditor
@using MudExRichTextEditor.Types

<MudExRichTextEdit Tools="@CustomTools" Height="400" />

@code {
    private QuillTool[] CustomTools => new[]
    {
        QuillTools.Bold(),
        QuillTools.Italic(),
        
        // Text color with custom palette
        QuillTools.Color(colors: new[] { "#FF0000", "#00FF00", "#0000FF", "#FFFF00" }),
        
        // Highlight with custom palette
        QuillTools.Background(colors: new[] { "#FFFF00", "#FF00FF", "#00FFFF" }),
        
        QuillTools.Link(),
        QuillTools.Image()
    };
}
```

--------------------------------

### File Attachment Flow

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Outlines the process for attaching files, including opening the dialog, handling custom upload functions, converting data, and inserting HTML into the editor.

```text
AttachFilesAsync()
    ↓
Open MudEx dialog
    ↓
User selects files
    ↓
For each file:
  ├─ Check if CustomUploadFunc provided
  │  └─ Call CustomUploadFunc → returns URL
  ├─ Else, call EnsureDataLoadedAsync()
  │  └─ Convert to data URL
  └─ Call InsertHtmlAsync() → insert into editor
```

--------------------------------

### Configure Module in Constructor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Configure custom modules and their options when initializing the Quill editor via the constructor. Ensure the module name matches the registration.

```csharp
new {
    MyModule = new { option1 = value1 },
    modules = {
        myModule = new { option1 = value1 }
    }
}
```

--------------------------------

### MudExRichTextEdit Component API

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/README.md

Provides a complete API reference for the main `MudExRichTextEdit` Blazor component. It details all Razor parameters with their types and defaults, public methods with full signatures and examples, properties, internal callbacks, and usage patterns.

```APIDOC
## MudExRichTextEdit Component API Reference

### Description
This section details the API for the `MudExRichTextEdit` Blazor component, covering its parameters, methods, properties, and callbacks.

### Parameters
- **[ParameterName]** (Type) - Default: [DefaultValue] - Description of the parameter.
- ... (All Razor parameters with types and defaults)

### Public Methods
- **[MethodName]([ParameterList])** ([ReturnType]) - Description of the method.
  - Example: `await MudExRichTextEdit.SomeMethod(param1, param2);`
- ... (Public methods with full signatures and examples)

### Properties
- **[PropertyName]** (Type) - Description of the property.
- ...

### Internal Callbacks
- **[CallbackName]** (Signature) - Description of the callback.
- ...

### Usage Patterns
- Examples demonstrating common usage scenarios for the component.

```

--------------------------------

### Insert Tables in Rich Text Editor

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Demonstrates how to insert a table with a specified number of rows and columns into the rich text editor using the InsertTableAsync method.

```csharp
@page "/tables"
@using MudExRichTextEditor
@using MudExRichTextEditor.Types

<MudButton OnClick="@Insert3x3Table">Insert 3x3 Table</MudButton>

<MudExRichTextEdit @ref="@Editor"
                   Tools="@QuillPresets.Standard.Tools"
                   Modules="@QuillPresets.Standard.Modules"
                   Height="400">
</MudExRichTextEdit>

@code {
    private MudExRichTextEdit Editor;

    private async Task Insert3x3Table()
    {
        await Editor.InsertTableAsync(3, 3);
    }
}
```

--------------------------------

### Basic Styling and Colors

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/04-quick-start.md

Customize the appearance of the rich text editor by setting background colors, border colors, and applying custom CSS classes. This snippet demonstrates how to integrate MudBlazor's color system and custom styles.

```csharp
@page "/styling"
@using MudExRichTextEditor
@using MudBlazor.Extensions.Core

<MudExRichTextEdit @bind-Value="@Content"
                   Height="400"
                   BackgroundColor="@MudExColor.Surface"
                   ToolBarBackgroundColor="@MudExColor.Primary"
                   BorderColor="@MudExColor.Primary"
                   Style="border: 2px solid; border-radius: 8px;"
                   Class="custom-editor">
</MudExRichTextEdit>

@code {
    private string Content = "";
}

<style>
    .custom-editor {
        padding: 10px;
    }
</style>
```

--------------------------------

### QuillMentionModule Constructors and Properties

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Defines the generic QuillMentionModule class, enabling mention/autocomplete functionality. It includes constructors for setting up suggestion retrieval and event handlers for user interactions with mentions.

```csharp
public class QuillMentionModule<T> : QuillModule
{
    public QuillMentionModule(Func<char, string, Task<IEnumerable<T>>> getItemsFunc, char denotationChar, params char[] denotationChars)
    public QuillMentionModule(Func<char, string, Task<IEnumerable<T>>> getItemsFunc, char[] denotationChars)
    
    public Func<T, Task> MentionClicked { get; set; }
    public Func<T, Task> MentionHovered { get; set; }
    public Func<T, Task> BeforeMentionSelect { get; set; }
    public Func<T, Task> AfterMentionSelect { get; set; }
    
    public Task<Mention<T>[]> GetMentionsFromContentAsync()
}
```

--------------------------------

### Rich Text Editor with Preview Pane

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/07-advanced-usage.md

Display a MudExRichTextEdit component alongside a live preview pane. Changes made in the editor are immediately reflected in the preview, separated by a grid layout.

```csharp
@page "/editor-preview"
@using MudExRichTextEditor
@using MudExRichTextEditor.Types

<MudGrid>
    <MudItem xs="12" sm="6">
        <MudText Typo="Typo.H6">Editor</MudText>
        <MudExRichTextEdit @bind-Value="@Content"
                           Tools="@QuillPresets.Standard.Tools"
                           Height="400">
        </MudExRichTextEdit>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudText Typo="Typo.H6">Preview</MudText>
        <MudCard>
            <MudCardContent>
                @((MarkupString)Content)
            </MudCardContent>
        </MudCard>
    </MudItem>
</MudGrid>

@code {
    private string Content = "";
}
```

--------------------------------

### AttachFilesAsync()

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Opens a dialog to select and insert files from the available files list. Files can be uploaded as data URLs or using a custom upload function.

```APIDOC
## AttachFilesAsync()

### Description
Opens a dialog to select and insert files from the available files list. Files can be uploaded as data URLs or using a custom upload function.

### Method
POST

### Endpoint
/api/editor/attach-files

### Returns
Task

### Request Example
```csharp
// Open file picker dialog
await _editor.AttachFilesAsync();
```
```

--------------------------------

### Define CustomTool Array for Toolbar

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Demonstrates how to assemble an array of QuillTool objects, including standard tools and custom-defined tools, for use in the MudExRichTextEditor toolbar.

```csharp
var customTools = new QuillTool[]
{
    QuillTools.Bold(),
    QuillTools.Italic(),
    new CustomTool(
        onClick: async (_, editor) => await PrintContent(),
        icon: Icons.Material.Filled.Print,
        tooltip: "Print content",
        color: Color.Primary,
        group: 99
    ),
    new CustomTool(
        onClick: async (_, editor) => await SaveDraft(),
        icon: Icons.Material.Filled.Save,
        tooltip: "Save as draft",
        group: 99
    )
};
```

--------------------------------

### Custom Color Options

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/03-types-configuration.md

Shows how to create QuillTool instances for text and background colors with custom color palettes. This enables users to select from a predefined set of colors.

```csharp
var tools = new[]
{
    QuillTools.Color(colors: new[] { "#FF0000", "#00FF00", "#0000FF" }),
    QuillTools.Background(colors: new[] { "#FFFF00", "#FF00FF" })
};
```

--------------------------------

### Implement QuillTableBetterModule for Advanced Table Features

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Provides advanced table functionality including row/column manipulation, cell merging, and context menus. Requires the table tool to be added to the toolbar.

```csharp
public class QuillTableBetterModule : QuillModule
{
    public override string[] JsFiles => ["https://cdn.jsdelivr.net/npm/quill-table-better@1/dist/quill-table-better.js"];
    public override string[] CssFiles => [
        "./_content/MudExRichTextEditor/css/quill.table.better.css",
        "./_content/MudExRichTextEditor/css/quill.table.better.mudblazor.css"
    ];
}
```

```cshtml
<MudExRichTextEdit Tools="@new[] { QuillTools.TableButton() }"
                   Modules="@new[] { new QuillTableBetterModule() }"
                   Height="400">
</MudExRichTextEdit>
```

--------------------------------

### Combine and Deduplicate Modules

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/06-architecture.md

Combines explicitly provided modules with recommended modules, ensuring that only one instance of each module type is loaded using DistinctBy.

```csharp
public IEnumerable<IQuillModule> AllModules => 
    (Modules ?? Enumerable.Empty<IQuillModule>())
    .Concat(AlwaysUseRecommendedModules ? QuillModules.RecommendedModules : [])
    .DistinctBy(m => m.GetType());
```

--------------------------------

### Minimal Quill Preset Configuration

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/02-modules-extensibility.md

Configures the rich text editor for basic text formatting with minimal tools.

```razor
<MudExRichTextEdit Tools="@QuillPresets.Minimal.Tools"
                   Modules="@QuillPresets.Minimal.Modules"
                   Height="300">
</MudExRichTextEdit>
```

--------------------------------

### Set HTML Content

Source: https://github.com/fgilde/mudexrichtexteditor/blob/master/_autodocs/01-core-component.md

Sets the HTML content of the editor. It waits up to 10 seconds for initialization if called before the editor is ready. Be aware that it might return null or incomplete results if initialization times out.

```csharp
public async Task<string> SetHtml(string html)
{
    await _editor.SetHtml("<p><strong>Pre-filled content</strong></p>");
}
```