umbraco-monaco-markdown-editor-action

Implement custom toolbar buttons and keyboard shortcuts for the Umbraco Monaco Markdown editor.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-monaco-markdown-editor-action
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-monaco-markdown-editor-action
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-monaco-markdown-editor-action
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-monaco-markdown-editor-action

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enhances the Umbraco backoffice Markdown editor by allowing the addition of custom toolbar buttons and keyboard shortcuts, streamlining content creation and editing workflows.

Core Features & Use Cases

  • Custom Toolbar Buttons: Add new buttons to the Markdown editor's toolbar for specific actions.
  • Keyboard Shortcuts: Define custom keyboard shortcuts to trigger actions within the editor.
  • Use Case: Integrate a button that, when clicked, inserts a predefined code snippet or opens a modal for inserting complex markdown elements like tables or custom embeds.

Quick Start

Use the umbraco-monaco-markdown-editor-action skill to add a new button to the Umbraco Markdown editor that inserts bolded text.

Frequently Asked Questions about umbraco-monaco-markdown-editor-action

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

FAQPage Schema
How do I add custom toolbar buttons to the Umbraco Markdown editor?

Add custom toolbar buttons to the Umbraco Markdown editor by defining TypeScript manifests and action classes that implement specific behaviors for the Monaco editor. This allows you to integrate custom actions directly into the backoffice interface.

Can I define custom keyboard shortcuts for the Monaco Markdown editor in Umbraco?

Yes, you can define custom keyboard shortcuts to trigger actions within the Umbraco Monaco Markdown editor. You configure these shortcuts by creating TypeScript action classes that map key combinations to your custom editing behaviors.

What is the best way to insert complex markdown elements like tables in Umbraco?

The best way to insert complex markdown elements like tables is to create a custom toolbar button that opens a modal dialog. This approach integrates with Umbraco's localization services to streamline inserting custom embeds or predefined code snippets.

Does extending the Umbraco Markdown editor require TypeScript?

Yes, extending the Umbraco Markdown editor requires TypeScript. You must define TypeScript manifests and action classes to implement custom behaviors, integrate with modal dialogs, and configure keyboard shortcuts for the backoffice editor.

Why use a custom action class for the Umbraco Markdown editor instead of default options?

A custom action class allows you to extend editing functionality beyond default options by integrating with Umbraco's modal dialogs and localization services. This enables specialized workflows like inserting predefined code snippets directly from the toolbar.