Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Headless Editor
Image Designer
Kanban Board
PDF Builder
PDF Signer
PDF Viewer
Video Player
GitHub repositoryGitHub starsGitHub forksNgStarter UI npm versionNgStarter UI npm downloads per month

Headless Editor API

Guides explain these APIs with examples: start with Getting Started. All APIs on this page are exported from @ngstarter-ui/components/headless-editor. The editor service must be scoped with provideNgsHeadlessEditor(); it is intentionally not a root singleton.

Setup and plugin registration

Public functions used to create a scoped editor and compose its feature set.

NameTypeDefaultDescription
provideNgsHeadlessEditor(...features)Provider[]requiredProvides one scoped NgsHeadlessEditor, its snapshot history, plugin providers, and the initial plugin set.
withHeadlessEditorPlugin(plugin)NgsHeadlessEditorFeature—Wraps a plugin for provideNgsHeadlessEditor(). Use this path when the plugin declares Angular providers.
defineNgsHeadlessEditorPlugin(plugin)NgsHeadlessEditorPlugin—Typed identity helper for declaring blocks, marks, commands, keymaps, providers, paste handling, and setup.
basicTextEditorPlugin()NgsHeadlessEditorPluginnot installed automaticallyCreates the paragraph/text preset with bold, italic, strike, and inline-code marks and shortcuts.
colorEditorPlugin()NgsHeadlessEditorPluginnot installed automaticallyAdds independent textColor and backgroundColor marks plus typed commands to set or remove either color.

NgsHeadlessEditor signals

Readonly signal state exposed by the editor service.

NameTypeDefaultDescription
documentSignal<NgsHeadlessEditorDocument>empty paragraphCurrent normalized JSON document.
selectionSignal<NgsHeadlessEditorSelection | null>nullAnchor and focus positions expressed as block IDs and text offsets.
storedMarksSignal<readonly NgsHeadlessEditorMark[]>[]Marks that will be applied to text inserted at a collapsed selection.
NgsHeadlessEditorChangeOrigin'external' | 'api' | 'keyboard' | 'paste' | 'composition' | 'history' | 'command'—Values of the origin signal. external marks documents loaded with setDocument().
focusedSignal<boolean>falseWhether an attached editor surface currently has focus.
composingSignal<boolean>falseWhether an IME composition session is active.
readOnlySignal<boolean>falsePrevents commands and editing operations from mutating the document.
revisionSignal<number>0Monotonic document revision used by surfaces to schedule rendering.
originSignal<NgsHeadlessEditorChangeOrigin>externalOrigin of the last document change: external, api, keyboard, paste, composition, history, or command.
pluginsSignal<readonly NgsHeadlessEditorPlugin[]>provided pluginsCurrently installed plugin instances in execution order.
emptySignal<boolean>trueTrue when normalized document text contains no non-whitespace characters.
canUndoSignal<boolean>falseWhether a previous snapshot is available.
canRedoSignal<boolean>falseWhether a forward snapshot is available.
inlineTargetSignal<NgsHeadlessEditor | null>nullNested editor (for example the focused table cell) that currently receives formatting.

NgsHeadlessEditor methods

State transitions and extension lookup methods available to custom shells and plugins.

NameTypeDefaultDescription
setPlugins(plugins)void—Atomically validates and replaces the plugin set. Duplicate plugin, command, mark, or block IDs throw without corrupting the current registry.
getMarkDefinition(type)NgsHeadlessEditorMarkDefinition | undefined—Looks up one registered mark definition.
getMarkDefinitions()readonly NgsHeadlessEditorMarkDefinition[]—Returns every registered mark definition.
getBlockDefinition(type)NgsHeadlessEditorBlockDefinition | undefined—Looks up one registered block definition.
getBlockDefinitions()readonly NgsHeadlessEditorBlockDefinition[]—Returns every registered block definition.
setDocument(document, resetHistory?)voidresetHistory: trueNormalizes and installs an external JSON document, resets selection and stored marks, and optionally clears history.
setReadOnly(readOnly)void—Updates the read-only signal.
setFocused(focused)void—Updates focus state. NgsHeadlessEditorSurface calls this automatically.
setComposing(composing)void—Updates IME composition state. NgsHeadlessEditorSurface calls this automatically.
setSelection(selection)void—Clamps and stores a JSON selection, or clears it with null.
setInlineTarget(editor | null)void—Routes marks, stored marks, selection and insertText() to a nested editor. Block operations are disabled while a target is active. Used by NgsHeadlessEditorInlineRegion.
canApplyMark(type)boolean—Whether a mark can be applied at the current selection, in this editor or in the inline target. Use it in enabled predicates of formatting commands.
canEditBlocks()boolean—False while read-only or while an inline target is active. Use it in enabled predicates of block commands.
execute(command, payload?)boolean—Executes a typed command object or registered command ID when enabled and writable.
isCommandEnabled(command, payload?)boolean—Evaluates command availability against current editor state.
isCommandActive(command, payload?)boolean—Evaluates command active state for toolbar controls.
handleKeydown(event)boolean—Resolves normalized Mod, Alt, and Shift key bindings in plugin order, falling back to the physical key (event.code) for layout-dependent keys. Handles Mod-z, Mod-Shift-z and Mod-y as undo/redo.
handlePaste(event)boolean—Runs plugin paste handlers in order and stops at the first handler that returns true.
insertText(text, origin?)booleanorigin: keyboardReplaces the current selection, preserves applicable marks, and converts newlines into paragraph blocks.
deleteBackward()boolean—Deletes the selection or previous Unicode character and merges paragraphs at a block boundary.
deleteForward()boolean—Deletes the selection or next Unicode character and merges paragraphs at a block boundary.
deleteRange(selection, origin, historyGroup?)boolean—Deletes a JSON selection, including ranges spanning multiple text blocks and atomic blocks. Changes with the same historyGroup made in quick succession share one undo step.
splitBlock()boolean—Splits the current text block at the selection and places the caret in a new paragraph.
toggleMark(type, attrs?)boolean—Toggles a registered mark over a range or in stored marks at a collapsed selection.
getActiveMark(type)NgsHeadlessEditorMark | undefined—Returns the active mark and its attributes at the caret or across the current selection.
setMark(type, attrs?)boolean—Applies or replaces a registered mark over a selection or in collapsed-selection stored marks.
unsetMark(type)boolean—Removes a mark over a selection or from collapsed-selection stored marks.
isMarkActive(type)boolean—Reports whether a mark is active at the caret or across the complete selection.
toggleBlock(type)boolean—Toggles the selected text block between a registered block type and paragraph.
isBlockActive(type)boolean—Reports whether the selected block has the requested registered type.
insertBlock(block | blocks, select?)booleanselect: falseInserts one or more blocks after the block that holds the caret as one undo step.
replaceBlock(id, blocks, selection?)boolean—Replaces a block with zero or more blocks as one undo step, for example an empty line with a table.
updateBlock(id, patch, origin?, historyGroup?)booleanorigin: 'command'Updates type, content or attrs of a block by id. Updates sharing a historyGroup in quick succession form one undo step.
removeBlock(id)boolean—Removes a block by stable ID and restores an empty paragraph if it was the final block.
commitDomDocument(document, selection)boolean—Commits browser-controlled DOM changes such as completed IME composition into JSON state.
undo()boolean—Restores the previous document and selection snapshot.
redo()boolean—Restores the next document and selection snapshot.
clear()void—Replaces content with an empty paragraph and clears history.

NgsHeadlessEditorSurface

Standalone directive that connects contenteditable DOM, browser selection, and NgsHeadlessEditor state.

