Umbraco.Community.TiptapLoremIpsum 0.1.1

Umbraco.Community.TiptapLoremIpsum

A Tiptap toolbar extension for the Umbraco v14+ Rich Text Editor that inserts Lorem Ipsum filler content with one click. Perfect for content authors prototyping layouts and for QA/testing teams generating large amounts of placeholder content fast.

🪶 Tiny, zero-runtime-dependency, MIT licensed. 🧪 Open-source MIT — use it commercially, fork it, extend it.

Features

• ✅ One-click toolbar button drops 3 paragraphs of Lorem Ipsum at the cursor
• ✅ Shift+click for bulk (15 paragraphs in one go — great for filling out long pages)
• ✅ Alt+click opens a prompt to enter any custom paragraph count (1–100)
• ✅ Classic opener — first paragraph starts with Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• ✅ Realistic variation — random sentence length, sprinkled commas, paragraph-by-paragraph variation
• ✅ Reusable generator — generateLoremIpsumHtml() / generateLoremIpsumParagraphs() exported for programmatic use (seed scripts, content imports, tests)

Compatibility

Built and tested against Umbraco 17.x. Should work on any Umbraco version that ships the Tiptap-based RTE.

Installation

Option 1: NuGet (recommended)

dotnet add package Umbraco.Community.TiptapLoremIpsum

Or in your .csproj:

<PackageReference Include="Umbraco.Community.TiptapLoremIpsum" Version="0.1.1" />

Option 2: Umbraco Marketplace

Coming soon — the package will be listed on the Umbraco Marketplace.

Enable the toolbar button

1. Restart your site (so the new App_Plugins content is picked up)
2. Open the Settings section in the Umbraco backoffice
3. Navigate to Data Types → open a Rich Text editor data type (e.g. Richtext editor)
4. Scroll to Toolbar and click the + to add a button
5. Find "Insert Lorem Ipsum" and add it to the toolbar
6. Save the data type — the button now appears on every property using this RTE

Usage

In any content node with the configured RTE:

The first paragraph always starts with the classic Lorem ipsum dolor sit amet, consectetur adipiscing elit. so it reads as familiar Lorem Ipsum.

Programmatic API

If you import the package's JS module in your own backoffice extensions, the generator functions are exposed:

import {
    generateLoremIpsumHtml,
    generateLoremIpsumParagraphs,
    type LoremIpsumOptions,
} from "@umbraco-community/tiptap-lorem-ipsum";

const html = generateLoremIpsumHtml({
    paragraphs: 5,
    minSentencesPerParagraph: 4,
    maxSentencesPerParagraph: 8,
    minWordsPerSentence: 6,
    maxWordsPerSentence: 16,
    startWithLoremIpsum: true,
});

Both functions are pure (no DOM, no Umbraco dependencies), so they work in unit tests, build scripts, and seed-data tools too.

Development

This repo follows the same conventions as the official Umbraco package guide: Creating a package.

Prerequisites

• .NET 10 SDK
• Node.js 22+
• An Umbraco v14+ site for local testing (recommended: a throwaway dotnet new umbraco site)

Build

# Build the frontend (Vite)
cd src/Umbraco.Community.TiptapLoremIpsum/Client
npm install
npm run build

# Pack the NuGet
cd ../../../
dotnet pack src/Umbraco.Community.TiptapLoremIpsum -c Release -o ./artifacts

The bundled output lands in src/Umbraco.Community.TiptapLoremIpsum/wwwroot/App_Plugins/UmbracoCommunity.TiptapLoremIpsum/umb-tiptap-lorem-ipsum.js and gets packed into the .nupkg as a static web asset.

Watch (during development)

cd src/Umbraco.Community.TiptapLoremIpsum/Client
npm run watch

Then symlink or copy the wwwroot/App_Plugins/UmbracoCommunity.TiptapLoremIpsum folder into your test Umbraco site's App_Plugins/ and refresh the backoffice. Or dotnet add package the local .nupkg.

Test the extension manually

1. Run npm run build in Client/
2. Copy wwwroot/App_Plugins/UmbracoCommunity.TiptapLoremIpsum into your test Umbraco site's App_Plugins/
3. Restart the site
4. Configure the toolbar (see Enable the toolbar button above)
5. Edit a content node, click the button, confirm Lorem Ipsum appears in the RTE

Contributing

PRs welcome! See CLAUDE.md for a developer-friendly guide to the codebase — it doubles as instructions for Claude Code or any other AI coding assistant working in this repo.

Quick contribution ideas:

• 🌍 Other filler text styles (cat ipsum, hipster ipsum, bacon ipsum…)
• 🔌 A proper Umbraco modal instead of window.prompt() for the Alt+click flow
• 🎨 Custom toolbar element with a dropdown menu (1p / 3p / 5p / custom)
• ✏️ Config-driven defaults (read paragraph count from the Tiptap config in the data type)
• 🧪 Vitest unit tests for the generator
• 📦 Umbraco Marketplace listing once stable

License

MIT © 2026 Marco Teodoro and Double Shore.

You're free to use this in commercial and non-commercial projects. Attribution is appreciated but not required.

Credits

Built with ❤️ for the Umbraco community. Inspired by classic Lorem Ipsum generators and the need to fill RTE fields with realistic content for migration testing, QA, and prototyping.