Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Tiptap: Generic markup support #18124

Merged
merged 8 commits into from
Jan 27, 2025

Conversation

leekelleher
Copy link
Member

Description

Fixes #17832.

Adds support for generic markup tags (e.g. div and span) and global attributes (e.g. class, id, and data-*).

This PR introduces a "Rich Text Essentials" Tiptap extension, this was originally a fake extension to encapsulate the core Tiptap extensions required for use in Umbraco, but with the addition of the generic extensions, it has become real.
It has been developed in a backwards-compatible way, no breaking-changes.

How to test?

  1. Load up a Tiptap RTE, (existing or new). Add some content (heading, paragraphs, etc).
  2. Press the "View Source Code" toolbar button, edit the HTML source to add a class, id or data-* attributes, and throw in a few <div> and <span> tags.
  3. Press "Submit", the Tiptap RTE should not error.
  4. Re-open the "View Source Code" modal, the markup modifications should still be there.

Do keep in mind that Tiptap is a semantic rich-text editor and will evaluate the markup presented: e.g. it will not allow Block elements within Inline elements, e.g. <span><div></div></span>; and attributes may be re-ordered alphabetically.

This is to add `class`, `id` and `data-*` attributes
to any markup within Tiptap contents.
to support generic markup modifications.
to support generic markup modifications.

Also modifies "umbEmbeddedMedia" to check explicitly
for the `umb-embed-holder` class name. This is to differentiate
from the generic `div` tag.
Previously this was a faux extension, but it is now real.

This extension adds the core extensions for Umbraco RTE support.
e.g. StarterKit, et al, and the new global attributes and generic elements.
Copy link
Contributor

@iOvergaard iOvergaard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks promising. What about the style attribute, should we support that?

@leekelleher
Copy link
Member Author

Looks promising. What about the style attribute, should we support that?

@iOvergaard Sounds good. 👍
I had initially considered it, but then parked it for later. I'll add it in and see how much cosmetic damage it can cause. 😅

@leekelleher
Copy link
Member Author

@iOvergaard It appears to play nicely with the text-alignment extension. I was concerned that the style value would be overwritten when changing the alignment, but it works well.

Markup (in View Source Code modal)
Screenshot 2025-01-27 113912

Rendered (in Tiptap RTE)
Screenshot 2025-01-27 113826

Not that I'd actively encourage inline CSS styles within the RTE, but the option is there.

so that it can allow other (nested) `Mark` extensions.
Copy link
Contributor

@iOvergaard iOvergaard left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. I also agree that it should be considered a feature, although it technically resolves a bug. So I'll put the release label on this PR as well as on the related issue.

@leekelleher leekelleher merged commit d900022 into v15/dev Jan 27, 2025
29 checks passed
@leekelleher leekelleher deleted the v15/feature/tiptap-generic-markup branch January 27, 2025 12:29
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.

None yet

2 participants