What is an Umbraco Tiptap Toolbar Extension?

It is a customization that adds interactive elements like buttons or dropdowns to the Umbraco Rich Text Editor (RTE) toolbar, allowing editors to apply specific formatting or trigger custom actions.

How does it handle the 'active' state of a button?

The skill generates API classes that override the isActive() method, which queries the Tiptap editor instance to determine if the specific formatting is currently applied to the selection.

Can I open an Umbraco modal from a toolbar button?

Yes, this skill provides implementation patterns for using the Umbraco Modal Manager (UMB_MODAL_MANAGER_CONTEXT) to open dialogs when a toolbar button is clicked.

Which toolbar types are supported by this skill?

The skill supports four primary kinds: 'button' for simple toggles, 'menu' for dropdowns, 'styleMenu' for CSS class selection, and 'colorPickerButton' for color selection.

Does it follow official Umbraco documentation?

Yes, the skill is configured to fetch the latest documentation from Umbraco's official sites to ensure the generated code matches current Backoffice standards.

Umbraco Tiptap Toolbar Extensions

Name: Umbraco Tiptap Toolbar Extensions
Author: umbraco

byumbraco

•

콘텐츠 관리

Simplifies the creation of custom buttons, menus, and controls for the Umbraco Rich Text Editor toolbar using Tiptap.

This skill streamlines the development of Umbraco Backoffice extensions by providing standardized patterns for Tiptap toolbar controls. It automates the generation of manifest files and API classes for various extension types including simple buttons, dropdown menus, color pickers, and style selectors. By integrating with official Umbraco documentation and Tiptap standards, it ensures developers can quickly implement complex rich text functionality with correctly managed active states, disabled states, and seamless modal integrations.

주요 기능

01Generates manifests for multiple toolbar kinds including buttons, menus, and color pickers

02Provides domain-specific guidance for linking toolbar controls to specific Tiptap extensions

031 GitHub stars

04Automates Tiptap API class creation with execute, isActive, and isDisabled logic

05Ensures compliance with the latest Umbraco Backoffice extension registry standards

06Supports complex workflows like opening Umbraco modals from toolbar buttons

사용 사례

01Creating dropdown menus for predefined CSS styles or custom paragraph formats

02Adding custom formatting buttons like 'Highlight' or 'Callout' to the Umbraco rich text editor

03Implementing specialized link or media pickers that trigger custom Umbraco modal dialogs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

주요 기능

01Generates manifests for multiple toolbar kinds including buttons, menus, and color pickers

02Provides domain-specific guidance for linking toolbar controls to specific Tiptap extensions

031 GitHub stars

04Automates Tiptap API class creation with execute, isActive, and isDisabled logic

05Ensures compliance with the latest Umbraco Backoffice extension registry standards

06Supports complex workflows like opening Umbraco modals from toolbar buttons

사용 사례

01Creating dropdown menus for predefined CSS styles or custom paragraph formats

02Adding custom formatting buttons like 'Highlight' or 'Callout' to the Umbraco rich text editor

03Implementing specialized link or media pickers that trigger custom Umbraco modal dialogs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT