Tiptap RTE: Table extension enhancements #18365
Merged
+942
−165
Conversation
This file contains 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
Provides a popover with table menu actions.
from "plugins" folder to "extensions" subfolder.
so that it becomes optional in extended classes.
which does nothing, but satisfies the extension loader controller.
to match TinyMCE toolbar layout.
Example with a Style Select menu, with default (hard coded) options, similar to TinyMCE's unconfigured Style Select menu.
# Conflicts: # src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
leekelleher
changed the title
# Conflicts: # src/Umbraco.Web.UI.Client/src/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.ts # src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/manifests.ts
as its development isn't ready yet.
as it wasn't been used. I expect this will become the bubble menu feature.
|
@leekelleher perhaps we can have table icons as in TinyMCE?
Seems to be missing cell, row and table properties, but perhaps it will be added later? |
👍
It'll be added later, all incremental enhancements. 🚀 😁 |
|
@leekelleher not sure there are great icons for all table actions - at least some are missing in Lucide icons: |
iOvergaard
approved these changes
Feb 19, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Enhancements to the Tiptap Table extension.
Adds a cascading menu to the Tiptap toolbar for Table actions.
Adds "grips" to the current column and row, for bulk selecting cells.
The "Insert Table" designer took inspiration from the TinyMCE feature.
Recording.2025-02-18.172030.mp4
A hover/bubble menu for contextual use will come in a later PR, it is still under development.
How to test?
On your Tiptap RTE, enable the Table extension and add the Table menu to the toolbar. Then play around with it as desired: adding tables with varying columns/rows; appending/prepending columns/rows; merging/splitting cells; deleting columns/rows/table; etc.
Known issues
tiptap-umb-table.extension.tsis large, this may need to be broken down into smaller code files.enableContentCheckoption (ininput-tiptap.element.ts) is currently commented out, as it's showing false-positives.