Classes, data attributes and custom properties

Everything a stylesheet can address. Selectors start at .tiptap.

Classes

Class	Element
`tiptap-chart`	The root of a chart in the editor, with `role="figure"` and an `aria-label` from the description or the title
`tiptap-chart-viewport`	Around the canvas; scrolls while the chart is zoomed in
`tiptap-chart-zoom-box`	Between viewport and canvas; takes the room of the zoomed picture
`tiptap-chart-canvas`	The box the picture takes in the text
`tiptap-chart-stage`	The element the Renderer draws into; scaled down when `minRenderWidth` applies
`tiptap-chart-caption`	Below the chart: the description, while the spec has `caption: true`
`tiptap-chart-text-input`	The field a double click opens over a text of the chart, to rename it (Text in the picture)
`tiptap-chart-attribution`	Below the picture: the link the Renderer's rules ask for, `hidden` while there is none (Rules of your Renderer)
`tiptap-chart-error`	The message shown when drawing failed
`tiptap-chart-unavailable`	What `unavailable` returns, shown when no Renderer here draws the chart
`tiptap-diagram-input`	The Quick Input chart syntax is typed into
`tiptap-diagram-input-placeholder`	In the Quick Input, below a first line that names the type: the example rows of the `placeholder` option, until a row is typed
`tiptap-chart-resize-handle`	A handle that resizes the chart, with `resizable`; shown while the chart is selected

Data attributes

On a chart

On .tiptap-chart:

Attribute	Values
`data-tt-chart-type`	The chart's `spec.type`: `line`, `bar`, `radar`, `sankey` … or a type you registered
`data-tt-chart-renderer`	The id of the Renderer drawing it
`data-tt-chart-state`	`idle`, `empty`, `loading`, `ready`, `unavailable`, `error`
`data-tt-chart-source`	`none`, `linked`, `detached`
`data-tt-chart-readonly`	Present while the data is read-only
`data-tt-chart-legend`	`top`, `right`, `bottom`, `left`, `none`
`data-tt-chart-selected`	Present while the chart is selected
`data-tt-chart-zoom`	`fit`, or the zoom factor, such as `1.5` (`setZoom`)
`data-tt-chart-maximized`	Present while the chart is laid over the window (`setMaximized`)
`data-tt-chart-border`	Present while the spec has `border: true`
`data-tt-chart-hidden`	Present while only the table the chart follows is shown; the chart is not displayed
`data-tt-chart-panning`	Present while the zoomed picture is dragged (`setPan`)
`data-tt-chart-sized`	Present while the spec has a `size`
`data-tt-chart-align`	`left` or `right` for a sized chart that does not stand centered (`setDiagramAlign`)
`data-tt-chart-resizing`	Present while a handle is dragged

On a resize handle

Element	Attribute	Values
`.tiptap-chart-resize-handle`	`data-tt-chart-resize`	`left`, `right`, `bottom`, `bottom-left`, `bottom-right`

On the Quick Input

On .tiptap-diagram-input:

Attribute	Values
`data-tt-diagram-input-type`	The chart type the box becomes
`data-tt-chart-delimiter`	`comma`, `semicolon`, `pipe`, `tab`, `none`: the delimiter what was typed is split at, chosen with `setDiagramInputDelimiter` or detected
`data-tt-chart-placeholder`	While the box is empty: the text of the `placeholder` option, shown by `::before`

In the HTML output and on other Nodes

Attribute	Element
`data-tt-chart-spec`	The Chart Spec as JSON, on `figure[data-type="chart"]`
`data-tt-chart-link`	The Data Source as JSON, on `figure[data-type="chart"]`
`data-tt-chart-synced-at`	When the data was last taken from its Data Source, as an ISO time, on `figure[data-type="chart"]`
`data-tt-chart-renderer`	The chosen Renderer, on `figure[data-type="chart"]`
`data-tt-chart-delimiter`	The delimiter the data was typed with, on `figure[data-type="chart"]`
`data-tt-diagram-input`	On a table used as a chart's input
`data-tt-chart-table-id`	On a table a chart follows
`data-tt-chart-image-source`	On an image made from a chart with `keepData`
`data-tt-attribution`	On the `<a>` an exported SVG of a chart or a diagram carries when its Renderer asks for an attribution

Custom properties

Chart

