Editor
A rich text editor with a toolbar, a menu over selected text, a / block menu, links, colours, lists, checklists, tables, callouts, images, video, @ mentions, : emoji, Markdown shortcuts and AI actions. It writes clean HTML or Quill markup and reads both.
Its own package — install it separately, tectra-ng does not include it: npm install @tectra-ng/editor.
Basic
Bind the HTML with [(html)] or a form control. Type # and a space for a heading, - for a list, **bold** for bold; select text for the formatting menu. tx-editor-content shows the saved HTML.
Saved
Release checklist
Ship the new onboarding by Friday. Select any text to see the formatting menu.
Write the release notes
Record the demo
Toolbars
toolbar takes a preset — full, compact, minimal, none — or your own groups of tools.
Form
The editor is a form control. Inside tx-field the label names it and the error describes it.
Quill
Text saved by Quill opens as it was. With format="quill" the editor writes Quill 2 markup back, so code that reads that markup keeps working.
<h2 class="ql-align-center">Weekly report</h2><ol><li data-list="bullet">Traffic grew</li><li data-list="bullet" class="ql-indent-1">mostly from search</li><li data-list="ordered">Next: new landing page</li></ol>
Mentions
mentions turns on @ mentions: return the matching people (or a Promise of them) for the typed query. Up / Down and Enter pick one.
Last mentioned: nobody yet
Tables
Insert a table from the / menu or the table tool. Tab moves between cells and adds a row at the end; the menu above the table adds and removes rows and columns; drag a column border to resize it. Tables pasted from spreadsheets keep their cells.
Callouts
Callouts highlight a note, a success, a warning or a risk. Click the round marker to change the tone; tx-editor-content shows them the same way.
Images
The image button, paste and drop add images. imageUpload sends them to your storage and returns the address; maxImageSize rejects big files with imageRejected.
Limit
maxLength stops typing and pasting at the limit and shows the counter; showCount shows it without a limit.
Ai
ai adds the AI button; aiRequested gives you the HTML to send to your model. Here a stand-in polishes the text.
Ai actions
aiActions adds an AI button to the selection menu. aiAction gives you the selected text and a replace that takes a string, HTML or a stream of chunks — the text shimmers while it streams, then Keep or Undo. Here a stand-in streams the answer.
Drafts
With draftKey the text is kept in the browser while it is written and comes back after a reload; call clearDraft() once it is sent.
Full view
The full view button (with the full toolbar) or [(fullView)] opens the editor over the page; Escape closes it.
Readonly
readonly keeps the text selectable but not editable; disabled turns the editor off.
Design tokens
dt changes one editor — here a borderless toolbar on the ground colour and roomier text.