Text Editor - Theming
CSS variables, structural classes, and PrimeOne theme integration for customizing the Text Editor component.
#Styles
TextEditor requires a theme file along with the core styles. The default.css theme uses static values, whereas primeone.css derives its values from the PrimeUI library in use (Aura, Lara, Material, Nora, or a custom preset). The appearance is customizable by overriding individual variables or by building a custom theme file with the CSS variables listed in the next section.
#Default Theme
Recommended for projects that do not use a PrimeUI library. It pairs with the Tailwind UI parts, built on native elements and Tailwind styling.
import '@primeui/texteditor-style/themes/default.css';
import '@primeui/texteditor-style/style.css';#PrimeOne Theme
Integrates with PrimeOne theming. Recommended for projects already using a PrimeUI library in styled mode, since the values are derived from the active preset.
import '@primeui/texteditor-style/themes/primeone.css';
import '@primeui/texteditor-style/style.css';#Custom Theme
Build a custom theme by pairing the core styles with a stylesheet that defines every CSS variable listed in the next section.
import '@/app/styles/texteditor/app-theme.css';
import '@primeui/texteditor-style/style.css';#CSS Variables
A theme file defines these variables. They are grouped below by what they control.
#Layout and Shape
| Variable | Description |
|---|---|
--p-text-editor-corner-radius | Border radius for the editor container, overlays, code blocks, images, and chips |
--p-text-editor-toolbar-height | Toolbar height, published on the Root so siblings such as the Navigator and BlockControls offset themselves without coupling to source order |
--p-text-editor-divider | Border color for the editor outline, toolbar separator, table cells, and horizontal rules |
--p-text-editor-overlay-shadow | Box shadow applied to popover menus, context toolbars, and overlay panels |
#Foreground
| Variable | Description |
|---|---|
--p-text-editor-foreground | Main text color for editor content |
--p-text-editor-foreground-emphasis | Emphasized text color used in hover states |
--p-text-editor-foreground-highlight | Text color inside highlighted elements such as mention chips |
--p-text-editor-muted | Color for placeholders, toolbar icons, and low-emphasis elements |
#Background
| Variable | Description |
|---|---|
--p-text-editor-background | Background color for the editor, toolbar, context toolbar, and popover menus |
--p-text-editor-background-emphasis | Background color for code blocks, blockquotes, active toolbar items, and table headers |
--p-text-editor-background-highlight | Background color for mention chips and highlighted elements |
#Accent and State
| Variable | Description |
|---|---|
--p-text-editor-accent | Accent color for links, active cell outlines, blockquote borders, drop indicators, checkboxes, and mention markers |
--p-text-editor-accent-contrast | Contrast color paired with the accent for text on accent-colored backgrounds such as checkbox checkmarks |
--p-text-editor-danger | Color for destructive actions such as delete operations |
--p-text-editor-disabled-opacity | Opacity for disabled toolbar items |
#Selection
| Variable | Description |
|---|---|
--p-text-editor-selection-background | Background color for text selection and preserved selection highlight |
--p-text-editor-selection-foreground | Text color for selected text |
#Focus Ring
| Variable | Description |
|---|---|
--p-text-editor-focus-ring-width | Width of the focus ring outline |
--p-text-editor-focus-ring-style | Style of the focus ring outline (e.g. solid, dashed) |
--p-text-editor-focus-ring-color | Color of the focus ring outline |
--p-text-editor-focus-ring-offset | Offset of the focus ring from the element edge |
--p-text-editor-focus-ring-shadow | Box shadow used as the focus ring indicator |
Thefocus-ring-*,disabled-opacity,danger, andforeground-emphasisvariables are used by the PrimeOne UI parts only. The Tailwind variant uses Tailwind utilities for the same surfaces instead.
#Style Classes
#Layout
| Class | Description |
|---|---|
p-text-editor | Root container; flexbox column with border, radius, and overflow hidden |
p-text-editor-toolbar | Toolbar region above the editor with bottom border |
p-text-editor-body | Scrollable body containing the editor content |
p-text-editor-content | ProseMirror editable content area (contenteditable) |
p-text-editor-placeholder | Placeholder text shown when the editor is empty |
#Content Formatting
| Class | Description |
|---|---|
p-text-editor-content h1–h6 | Headings with scaled font sizes from 2rem (h1) to 0.875rem (h6) |
p-text-editor-content ul | Unordered list with disc style and inline-start padding |
p-text-editor-content ol | Ordered list with decimal style and inline-start padding |
p-text-editor-content li | List item with vertical margin |
p-text-editor-content code | Inline code with monospace font and emphasis background |
p-text-editor-content pre | Code block with emphasis background and horizontal scroll |
p-text-editor-content pre code | Code inside a code block; inherits font size, no background |
p-text-editor-content blockquote | Block quote with accent left border and emphasis background |
p-text-editor-content a | Links styled with accent color and underline |
p-text-editor-content img | Images constrained to max-width with border radius |
p-text-editor-content hr | Horizontal rule using divider color |
#Checklist
| Class | Description |
|---|---|
p-text-editor-content ul[data-p-checked-list] | Checklist container with no list style |
li[data-p-checked] | Checklist item; data-p-checked="true" applies strikethrough + reduced opacity to text |
li[data-p-checked] > label | Non-editable checkbox container (prevents accidental deletion of checkbox) |
li[data-p-checked] input[type="checkbox"] | Custom styled checkbox with appearance: none, accent fill, and animated checkmark |
#Tables
| Class | Description |
|---|---|
p-text-editor-table-overlay | Wrapper container for table overlay elements |
p-text-editor-table-selection-outline | Outline drawn around the active cell or multi-cell selection |
p-text-editor-table-trigger | Base class for column, row, and cell trigger buttons |
p-text-editor-table-trigger-col | Column trigger positioned at top center of active column |
p-text-editor-table-trigger-row | Row trigger positioned at left center of active row |
p-text-editor-table-trigger-cell | Cell trigger inside the selection outline |
p-text-editor-table-add | Base class for add column/row buttons |
p-text-editor-table-add-col | Add column button at the inline-end edge of the table |
p-text-editor-table-add-row | Add row button at the bottom edge of the table |
#Block Mode
| Class | Description |
|---|---|
p-text-editor-block | Individual block wrapper with relative positioning |
p-text-editor-block-content | Editable content area within a block |
p-text-editor-block-controls | Plus button and drag handle container; positioned via JS |
p-text-editor-block-controls[data-block-type] | Block type attribute for per-heading vertical alignment offsets |
p-text-editor-block-placeholder | Placeholder widget inside empty blocks; inherits parent font styles |
p-text-editor-block-drop-indicator | Horizontal line showing the drop target position during drag |
#Navigator
| Class | Description |
|---|---|
p-text-editor-navigator | Navigator minimap container positioned on the inline-end edge |
p-text-editor-navigator-bar | Individual heading bar; width varies by data-level attribute |
p-text-editor-navigator-popover | Heading list popover shown on navigator hover |
#Menus and Overlays
| Class | Description |
|---|---|
p-text-editor-popover-menu | Popover menu container with shadow, border, and scroll |
p-text-editor-popover-submenu | Submenu panel positioned alongside the parent menu |
p-text-editor-context-toolbar | Floating toolbar that appears on text selection |
p-text-editor-context-toolbar-more | Overflow panel for additional context toolbar actions |
#Inline Decorations
| Class | Description |
|---|---|
p-text-editor-mention | Mention chip with highlight background and accent text |
p-text-editor-mention-typing | Inline decoration marking the active mention input |
p-text-editor-slash-typing | Inline decoration marking the slash command input |
p-text-editor-selection | Preserved selection highlight when editor loses focus |
#Upload Placeholders
| Class | Description |
|---|---|
p-text-editor-image-upload-placeholder | Placeholder block for image upload UI |
p-text-editor-document-upload-placeholder | Placeholder block for document upload UI |
#Animations
| Class | Description |
|---|---|
p-text-editor-anchored-overlay-enter-active | Entry animation for popover menus and context toolbars (scale + fade) |
p-text-editor-anchored-overlay-leave-active | Exit animation for popover menus and context toolbars (scale + fade) |
#Data Attributes
Every part renders data-scope="texteditor" and a data-part="<name>" on its root element, the stable styling and testing contract that survives class-name changes. The Root also publishes data-id, data-disabled, and data-readonly. See Data Attributes for the full list of parts and state attributes.