NameTypeDefaultDescription
ngsHeadlessEditorSurfacedirectiverequiredAttach to a host element inside the same injector scope as NgsHeadlessEditor.
editorNgsHeadlessEditorinjectedThe scoped editor instance used by the surface.
placeholderInputSignal<string>Write something…Exposed as data-placeholder so the host application can choose how to style empty state.
ariaLabelInputSignal<string>Rich text editorAccessible label applied to the textbox host.
disabledInputSignal<boolean>falseDisables contenteditable and input handling for this surface.
spellcheckInputSignal<boolean>trueControls the native spellcheck attribute.
focus()void—Focuses the surface and restores the current JSON selection into the DOM.
getBlockElement(blockId)HTMLElement | null—Returns the element currently rendering a block, for positioning overlays or toolbars. Unchanged blocks keep the same element between renders.
ngsHeadlessEditorRunsdirective—Renders text runs with the mark definitions of the nearest editor, for static previews of rich text.

NgsHeadlessEditorCommandDirective

Typed bridge between toolbar controls and editor commands.

NameTypeDefaultDescription
[ngsHeadlessEditorCommand]InputSignal<NgsHeadlessEditorCommand<TPayload>>requiredCommand executed on click. Mousedown is prevented so the current editor selection is preserved.
commandDataInputSignal<TPayload>undefinedOptional typed command payload.
activeSignal<boolean>computedReflects command.active() and adds the active class plus aria-pressed.
disabledSignal<boolean>computedReflects read-only state and command.enabled(), and sets the disabled attribute.

Plugin contract

One plugin can contribute model definitions, behavior, Angular providers, and lifecycle work.

NameTypeDefaultDescription
idstringrequiredUnique stable plugin ID.
blocksreadonly NgsHeadlessEditorBlockDefinition[][]Block definitions with a unique type, DOM rendering/parsing contract, and factory for an empty block.
marksreadonly NgsHeadlessEditorMarkDefinition[][]Inline mark definitions with render tag, optional parse tags, and attribute read/write hooks.
commandsreadonly NgsHeadlessEditorCommand[][]Typed operations with execute and optional enabled and active predicates.
keymapreadonly NgsHeadlessEditorKeyBinding[][]Keyboard mappings such as Mod-b or Mod-Shift-x targeting a command object or registered command ID.
providersreadonly Provider[][]Angular providers installed when the plugin is supplied through provideNgsHeadlessEditor(withHeadlessEditorPlugin(...)).
handlePaste(event, editor)booleanundefinedOptional paste interception. Return true only when the plugin handled the clipboard event.
setup(editor)void | (() => void)undefinedOptional lifecycle hook. A returned cleanup function runs before plugin replacement or editor destruction.

Extension definitions

Typed building blocks used inside NgsHeadlessEditorPlugin.

