CogniSyncEditor
The Editor component allows users to write, format, and preview legal or compliance content in a structured and user-friendly way. It’s optimized for rich text input and document consistency across workflows.
Full toolbar
The default editor ships with history, formatting, headings, lists, and block tools. Best for writing rules, policies, and long-form documents.
0 words · 0 characters
Rich text
Supports headings, lists, quotes, inline code, and links.
Just the essentials
A condensed toolbar with only formatting, lists, and block tools. Use inside comment fields, reply boxes, and short-form captures.
Three sizes
Toolbar buttons, icons, and body type all scale together so the editor feels coherent at any size.
Compact toolbar and 13px body. Inline comments, side panels, table expanders.
0 words · 0 characters
Rich text
Default dimensions for most forms and detail panes.
0 words · 0 characters
Rich text
Bigger body and controls for authoring long documents and policies.
0 words · 0 characters
Rich text
Icons in the toolbar
The toolbar uses the Lucide icon set, grouped by function and separated by subtle dividers. Icons inherit tone color, size with the editor, and show pressed state when the format is active.
Bold
Toggle bold text (Cmd/Ctrl + B).
Italic
Toggle italics (Cmd/Ctrl + I).
Underline
Toggle underline (Cmd/Ctrl + U).
Strikethrough
Mark text as struck through.
Paragraph
Reset block to a paragraph.
Heading 1
Largest section heading.
Heading 2
Sub-section heading.
Heading 3
Detail heading.
Bulleted list
Create an unordered list.
Numbered list
Create an ordered list.
Quote
Wrap the block in a quote.
Inline code
Style selected text as code.
Link
Turn selected text into a link.
Undo
Step back through recent edits.
Redo
Step forward through recent edits.
Empty, filled, error, disabled
The editor supports every form state you'd expect. Error highlights the border in red; disabled freezes the toolbar and blocks editing.
0 words · 0 characters
Rich text
0 words · 0 characters
Rich text
A rule description is required.
0 words · 0 characters
Rich text
0 words · 0 characters
Rich text
Anatomy
An Editor is made of these parts.
Toolbar
A horizontal strip of grouped format controls separated by dividers. Scales with the editor size.
Group
Related buttons (formatting, headings, lists, block tools, history) sit together and share a hover tint.
Tool button
32/28/36px square icon button. Shows a pressed blue tint when the format is active on the caret.
Heading dropdown
Replaces a long row of heading buttons with a single typed dropdown showing Paragraph, H1, H2, H3.
Body
contenteditable region with rich-text styles. Padding and line-height scale with size.
Status bar
Footer showing live word and character counts plus a content-type label. Optional.
Do & Don't
Do
- Use the default variant for rule bodies, policy content, and knowledge-base articles.
- Use the minimal variant for comments, replies, and short notes.
- Show validation errors via the `error` prop plus a helpful description below the editor.
- Scale editor size with the surrounding form — match 14/16/18px body type.
Don't
- Don't use the editor for single-line inputs — use a text field instead.
- Don't hide the toolbar; the minimum is the `format` group so users know formatting is possible.
- Don't mix editors of different sizes side by side in the same form.
- Don't put a disabled editor inline with active fields — move it into a read-only view.