Streaming live at 10am (PST)

CMS Rich Text errors in Editor when using Safari for macOS


#1

Noticed some strange things on a project when in the Editor today.

If I create a new CMS item inside the Board Game collection, everything appears normal. However I am unable to place the cursor inside the rich text field edit box. It is possible to input into a field above and then press TAB to enter the cms box, but I can’t type in the box, only paste into it.

The strangeness continues when editing previously created cms items. Below is an item example that is create by Zapier. The rich text is not editable.

Here is the same cms item as viewing the page through the Editor where I am able to visually edit the CMS rich text on the page visually.

Going into the Designer and the same CMS item is editable as normal. You can also see the formatting that is not appearing anywhere in the Editor.

Now for one last bit of strangeness. After saving the CMS item in the Designer, if I go back to the Editor that same CMS item is now showing the edit field box around it. Although it is still not editable.

Anyone else experiencing this issue?

Hey @YoavGivati @Nita @Brando
Could it be related to this other RT bug?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @matthewpmunger,

Thanks for letting us know about these.

We actually just shipped a few fixes for rich content editing a few minutes ago. Including a fix for the issue where you couldn’t click into a rich text field with existing content in some cases. It was related to the structure of the content of a particular field in a particular items, but it should work as expected now.

I’m not sure about the issue with not being able edit a new field, I’m not able to repro that one in Safari, but it’s possible the other issue put the Editor in an unpredictable state until refresh that caused some other glitches.

  • Would you be able to do a hard refresh to get the latest fixes and try again to see if you can still repro these two?
  • Do you have any browser extensions in safari?
  • Does it happen in Google Chrome?


For the content that has disappearing line breaks can you provide a little more info.

  • was that item imported via csv import, or where those line breaks added with shift+enter?
  • do the line breaks in the designer data manager only show after clicking in to edit the field?

Thanks, any more info you can provide is much appreciated. hopefully we can get these issues resolved as a soon as possible. :cactus:


#3

Hey @YoavGivati

I did a hard refresh and now the rich text is always editable so the fixes worked for both issues.

I have the following extensions installed: 1password, pocket, bitly, and evernote

I was unable to duplicate the issue using Chrome. I’m running Safari Version 11.1.2 (13605.3.8) on a 2018 MacBook Pro.

The RT field was imported from Zapier. I have a Push by Zapier extension in Chrome that grabs a webpage and pulls the related information from the site’s API which is then pushed from Zapier into a Webflow CMS draft item. I’m not sure how the line breaks are created on the source site or how Zapier interprets them. The line breaks, bullet points, and other formatting have always gotten lost in the process so I’ve had to go in to the Editor and manually add line breaks. With the changes to the rich text editor, the formatting seems to be intact. However, see below.

Yes this is still happening. See GIF. Also the line breaks are not appearing on the page either and don’t appear when clicking to edit visually.

Hope this helps. Let me know if there’s anything else I can test or provide for you.


#4

The RT field was imported from Zapier. I have a Push by Zapier extension in Chrome that grabs a webpage and pulls the related information from the site’s API which is then pushed from Zapier into a Webflow CMS draft item. I’m not sure how the line breaks are created on the source site or how Zapier interprets them. The line breaks, bullet points, and other formatting have always gotten lost in the process so I’ve had to go in to the Editor and manually add line breaks. With the changes to the rich text editor, the formatting seems to be intact. However, see below.

Thanks for the extra info, that’s actually super helpful :sunflower:

Both our new and old rich content editors work with a specific tag structure and have different ways of massaging random html into the structure it can work with. We currently do a lot more processing on paste because different apps create super chaotic html and html-like things in the clipboard. Eg. we had an issue where copying things from a webpage in Firefox added tons of unicode newlines to the clipboard… Either way it looks like we need to add more processing to csv import, zapier, the Webflow api for rich content fields.

Right now the new rich content editor is integrated in the Designer Canvas, Designer & Editor Data Managers (the CMS), but not yet in the Editor Canvas. While editing with the new one we add a css property white-space: pre-wrap; which helps us resolve a bunch of cross-browser issues, but it also has the side effect of showing all the unicode newlines; and the edge spaces at the beginning/end of a node that would otherwise be invisible in html.

The problem for us is that when importing data from external sources there are lots of different scenarios where you might either want to replace all unicode newlines with <br>s or use them to create separate paragraphs, or just remove them all together. But it’s virtually impossible to detect the intention just by looking at the data.

Maybe long term we can add a setting somewhere to customize the behavior, but that seems like a pretty big undertaking technically to improve the experience in the short term.

Would be interested in your thoughts on this as someone who’s been working around this behavior in the CMS.

My thinking is that the main pain point here is that it’s not intuitive that white-space: pre-wrap; is being added or what the implications of it are, and unlike with clipboard/pasting from other apps there’s a little more control with things going into the CMS.

So we could improve the experience for now by converting all unicode newlines to line breaks. There will likely still be cases where you’d need to go in and manually tweak the imported rich content but at least the experience would be more consistent and predictable.


#5

Glad to help!

I’m a huge fan of the Zapier integration so all improvements are awesome.

It does seem like complex issue due the the number of variables from content source to user intentions like you said. As a user I would agree with your last statement. Seems to be more simple than setting somewhere and visually seeing the line breaks appear is a good clue that there’s excess code coming from the source of the pasted text.