Tiptap RTE: Allow removal of unregistered extensions #20571
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Removed the need for the `tiptap-toolbar-alias` attribute, we can reuse the `data-mark`.
If the extension doesn't have a `description`, then add the `alias` to the title/tooltip, to give a DX hint.
…olbar extensions
There was a problem hiding this comment.
Pull Request Overview
This PR addresses issue #20442 by enabling users to identify and remove unregistered Tiptap extensions from toolbar and statusbar configurations. When an extension's alias has been renamed or removed, the configuration previously displayed blank items that couldn't be removed due to being disabled. The changes add visual indicators for missing extensions and allow their removal from the UI.
Key changes:
- Added
kindproperty to extension types to distinguish between registered and unregistered extensions - Modified UI to display "Missing extension" warnings for unregistered items with danger styling
- Removed
disabledattribute from unregistered extensions to enable their removal - Added tooltip hints for loading states in the toolbar
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| types.ts | Refactored extension types to introduce UmbTiptapExtensionBase with kind property |
| tiptap-toolbar-group-configuration.element.ts | Added rendering for 'unknown' extension kind with danger styling and removal capability |
| tiptap-toolbar-configuration.context.ts | Modified getExtensionByAlias to return fallback object with 'unknown' kind instead of undefined |
| property-editor-ui-tiptap-toolbar-configuration.element.ts | Removed filtering of undefined extensions since fallback objects are now returned |
| tiptap-statusbar-configuration.context.ts | Added 'default' kind to registered extensions and fallback for unregistered ones |
| property-editor-ui-tiptap-statusbar-configuration.element.ts | Added 'unknown' case rendering and fixed data-mark prefixes from 'toolbar' to 'statusbar' |
| property-editor-ui-tiptap-extensions-configuration.element.ts | Replaced ifDefined with nullish coalescing for title attribute |
| style-select/manifests.ts | Added forExtensions property to manifest |
| horizontal-rule/manifests.ts | Added forExtensions property to manifest |
| tiptap-toolbar.element.ts | Updated placeholder rendering to include alias in tooltip |
.../tiptap/property-editors/toolbar-configuration/tiptap-toolbar-group-configuration.element.ts
Show resolved
Hide resolved
...rty-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts
Outdated
Show resolved
Hide resolved
...editors/statusbar-configuration/property-editor-ui-tiptap-statusbar-configuration.element.ts
Outdated
Show resolved
Hide resolved
…/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts Co-authored-by: Copilot <[email protected]>
…/statusbar-configuration/property-editor-ui-tiptap-statusbar-configuration.element.ts Co-authored-by: Copilot <[email protected]>
iOvergaard
approved these changes
Oct 21, 2025
iOvergaard
pushed a commit
that referenced
this pull request
Oct 21, 2025
* Tiptap toolbar config: enable removal of unregistered extensions * Tiptap statusbar config: enable removal of unregistered extensions * Tiptap toolbar config: Typescript tidy-up * Tiptap toolbar sorting amend Removed the need for the `tiptap-toolbar-alias` attribute, we can reuse the `data-mark`. * Tiptap extension config UI amend If the extension doesn't have a `description`, then add the `alias` to the title/tooltip, to give a DX hint. * Tiptap toolbar: adds `title` to placeholder skeleton * Added missing `forExtensions` for Style Select and Horizontal Rule toolbar extensions * Update src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/toolbar-configuration/property-editor-ui-tiptap-toolbar-configuration.element.ts Co-authored-by: Copilot <[email protected]> * Update src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/statusbar-configuration/property-editor-ui-tiptap-statusbar-configuration.element.ts Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
|
Picked for 17.0 with d05add4 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes #20442.
If the alias of a Tiptap extension has been renamed, (or even removed), then the data-type configuration still holds a reference to the previous alias (at the time it was last saved to the database), this means that an unregistered Tiptap toolbar/statusbar extension may appear as a blank item, with very little to indicate that an extension is missing/unregistered. Also because the unregistered extension is set as
disabled, the user is unable to remove the toolbar item.This PR updates the UI to show that the extension is missing, and lets the user remove it from the toolbar/statusbar.
On the document view of Tiptap RTE, the unregistered toolbar items will still appear as a skeleton placeholder, with a
titleattribute to display the extension's alias in a tooltip. Ideally, we'd like to display a "Missing extension" UI for the item, but due to the observant nature of the extension registry, it is difficult to know the difference between a missing extension or waiting for an extension to load. We could have a timeout, but this seems like an arbitrary resolution.How to test?
See #20442 for reproduce steps.