tessl/npm-tiptap--extension-text-style
Text styling extension for TipTap rich text editor providing color, background, font family, font size, and line height capabilities.
—
text-style.mddocs/
Text Style Mark
The TextStyle mark is the foundational mark for all text styling operations in TipTap. It creates HTML span elements and provides the base functionality that other styling extensions build upon.
Capabilities
TextStyle Mark
Core ProseMirror mark that handles text styling through HTML span elements with advanced nested style parsing.
/**
* Core text style mark for HTML span element handling
* Priority: 101 (high priority to ensure proper layering)
*/
const TextStyle: Mark<TextStyleOptions>;
interface TextStyleOptions {
/** HTML attributes to add to the span element */
HTMLAttributes: Record<string, any>;
/**
* When enabled, merges styles of nested spans into child span during HTML parsing
* Prioritizes the style of the child span, used when parsing content from other editors
*/
mergeNestedSpanStyles: boolean;
}Usage Example:
import { Editor } from "@tiptap/core";
import { TextStyle } from "@tiptap/extension-text-style/text-style";
const editor = new Editor({
extensions: [
TextStyle.configure({
HTMLAttributes: {
class: "custom-text-style"
},
mergeNestedSpanStyles: true
})
]
});Toggle Text Style Command
Apply or remove text styling attributes on the current selection.
/**
* Toggle text style attributes on the current selection
* @param attributes - Text style attributes to apply or toggle off
* @returns Command result indicating success/failure
*/
toggleTextStyle(attributes?: TextStyleAttributes): Command;Usage Example:
// Apply multiple attributes at once
editor.commands.toggleTextStyle({
color: "#ff0000",
fontSize: "18px",
fontFamily: "Arial"
});
// Toggle off all styling
editor.commands.toggleTextStyle();Remove Empty Text Style Command
Clean up empty text style marks that have no meaningful attributes.
/**
* Remove spans without inline style attributes
* Traverses selection and removes textStyle marks with no attribute values
* @returns Command result indicating success/failure
*/
removeEmptyTextStyle(): Command;Usage Example:
// Clean up empty styling after removing attributes
editor.chain()
.setMark("textStyle", { color: null })
.removeEmptyTextStyle()
.run();HTML Processing
Parsing Behavior
The TextStyle mark includes sophisticated HTML parsing logic:
- Span Detection: Only processes
<span>elements that have astyleattribute - Nested Span Merging: When
mergeNestedSpanStylesis enabled, combines parent and child span styles with child taking priority - Style Priority: Child span styles override parent span styles during parsing
- Non-consuming: Allows other marks to also process the same span element
Rendering Behavior
- Output Format: Renders as
<span>elements with merged HTML attributes - Attribute Merging: Combines extension HTMLAttributes with dynamic attributes
- Clean Output: Only renders spans when meaningful style attributes are present
Integration Notes
Extension Dependencies
Most styling extensions depend on TextStyle:
// Styling extensions import TextStyle
import '../text-style/index.js'Command System Integration
TextStyle integrates with TipTap's command system through module augmentation:
declare module '@tiptap/core' {
interface Commands<ReturnType> {
textStyle: {
removeEmptyTextStyle: () => ReturnType;
toggleTextStyle: (attributes?: TextStyleAttributes) => ReturnType;
}
}
}Type System Integration
Extends the TextStyleAttributes interface for use by other extensions:
import type { TextStyleAttributes } from '../index.js';Install with Tessl CLI
npx tessl i tessl/npm-tiptap--extension-text-style