EDITOR PACKAGEBETA

Editor

AI-native structured rich-text editing powered by Tiptap, ProseMirror and Yjs, with deterministic JSON values and explicit application ownership boundaries.

Structured JSONProvider-neutral AICollaboration ready

STANDALONE PACKAGE

Install and import

Editor is intentionally separate from Core. Its npm package embeds its Tiptap, ProseMirror, Floating UI and Yjs runtime dependencies.

npm install @neural-ng/editor

import { NeuralEditor, type NeuralEditorDocument } from '@neural-ng/editor';

@Component({ imports: [NeuralEditor] })

Structured value and Signal Forms

The canonical model is always NeuralEditorDocument. HTML and text are derived, never alternate model modes.

Persist JSON with a schema version; sanitize derived HTML at its final rendering boundary.

Editor is ready for structured input.

Rich text and structured content

The default schema includes headings, marks, alignment, colors, highlights, lists, tasks, quotes, code, links, images and tables.

Every Angular Forms API

Signal Forms, Reactive Forms and template-driven Forms share the same immutable document value.

SIGNAL FORMS

REACTIVE FORMS

NGMODEL

Structured operations and AI review

Stable node IDs and revision-bound atomic operations make changes reviewable. Editor emits AI requests but never calls a model provider; proposals remain non-destructive until explicit acceptance.

const request = controller.requestAi('rewrite', { instruction: 'Make this concise.' });
// Application calls its provider, then supplies structured operations.
controller.previewAiProposal(proposal);
controller.acceptAiProposal(); // explicit user approval

Yjs collaboration and review

Pass an application-owned Y.Doc and optional transport adapter. Presence, comments, suggesting-mode tracked changes and snapshots share the canonical document contract.

<neural-editor [collaboration]="{ document: yDoc }" [collaborationUser]="currentUser" enableComments trackedChangesMode="suggesting" enableSnapshots />

Persistence and derived output

Persist schema-versioned JSON. Serializers generate portable HTML or text; the application owns storage, upload and final output sanitization.

const stored = { schemaVersion: 1, document: document() };
const html = editorDocumentToHtml(stored.document);
const text = editorDocumentToText(stored.document);
// Sanitize derived HTML again at the final rendering boundary.

States

Editor composes with Field and supports disabled, readonly, required, invalid, pending, touched, dirty and toolbar-free reading surfaces.

Unstyled and typed class slots

Schema, commands, Forms and semantics remain while consumer classes own toolbar, editable surface and counters.

EDITOR

API

The grouped public surface of canonical NeuralEditor. Complex payloads retain their exact exported TypeScript types.

Models and inputs

Area	Public inputs	Contract
Models	value: NeuralEditorDocument; snapshots: readonly NeuralEditorSnapshot[]	Canonical structured value and portable application-owned checkpoints.
Forms state	disabled, readonly, required, invalid, pending, touched, dirty, name, maxCharacters	Angular Forms state and the component-enforced character limit.
Presentation	placeholder, autofocus, spellcheck, showToolbar, character/word counts, fluid	Editing behavior, counters and responsive presentation.
Menus	Bubble, Floating, Link, Slash, Mention, Command Palette and AI Review visibility, placement and providers	Overlay visibility, logical placement, debounce and suggestion sources.
Schema	includeDefaultExtensions, extensions, node IDs, identified node types and ID generator	Initialization-time schema and deterministic node identity.
Collaboration	collaboration, collaborationUser, comments, tracked changes, snapshots and panel visibility	Application-owned Yjs transport, presence and review capabilities.
Identity	editorId, ariaLabel, ariaLabelledBy, ariaDescription	Stable DOM identity and accessible naming or description.
Styling	unstyled, editorClass, contentClass and NeuralEditorClasses	Global or local headless mode and typed consumer class ownership.

Events

