Tiptap as a new rich text editor #17067
Replies: 7 comments 17 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.
-
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.1
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