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

umbraco-tiptap-toolbar-extension

Add custom Tiptap toolbar extensions to the Umbraco rich text editor.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you add custom buttons and menus to Umbraco’s Rich Text Editor toolbar so editors can apply formatting and actions without manual steps.

Core Features & Use Cases

  • Toolbar extension types: Implement button, colorPickerButton, menu, and styleMenu variants with clear UX behavior.
  • Editor action execution: Define an execute method that runs Tiptap chain commands (e.g., toggle formatting, set paragraph/heading, apply link updates).
  • State-aware controls: Customize isActive and isDisabled so controls reflect the current selection and prevent invalid actions.
  • Modal integration (optional): Open modals from toolbar actions and update editor content based on submitted results.

Quick Start

Ask an AI agent to implement a menu toolbar extension for Umbraco Tiptap that toggles headings (including paragraph), provides active-state detection per heading level, and uses the correct UmbTiptap toolbar API base class.

Frequently Asked Questions about umbraco-tiptap-toolbar-extension

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

FAQPage Schema
How do I add custom toolbar buttons to the Umbraco Tiptap rich text editor?▼

To add custom toolbar buttons to the Umbraco Tiptap rich text editor, define a manifest and corresponding toolbar API class that implements an execute method for Tiptap chain commands.

What types of custom toolbar extensions can I build for Umbraco's rich text editor?▼

You can build button, colorPickerButton, menu, and styleMenu extensions for Umbraco's rich text editor, enabling formatting controls, dropdown menus, style/class selectors, and optional modal-driven actions.

How do I manage active and disabled states for Tiptap toolbar controls in Umbraco?▼

Manage active and disabled states for Tiptap toolbar controls by implementing the isActive and isDisabled methods, which reflect the current editor selection and prevent invalid formatting actions.

Can I open a modal from a Tiptap toolbar action to update editor content in Umbraco?▼

Yes, you can open modals from Tiptap toolbar actions in Umbraco to collect user input and update the rich text editor content based on the submitted results.

Does building a Tiptap toolbar extension for Umbraco require manifest API configuration?▼

Yes, building a Tiptap toolbar extension requires manifest API configuration using YAML frontmatter discovery fields to define the extension and its corresponding toolbar API base class.

Related Skills

Explore More Software Engineering Skills→
albanistrefialbanistrefi
4

umbraco-package-view

Generates Umbraco package view manifests and foundation-compliant UI elements for modal/panel display.

Community
Intermediate
1k-off1k-off
1

umbraco-tiptap-toolbar-extension

Implement Tiptap toolbar extensions with custom controls in Umbraco's rich text editor.

Community
Intermediate
1k-off1k-off
1

umbraco-tiptap-extension

Creates and registers Tiptap extensions for Umbraco's 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