Tiptap RTE: Cascading Style Select Menu#18364
Conversation
Example with a Style Select menu, with default (hard coded) options, similar to TinyMCE's unconfigured Style Select menu.
leekelleher
changed the title
| ${when( | ||
| this.manifest?.meta.icon, | ||
| () => html`<umb-icon name=${this.manifest!.meta.icon}></umb-icon>`, | ||
| (icon) => html`<umb-icon name=${icon}></umb-icon>`, |
There was a problem hiding this comment.
Wow, did not know you could do this!
There was a problem hiding this comment.
I know! I only recently found out. Saves us putting ! bangs in there. 😅
iOvergaard
left a comment
iOvergaard
left a comment
There was a problem hiding this comment.
Very interesting work and I don't see why we cannot merge this now as it works. We still need to add to the feature, of course. I wonder how we can make the active selection cascade back to the menu to highlight the option with a checkmark...
| label=${ifDefined(this.manifest?.meta.label)} | ||
| popovertarget="style-select" | ||
| title=${this.manifest?.meta.label ? this.localize.string(this.manifest.meta.label) : ''}> | ||
| <span>Style select</span> |
There was a problem hiding this comment.
We are going to need a translation here in the future
|
|
||
| @customElement('umb-tiptap-style-select-toolbar-element') | ||
| export class UmbTiptapToolbarStyleSelectToolbarElement extends UmbLitElement { | ||
| #menu: Array<UmbCascadingMenuItem> = [ |
There was a problem hiding this comment.
It is interesting to think how we can plug this from outside. Maybe another manifest type or allow existing tiptap extensions to add to it?
We will also need a translator from the rte stylesheets feature over to "tiptap commands".
|
The failing e2e test is due to something else, so I will merge even though it did not pass the e2e. |
2 participants
Description
Introduces a reusable cascading menu (popover) for the Tiptap toolbar items.
Adds a Style Select toolbar menu, with default options - to match TinyMCE's unconfigured Style Select menu.
To note: this is an initial step in a larger feature, development to add custom style rules (CSS) to Tiptap is actively underway.
The
<umb-cascading-menu-popover>component is currently located within the internal "tiptap" package, as this is the initial scope. It can be relocated to "core" package if other packages require its functionality, e.g. potential nested entity action menus.Recording.2025-02-18.103710.mp4