NameTypeDefaultDescription
NgsHeadlessEditorCommand.idstringrequiredUnique command ID used by registry lookup and string-based key bindings.
NgsHeadlessEditorCommand.execute(editor, payload)booleanrequiredRuns the command and returns whether it performed an operation.
NgsHeadlessEditorCommand.enabled(editor, payload)booleantrueOptional availability predicate.
NgsHeadlessEditorCommand.active(editor, payload)booleanfalseOptional active-state predicate for toolbar controls.
NgsHeadlessEditorKeyBinding.keystringrequiredNormalized shortcut such as Mod-b, Mod-Shift-x, Alt-ArrowDown, or Escape.
NgsHeadlessEditorKeyBinding.commandNgsHeadlessEditorCommand | stringrequiredCommand object or registered command ID.
NgsHeadlessEditorKeyBinding.payloadunknownundefinedOptional payload passed to the command.
NgsHeadlessEditorMarkDefinition.typestringrequiredUnique serialized mark type.
NgsHeadlessEditorMarkDefinition.tagNamestringrequiredDOM element created when the mark is rendered.
NgsHeadlessEditorMarkDefinition.parseTagsreadonly string[][]Additional DOM tag names accepted when browser-controlled DOM is parsed.
NgsHeadlessEditorMarkDefinition.applyAttributes(element, mark)voidundefinedWrites serialized mark attributes to the rendered element.
NgsHeadlessEditorMarkDefinition.readAttributes(element)NgsHeadlessEditorMarkAttributes | undefinedundefinedReads mark attributes when DOM changes are committed back to JSON.
NgsHeadlessEditorMarkDefinition.nestedbooleantrueWhether the mark is available in nested editors such as table cells.
NgsHeadlessEditorMarkDefinition.atomicbooleanfalseRenders an indivisible, non-editable inline token. Selection and deletion expand to its boundaries; ordinary typing never inherits this mark.
NgsHeadlessEditorBlockDefinition.typestringrequiredUnique serialized block type.
NgsHeadlessEditorBlockDefinition.tagNamestringrequiredDOM element used by the default surface renderer.
NgsHeadlessEditorBlockDefinition.contentTagNamestringundefinedOptional nested editable element, for example li inside ul or code inside pre.
NgsHeadlessEditorBlockDefinition.editablebooleantrueSet false for atomic media or application blocks that the browser must not edit directly.
NgsHeadlessEditorBlockDefinition.exitOnEmptyEnterbooleantrueEnter in an empty block of this type replaces the empty line with an exitType block, so Enter twice leaves quotes, lists and code.
NgsHeadlessEditorBlockDefinition.exitTypestringparagraphBlock type used when leaving the block.
NgsHeadlessEditorBlockDefinition.create()NgsHeadlessEditorBlockrequiredCreates an empty block of this type; Enter in a non-empty block uses it for the block that follows.
NgsHeadlessEditorBlockDefinition.render(element, block)voidundefinedOptional block renderer for atomic or non-text DOM such as image and embed blocks.
NgsHeadlessEditorBlockDefinition.read(element, previous)NgsHeadlessEditorBlockundefinedOptional DOM-to-JSON parser used when a custom editable block commits browser changes.
NgsHeadlessEditorBlockDefinition.isEmpty(block)booleantext checkOptional empty-state override, commonly returning false for meaningful media blocks.
NgsHeadlessEditorBlockDefinition.editorComponentType<unknown>undefinedAngular component rendered as the block while the surface is editable. The tagName element becomes its non-editable host, the block is passed to a `block` input when declared, and the instance survives block updates while the id and type stay the same. The component can inject NgsHeadlessEditor and call updateBlock().
NgsHeadlessEditorBlockDefinition.rendererComponentType<unknown>undefinedComponent used instead of editorComponent while the surface is read-only or disabled. Each falls back to the other when only one is defined.
NgsHeadlessEditorBlockComponent<TContent>interface—Recommended shape of block components: a block input (for example input.required<NgsHeadlessEditorBlock>()).
NgsHeadlessEditorFeature.pluginNgsHeadlessEditorPluginrequiredFeature wrapper consumed by provideNgsHeadlessEditor().
NGS_HEADLESS_EDITOR_PLUGINSInjectionToken<readonly NgsHeadlessEditorPlugin[]>provided by provideNgsHeadlessEditor()Low-level token containing the initial plugin set.

Surface host contract

DOM attributes and hooks intentionally left available for host-owned styling and accessibility.

NameTypeDefaultDescription
exportAsngsHeadlessEditorSurface—Template reference name for calling focus() or reading the injected editor.
classngs-headless-editor-surfacealwaysStable class hook. The editor package does not attach opinionated visual styles.
roletextboxalwaysAccessible role applied to the host element.
contenteditabletrue | falsetrueDerived from surface disabled and editor readOnly state.
aria-multilinetruetrueIdentifies the surface as a multiline textbox.
aria-disabledtrue | falsefalseMirrors effective disabled state.
data-placeholderstringWrite something…Contains placeholder text for a host CSS pseudo-element or other custom presentation.
data-emptyempty attribute | nullempty attributePresent while editor.empty() is true.
data-ngs-headless-editor-block-idstringgeneratedConnects each rendered block element to a stable JSON block ID.
data-ngs-headless-editor-block-typestringparagraphPreserves the serialized block type in the DOM.
data-ngs-headless-editor-placeholderstringfirst empty text blockPlaced on the empty block that owns the caret so host placeholder styling shares its line box.
data-ngs-headless-editor-markstringregistered mark typeIdentifies rendered mark wrappers when DOM content is parsed.