Property	Default
`--tt-chart-padding`	`12px`
`--tt-chart-border`	`1px solid transparent`
`--tt-chart-radius`	`8px`
`--tt-chart-background`	`transparent`; a spec's `background` sets it on that chart
`--tt-chart-border-color`	`#d4d4d8`, the frame of a chart with `border: true`
`--tt-chart-border-width`	`1px`
`--tt-chart-caption-color`	`#71717a`
`--tt-chart-caption-size`	`0.875em`
`--tt-chart-caption-align`	`center`
`--tt-chart-text-input-border`	`1px solid #6a00f5`, around the field for a chart's text
`--tt-chart-text-input-background`	`Canvas`
`--tt-chart-attribution-color`	`#71717a`
`--tt-chart-attribution-size`	`0.75em`
`--tt-chart-aspect-ratio`	`16 / 9`; a chart with a `size` sets it to its `ratio`
`--tt-chart-max-height`	`480px`; not applied to a chart with a `size`
`--tt-chart-width`	Set on a chart with a `size`: its share of the column, such as `50%`
`--tt-chart-handle-color`	`#6a00f5`, the fill of a resize handle
`--tt-chart-handle-border`	`#ffffff`
`--tt-chart-handle-radius`	`4px`
`--tt-chart-selected-outline`	`2px solid #6a00f5`
`--tt-chart-loading-opacity`	`0.5`
`--tt-chart-error-color`	`#e5484d`
`--tt-chart-unavailable-color`	`#71717a`
`--tt-chart-maximized-inset`	`0`: the distance of a maximized chart from the edges of the window, as for `inset`
`--tt-chart-maximized-z-index`	`50`
`--tt-chart-maximized-background`	`--tt-chart-background`, or `Canvas` when that is unset

A maximized chart is position: fixed.
If an ancestor of the editor sets transform, filter or contain, a maximized chart is placed relative to that ancestor instead of the window.

Drawing

Read by every Renderer when a chart is drawn.

Property	Default
`--tt-chart-series-1` … `--tt-chart-series-8`	`#6a00f5`, `#00a3a3`, `#f59e0b`, `#e5484d`, `#3b82f6`, `#16a34a`, `#d946ef`, `#64748b`
`--tt-chart-axis-color`	`#9ca3af`
`--tt-chart-grid-color`	`#e5e7eb`
`--tt-chart-label-color`	`#4b5563`
`--tt-chart-title-color`	`#111827`
`--tt-chart-font-family`	`Arial, Helvetica, "Liberation Sans", sans-serif`
`--tt-chart-font-size`	`12px`
`--tt-chart-title-size`	`16px`
`--tt-chart-title-weight`	`600`
`--tt-chart-legend-gap`	`16px`
`--tt-chart-legend-marker-size`	`10px`

Sizes are pixels, written with or without px. Other units are not converted.
A palette in the Chart Spec overrides the series colors for that chart.

Fonts in exports and Word

An exported image can only use fonts installed on the machine that exports it.
A web font the page loaded is not available to an exported image.
A native Word chart names a single typeface: the first family of --tt-chart-font-family that Word ships with (WORD_FONTS), a generic family as its Word counterpart, or fallbackFont ('Arial').
wordFontFor(fontFamily) tells whether Word will draw a different face than the page.

Quick Input

Property	Default
`--tt-diagram-input-radius`	`8px`
`--tt-diagram-input-background`	`#f4f4f5`
`--tt-diagram-input-color`	`inherit`
`--tt-diagram-input-font-family`	`ui-monospace, monospace`
`--tt-diagram-input-delimiter-color`	`#6a00f5`
`--tt-diagram-input-placeholder-color`	`#a1a1aa`
`--tt-diagram-input-placeholder-lines`	Set on an empty box to the number of lines of its placeholder
`--tt-diagram-input-cell-background`	`#f4f4f5`

Highlighted source

In the Quick Input, in a Mermaid diagram's code view, and in any element with the class tiptap-diagram-source, such as a source editor of your own. The option sourceHighlighting turns it off.

Class	Part	Color property	Light default
`tiptap-diagram-source-keyword`	The diagram or chart type, statement words	`--tt-diagram-source-keyword`	`#1e40af`
`tiptap-diagram-source-label`	Labels in shapes, quotes and the first column	`--tt-diagram-source-label`	`#3f6212`
`tiptap-diagram-source-number`	Numbers	`--tt-diagram-source-number`	`#7c2d12`
`tiptap-diagram-source-operator`	Arrows, delimiters, brackets, colons	`--tt-diagram-source-operator`	`#52525b`
`tiptap-diagram-source-comment`	Comments (`%%`)	`--tt-diagram-source-comment`	`#4b4b53`

The dark value of each is derived as for every default color, and each is at 4.5:1 or more against the input background in both schemes.
To make one part colorless, set its property to inherit.

Diagrams

A diagram (the flowDiagram Node, see Diagrams) follows the same pattern with its own names.

Diagram classes

Class	Element
`tiptap-flow-diagram`	The root of a diagram in the editor, with `role="figure"` and an `aria-label` from the description or the title
`tiptap-flow-diagram-viewport`	Around the canvas; scrolls while the diagram is zoomed in
`tiptap-flow-diagram-zoom-box`	Between viewport and canvas; takes the room of the zoomed picture
`tiptap-flow-diagram-canvas`	Holds the drawn diagram as an `<img>`
`tiptap-flow-diagram-code`	The source text, shown instead of the picture while the view is `code`
`tiptap-flow-diagram-caption`	Below the diagram: the title
`tiptap-flow-diagram-attribution`	Below the picture: the link the Diagram Renderer's rules ask for, `hidden` while there is none
`tiptap-flow-diagram-error`	The message shown when drawing failed
`tiptap-flow-diagram-unavailable`	What `unavailable` returns, shown when no Renderer here draws the diagram
`tiptap-flow-diagram-resize-handle`	A handle that resizes the diagram, with `resizable`; shown while the diagram is selected
`tiptap-flow-diagram-label-input`	The field a double click opens over a shape of a Mermaid flowchart, for its text

