When using the CMS Online Editor I can’t seem to generate line breaks in Rich Text mode.
I can enter a couple of carriage returns and style the text etc, but when I save and preview the site all the line breaks are missing (the styling is OK).
When I go back to open the post in the Online Editor the line breaks are gone.
Is this normal behaviour or a bug?
I can switch to markdown mode and enter two html style line breaks as a test and it saves that and publishes OK. But the older Gentleman who will be blogging just needs quick, ‘MS Word’ like editing.
This older gentleman absolutely agrees. So this hassle about MarkDown line breaks seems to exist in the CMS Online Editor too? I haven’t tried yet, but if so, can it please be noted as a bug and be repaired?
My understanding is that “line breaks” were one of the not-quite-defined things in Gruber’s original Markdown definitions. It’s not just Elements that has this problem, and it becomes a problem moving Markdown files between applications, too. We need a standard, and products need to adhere to it.
If such is the case, it’s about time that a standard definition is agreed upon. Gruber’s original definitions date back to 2004 according to the internet. That’s 22 years ago!
But what Gruber hasn’t done should not result in the problem that Carl Rosamond @Rozza_UK describes. That is strange behavior that looks like a bug to me. And besides that the whole idea behind the Online Editor seems to be to provide us and our customers with a smooth blogging experience. And that means in my opinion that it’s easy to generate line breaks without Markdown hassle. Don’t you agree?
Update — solved. This wasn’t entirely a CMS Online Editor bug.
Also, I described the problem badly — I said “line breaks” but what I really meant was paragraph spacing.
The Rich Text editor was actually doing what it should. Pressing Return was creating and saving proper paragraphs. However, the spacing between those paragraphs wasn’t obvious when I went back to edit the post (maybe that visual feedback could be improved?).
I also had a mistake in my page layout. While experimenting I had copied my CMS body content from a heading element, and it retained the heading setup, so my body text was being rendered in the wrong type of element.
After changing the CMS content area to a proper Body/Text element, I was able to add paragraph spacing to the CMS content with CSS, as the default styling had no visible spacing between paragraphs.
So the Rich Text editor works more-or-less as expected and my client can use it like a simple Word-style editor without needing Markdown.
Leaving this here in case anyone else runs into the same thing.
Having now got the CMS working the way I want, I have a question rather than a bug report.
Is it the intended workflow that users should create their own typography styles for CMS-generated content?
The Online Editor correctly outputs semantic HTML, but by default I found I needed to add CSS to style paragraphs, lists, code blocks and other rich text elements before they displayed as expected.
I’m perfectly happy doing that if it’s the intended design philosophy - I just wanted to check whether that’s the expectation, or whether a default “prose” style for CMS content is planned in the future.
If it’s in the documentation then I apologise, but it wasn’t immediately obvious to me that the Rich Text editor and the published typography were separate concerns.
Or maybe that is in the upcoming ‘Part 4’ of the CMS videos
In theory you can display the body content of a markdown file anywhere you like by using the {{item.body}} tag. All that tag does is return the HTML for the body of the markdown file.
Right now, the best way to display that content is via the built-in Typography component. However, anyone could create their own component to display the body content (for example, you could create a custom component with built in styling).
The styling of the body content is separate intentionally.
If you using the Typography component, you should set the styling via the Theme → Typography tab.
Really appreciate your reply and the excellent work you’re doing with the CMS - it’s a game changer for me.
I had been using the Text Component for the body and styling it with CSS added to the page. I’ll change to the Typography Component moving forward.
However, to get properly spaced paragraphs, even with the Typography Component, I still need to style it with
.blog-content p {
margin-bottom: 1rem !important;
}
I also have to add styling to get the Horizontal Rule to show too.
As I mentioned in my previous post, I have zero problems doing this as I can just save a little CSS Snippet for any future work. What would be really handy though would be a ‘Paragraph Spacing’ slider added to the Theme > Typography palette. I think that would be the cherry on the cake for me.
Also, unless I’m missing something (highly likely as this is my first project after coming over from Classic), I’ve not managed to get the options for Underline & Strikethrough to work from within the Editor - but TBH, there’s only a remote chance I’ll actually need that for this particular job.
That, right there, is my Homer Simpson moment - D’Oh!
I had seen that and assumed (what’s the old saying?), that as it was under the colour section, that it meant margins around the entire Typography component.