Area	Outputs	Purpose
Editing	editorReady, editorUpdate, selectionChange, editorFocus, editorBlur, editorPaste, editorDrop, touch, contentError	Controller lifecycle, model updates, selection, focus and native editing events.
Assets and menus	imageInsertRequest, commandExecuted, mentionSelected	Application-owned asset requests and semantic menu selections.
Operations	operationsApplied, operationsRejected, operationConflict	Atomic revision-aware structured operation results.
AI review	aiRequest, aiRequestCancelled, aiProposalPreviewed, aiProposalAccepted, aiProposalRejected, aiOperationConflict	Provider-neutral request and explicit proposal review lifecycle.
Collaboration	collaborationStatusChange, presenceChange, comment events, tracked-change events and snapshot events	Realtime status, review state and portable checkpoint lifecycle.

Controller methods

Editingfocus, blur, clear, reset, undo, redo, paragraphs, headings, marks, lists, quotes and code

Focus, history and rich-text editing commands.

Structured contentalignment, colors, highlight, table commands, links and image requests

Structured formatting and embedded-content commands.

Overlaysopen/close link popover and command palette

Supported imperative overlay controls without raw Tiptap access.

Operations and AInode lookup, revision, validate/apply batches, request/cancel AI and preview/review proposals

Deterministic node operations and non-destructive AI review.

Collaboration reviewpresence, comments, tracked changes and snapshots

Collaboration presence, review threads and snapshot commands.

Typed templates

Export	Selector	Typed context
NeuralEditorToolbarTemplate	neuralEditorToolbar	NeuralEditorToolbarTemplateContext
NeuralEditorBubbleMenuTemplate	neuralEditorBubbleMenu	NeuralEditorMenuTemplateContext
NeuralEditorFloatingMenuTemplate	neuralEditorFloatingMenu	NeuralEditorMenuTemplateContext
NeuralEditorLinkPopoverTemplate	neuralEditorLinkPopover	NeuralEditorLinkPopoverTemplateContext
NeuralEditorSlashMenuTemplate	neuralEditorSlashMenu	NeuralEditorSuggestionMenuTemplateContext<NeuralEditorSlashCommand>
NeuralEditorMentionMenuTemplate	neuralEditorMentionMenu	NeuralEditorSuggestionMenuTemplateContext<NeuralEditorMentionItem>
NeuralEditorCommandPaletteTemplate	neuralEditorCommandPalette	NeuralEditorCommandPaletteTemplateContext
NeuralEditorAiReviewTemplate	neuralEditorAiReview	NeuralEditorAiReviewTemplateContext

Typed class slots

roottoolbartoolbarButtontoolbarMenububbleMenufloatingMenulinkPopoverslashMenumentionMenucommandPaletteaiReviewcollaborationBarcollaborationPanelcommentThreadtrackedChangesnapshotItemsurfacecontentfootercharacterCountwordCount

Ownership contract

Editor owns structured editing and review UI. The application owns persistence, uploads, AI/provider calls, collaboration transport, authorization and backend validation.

EDITOR

Design tokens

Neutral, dark mode and experimental themes share the same component-token surface. Import the matching Core theme before @neural-ng/editor/themes/neutral.css.

Component tokens

--neural-editor-width

Component inline size.

--neural-editor-min-height

Component minimum block size.

--neural-editor-max-height

Component maximum block size.

--neural-editor-color

Component foreground color.

--neural-editor-color-readonly

Readonly component foreground color.

--neural-editor-background

Component background surface.

--neural-editor-content-background

Content background surface.

--neural-editor-content-color

Content foreground color.

--neural-editor-border

Component border shorthand.

--neural-editor-border-color-focus

Focused component border color.

--neural-editor-border-color-invalid

Invalid component border color.

--neural-editor-radius

Component corner radius.

--neural-editor-shadow

Component box shadow.

--neural-editor-shadow-focus

Focused component box shadow.

--neural-editor-shadow-invalid

Invalid component box shadow.

--neural-editor-font-family

Component font family.

--neural-editor-font-size

Component font size.

--neural-editor-line-height

Component line height.

--neural-editor-content-padding