Diagram data attributes

On .tiptap-flow-diagram:

Attribute	Values
`data-tt-flow-diagram-format`	`mermaid`
`data-tt-flow-diagram-kind`	A Mermaid kind such as `flowchart`, or `unknown`
`data-tt-flow-diagram-view`	`diagram` or `code`
`data-tt-flow-diagram-state`	`idle` (the code view), `empty`, `loading`, `ready`, `unavailable`, `error`
`data-tt-flow-diagram-renderer`	The id of the Diagram Renderer drawing it
`data-tt-flow-diagram-selected`	Present while the diagram is selected
`data-tt-flow-diagram-zoom`	`fit`, or the zoom factor, such as `1.5` (`setZoom`)
`data-tt-flow-diagram-maximized`	Present while the diagram is laid over the window (`setMaximized`)
`data-tt-flow-diagram-panning`	Present while the zoomed picture is dragged (`setPan`)
`data-tt-flow-diagram-sized`	Present while the diagram has a `size`
`data-tt-flow-diagram-align`	`left` or `right` for a sized diagram that does not stand centered (`setDiagramAlign`)
`data-tt-flow-diagram-resizing`	Present while a handle is dragged

On .tiptap-flow-diagram-resize-handle:

Attribute	Values
`data-tt-flow-diagram-resize`	`left`, `right`, `bottom`, `bottom-left`, `bottom-right`

In HTML, on figure[data-type="flow-diagram"]:

Attribute	Value
`data-tt-flow-diagram-format`	The format
`data-tt-flow-diagram-description`	The description
`data-tt-flow-diagram-view`	`code`, while the source is shown
`data-tt-flow-diagram-options`	The `options` as JSON

Diagram custom properties

Property	Default
`--tt-flow-diagram-padding`	`12px`
`--tt-flow-diagram-border`	`1px solid transparent`
`--tt-flow-diagram-radius`	`8px`
`--tt-flow-diagram-max-height`	`640px`, the tallest a diagram is drawn at its width; not applied to a diagram with a `size`
`--tt-flow-diagram-width`	Set on a diagram with a `size`: its share of the column
`--tt-flow-diagram-aspect-ratio`	Set on a diagram with a `size`: its `ratio`. The picture fits into that shape
`--tt-flow-diagram-handle-color`	`#6a00f5`, the fill of a resize handle
`--tt-flow-diagram-handle-border`	`#ffffff`
`--tt-flow-diagram-handle-radius`	`4px`
`--tt-flow-diagram-code-radius`	`8px`
`--tt-flow-diagram-code-background`	`#f4f4f5`
`--tt-flow-diagram-code-color`	`inherit`
`--tt-flow-diagram-code-font-family`	`ui-monospace, monospace`
`--tt-flow-diagram-empty-text`	`"Empty diagram"`, a CSS string shown while the source is empty
`--tt-flow-diagram-caption-color`	`#71717a`
`--tt-flow-diagram-caption-size`	`0.875em`
`--tt-flow-diagram-caption-align`	`center`
`--tt-flow-diagram-attribution-color`	`#71717a`
`--tt-flow-diagram-attribution-size`	`0.75em`
`--tt-flow-diagram-loading-opacity`	`0.5`
`--tt-flow-diagram-error-color`	`#e5484d`
`--tt-flow-diagram-unavailable-color`	`#71717a`
`--tt-flow-diagram-selected-outline`	`2px solid #6a00f5`
`--tt-flow-diagram-label-input-border`	`1px solid #6a00f5`, around the field for a shape's text
`--tt-flow-diagram-label-input-background`	`Canvas`

A maximized diagram uses --tt-chart-maximized-inset, --tt-chart-maximized-z-index and --tt-chart-maximized-background, so charts and diagrams leave the same room.

Diagram drawing

Read by the Diagram Renderer when a diagram is drawn, and by an export.

Property	Default
`--tt-flow-diagram-background`	`transparent`
`--tt-flow-diagram-node-color`	`#f4eeff`, the fill of a node
`--tt-flow-diagram-node-border-color`	`#6a00f5`
`--tt-flow-diagram-text-color`	`#18181b`
`--tt-flow-diagram-line-color`	`#52525b`, edges and arrows
`--tt-flow-diagram-group-color`	`#fafafa`, the fill of a subgraph or lane
`--tt-flow-diagram-note-color`	`#fff8db`
`--tt-flow-diagram-font-family`	`Arial, Helvetica, "Liberation Sans", sans-serif`
`--tt-flow-diagram-font-size`	`14px`; pixels only

PreviouslyStorage