Tiptap RTE: Add clipboard copy/paste support for RTE blocks by leekelleher · Pull Request #21604 · umbraco/Umbraco-CMS

leekelleher · 2026-02-02T17:34:56Z

Prerequisites

I have added steps to test this contribution in the description below

Description

This PR adds clipboard copy/paste support for blocks within the Tiptap Rich Text Editor (RTE). Users can now copy blocks from Block List, Block Grid, or other Block RTEs and paste them into an RTE.

This is a partial fix towards #21345.

Key Changes

New Clipboard Translators (src/packages/tiptap/clipboard/)

block-rte-to-block-copy-translator.ts - Copies RTE blocks to clipboard format
block-to-block-rte-paste-translator.ts - Translates clipboard blocks to RTE format

Block RTE Entry (block-rte-entry.element.ts)

Added "Copy to clipboard" action button on RTE blocks

Block RTE Entries Context (block-rte-entries.context.ts)

Added clipboard filtering to show only compatible blocks in paste picker
Implemented #insertFromRtePropertyValues for handling pasted blocks
Added compatibility check using isCompatibleValue from paste translator

Property Value Cloner (property-value-cloner-block-rte.cloner.ts)

Optimized cloning with fast path when markup is empty (common for pasted blocks)
Fixed handling of the UmbPropertyEditorRteValueType structure

Tiptap Block API (block.tiptap-api.ts)

Added 20ms debounce on contents observable to prevent race condition when pasting multiple blocks rapidly

How to Test

Create a Document Type with:
- A Block List property with some block types (e.g., "Heading", "Quote")
- An RTE property configured with the same block types
Create content using this Document Type
Test copy from Block List to RTE:
- Add blocks to the Block List
- Click the "Copy to clipboard" action on a block
- In the RTE, click the block insert button
- Switch to "Clipboard" tab
- Verify the copied block appears and can be pasted
Test copy from RTE to RTE:
- Add a block to the RTE
- Hover over the block and click "Copy to clipboard"
- Paste into another RTE (or the same one)
Test multiple blocks:
- Copy multiple blocks to clipboard
- Select multiple in the clipboard picker
- Verify all blocks are inserted without duplicates
Test compatibility filtering:
- Configure RTE with only specific block types
- Copy a block of a different type
- Verify it does NOT appear in the clipboard picker (filtered out)

🤖 Generated with Claude Code

in other Block editor components.

If not, don't show the action button.

we can't make this generic for all RTEs, since it is bound to the property-editor UI alias.

for Tiptap RTE Blocks.

Change paste translator to output UmbPropertyEditorRteValueType (with markup and blocks) instead of UmbBlockRteValueModel (flat structure). This ensures the cloner receives the correct type and can properly regenerate content keys. Also optimize the cloner to skip DOM parsing when markup is empty, which is always the case for clipboard paste operations. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Add debounceTime to the contents observable to batch rapid emissions when pasting multiple blocks from clipboard. This prevents the #updateBlocks method from being called multiple times in quick succession. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

This PR adds clipboard copy/paste support for blocks in the TipTap Rich Text Editor (RTE). Users can now copy blocks from Block List, Block Grid, or other Block RTEs and paste them into an RTE, with automatic compatibility filtering based on configured block types.

Changes:

