umbraco-tiptap-statusbar-extension

Create custom Tiptap statusbar extensions for the Umbraco rich text editor.

4|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-tiptap-statusbar-extension-albanist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-tiptap-statusbar-extension
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/rich-text/umbraco-tiptap-statusbar-extension
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-tiptap-statusbar-extension-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of custom status bar components for the Umbraco Rich Text Editor (Tiptap), providing users with real-time information and enhanced editor feedback.

Core Features & Use Cases

  • Custom Statusbar Elements: Develop and integrate unique elements like word count, character count, or element path navigation into the RTE status bar.
  • Real-time Feedback: Display dynamic information based on the current editor state and user selection.
  • Use Case: Add a word count and character count display to the bottom of the Rich Text Editor to help content creators adhere to length constraints.

Quick Start

Use the umbraco-tiptap-statusbar-extension skill to create a word count statusbar element for the Umbraco rich text editor.

Frequently Asked Questions about umbraco-tiptap-statusbar-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom status bar to the Umbraco rich text editor?

To add a custom status bar to the Umbraco rich text editor, implement a Tiptap statusbar extension. This integrates custom elements like word count, character count, and element path navigation into the RTE status bar using the Tiptap editor context API.

Can I display real-time word and character counts in the Umbraco Tiptap editor?

Yes, you can display real-time word and character counts in the Umbraco Tiptap editor by developing a custom statusbar extension. It tracks the current editor state and selection to provide dynamic feedback for content length constraints.

What is needed to integrate Tiptap statusbar extensions with Umbraco?

Integrating Tiptap statusbar extensions requires registering the custom component with Umbraco's extension registry. You also need to utilize the Tiptap editor context API to access real-time editor state for dynamic information display.

Does the Umbraco rich text editor support element path navigation in the status bar?

Yes, the Umbraco rich text editor supports element path navigation within the status bar. You can build custom Tiptap extensions to display the DOM element path, helping content creators understand their current selection hierarchy.

How do I show dynamic information based on user selection in the Umbraco RTE?

To show dynamic information based on user selection in the Umbraco RTE, create a custom Tiptap statusbar extension. It hooks into the editor context API to update the status bar with real-time feedback as the user navigates the document.