Tiptap RTE: Cascading Style Select Menu #18364
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
Example with a Style Select menu, with default (hard coded) options, similar to TinyMCE's unconfigured Style Select menu.
leekelleher
changed the title
iOvergaard
reviewed
Feb 18, 2025
| @@ -48,7 +48,7 @@ export class UmbTiptapToolbarButtonElement extends UmbLitElement { | |||
| @click=${() => (this.api && this.editor ? this.api.execute(this.editor) : null)}> | |||
| ${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
approved these changes
Feb 18, 2025
| 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. |
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
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