Umbraco.Community.TipTap.MarkdownImport 17.0.1

Umbraco.Community.TipTap.MarkdownImport

Umbraco.Community.TipTap.MarkdownImport adds a Paste Markdown action to Umbraco's TipTap Rich Text Editor. Editors can paste Markdown into a modal and import it directly into an Umbraco rich text field as HTML content.

The package is designed as a self-contained Razor Class Library. Once installed, the backoffice assets are served through static web assets. No App_Plugins files need to live in the host website project.

Features

• Adds a Paste Markdown toolbar action to Umbraco TipTap rich text editors
• Imports Markdown into existing rich text fields without replacing Umbraco's built-in editor
• Ships with its own backoffice bundle, modal UI, and custom toolbar icon
• Uses static web assets, so the host site only needs a package reference

How It Works

1. An editor clicks Paste Markdown in the TipTap toolbar.
2. A modal opens with a textarea.
3. The pasted Markdown is converted to HTML.
4. The generated HTML is inserted into the active rich text editor.

The package deliberately converts Markdown to HTML before insertion. That avoids bundling a second ProseMirror model layer into the Umbraco backoffice and keeps the import stable inside Umbraco's TipTap editor.

Dependencies

Runtime

• Umbraco CMS 17.2+
• .NET 10.0

Development

• Node.js and npm
• Vite
• TypeScript

Node is only required when developing or rebuilding the package locally. A consumer installing the published NuGet package should not need to build frontend assets.

Installation

Install the package into your Umbraco site:

dotnet add package Umbraco.Community.TipTap.MarkdownImport

The package targets Umbraco CMS 17 and is versioned accordingly.

Build and run the site. The package exposes its backoffice files under:

/App_Plugins/Umbraco.Community.TipTap.MarkdownImport/

Notes and Limitations

• The package imports Markdown into Rich Text as HTML. It is not a round-trip Markdown storage format.
• Toolbar availability depends on the Rich Text Editor data type including the package extension and toolbar aliases.
• If the backoffice shows stale assets after an update, refresh the browser tab once.
• This package should be reviewed and tested in your own environment before production use.

Contributions

You're more than welcome to fork and do a pull request. Just drop me a message first and discuss before you devote your time into your idea.

Issues

Please report them on the issues tab of this repository.

Local Development

From the package project:

cd src/Umbraco.Community.TipTap.MarkdownImport/Client
npm install
npm run build

The generated files are emitted into the package project's wwwroot folder. Because the project is a Razor Class Library with a static web asset base path, those files are then served to the host Umbraco site from the package path.

Important Notice

This package was generated with AI assistance as a solution for a personal project and is being shared in good faith for the Umbraco community.

It is provided as is, without warranty or guarantee of any kind, express or implied. By using this package, you accept that Andy Boot is not liable for any loss, damage, or disruption resulting from its installation, use, misuse, or incompatibility.