JSON document model

Serializable model types and normalization helpers. The core does not store HTML.

NameTypeDefaultDescription
NgsHeadlessEditorDocument{ version: 1; blocks: readonly NgsHeadlessEditorBlock[] }—Versioned root document.
NgsHeadlessEditorBlock<TContent>{ id; type; content; attrs? }—Addressable block with plugin-defined type and content.
NgsHeadlessEditorText{ type: text; text; marks }—Text run with a normalized list of inline marks.
NgsHeadlessEditorMark{ type; attrs? }—Serializable inline annotation.
NgsHeadlessEditorMarkAttributesReadonly<Record<string, string | number | boolean | null>>—Serializable attribute value map used by inline marks.
NgsHeadlessEditorSelection{ anchor; focus }—Forward or backward selection in model coordinates.
NgsHeadlessEditorPoint{ blockId; offset }—Position inside a block text stream.
createNgsHeadlessEditorId(prefix?)stringprefix: blockCreates a unique browser-safe model ID.
createNgsHeadlessEditorText(text?, marks?)NgsHeadlessEditorTextempty textCreates and normalizes one text run.
createNgsHeadlessEditorParagraph(text?, marks?)NgsHeadlessEditorBlockempty paragraphCreates a paragraph block with a fresh ID.
createNgsHeadlessEditorDocument(text?)NgsHeadlessEditorDocumentempty documentCreates a version 1 document containing one paragraph.
cloneNgsHeadlessEditorDocument(document)NgsHeadlessEditorDocument—Clones blocks, text runs, marks, and serializable attributes.
normalizeNgsHeadlessEditorDocument(document)NgsHeadlessEditorDocument—Ensures at least one block, unique block IDs and normalized text runs. Unchanged blocks keep their object identity and an already normalized document is returned as-is.
normalizeNgsHeadlessEditorTextContent(content)readonly NgsHeadlessEditorText[]—Removes empty runs, merges adjacent equal marks, and preserves an empty text run when needed.
normalizeNgsHeadlessEditorMarks(marks)readonly NgsHeadlessEditorMark[]—Deduplicates marks by type and returns deterministic order.
ngsHeadlessEditorMarksEqual(left, right)boolean—Compares normalized mark collections.
ngsHeadlessEditorDocumentsEqual(left, right)boolean—Structural document comparison that short-circuits on shared, unchanged blocks and ignores object key order.
ngsHeadlessEditorBlocksEqual(left, right)boolean—Structural comparison of one block: id, type, attrs and content.
ngsHeadlessEditorValuesEqual(left, right)boolean—Deep equality for JSON-like values; key order is ignored and undefined keys count as absent.
isNgsHeadlessEditorTextContent(content)type predicate—Checks whether block content is composed of text runs.
getNgsHeadlessEditorBlockText(block)string—Flattens text runs in one block.
getNgsHeadlessEditorDocumentText(document)string—Flattens document blocks separated by newlines.
isNgsHeadlessEditorDocumentEmpty(document)boolean—Checks whether flattened document text is empty after trimming.

Basic text preset

Exports supplied by basicTextEditorPlugin().

