How does this skill access the editor's content?

The skill uses the UMB_TIPTAP_RTE_CONTEXT to consume the Tiptap editor instance, allowing it to listen for events like 'update' and 'selectionUpdate'.

What is a Tiptap Statusbar Extension in Umbraco?

It is a visual or informational component added to the bottom of the Umbraco Rich Text Editor (RTE) to display details like word counts, element paths, or cursor positions.

Can I use this to add buttons to the editor?

Status bar extensions are primarily for visual and informational elements. For adding interactive buttons to the top of the editor, you should use the Tiptap Toolbar Extension skill instead.

Is the status bar updated in real-time?

Yes, the provided implementation patterns include event listeners that trigger UI updates as the editor types or moves their cursor.

What technology is used to build these extensions?

These extensions are built using Lit elements and TypeScript, following the standard Umbraco Backoffice extension pattern.

Umbraco Tiptap Statusbar Extension

Name: Umbraco Tiptap Statusbar Extension
Author: umbraco

byumbraco

•

Content Management

Implements custom status bar components for the Umbraco Tiptap Rich Text Editor to display metadata and editor states.

This skill enables developers to enhance the Umbraco Backoffice experience by adding functional status bar extensions to the Tiptap-based Rich Text Editor. It provides a standardized workflow for creating Lit-based elements that display real-time information such as word counts, character counts, element paths (breadcrumbs), and cursor positions. By leveraging the Umbraco Context API and Tiptap event listeners, this skill ensures that developers can build highly responsive and informative UI components that improve editor productivity and content accuracy within the Umbraco CMS environment.

Key Features

01Seamless integration with UMB_TIPTAP_RTE_CONTEXT and Lit elements

021 GitHub stars

03Automatic manifest generation for Tiptap status bar extensions

04Cursor position tracking for precise content editing

05Real-time word and character count implementations

06Breadcrumb navigation (Element Path) for nested HTML structures

Use Cases

01Displaying technical metadata and cursor positions for advanced content troubleshooting

02Adding a word count indicator to help editors meet editorial length requirements

03Providing breadcrumb navigation for selecting nested HTML elements like tables or divs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-tiptap-statusbar-extension

For use in Claude.ai and ChatGPT

Download Skill

Key Features

01Seamless integration with UMB_TIPTAP_RTE_CONTEXT and Lit elements

021 GitHub stars

03Automatic manifest generation for Tiptap status bar extensions

04Cursor position tracking for precise content editing

05Real-time word and character count implementations

06Breadcrumb navigation (Element Path) for nested HTML structures

Use Cases

01Displaying technical metadata and cursor positions for advanced content troubleshooting

02Adding a word count indicator to help editors meet editorial length requirements

03Providing breadcrumb navigation for selecting nested HTML elements like tables or divs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-tiptap-statusbar-extension

For use in Claude.ai and ChatGPT

Download Skill