Lumeo

Rich Text Editor

A fully-featured WYSIWYG editor built on TipTap/ProseMirror. Supports mentions, slash commands, tables, code blocks, task lists, AI actions, image upload, and Word import — all wired through Blazor parameters.

Installation

dotnet add package Lumeo.Editor

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<RichTextEditor />

When to Use

  • Content authoring surfaces — blog posts, knowledge-base articles, product descriptions
  • Long-form fields that benefit from headings, lists, quotes, links, and tables
  • Comment or reply surfaces where users expect bold, italic, mentions, and emoji
  • Document editors that need Word import, AI writing assistance, or collaborative slash commands
  • Anywhere you currently use a Textarea but want structured HTML output

Minimal — Bold, Italic, Link

Standard (default) — Headings, marks, lists, link, undo/redo

Full — Standard + tables, image, code block, AI menu, Word import

None — Toolbar hidden; bubble menu and keyboard shortcuts still active

Markdown shortcuts work too — try '**bold**' or '# Heading'.

Read-only — content is selectable but not editable

Disabled — dimmed and non-interactive

Plain-text character limit: 500. The editor scrolls internally when content overflows 260 px.

Keyboard Shortcuts

Shortcut Action
Ctrl / ⌘ + BBold
Ctrl / ⌘ + IItalic
Ctrl / ⌘ + UUnderline
Ctrl / ⌘ + Shift + XStrikethrough
Ctrl / ⌘ + ZUndo
Ctrl / ⌘ + Shift + ZRedo
Ctrl / ⌘ + Alt + 1 – 3Heading 1 / 2 / 3
/ (on a new line)Open slash-command palette
@ # $Open the corresponding trigger dropdown
**text**Bold (markdown shortcut)
# text (space)Heading 1 (markdown shortcut)
- or * (space)Bullet list (markdown shortcut)
[ ] (space)Task list item (markdown shortcut)

API Reference

RichTextEditor

EditorTrigger

Property Type Default Description
CharcharThe character that activates this trigger (e.g. '@').
ItemSourceFunc<string, ValueTask<IReadOnlyList<TriggerItem>>>Async callback called on each keystroke with the partial query; returns matching items.
ItemTemplateRenderFragment<TriggerItem>?nullOptional custom row renderer for the dropdown list.
ChipClassstring?nullCSS classes applied to the chip/pill inserted into the document when an item is selected.

TriggerItem

Property Type Default Description
IdstringUnique identifier stored in the document node's data attribute.
LabelstringDisplay name shown in the dropdown and rendered in the chip.
Subtitlestring?nullSecondary text shown below the label in the dropdown row.
IconNamestring?nullLucide icon name (e.g. "User") displayed alongside the label.
Payloadobject?nullArbitrary data passed back to the consumer for custom rendering or server look-ups.

TriggerDropdown

Floating suggestion list rendered above/below a trigger caret, driven by Items + a selected index. The live editor drives its own equivalent in JS; this Razor primitive exists for consumers who want to render their own trigger UI server-side (e.g. a standalone mention input).

EditorImageRequest

Property Type Description
FileNamestringOriginal file name chosen by the user.
MimeTypestringMIME type of the selected file (e.g. image/png).
SizelongFile size in bytes.

EditorToolbarPreset

Value Description
NoneNo toolbar. Bubble menu and keyboard shortcuts remain available.
MinimalBold, Italic, Link only.
StandardHeadings, basic marks (bold, italic, underline, strikethrough), lists, link, undo/redo. Default value.
FullStandard plus tables, image, code block, AI action menu, and Word import button.

EditorToolbar

The preset-driven toolbar rendered above the editor surface when Toolbar is not None. Rendered internally by RichTextEditor; each button invokes OnCommand, which the parent forwards to the JS editor.

BubbleMenu

A static (non-floating) bubble-menu primitive consumers can drop into a custom toolbar. The live floating bubble menu is rendered in JS by RichTextEditor itself when EnableBubbleMenu is true; this component exists for building a selection menu out of band.

AiActionMenu

Floating list of AI actions (Improve / Shorten / Expand / ...) wired to the editor's selection. Picking an item fires OnAction with the action record; the consumer returns replacement HTML for the current selection.

WordImporter (server-side)

WordImporter is a static server-side helper in Lumeo.Editor that converts a .docx stream to clean HTML using Mammoth.NET. Call it from an API endpoint and return the result to the editor via SetHtmlAsync.

Member Description
ToHtmlAsync(stream, options?)Converts a .docx stream to WordImportResult containing Html and Warnings.
DefaultStyleMapBuilt-in Mammoth style map covering English and German Word styles (Title, Heading 1-6, Body Text, Quote, etc.).
WordImportOptions.StyleMapCustom style map appended after the default map (so custom rules win).
WordImportOptions.ConvertImageOptional async callback (contentType, stream) => url to upload embedded images rather than base64-inlining them.

ASP.NET Core endpoint example

// ASP.NET Core controller endpoint
[HttpPost("/api/upload-docx")]
public async Task<IActionResult> ImportDocx(IFormFile file)
{
    using var stream = file.OpenReadStream();
    var result = await WordImporter.ToHtmlAsync(stream);
    return Ok(new { html = result.Html, warnings = result.Warnings });
}

// Optional: custom image upload during import
var options = new WordImportOptions
{
    ConvertImage = async (contentType, imageStream) =>
    {
        var url = await _storage.UploadAsync(contentType, imageStream);
        return url;
    }
};
var result = await WordImporter.ToHtmlAsync(stream, options);
  • Textarea — Plain multi-line text input without formatting
  • FormField — Wraps any input with a label, help text, and validation error
  • Form — Full form wrapper with model validation
  • Input — Single-line text input