Adds new clipboard translators to convert between RTE block format and standard block clipboard format
Implements "Copy to clipboard" button on RTE blocks with full context information (workspace name, property label, block label)
Adds clipboard filtering in the block catalogue modal to show only compatible blocks based on configured block types
Optimizes property value cloner with a fast path for empty markup (common when pasting blocks)
Adds 20ms debounce on TipTap contents observable to prevent race conditions during rapid multi-block pasting

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
`src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap-rte/constants.ts`	Adds constant for property editor UI alias to enable reuse across clipboard and manifest files
`src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap-rte/manifests.ts`	Refactors to use constant instead of hardcoded alias string
`src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/constants.ts`	Exports the new RTE constants
`src/Umbraco.Web.UI.Client/src/packages/tiptap/manifests.ts`	Registers clipboard manifests with the extension system
`src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/block/block.tiptap-api.ts`	Adds debounce to contents observable and refines null handling
`src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/manifests.ts`	Defines clipboard property context and registers copy/paste translators
`src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/block/paste/manifest.ts`	Manifest for paste translator from clipboard blocks to RTE format
`src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/block/paste/block-to-block-rte-paste-translator.ts`	Translates clipboard block entries to RTE property value format with compatibility checking
`src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/block/copy/manifest.ts`	Manifest for copy translator from RTE format to clipboard blocks
`src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/block/copy/block-rte-to-block-copy-translator.ts`	Translates RTE blocks to clipboard format, removing RTE-specific properties
`src/Umbraco.Web.UI.Client/src/packages/block/block-single/components/block-single-entry/block-single-entry.element.ts`	Uses localized label for copy button
`src/Umbraco.Web.UI.Client/src/packages/block/block-rte/property-value-cloner/property-value-cloner-block-rte.cloner.ts`	Optimizes cloning with fast path for empty markup and fixes value structure handling
`src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts`	Implements clipboard filtering, paste handling, and inserts blocks from clipboard
`src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts`	Adds copy to clipboard button and handler to RTE block entries
`src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts`	Uses localized label for copy button
`src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts`	Uses localized label for copy button

src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/block/paste/manifest.ts

...b.UI.Client/src/packages/tiptap/clipboard/block/paste/block-to-block-rte-paste-translator.ts

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-entries.context.ts

...Web.UI.Client/src/packages/tiptap/clipboard/block/copy/block-rte-to-block-copy-translator.ts

...b.UI.Client/src/packages/tiptap/clipboard/block/paste/block-to-block-rte-paste-translator.ts

src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/manifests.ts

src/Umbraco.Web.UI.Client/src/packages/tiptap/clipboard/block/copy/manifest.ts

- Add missing await on insert() and insertFromRtePropertyValues() - Remove redundant optional chaining on blockContentTypes.every() Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

leekelleher and others added 9 commits December 11, 2025 08:45

Localize "Copy to clipboard" button label

28492b2

in other Block editor components.

Adds "Copy to clipboard" action to RTE Block component

a83acdc

Check if Clipboard Property Context is available

f262c3e

If not, don't show the action button.

Register "Clipboard Property Context" for Tiptap RTE

013e1a2

we can't make this generic for all RTEs, since it is bound to the property-editor UI alias.

Implemented RTE Block's copyToClipboard() method

871b3ef

Added Clipboard Property Value Translators

7d0d0c5

for Tiptap RTE Blocks.

Merge branch 'main' into v17/feature/block-rte-clipboard

0959536

Copilot AI review requested due to automatic review settings February 2, 2026 17:34

Copilot started reviewing on behalf of leekelleher February 2, 2026 17:35 View session

leekelleher added type/feature area/frontend labels Feb 2, 2026

Copilot AI reviewed Feb 2, 2026

View reviewed changes

Block RTE: address code review feedback

a45ff4b

- Add missing await on insert() and insertFromRtePropertyValues() - Remove redundant optional chaining on blockContentTypes.every() Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

leekelleher changed the title ~~Block RTE: Add clipboard copy/paste support for blocks~~ Tiptap RTE: Add clipboard copy/paste support for RTE blocks Feb 3, 2026

This was referenced Feb 3, 2026

Block RTE: Add missing copy and delete buttons #21563

Closed

Block in richtext editor missing copy and delete #21345

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tiptap RTE: Add clipboard copy/paste support for RTE blocks#21604

Tiptap RTE: Add clipboard copy/paste support for RTE blocks#21604
leekelleher wants to merge 10 commits intomainfrom
v17/feature/block-rte-clipboard

leekelleher commented Feb 2, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

leekelleher commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Prerequisites

Description

Key Changes

How to Test

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

leekelleher commented Feb 2, 2026 •

edited

Loading