BridgeEditor 1.2.0

BridgeEditor

BridgeEditor is a reusable Persian-first rich-text editor for interactive Blazor applications. It supports RTL and LTR content, responsive and fullscreen editing, configurable toolbars, read-only and disabled states, clean Word/Google Docs paste, nested lists, find/replace, advanced tables, media metadata, safe YouTube/Vimeo embeds, validated uploads, browser-local drafts, HTML source mode, keyboard shortcuts, undo/redo, lifecycle events, and sanitized HTML output.

Install

dotnet add package BridgeEditor

Import the component namespace in _Imports.razor:

@using BridgeEditor.Components

Reference the packaged static assets in App.razor. The script must load before Blazor starts because the component can initialize during its first interactive render.

<link rel="stylesheet" href="@Assets["_content/BridgeEditor/css/bridge-editor.css"]" />
<script src="@Assets["_content/BridgeEditor/js/bridge-editor.js"]"></script>
<script src="_framework/blazor.web.js"></script>

For a WebAssembly wwwroot/index.html host, use the same _content/BridgeEditor/... paths without the @Assets[...] wrapper.

Usage

<BridgeEditor @ref="editor"
              @bind-Value="html"
              UploadUrl="/api/media/upload"
              VideoUploadUrl="/api/media/upload/video"
              ToolbarPreset="BridgeEditorToolbarPreset.Standard"
              DraftKey="@($"blog-post-{postId}")"
              AutoSaveDelayMilliseconds="2000"
              MaxImageBytes="@(5 * 1024 * 1024)"
              MaxVideoBytes="@(25 * 1024 * 1024)"
              Placeholder="محتوای خود را اینجا بنویسید…"
              MinHeight="360"
              EnableSourceMode="true"
              OnUploadFailed="HandleUploadFailure" />

@code {
    private BridgeEditor? editor;
    private string? html;

    private void HandleUploadFailure(BridgeEditorUploadEventArgs args)
    {
        // Display or log args.Error.
    }

    private async Task SaveAsync()
    {
        await (editor?.CommitAsync() ?? Task.CompletedTask);
        // Persist html here.
    }
}

UploadUrl is optional. When configured, the editor sends the selected file as a multipart field named file and includes every entry from UploadFields. The field name, credentials, request headers, timeout, accepted MIME types, and client-side image/video size limits are configurable. The endpoint response can be { "location": "/media/file.webp" }, { "url": "/media/file.webp" }, or a JSON string containing the uploaded URL.

DraftKey is also optional. A non-empty, stable key enables debounced autosave in the browser's local storage. RestoreDraftOnInit is opt-in; applications can instead call SaveDraftAsync(), RestoreDraftAsync(), and ClearDraftAsync() explicitly. Drafts are local recovery aids and do not replace server persistence.

Toolbar profiles

• Minimal: undo/redo, block type, basic emphasis, lists, link, direction, fullscreen, and help.
• Standard: common CMS authoring commands, nested-list indentation, find/replace, advanced tables, uploads, and safe embeds without unrestricted font/color or HTML source controls.
• Full: every built-in command and the backward-compatible default.

Use ToolbarItems to override the selected profile with an explicit command allow-list:

<BridgeEditor @bind-Value="html"
              ToolbarItems="toolbarItems" />

@code {
    private static readonly string[] toolbarItems =
        ["undo", "redo", "bold", "italic", "link"];
}

Supported toolbar item names are undo, redo, block, bold, italic, underline, strike, unordered-list, ordered-list, indent, outdent, align-right, align-center, align-left, align-justify, font-family, font-size, text-color, background-color, clear-format, link, table, image, video, embed, find-replace, horizontal-rule, direction, source, fullscreen, and help.

The inline table toolbar can add or delete rows and columns, toggle a header row, add a caption, merge a cell with its next neighbour, split a merged cell, and delete the table. The media toolbar edits alignment, width, title, image alternative text, and caption. Embedded iframes are limited to normalized YouTube and Vimeo URLs and receive restrictive browser attributes.

Interaction and events

ReadOnly keeps selection and copying available while preventing edits. Disabled prevents editing and disables every editor control. Both properties can change while the component is running, or can be changed through SetStateAsync(...).

The component exposes OnReady, OnFocus, OnBlur, OnChange, OnDraftSaved, OnDraftRestored, OnUploadStarted, OnUploadProgress, OnUploadCompleted, and OnUploadFailed. Upload callbacks receive a BridgeEditorUploadEventArgs value containing file metadata, progress, result URL, and error details.

Public API

• Two-way binding: Value / ValueChanged
• Lifecycle: AutoInit, InitAsync(), DestroyAsync()
• Content: GetHtmlAsync(), SetHtmlAsync(...), CommitAsync(), ExecuteCommandAsync(...)
• Presentation: Direction, Placeholder, AriaLabel, MinHeight, EnableSourceMode, ShowHeader, ShowStatusBar
• Toolbar: ToolbarPreset, ToolbarItems
• State: ReadOnly, Disabled, SetStateAsync(...)
• Drafts: DraftKey, AutoSaveDelayMilliseconds, RestoreDraftOnInit, SaveDraftAsync(), RestoreDraftAsync(), ClearDraftAsync()
• Uploads: UploadUrl, VideoUploadUrl, UploadFields, UploadFieldName, UploadHeaders, UploadWithCredentials, ImageAccept, VideoAccept, MaxImageBytes, MaxVideoBytes, UploadTimeoutMilliseconds
• Events: OnReady, OnFocus, OnBlur, OnChange, OnDraftSaved, OnDraftRestored, OnUploadStarted, OnUploadProgress, OnUploadCompleted, OnUploadFailed

Demo and tests

dotnet run --project samples/BridgeEditor.Demo
dotnet test tests/BridgeEditor.Tests

The client-side sanitizer and upload checks are defense in depth for the editing experience. Applications must still validate uploads and sanitize untrusted HTML on the server before storing or rendering it.

License

MIT