skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-tiptap-statusbar-extension

Adds a configurable status bar to Umbraco's Tiptap editor.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of adding useful, real-time editor state feedback to Umbraco’s Tiptap-based rich text editor without relying only on toolbars or external UI.

Core Features & Use Cases

  • Implement statusbar extensions: Create Tiptap statusbar components that render informational UI in the editor’s bottom bar.
  • Drive UI from editor events: Update statusbar content in response to events like content updates and selection changes.
  • Ship multiple status items: Build separate components for word/character counts, cursor position, and element path (breadcrumb-style navigation).

Quick Start

Use the WebFetch step to pull the latest Umbraco extension and rich text editor documentation, then implement a Tiptap statusbar extension manifest that mounts your statusbar element and subscribes to the needed editor context events.

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 word count status bar to the Umbraco Tiptap rich text editor?▼

You can display real-time editor state in the Tiptap rich text editor by registering a statusbar extension via the extension-registry that mounts Lit elements consuming the UMB_TIPTAP_RTE_CONTEXT for live updates.

How do I display real-time cursor position in the Umbraco Tiptap RTE?▼

You display real-time cursor position in the Tiptap RTE by building a statusbar extension that tracks selection changes through the editor context API and renders the coordinates in a Lit element at the bottom of the editor.

Can I show an element path breadcrumb in the Umbraco Tiptap editor?▼

Yes, you can show an element path breadcrumb in the Umbraco Tiptap editor by developing a custom statusbar component that consumes context events to render the current DOM hierarchy within the bottom bar.

What is needed to register a custom statusbar extension in Umbraco's backoffice?▼

Registering a custom statusbar extension in Umbraco's backoffice requires using the @umbraco-cms/backoffice/extension-registry to declare a manifest that mounts your Lit element to the Tiptap editor interface.

Does the Umbraco Tiptap statusbar extension require external dependencies?▼

The Umbraco Tiptap statusbar extension relies on the backoffice extension-registry and Lit for rendering, but requires no external dependencies outside the existing Umbraco CMS environment to function.

Related Skills

Explore More Software Engineering Skills→
albanistrefialbanistrefi
4

umbraco-entry-point

Generate Umbraco backoffice entry point manifests and TypeScript code from official docs.

Community
Intermediate
1k-off1k-off
1

umbraco-tiptap-statusbar-extension

Create Lit-based Tiptap status bar extensions for the Umbraco Rich Text Editor.

Community
Intermediate
umbracoumbraco
26

umbraco-tiptap-toolbar-extension

Create toolbar extensions for the Umbraco rich text editor using Tiptap APIs.

Official
Intermediate
1k-off1k-off
1

umbraco-tiptap-extension

Creates and registers Tiptap extensions for Umbraco's Rich Text Editor.

Community
Intermediate