NameTypeDefaultDescription
paragraphblock<p>Default text block.
boldmark<strong>Parses strong and b elements. Shortcut: Mod-b.
italicmark<em>Parses em and i elements. Shortcut: Mod-i.
strikemark<s>Parses s and strike elements. Shortcut: Mod-Shift-x.
codemark<code>Inline code mark. Shortcut: Mod-e.
NGS_HEADLESS_EDITOR_TOGGLE_BOLDNgsHeadlessEditorCommand<void>—Built-in bold command.
NGS_HEADLESS_EDITOR_TOGGLE_ITALICNgsHeadlessEditorCommand<void>—Built-in italic command.
NGS_HEADLESS_EDITOR_TOGGLE_STRIKENgsHeadlessEditorCommand<void>—Built-in strike command.
NGS_HEADLESS_EDITOR_TOGGLE_CODENgsHeadlessEditorCommand<void>—Built-in inline-code command.

Color plugin

Opt-in text and highlight colors supplied by colorEditorPlugin(). Colors are stored as mark attributes in the JSON document.

NameTypeDefaultDescription
textColormark<span style="color: …">Applies a foreground color without affecting the background color mark.
backgroundColormark<span style="background-color: …">Applies a highlight/background color without affecting the text color mark.
NGS_HEADLESS_EDITOR_SET_TEXT_COLORNgsHeadlessEditorCommand<string>—Sets or replaces the textColor mark using a color command payload.
NGS_HEADLESS_EDITOR_UNSET_TEXT_COLORNgsHeadlessEditorCommand<void>—Removes the textColor mark while preserving other marks.
NGS_HEADLESS_EDITOR_SET_BACKGROUND_COLORNgsHeadlessEditorCommand<string>—Sets or replaces the backgroundColor mark using a color command payload.
NGS_HEADLESS_EDITOR_UNSET_BACKGROUND_COLORNgsHeadlessEditorCommand<void>—Removes the backgroundColor mark while preserving other marks.
normalizeNgsHeadlessEditorColor(value)string | null—Normalizes supported CSS colors and design-token variables and rejects values that can escape the color declaration.
NGS_HEADLESS_EDITOR_TEXT_COLOR_MARK'textColor'—Mark type of the text color mark.
NGS_HEADLESS_EDITOR_BACKGROUND_COLOR_MARK'backgroundColor'—Mark type of the background color mark.

Nested editors

Rich text inside component blocks, as used by table cells.

NameTypeDefaultDescription
provideNgsHeadlessEditorInlineRegion()Provider[]—Provides a nested editor and NgsHeadlessEditorInlineRegion for a component.
NgsHeadlessEditorInlineRegion.parent / editorNgsHeadlessEditor—The document editor and the nested editor.
NgsHeadlessEditorInlineRegion.configure(options)voidmarks: truemarks: true (all marks without nested: false), false (plain text) or a list of mark types.
NgsHeadlessEditorInlineRegion.load(runs)void—Shows content in the nested editor unless it already does; keeps the caret when possible.
NgsHeadlessEditorInlineRegion.contentSignal<readonly NgsHeadlessEditorText[]>—Current content as text runs; lines are joined with newline characters.
NgsHeadlessEditorInlineRegion.activate() / deactivate() / activevoid / Signal<boolean>—Makes the region the inline target of the document editor.
renderNgsHeadlessEditorRuns / renderNgsHeadlessEditorTextRunfunction—Render text runs into DOM with mark definitions.
readNgsHeadlessEditorInlineContent(element, marks, options?)NgsHeadlessEditorText[]—Reads text runs from DOM; lineBreaks turns br and block boundaries into newlines.

Mention plugin and menu

Indivisible inline mentions with a caret menu and custom Angular option components. See the Mentions guide.

