Text Editor - Data Attributes
Reference for the stable data attributes used for styling and testing.
#Import
import { TextEditor } from '@primeui/vue-texteditor';#Data Attributes
Every part that renders DOM writes data-scope="texteditor" and a data-part="<name>" on its root element. These attributes are the stable styling and testing contract: class names may change between releases, the data attributes will not. Prefer them over descendant selectors that depend on private DOM nesting.
Renderless parts have no DOM of their own and so carry no data-part: Navigator, NavigatorTrigger, TableControls, and the upload parts (ImageUpload, DocumentUpload, and their Dropzone and Progress slots). Target the host widgets rendered inside them instead.
#Part Attributes
data-part value | Surface |
|---|---|
root | Editor container |
toolbar | Static toolbar |
content | Editable region |
block-controls | Block-mode hover bar |
context-toolbar | Selection floating toolbar |
context-toolbar-more | Context toolbar overflow panel |
block-menu / block-submenu | Block options menu and submenu |
slash-menu | Slash-command popover |
mention-menu | Mention popover |
navigator | Heading-outline rail |
navigator-menu | Heading-outline popover |
table-column-menu / table-column-submenu | Column actions menu and submenu |
table-row-menu / table-row-submenu | Row actions menu and submenu |
table-cell-menu / table-cell-submenu | Cell actions menu and submenu |
Menu parts that do not override the value fall back to popover-menu or popover-submenu; the parts above always set their own.
#State Attributes
TextEditor.Root writes the instance and mode attributes:
| Attribute | Appears on | Meaning |
|---|---|---|
data-id | root | Per-instance ID, stable across server and client renders |
data-disabled | root | Present only while the editor is disabled |
data-readonly | root | Present only while the editor is read-only |
data-block-type | block-controls | The hovered block's type, such as text or heading:2 |
Content nodes inside the editable region carry their own attributes, used by the bundled styles and available for custom themes:
| Attribute | Appears on | Meaning |
|---|---|---|
data-placeholder | Empty blocks | The placeholder text shown in an empty block |
data-p-checked-list | Checklist <ul> | Marks a checklist container |
data-p-checked | Checklist <li> | true or false for the item's checked state |
#Styling
Attach selectors to a part and, where relevant, a state attribute.
[data-scope='texteditor'][data-part='content'] {
min-height: 12rem;
}
[data-scope='texteditor'][data-part='root'][data-readonly] {
opacity: 0.7;
}
[data-scope='texteditor'][data-part='block-controls'][data-block-type^='heading'] {
color: var(--p-text-editor-accent);
}#Testing
Use data-part for stable queries, and combine it with a state attribute only when the assertion is about that state.
expect(page.locator("[data-part='content']")).toBeVisible();
expect(page.locator("[data-part='root'][data-readonly]")).toHaveCount(1);Prefer user-facing assertions when behavior matters. Use the data attributes to find a stable surface, then assert visible text, ARIA state, or the pressed state of a control.