Tiptap as a new rich text editor #17067
Replies: 14 comments 44 replies
-
|
Would be good if some features that TinyMCE moved to "premium" plans were brought back, especially the "paste from Word" feature that cleaned all the garbage in the html and converted list properly. |
Beta Was this translation helpful? Give feedback.
-
|
I tried our latest feature branch out and it looks ok for Word and HTML: tiptap-copypaste-demo.mp4Here's what the HTML content looks like for TinyMCE: tinymce-html-copypaste.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
@iOvergaard But what does the HTML source look like? One of the issues you get pasting from Word or external HTML pages is that it brings back inline styles or badly-formed HTML that is either not valid, or has semantic or accessibility issues. So you want it to retain the general structure of the pasted document but strip out extraneous formatting / tags. |
Beta Was this translation helpful? Give feedback.
-
|
@DanDiplo I agree, the formatting has been a problem before. It seems like Tiptap is a lot less accepting of different elements. It seems it strips away any element that is currently not loaded/recognized through a plugin. For instance, if I paste a table into an editor that doesn't have the table extension, then it strips away all table-related elements such as table, tr, and td and leaves the text there. For better or for worse, TinyMCE would leave any HTML that you pasted in apart from the elements, you specifically disallowed, but Umbraco's setup was/is very unrestricted towards allowed HTML elements in TinyMCE. There is a fine balance here to get Tiptap to accept the same markup as TinyMCE does without letting it be too open, which leads to the horror examples we saw from pasting Word text into TinyMCE. This is the HTML generated from pasting from Word in the video: <h1>This is a Heading 1</h1>
<p>
Here is a paragraph with a
<a
target="_blank"
rel="noopener noreferrer nofollow"
href="https://www.umbraco.com/"
>link</a
>.
</p>
<p> </p>
<h2>This is a Heading 2</h2>
<p>Here is another paragraph with an accompanying table:</p>
<table style="min-width: 75px">
<colgroup>
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<td colspan="1" rowspan="1"><p>Name</p></td>
<td colspan="1" rowspan="1"><p>Value</p></td>
<td colspan="1" rowspan="1"><p>Comments</p></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><p>Entry 1</p></td>
<td colspan="1" rowspan="1"><p>Value 1</p></td>
<td colspan="1" rowspan="1"><p>Lorem</p></td>
</tr>
<tr>
<td colspan="1" rowspan="1"><p>Entry 2</p></td>
<td colspan="1" rowspan="1"><p>Value 2</p></td>
<td colspan="1" rowspan="1"><p>Ipsum</p></td>
</tr>
</tbody>
</table> |
Beta Was this translation helpful? Give feedback.
-
The question I'd have there is: Who's making that decision? - Umbraco, Developer, Editor ? I've had times where I've needed to move an existing WordPress site and "just get it up and live" ASAP. Having TinyMCE accept whatever I throw at it (because I've intentionally configured it that way) allowed me to paste the horrible WP html - complete with its inline styles and other rubbish, and satisfy the immediate requirement. In my experience, the problem with TinyMCE is not with the editor itself, but with the way it's configured by default and the difficulty in customizing that config. It can be done, but it's an awkward and unpleasant experience in the Umbraco environment - and adding "premium" features at a site level to match expectations of an existing WP site... not so much. |
Beta Was this translation helpful? Give feedback.
-
|
The problem with tiny now is that if I paste from Word, I get lots of mso attributes, styles and also lists are not converted to ul-li but stay as tabs. |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure they are directly comparable: https://www.tiny.cloud/tinymce-vs-tiptap/ |
Beta Was this translation helpful? Give feedback.
-
|
WordPress dropped tinymce year ago... 😉 But yeah they implemented similar editor. |
Beta Was this translation helpful? Give feedback.
-
|
I think there are two POVs to this - one for Editors and one for Developers: As an Editor I want something that works in a way that I am familiar with e.g. similar toolbar to Word or Google Docs with same shortcuts. I want it to automatically clean-up Word or HTML I paste in and strip-out extraneous tags / inline styles. I want it to produce valid HTML that aligns with that in the site templates and won't break anything. I may want to embed things like Tweets or Soundcloud or other things, but only if it has been configured to allow this. I'd like the layout in the editor to closely reflect what it would look like on the published site, where possible and reasonable. As a Developer I want to ensure that Editors stick to the styles we give them and aren't able to "import" styles when they paste stuff. I want the HTML generated to be semantic and accessible. I want to be able to extend the toolbar and add custom buttons that trigger custom functionality. I want good documentation on this. For instance, I'd love to be able to easily have a way of adding an "AI" rewriter to the toolbar that sends content to a local back endpoint where I can process it before returning it. Extensibility would be key for me. The ability to add 3rd party "community" plugins would be great. I'd like control over things like images e.g. the ability to be able to specify that any images added always get assigned a specific class(es) however they are added. I'd like control over the toolbar and to be able to have multiple different configurations for different types of content. I'd love to be able to limit the amount of content in an editor (whilst acknowledging that word counts are difficult with HTML). I'd like native features of the browser, such as spellcheck and other extensions, to continue to work. |
Beta Was this translation helpful? Give feedback.
-
|
TipTap has a Content AI thing - https://tiptap.dev/docs/content-ai/getting-started/overview I just typed 'expand on famous rock bands' into the editor, highlighted it and pressed 'extend' and it came up with When it comes to famous rock bands, there are several iconic names that have left a lasting impact on the music industry. Bands like The Beatles, The Rolling Stones, Led Zeppelin, Pink Floyd, and Queen are considered pioneers of rock music. Each of these bands brought their unique style and sound, influencing generations of musicians to come. Their timeless songs continue to be celebrated and enjoyed by fans all around the world. and you can add your own custom commands... highlighting 'Umbraco' and clicking 'Enrich with emoji'
so it's on the right track... |
Beta Was this translation helpful? Give feedback.
-
|
So long as I can replace it with my own DiploAIᵀᴹ I'd be happy! 👍 PS. I like how it picked all British rock bands - nice to see some Anglocentrism in AI for a change! |
Beta Was this translation helpful? Give feedback.
-
|
One thing that is probably obvious: if I switch a tinymce property to tiptap everything should work seamlessly. |
Beta Was this translation helpful? Give feedback.
-
|
Agreed. Tiptap's default is JSON but it also supports outputting as HTML, which we use. The goal is to switch property editors without losing any content, but you will have to set up the toolbar again. |
Beta Was this translation helpful? Give feedback.
-
|
It would be nice to maintain support for "Umbraco:CMS:RichTextEditor:CustomConfig:style_formats" (or at least the functional equivalent). I regularly use it to control classes on the various elements and to apply headers, as it allows better organization of the classes/elements and more control over the elements they are allowed on. An example configuration I use for the current tinymce can be seen below. [
{
"title": "Headings",
"items": [
{
"title": "Header 1",
"block": "h1"
},
{
"title": "Header 2",
"block": "h2"
},
{
"title": "Header 3",
"block": "h3"
},
{
"title": "Header 4",
"block": "h4"
},
{
"title": "Header 5",
"block": "h5"
},
{
"title": "Header 6",
"block": "h6"
}
]
},
{
"title": "Margins",
"items": [
{
"title": "No Margin",
"selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
"classes": "noMargin"
},
{
"title": "Margin Top Small",
"selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
"classes": "small-margin-top-1"
},
{
"title": "Margin Top Medium",
"selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
"classes": "small-margin-top-1 medium-margin-top-2"
},
{
"title": "Margin Top Large",
"selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
"classes": "small-margin-top-2 medium-margin-top-3"
},
{
"title": "Margin Bottom Small",
"selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
"classes": "small-margin-bottom-1"
},
{
"title": "Margin Bottom Medium",
"selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
"classes": "small-margin-bottom-1 medium-margin-bottom-2"
},
{
"title": "Margin Bottom Large",
"selector": "h1,h2,h3,h4,h5,h6,p,ul,ol",
"classes": "small-margin-bottom-2 medium-margin-bottom-3"
}
]
},
{
"title": "Buttons",
"items": [
{
"title": "Outline Button",
"selector": "a",
"classes": "outlineButton"
},
{
"title": "Primary Button",
"selector": "a",
"classes": "primaryButton"
},
{
"title": "Round Button",
"selector": "a",
"classes": "roundButton"
},
{
"title": "Square Button",
"selector": "a",
"classes": "squareButton"
}
]
},
{
"title": "Images",
"items": [
{
"title": "Float Left",
"selector": "img",
"classes": "floatLeft"
},
{
"title": "Float Right",
"selector": "img",
"classes": "floatRight"
}
]
},
{
"title": "Text",
"items": [
{
"title": "Small Text",
"inline": "span",
"classes": "smallText"
},
{
"title": "Large Text",
"inline": "span",
"classes": "largeText"
},
{
"title": "Eyebrow",
"selector": "h1,h2,h3,h4,h5,h6,p,a",
"classes": "eyebrow"
},
{
"title": "Light Grey Text",
"selector": "h1,h2,h3,h4,h5,h6,p,a",
"classes": "lightGreyText"
},
{
"title": "White Text",
"selector": "h1,h2,h3,h4,h5,h6,p,a",
"classes": "whiteText"
}
]
}
]Doesn't have to be handled the same way, but being able to group styles is important as the toolbar will quickly become bloated if separate buttons are needed for each option. |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, I generally agree. The Tiptap doesn't come with anything like this out of the box. We plan to support some form of RTE Styles again, but we have an opportunity to fix the inherent issues with the old format as well. Meanwhile, Tiptap provides ample support to build whatever UI you would like in the toolbar, and we enable you to do that through Umbraco's extension system with a new type called |
Beta Was this translation helpful? Give feedback.
-
|
Sounds good. Wasn't sure "Rich Text Editor Styles" included it. Thought it might be just the backoffice css nodes, which don't allow grouping as far as I'm aware (been a while since I used it, so that may have changed). Also, if we are still going to be configuring it in appsettings.json, it would be good to have it support json instead of a string if possible, since that makes editing it more difficult. This can be worked around by creating a separate json file and loading that in Package.cs, but it would be ideal to not have to do that. |
Beta Was this translation helpful? Give feedback.
-
|
Rich Text Editor Styles unfortunately was never really advanced. I believe it's only one level of styles, you could do, i.e. you could not set up nested styles as you could if you interacted with |
Beta Was this translation helpful? Give feedback.
-
|
I see TipTap also has non-free tiers. https://tiptap.dev/pricing |
Beta Was this translation helpful? Give feedback.
-
|
Based on experience closer to 0 😆 |
Beta Was this translation helpful? Give feedback.
-
|
@Myster Tiptap's pricing structure is for their own cloud offering, which has a range of commercial extensions/features. Will this change in future? That's an unknown, we certainly hope not, but we do have the confidence enough to know that we can handle replacing any backoffice components with viable alternatives. |
Beta Was this translation helpful? Give feedback.
-
|
Hi there! I'm currious if you guys were considering Lexical as a replacement candidate. It is being developed by Facebook and they are using it in their products which is a guarantee they will be investing in it. At the same time it is open sourced and free - I don't think there will be any apetites by Facebook to change license down the road. Indeed, this is not an editor but a more a platfrm for building editors - which would require a lot of development. Unlike TinyMCE, Lexical (like Tiptap) also uses custom DOM to represent its content which might not be a perfect match for Umraco, but provides better exensibility and content manipulation/filtering capabilities. I just wanted to hear if you considered this product as well, and if so, what deterred you from using choosing it as the replacement for TinyMCE. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, we went through quite a few: Quill, Lexical, CKEditor, EditorJS, Froala, Trix, and more. We disqualified most of them due to either licensing or lack of extensibility. A few refused to run inside our web components in the new Backoffice, Lexical was one of them, whereas others had to be "monkey patched" to run. This was very surprising to me. Tiptap was one of the few that just ran, and it hit all of the other parameters on licensing and extensibility. We would like the one Umbraco ships with by default to be of as little of a nuisance as possible and partly abstracted away UI-wise. However, you will be able to hook into the That being said, one of the benefits of the V14 split of property editors into schema and UI is that anyone can bring their own rich text editor and still utilize the HTML and block capabilities of the rich text editor system on the server. |
Beta Was this translation helpful? Give feedback.
-
|
Jacob, thank you for sharing your experience. Much appreciated! |
Beta Was this translation helpful? Give feedback.
-
|
One feature we're missing with the new TipTap editor is the ability to use anchor links. We can create anchor links in the link picker, but we're not able to add an ID to an element on a page. If we manually add an ID to an element through the "View Source Code", it doesn't save. It's gone after clicking "Submit". So either a new button to add an ID to a section in the editor, or the ability to add an ID to an element in "View Source Code" would solve the issue. Is this planned for the future? |
Beta Was this translation helpful? Give feedback.
-
|
Good idea. I'll put it on the list! |
Beta Was this translation helpful? Give feedback.
-
|
Not sure if it's the right place to post this, but here we go., So far, I like the TipTap editor. One of the things that is does way better is parsing of Word layout and converting it to HTML. This is something really lacking when TinyMCE moved that functionality to a paid plugin. However, one of the things tiptap does wrong is the parsing of unordered lists from Word documents. I know it's a Tiptap thing, but I'm positive that lists are one of THE most important things people want to paste from Word. As far as I can tell, this has been an issue for two years now: ueberdosis/tiptap#1526. Not sure Umbraco can do something about it, but it IS the editor that will be shipping with it. And to be honest, I'm expecting a lot of support questions from our customers about this. |
Beta Was this translation helpful? Give feedback.
-
|
@Luuk1983 Thanks for raising this. The linked thread offers some potential solutions, including an |
Beta Was this translation helpful? Give feedback.
-
|
@iOvergaard The features listed as 15.x, is it the plan to have all implemented in v.15 or is their a risk that some will first be in Umbraco v.16? Some of the features are pretty important to have a usable TipTap - like having the possibility to have more than H1-H3 or other custom styles 😊 |
Beta Was this translation helpful? Give feedback.
-
|
"Rich text editor styles" (custom styles) is the big one we need, to have feature parity with the former rich text editor, i.e. you will currently lose configuration if you migrate to Tiptap because these styles are not supported. That is the one feature we must have ready in 15.x. The rest of the features are still on the drawing board and we consider these "should-haves". The overall deadline for these is Umbraco 16. I will update the timeline in the description soon to reflect this. |
Beta Was this translation helpful? Give feedback.
-
|
@iOvergaard is something like "Templates" in TinyMCE supported OOTB? It was useful as alternative to "Rich text editor styles" to insert HTML snippets, e.g. bullet list with a specific CSS class to style as an list of arrows as bullets (or another custom icon). But we have also used it to setup a predefined table layout, which saved content editors from some work. I found this extension, which looks useful: |
Beta Was this translation helpful? Give feedback.
-
|
@bjarnef Linking to your comment from a PR, just to bring it back to this discussion (otherwise we'll lose track of it). I'm not familiar with the Template plugin for TinyMCE, so unsure of its full capabilities. I've read the docs for it, I understand the concept, but I'm sure there are nuances to research and understand, especially with how to handle them within Tiptap schemas/extensions. It's not on our roadmap for v16, so not something we'd attempt to migrate the configuration data for. |
Beta Was this translation helpful? Give feedback.
-
|
It was mainly a concern, because we have used Template plugin in several Umbraco projects. It is not enabled by default, but yet a default TinyMCE plugin include just like "forecolor", "backcolor", which isn't enabled either, but it has a migration for. These are used in table properties though if enabled. So I just wonder what would happen if template plugin is enabled and the site is migrated. Pretty much the same as "tiptap-snippets-extension". At least the most basic stuff: insert a predefined ordnered/unordnered list, table or a another predefined chunk of HTML. |
Beta Was this translation helpful? Give feedback.
-
|
Do you plan on adding the ability to set a stylesheet for TipTap, like you could for TinyMCE? To make it use the brand fonts, colors, text sizes etc.? We also used that stylesheet to populate the style selector. The style selector in 15.3 seems to be prepopulated will all kinds of different options. |
Beta Was this translation helpful? Give feedback.
-
|
No worries, I am not in a hurry :) |
Beta Was this translation helpful? Give feedback.
-
|
@leekelleher So is the custom style menu part of 15.4 or is the hardcoded part of 15.4? I know that a hardcoded list if part of the way of getting there, but is it useable - properly not in 90% of the cases :) |
Beta Was this translation helpful? Give feedback.
-
|
The Style Select toolbar menu has hardcoded options in 15.3. In 15.4, the idea with with the custom style menu is that you can define your own options (with cascading menus). |
Beta Was this translation helpful? Give feedback.
-
|
Did this make it to 15.4-rc? I'm sure sure where to define the options? |
Beta Was this translation helpful? Give feedback.
-
|
Ah - Got it: #18918 |
Beta Was this translation helpful? Give feedback.
-
|
The TipTap editor works really well with the latest 15.4 update, but I am concerned about pasting html with style attributes as they can mess up the entire backoffice, or make it really difficult for the frontend to render consistent. Copy/Paste from our website with "position: absolute" Markup from Umbraco.com: |
Beta Was this translation helpful? Give feedback.
-
|
What editors would copy something with a style, class or id attributes and expect it to work? When copy/paste from Word, they have loads of styles which should not be copied. Yes it would be nice that if some text in Word was centered, that it will also be that when you paste it, but I think that all the other style stuff that is as pasted, is better left out entirely. It's too much of a compromise and it will be hard to manage styling of the RTE text on the website with a lot of unused style attributes from Word or other sources. |
Beta Was this translation helpful? Give feedback.
-
|
Personally, I think that 'Paste without style' should be the default, but 'Paste As-Is' could be a useful option - for copying between existing content and/or existing pages. |
Beta Was this translation helpful? Give feedback.
-
I absolutely agree. You want your frontend to dictate styling, not copy it over from other tools. This makes the result very inconsistent. I expect only the minimum text layout (so not styling) to be preserved. For instance: titles, paragraphs and (un)ordered lists. But any styling should go. That includes classes, id's, word-specific styling etc. |
Beta Was this translation helpful? Give feedback.
-
|
I hear what you are saying, @andersburla, and I generally agree. If we don't allow inline styles and classes in Tiptap, you cannot even hit the "Source Code" button and edit it manually; Tiptap would strip it away again. That is why we need to accept those attributes, because that is what people expect to work. Unfortunately, you cannot set up Tiptap to remove attributes in one instance and accept them in another. Pasting in from Word and other "dirty" sources specifically, we have been talking about having a "Paste without styles" button, as you might have seen in some older versions of TinyMCE as well (before they yanked it out and released a premium paste plugin). |
Beta Was this translation helpful? Give feedback.
-
|
A 'Paste without styles' would also be great and fix the cases I see as the most annoying and common for editors writing in e.g. Word. |
Beta Was this translation helpful? Give feedback.
-
|
Does someone has a solution for how to keep using TinyMce as an option as RTE in Umbraco v16+ We have a licens to TinyMce Pro and using some thirdparty plugins. Would be wonderfull to be able to still use TinyMce |
Beta Was this translation helpful? Give feedback.
-
|
@mjpraxis the solution will be to implement rte property by yourself, that shouldn't be hard as you can copy already existing code from umbraco source code. |
Beta Was this translation helpful? Give feedback.
-
|
Work is in progress on a community package as well, I think this might be ready to go by the time the final version of v16 goes out. |
Beta Was this translation helpful? Give feedback.
-
Any chance you could share a link to a repository? |
Beta Was this translation helpful? Give feedback.
-
This is the package in question. It is expected to support Umbraco 16 shortly after the launch: tinymce.umbraco.premium |
Beta Was this translation helpful? Give feedback.
-
|
Small correction: the community-driven package to support TinyMCE has been released in a beta as TinyMCE.Umbraco on NuGet. |
Beta Was this translation helpful? Give feedback.
-
We are going to implement Tiptap as a new property editor UI in Umbraco 15. The reason for selecting Tiptap is that it checks off all the boxes related to licensing and extensibility. We have also not been able to find another editor that supports working inside a Shadow DOM.
It also supports our goal to deprecate and eventually remove TinyMCE: umbraco/Announcements#20
The aim is that the editor will support the same custom actions as TinyMCE: Media picker/upload, Embed, Link picker, and Block picker.
We are also checking to see what other features need to be supported:
Plan
15.0
15.x
Update 2024-09-30
We have now been implementing this editor for the better part of a month. There are of course a lot of differences between TinyMCE and Tiptap, however, I think we have managed to get all the specialized inputs to work -- all the pickers and blocks. I have added a plan to this discussion to indicate what we expect to have ready and when. All the features mentioned under "15.0" should be ready to test in the Release Candidate coming out October 2nd.
Beta Was this translation helpful? Give feedback.
All reactions