NameTypeDefaultDescription
mentionEditorPlugin(config | configs[])NgsHeadlessEditorPlugintrigger: @One plugin accepts one configuration or an array of unique triggers, each with its own options callback and optionComponent. All configurations share one mention mark.
NgsHeadlessEditorMentionSearch<T>(query: string) => Promise<readonly T[]>—Consumer-defined local or backend search. Receives the query without the trigger. Results retain their order without additional filtering.
NgsHeadlessEditorMentionOption{ id: string; label: string; text?: string }text: trigger + labelCandidate identity, menu label and optional exact insertion text. Set text to an emoji glyph to insert the emoji. Extend with arbitrary presentation data.
NgsHeadlessEditorMentionOptionComponent<T>{ option: () => T; active: () => boolean }—Inputs required by a custom optionComponent. The menu handles selection around the component.
NGS_HEADLESS_EDITOR_MENTION_OPTIONSInjectionToken<readonly NgsHeadlessEditorMentionRegistration[]>[]Independent editor-scoped configurations installed together by the mention plugin.
ngsHeadlessEditorMentionsMenu | nulldefault menuDirective on a surface. Pass a Menu for custom content, or use the default menu with the plugin optionComponent.
mentionOptions / mentionTriggerNgsHeadlessEditorMentionSearch<T> | null / string | nullnull (use plugin settings)Single-configuration compatibility overrides. Configure multiple triggers in the plugin configuration array.
registration / activeTrigger / optionComponentSignalnull / null / undefinedSettings, trigger and option component of the active plugin registration. Longest matching trigger wins.
query / suggestions / activeIndex / openSignalnull / [] / 0 / falseCurrent query, matching candidates, highlighted index and whether suggestions are open.
loading / errorSignal<boolean> / Signal<unknown>false / nullPending search and latest search error. Outdated responses are ignored; rejection closes the menu until the next search.
optionId(index) / select(option) / dismiss()methods—Option id for aria-activedescendant, candidate insertion in one undo step, and dismissal of the current query.
mentionSelected / mentionQueryChangeoutput—Emits the inserted candidate or the query (null when inactive). Search itself runs through the options callback.
findNgsHeadlessEditorMentionQuery(editor, trigger?)NgsHeadlessEditorMentionQuery | nulltrigger: @Finds a trigger and query at a collapsed caret; ignores existing mentions and e-mail addresses.
insertNgsHeadlessEditorMention(editor, option, query)boolean—Replaces a still-current query with a mention and a space; preserves surrounding text and formatting.
NGS_HEADLESS_EDITOR_MENTION_MARK'mention'—Shared atomic mention mark. Attributes contain id, label, trigger and a unique tokenId per insertion. Older marks without trigger or tokenId remain valid.
NgsHeadlessEditorMentionMenucomponentbuilt inDefault ngs-menu content used by the mentions directive.

Table plugin

Table blocks: plugin, commands, data helpers and components. See the Tables guide.