Content internal spacing.

--neural-editor-caret-color

Component text caret color.

--neural-editor-placeholder-color

Placeholder foreground color.

--neural-editor-placeholder-opacity

Opacity of the editor placeholder when the document is empty.

--neural-editor-heading-color

Heading foreground color.

--neural-editor-blockquote-color

Blockquote foreground color.

--neural-editor-blockquote-border

Blockquote border shorthand.

--neural-editor-inline-code-background

Inline code background surface.

--neural-editor-code-block-color

Code block foreground color.

--neural-editor-code-block-background

Code block background surface.

--neural-editor-link-color

Link foreground color.

--neural-editor-rule-border

Rule border shorthand.

--neural-editor-selection-background

Selection background surface.

--neural-editor-toolbar-gap

Spacing between toolbar items.

--neural-editor-toolbar-padding

Toolbar internal spacing.

--neural-editor-toolbar-background

Toolbar background surface.

--neural-editor-toolbar-border

Toolbar border shorthand.

--neural-editor-toolbar-button-size

Toolbar button width and height.

--neural-editor-toolbar-button-color

Toolbar button foreground color.

--neural-editor-toolbar-button-background

Toolbar button background surface.

--neural-editor-toolbar-button-background-hover

Hovered toolbar button background surface.

--neural-editor-toolbar-button-color-hover

Hovered toolbar button foreground color.

--neural-editor-toolbar-button-background-active

Active toolbar button background surface.

--neural-editor-toolbar-button-color-active

Active toolbar button foreground color.

--neural-editor-toolbar-button-radius

Toolbar button corner radius.

--neural-editor-toolbar-separator-color

Toolbar separator foreground color.

--neural-editor-toolbar-menu-color

Toolbar menu foreground color.

--neural-editor-toolbar-menu-background

Toolbar menu background surface.

--neural-editor-toolbar-menu-border

Toolbar menu border shorthand.

--neural-editor-toolbar-menu-radius

Toolbar menu corner radius.

--neural-editor-toolbar-menu-shadow

Toolbar menu box shadow.

--neural-editor-toolbar-color-swatch-border

Toolbar color swatch border shorthand.

--neural-editor-task-checkbox-accent

Task checkbox accent color.

--neural-editor-table-cell-border

Table cell border shorthand.

--neural-editor-table-header-background

Table header background surface.

--neural-editor-table-selection-background

Table selection background surface.

--neural-editor-link-input-background

Link input background surface.

--neural-editor-link-input-border

Link input border shorthand.

--neural-editor-link-input-radius

Link input corner radius.

--neural-editor-link-action-color

Link action foreground color.

--neural-editor-link-action-background

Link action background surface.

--neural-editor-link-action-border

Link action border shorthand.

--neural-editor-link-action-radius

Link action corner radius.

--neural-editor-context-menu-z-index

Context menu stacking order.

--neural-editor-context-menu-color

Context menu foreground color.

--neural-editor-context-menu-background

Context menu background surface.

--neural-editor-context-menu-border

Context menu border shorthand.

--neural-editor-context-menu-radius

Context menu corner radius.

--neural-editor-context-menu-shadow

Context menu box shadow.

--neural-editor-context-menu-button-color

Context menu button foreground color.

--neural-editor-context-menu-button-color-active

Active context menu button foreground color.

--neural-editor-context-menu-button-background-active

Active context menu button background surface.

--neural-editor-context-menu-button-radius

Context menu button corner radius.

--neural-editor-image-radius

Image corner radius.

--neural-editor-image-selection-outline

Image selection outline.

--neural-editor-mention-color

Mention foreground color.

--neural-editor-mention-background

Mention background surface.

--neural-editor-suggestion-z-index

Suggestion stacking order.

--neural-editor-suggestion-color

Suggestion foreground color.

--neural-editor-suggestion-background

Suggestion background surface.

--neural-editor-suggestion-border

Suggestion border shorthand.

--neural-editor-suggestion-radius

Suggestion corner radius.

