Skip to content

Tiptap RTE: Stylesheets#18502

Merged
leekelleher merged 11 commits intov15/devfrom
v15/feature/tiptap-stylesheets
Feb 28, 2025
Merged

Tiptap RTE: Stylesheets#18502
leekelleher merged 11 commits intov15/devfrom
v15/feature/tiptap-stylesheets

Conversation

@leekelleher
Copy link
Copy Markdown
Member

Description

Adds Stylesheet configuration to the Tiptap RTE.

The Stylesheet picker property-editor that is used for the TinyMCE configuration was scoped to the tinymce package, so I've moved (duplicated) the code to add the property-editor to the templating/stylesheets package. I've updated the propertyEditorUiAlias for TinyMCE, so the upcoming community package can reference Umbraco's stylesheet picker.

There are some additional tweaks in this PR whilst I was in the Stylesheet section.

How to test?

Best to test against the server, as the mock-server doesn't have the capability to serve the Stylesheet contents as a static-file (yet). Add a stylesheet (new or existing) to the Tiptap RTE configuration, view the RTE on a document... check that the styles have loaded.

Here's an example CSS that would be visually obvious if it's loaded or not.

#editor, #tinymce {
    background-color: pink;
    font-family: cursive;
}

as it may be used in 3rd party extensions.

TinyMCE will be removed in v16, but this deprecation notice in 15.4
will at least notify that the "Umb.PropertyEditorUi.StylesheetPicker"
UI can be used.
uses `@open` event for UI consistency with other pickers.
Moves "StarterKit" styles to the RTE Essentials extension registration.

Scopes TinyMCE in "rte-content.css" (for now).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants