Tiptap RTE: Include Tiptap's default styles#19805
Conversation
This option would inject the default CSS styles into the `window.document`, which are never applied to the component's shadow DOM.
The `caret-color` rule (line 93) resolves issue #19791.
There was a problem hiding this comment.
Pull Request Overview
This PR fixes an issue where Tiptap's default CSS styles were not being applied to the Tiptap RTE component due to shadow DOM isolation. The solution disables Tiptap's automatic CSS injection and manually includes the necessary styles.
- Disables Tiptap's automatic CSS injection (
injectCSS: false) since it doesn't work with shadow DOM - Manually includes Tiptap's default styles in the RTE content CSS file
- Fixes issue #19791 where cursor caret visibility was problematic with block elements
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| input-tiptap.element.ts | Disables automatic CSS injection from Tiptap editor |
| rte-content.css | Adds manually copied default Tiptap styles with proper shadow DOM support |
AndyButland
left a comment
AndyButland
left a comment
There was a problem hiding this comment.
Looks to work as expected @leekelleher. I've viewed before and after and can't see any differences, apart from the fix you note that I can verify.
I did note a couple of things but realised they are the same in main, so I'll note in passing just so you have them. They don't need to prevent merging this PR though, so I'll do so.
- There's a difference in the view of text around blocks depending on whether there is text preceding the block. See the following:
- I found you can't Ctrl + Z to undo deleting a block.
|
@AndyButland Thanks for the the review and feedback! On your 2 notes...
I'll look into this. 👍
We have an issue to track this bug, #19637. I've been investigating potential fixes. |
2 participants
Description
By default the Tiptap editor would include its default CSS to the current document, e.g.
window.document. However these would never be applied to the shadow DOM of the<input-tiptap>component, so never used.By adding them to our "rte-content.css" file, we can include them in the RTE.
To note, one of the rules
.ProseMirror-hideselection * { caret-color: transparent; }will resolve issue #19791.How to test?
Try out the Tiptap RTE with and without this patch, are there any notable differences? (hopefully not)
To test out issue #19791, add a non-inline Block element to the RTE, then use keyboard navigation to select the Block. Before this patch, the cursor caret would be on the next line. After the patch, the caret is not visible when the Block is selected.