Editor
AI-native structured rich-text editing powered by Tiptap, ProseMirror and Yjs, with deterministic JSON values and explicit application ownership boundaries.
STANDALONE PACKAGE
Install and import
Editor is intentionally separate from Core. Its npm package embeds its Tiptap, ProseMirror, Floating UI and Yjs runtime dependencies.
Structured value and Signal Forms
The canonical model is always NeuralEditorDocument. HTML and text are derived, never alternate model modes.
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.
Custom toolbar
Typed template context exposes the supported controller without leaking the raw Tiptap instance.
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.
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.
Persistence and derived output
Persist schema-versioned JSON. Serializers generate portable HTML or text; the application owns storage, upload and final output sanitization.
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
Accessibility
Editable semantics
A named contenteditable surface exposes disabled, readonly, required, invalid, busy and descriptive relationships while toolbar controls retain native buttons.
Keyboard
Native editing, undo/redo and document navigation are preserved. Slash, mention and command-palette interactions implement deterministic listbox focus behavior.
Menus and focus
Floating UI positions overlay menus without stealing document selection. Escape closes the active overlay, and only one editor overlay is active at a time.
Security boundary
HTML is not the model. Validate stored JSON, restrict extensions, reject unsafe image URLs and sanitize derived HTML at the final rendering boundary.
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
focus, blur, clear, reset, undo, redo, paragraphs, headings, marks, lists, quotes and codeFocus, history and rich-text editing commands.
alignment, colors, highlight, table commands, links and image requestsStructured formatting and embedded-content commands.
open/close link popover and command paletteSupported imperative overlay controls without raw Tiptap access.
node lookup, revision, validate/apply batches, request/cancel AI and preview/review proposalsDeterministic node operations and non-destructive AI review.
presence, comments, tracked changes and snapshotsCollaboration 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
roottoolbartoolbarButtontoolbarMenububbleMenufloatingMenulinkPopoverslashMenumentionMenucommandPaletteaiReviewcollaborationBarcollaborationPanelcommentThreadtrackedChangesnapshotItemsurfacecontentfootercharacterCountwordCountOwnership 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-widthComponent inline size.
--neural-editor-min-heightComponent minimum block size.
--neural-editor-max-heightComponent maximum block size.
--neural-editor-colorComponent foreground color.
--neural-editor-color-readonlyReadonly component foreground color.
--neural-editor-backgroundComponent background surface.
--neural-editor-content-backgroundContent background surface.
--neural-editor-content-colorContent foreground color.
--neural-editor-borderComponent border shorthand.
--neural-editor-border-color-focusFocused component border color.
--neural-editor-border-color-invalidInvalid component border color.
--neural-editor-radiusComponent corner radius.
--neural-editor-shadowComponent box shadow.
--neural-editor-shadow-focusFocused component box shadow.
--neural-editor-shadow-invalidInvalid component box shadow.
--neural-editor-font-familyComponent font family.
--neural-editor-font-sizeComponent font size.
--neural-editor-line-heightComponent line height.
--neural-editor-content-paddingContent internal spacing.
--neural-editor-caret-colorComponent text caret color.
--neural-editor-placeholder-colorPlaceholder foreground color.
--neural-editor-placeholder-opacityOpacity of the editor placeholder when the document is empty.
--neural-editor-heading-colorHeading foreground color.
--neural-editor-blockquote-colorBlockquote foreground color.
--neural-editor-blockquote-borderBlockquote border shorthand.
--neural-editor-inline-code-backgroundInline code background surface.
--neural-editor-code-block-colorCode block foreground color.
--neural-editor-code-block-backgroundCode block background surface.
--neural-editor-link-colorLink foreground color.
--neural-editor-rule-borderRule border shorthand.
--neural-editor-selection-backgroundSelection background surface.
--neural-editor-toolbar-gapSpacing between toolbar items.
--neural-editor-toolbar-paddingToolbar internal spacing.
--neural-editor-toolbar-backgroundToolbar background surface.
--neural-editor-toolbar-borderToolbar border shorthand.
--neural-editor-toolbar-button-sizeToolbar button width and height.
--neural-editor-toolbar-button-colorToolbar button foreground color.
--neural-editor-toolbar-button-backgroundToolbar button background surface.
--neural-editor-toolbar-button-background-hoverHovered toolbar button background surface.
--neural-editor-toolbar-button-color-hoverHovered toolbar button foreground color.
--neural-editor-toolbar-button-background-activeActive toolbar button background surface.
--neural-editor-toolbar-button-color-activeActive toolbar button foreground color.
--neural-editor-toolbar-button-radiusToolbar button corner radius.
--neural-editor-toolbar-separator-colorToolbar separator foreground color.
--neural-editor-toolbar-menu-colorToolbar menu foreground color.
--neural-editor-toolbar-menu-backgroundToolbar menu background surface.
--neural-editor-toolbar-menu-borderToolbar menu border shorthand.
--neural-editor-toolbar-menu-radiusToolbar menu corner radius.
--neural-editor-toolbar-menu-shadowToolbar menu box shadow.
--neural-editor-toolbar-color-swatch-borderToolbar color swatch border shorthand.
--neural-editor-task-checkbox-accentTask checkbox accent color.
--neural-editor-table-cell-borderTable cell border shorthand.
--neural-editor-table-header-backgroundTable header background surface.
--neural-editor-table-selection-backgroundTable selection background surface.
--neural-editor-link-input-backgroundLink input background surface.
--neural-editor-link-input-borderLink input border shorthand.
--neural-editor-link-input-radiusLink input corner radius.
--neural-editor-link-action-colorLink action foreground color.
--neural-editor-link-action-backgroundLink action background surface.
--neural-editor-link-action-borderLink action border shorthand.
--neural-editor-link-action-radiusLink action corner radius.
--neural-editor-context-menu-z-indexContext menu stacking order.
--neural-editor-context-menu-colorContext menu foreground color.
--neural-editor-context-menu-backgroundContext menu background surface.
--neural-editor-context-menu-borderContext menu border shorthand.
--neural-editor-context-menu-radiusContext menu corner radius.
--neural-editor-context-menu-shadowContext menu box shadow.
--neural-editor-context-menu-button-colorContext menu button foreground color.
--neural-editor-context-menu-button-color-activeActive context menu button foreground color.
--neural-editor-context-menu-button-background-activeActive context menu button background surface.
--neural-editor-context-menu-button-radiusContext menu button corner radius.
--neural-editor-image-radiusImage corner radius.
--neural-editor-image-selection-outlineImage selection outline.
--neural-editor-mention-colorMention foreground color.
--neural-editor-mention-backgroundMention background surface.
--neural-editor-suggestion-z-indexSuggestion stacking order.
--neural-editor-suggestion-colorSuggestion foreground color.
--neural-editor-suggestion-backgroundSuggestion background surface.
--neural-editor-suggestion-borderSuggestion border shorthand.
--neural-editor-suggestion-radiusSuggestion corner radius.
--neural-editor-suggestion-shadowSuggestion box shadow.
--neural-editor-suggestion-item-colorSuggestion item foreground color.
--neural-editor-suggestion-item-color-activeActive suggestion item foreground color.
--neural-editor-suggestion-item-background-activeActive suggestion item background surface.
--neural-editor-command-palette-z-indexCommand palette stacking order.
--neural-editor-command-palette-backdropCommand palette backdrop color.
--neural-editor-command-palette-backgroundCommand palette background surface.
--neural-editor-command-palette-borderCommand palette border shorthand.
--neural-editor-command-palette-radiusCommand palette corner radius.
--neural-editor-command-palette-shadowCommand palette box shadow.
--neural-editor-command-palette-input-backgroundCommand palette input background surface.
--neural-editor-command-palette-input-borderCommand palette input border shorthand.
--neural-editor-ai-review-z-indexAI review stacking order.
--neural-editor-ai-review-colorAI review foreground color.
--neural-editor-ai-review-muted-colorAI review muted foreground color.
--neural-editor-ai-review-backgroundAI review background surface.
--neural-editor-ai-review-borderAI review border shorthand.
--neural-editor-ai-review-radiusAI review corner radius.
--neural-editor-ai-review-shadowAI review box shadow.
--neural-editor-ai-review-button-colorAI review button foreground color.
--neural-editor-ai-review-button-backgroundAI review button background surface.
--neural-editor-ai-review-button-borderAI review button border shorthand.
--neural-editor-ai-addition-backgroundAI addition background surface.
--neural-editor-ai-addition-border-colorAI addition border color.
--neural-editor-ai-deletion-backgroundAI deletion background surface.
--neural-editor-ai-deletion-border-colorAI deletion border color.
--neural-editor-ai-update-border-colorAI update border color.
--neural-editor-ai-selected-outlineAI selected outline.
--neural-editor-footer-gapSpacing between footer items.
--neural-editor-footer-paddingFooter internal spacing.
--neural-editor-footer-colorFooter foreground color.
--neural-editor-footer-backgroundFooter background surface.
--neural-editor-footer-borderFooter border shorthand.
--neural-editor-footer-font-sizeFooter font size.
--neural-editor-focus-ringComponent keyboard focus ring.
--neural-editor-focus-ring-offsetComponent focus ring offset.
--neural-editor-disabled-opacityDisabled opacity.
--neural-editor-transitionComponent CSS transition.
--neural-editor-collaboration-borderCollaboration border shorthand.
--neural-editor-collaboration-input-borderCollaboration input border shorthand.
--neural-editor-collaboration-button-borderCollaboration button border shorthand.
--neural-editor-collaboration-button-backgroundCollaboration button background surface.
--neural-editor-collaboration-item-borderCollaboration item border shorthand.
--neural-editor-comment-backgroundComment background surface.
--neural-editor-comment-border-colorComment border color.
--neural-editor-tracked-insertion-colorTracked insertion foreground color.
--neural-editor-tracked-insertion-backgroundTracked insertion background surface.
--neural-editor-tracked-deletion-colorTracked deletion foreground color.
--neural-editor-tracked-deletion-backgroundTracked deletion background surface.