NameTypeDefaultDescription
tableEditorPlugin(options?)NgsHeadlessEditorPluginpaste: true, formatting: trueRegisters the table block, its editor and read-only components, the table commands and spreadsheet/HTML table paste. formatting: true, false or a list of mark types allowed in cells.
NGS_HEADLESS_EDITOR_TABLE_OPTIONSInjectionToken<NgsHeadlessEditorTablePluginOptions>{}Plugin options, provided by withHeadlessEditorPlugin(tableEditorPlugin(...)).
NgsHeadlessEditorTableCellContentreadonly NgsHeadlessEditorText[]—Content of one cell: text runs with marks; newlines are line breaks.
getNgsHeadlessEditorTableCellText(cell)string—Plain text of a cell.
normalizeNgsHeadlessEditorTableCell(value)NgsHeadlessEditorTableCellContent—Normalizes a cell from a string, text runs or untrusted JSON.
ngsHeadlessEditorTableCellMarks(registry, formatting?)NgsHeadlessEditorMarkRegistry—Mark registry filtered to the marks allowed in cells.
NGS_HEADLESS_EDITOR_INSERT_TABLENgsHeadlessEditorCommand<NgsHeadlessEditorTableSize | undefined>3 x 3, headerReplaces an empty line or inserts after the current block, adds a trailing paragraph when needed and focuses the first cell.
NGS_HEADLESS_EDITOR_TABLE_ADD_ROW_BEFORE / _AFTERNgsHeadlessEditorCommand—Adds a row above or below the active cell.
NGS_HEADLESS_EDITOR_TABLE_ADD_COLUMN_BEFORE / _AFTERNgsHeadlessEditorCommand—Adds a column left or right of the active cell.
NGS_HEADLESS_EDITOR_TABLE_DELETE_ROW / _COLUMNNgsHeadlessEditorCommand—Deletes the row or column of the active cell; disabled for the last one.
NGS_HEADLESS_EDITOR_TABLE_TOGGLE_HEADERNgsHeadlessEditorCommand—Toggles the header row; active while it is on.
NGS_HEADLESS_EDITOR_TABLE_DELETENgsHeadlessEditorCommand—Removes the table of the active cell.
insertNgsHeadlessEditorTable(editor, block)boolean—Inserts a table block with the same placement and focus rules as the insert command.
ngsHeadlessEditorActiveTableCell(editor)Signal<NgsHeadlessEditorTableCell | null>nullFocused (or last focused) table cell: block id, row and column.
focusNgsHeadlessEditorTableCell(editor, cell)void—Focuses a cell once its table is rendered.
NgsHeadlessEditorTableData{ rows: NgsHeadlessEditorTableCellContent[][]; header: boolean }—Table data stored in block.attrs.
NgsHeadlessEditorTableSize{ rows; columns; header? }—Payload of the insert command.
createNgsHeadlessEditorTable(sizeOrRows, header?)NgsHeadlessEditorBlock<null>header: trueCreates a table block from a size or from cells given as strings or text runs.
getNgsHeadlessEditorTableData(block)NgsHeadlessEditorTableData—Reads and normalizes table data (rectangular rows, at most 500 x 50).
setNgsHeadlessEditorTableCell / insert…Row / remove…Row / insert…Column / remove…ColumnNgsHeadlessEditorTableData—Pure table operations that return new data.
parseNgsHeadlessEditorTableText(text)NgsHeadlessEditorTableCellContent[][] | null—Parses a tab-separated spreadsheet range into cells; null unless it is a real grid.
parseNgsHeadlessEditorTableHtml(html, marks?)NgsHeadlessEditorTableCellContent[][] | null—Extracts cells from clipboard HTML that contains only a table, keeping formatting for the given marks.
NgsHeadlessEditorTableBlockEditor / NgsHeadlessEditorTableViewcomponent—Editing and read-only components registered by the plugin. Style them through .ngs-headless-editor-table, .ngs-headless-editor-table-cell, th, .active, .ngs-headless-editor-table-cell-content and .ngs-headless-editor-table-cell-editor.

Snapshot history

NgsHeadlessEditorHistory is scoped with the editor and records document plus selection snapshots.

NameTypeDefaultDescription
NgsHeadlessEditorSnapshot{ document; selection }—Immutable history value containing JSON document and model selection.
canUndoSignal<boolean>falseWhether the past stack contains a snapshot.
canRedoSignal<boolean>falseWhether the future stack contains a snapshot.
record(snapshot, group?)void—Adds a snapshot to the past stack (structure is shared, not cloned) and clears redo state. Consecutive records with the same non-null group within one second form a single undo step. At most 200 steps are kept.
breakGroup()void—Forces the next record to start a new undo step. Called on caret moves, undo and redo.
NGS_HEADLESS_EDITOR_HISTORY_LIMITnumber200Maximum number of undo steps kept in memory.
NGS_HEADLESS_EDITOR_HISTORY_GROUP_DELAYnumber1000Milliseconds within which changes of the same group form one undo step.
undo(current)NgsHeadlessEditorSnapshot | null—Moves current state to the future stack and returns the previous snapshot.
redo(current)NgsHeadlessEditorSnapshot | null—Moves current state to the past stack and returns the next snapshot.
clear()void—Clears both history stacks.