--neural-editor-suggestion-shadow

Suggestion box shadow.

--neural-editor-suggestion-item-color

Suggestion item foreground color.

--neural-editor-suggestion-item-color-active

Active suggestion item foreground color.

--neural-editor-suggestion-item-background-active

Active suggestion item background surface.

--neural-editor-command-palette-z-index

Command palette stacking order.

--neural-editor-command-palette-backdrop

Command palette backdrop color.

--neural-editor-command-palette-background

Command palette background surface.

--neural-editor-command-palette-border

Command palette border shorthand.

--neural-editor-command-palette-radius

Command palette corner radius.

--neural-editor-command-palette-shadow

Command palette box shadow.

--neural-editor-command-palette-input-background

Command palette input background surface.

--neural-editor-command-palette-input-border

Command palette input border shorthand.

--neural-editor-ai-review-z-index

AI review stacking order.

--neural-editor-ai-review-color

AI review foreground color.

--neural-editor-ai-review-muted-color

AI review muted foreground color.

--neural-editor-ai-review-background

AI review background surface.

--neural-editor-ai-review-border

AI review border shorthand.

--neural-editor-ai-review-radius

AI review corner radius.

--neural-editor-ai-review-shadow

AI review box shadow.

--neural-editor-ai-review-button-color

AI review button foreground color.

--neural-editor-ai-review-button-background

AI review button background surface.

--neural-editor-ai-review-button-border

AI review button border shorthand.

--neural-editor-ai-addition-background

AI addition background surface.

--neural-editor-ai-addition-border-color

AI addition border color.

--neural-editor-ai-deletion-background

AI deletion background surface.

--neural-editor-ai-deletion-border-color

AI deletion border color.

--neural-editor-ai-update-border-color

AI update border color.

--neural-editor-ai-selected-outline

AI selected outline.

--neural-editor-footer-gap

Spacing between footer items.

--neural-editor-footer-padding

Footer internal spacing.

--neural-editor-footer-color

Footer foreground color.

--neural-editor-footer-background

Footer background surface.

--neural-editor-footer-border

Footer border shorthand.

--neural-editor-footer-font-size

Footer font size.

--neural-editor-focus-ring

Component keyboard focus ring.

--neural-editor-focus-ring-offset

Component focus ring offset.

--neural-editor-disabled-opacity

Disabled opacity.

--neural-editor-transition

Component CSS transition.

--neural-editor-collaboration-border

Collaboration border shorthand.

--neural-editor-collaboration-input-border

Collaboration input border shorthand.

--neural-editor-collaboration-button-border

Collaboration button border shorthand.

--neural-editor-collaboration-button-background

Collaboration button background surface.

--neural-editor-collaboration-item-border

Collaboration item border shorthand.

--neural-editor-comment-background

Comment background surface.

--neural-editor-comment-border-color

Comment border color.

--neural-editor-tracked-insertion-color

Tracked insertion foreground color.

--neural-editor-tracked-insertion-background

Tracked insertion background surface.

--neural-editor-tracked-deletion-color

Tracked deletion foreground color.

--neural-editor-tracked-deletion-background

Tracked deletion background surface.

Primary

Surface

Editor

Install and import

Structured value and Signal Forms

Rich text and structured content

Every Angular Forms API

Structured operations and AI review

Yjs collaboration and review

Persistence and derived output

States

Unstyled and typed class slots

Accessibility

Editable semantics

Keyboard

Menus and focus

Security boundary

API

Models and inputs

Events

Controller methods

Typed templates

Typed class slots

Ownership contract

Design tokens

Component tokens

Install and import

Structured value and Signal Forms

Rich text and structured content

Every Angular Forms API

Custom toolbar

Structured operations and AI review

Yjs collaboration and review

Persistence and derived output

States

Unstyled and typed class slots

Editable semantics

Keyboard

Menus and focus

Security boundary

Models and inputs

Events

Controller methods

Typed templates

Typed class slots

Ownership contract

Component tokens