Designer - CMS entry editor: broken rich text interaction and saving

When editing a CMS entry the rich text editor is inconsistent in allowing click interactions to move the cursor, incorrectly handles the delete button event (jumps to beginning), and does not save changes.

Steps:

  1. Open Designer
  2. Go to CMS Collections, select existing collection and item
  3. Click a rich text field. Attempt to type, sometimes an issue.
  4. Save. Leave item.
  5. Go back to item, observe same content as before save.

Video of error

Browser: Chrome 70.0.3538.67 (also seen in Chrome 69 - updated to test)
OS: macOS 10.14 Mojave

Copy/paste of first error response set:

webflow-designer.min.47df4708fa.js:290 TypeError: Cannot read property 'rangeClientRect' of null
    at ContentEditorToolbarContainer.value (webflow-designer.min.47df4708fa.js:138)
    at ig (webflow-designer.min.47df4708fa.js:159)
    at hg (webflow-designer.min.47df4708fa.js:159)
    at pg (webflow-designer.min.47df4708fa.js:159)
    at Rg (webflow-designer.min.47df4708fa.js:159)
    at Sg (webflow-designer.min.47df4708fa.js:159)
    at Xg (webflow-designer.min.47df4708fa.js:159)
    at Yg (webflow-designer.min.47df4708fa.js:159)
    at If (webflow-designer.min.47df4708fa.js:159)
    at Object.enqueueSetState (webflow-designer.min.47df4708fa.js:160)
console.(anonymous function) @ webflow-designer.min.47df4708fa.js:290
ug @ webflow-designer.min.47df4708fa.js:159
Eg.d.function.d.componentDidCatch.c.callback @ webflow-designer.min.47df4708fa.js:159
mf @ webflow-designer.min.47df4708fa.js:158
lf @ webflow-designer.min.47df4708fa.js:158
rh @ webflow-designer.min.47df4708fa.js:159
Xg @ webflow-designer.min.47df4708fa.js:159
Yg @ webflow-designer.min.47df4708fa.js:159
If @ webflow-designer.min.47df4708fa.js:159
enqueueSetState @ webflow-designer.min.47df4708fa.js:160
E.setState @ webflow-designer.min.47df4708fa.js:142
Container.c.onChange @ webflow-designer.min.47df4708fa.js:161
(anonymous) @ webflow-designer.min.47df4708fa.js:161
r @ webflow-designer.min.47df4708fa.js:161
s @ webflow-designer.min.47df4708fa.js:161
requestAnimationFrame (async)
(anonymous) @ webflow-designer.min.47df4708fa.js:161
(anonymous) @ webflow-designer.min.47df4708fa.js:161
Store.emitChange @ webflow-designer.min.47df4708fa.js:161
Flux.emitChange @ webflow-designer.min.47df4708fa.js:161
Flux.dispatch @ webflow-designer.min.47df4708fa.js:161
triggerAction @ webflow-designer.min.47df4708fa.js:103
handle @ webflow-designer.min.47df4708fa.js:103
(anonymous) @ webflow-designer.min.47df4708fa.js:103
value @ webflow-designer.min.47df4708fa.js:38
(anonymous) @ webflow-designer.min.47df4708fa.js:202
setTimeout (async)
RichTextInput.c.startEditingText @ webflow-designer.min.47df4708fa.js:202
RichTextInput.c.onMouseDown @ webflow-designer.min.47df4708fa.js:202
webflow-designer.min.47df4708fa.js:290 There was an error rendering the contentEditor subtree TypeError: Cannot read property 'rangeClientRect' of null
    at ContentEditorToolbarContainer.value (webflow-designer.min.47df4708fa.js:138)
    at ig (webflow-designer.min.47df4708fa.js:159)
    at hg (webflow-designer.min.47df4708fa.js:159)
    at pg (webflow-designer.min.47df4708fa.js:159)
    at Rg (webflow-designer.min.47df4708fa.js:159)
    at Sg (webflow-designer.min.47df4708fa.js:159)
    at Xg (webflow-designer.min.47df4708fa.js:159)
    at Yg (webflow-designer.min.47df4708fa.js:159)
    at If (webflow-designer.min.47df4708fa.js:159)
    at Object.enqueueSetState (webflow-designer.min.47df4708fa.js:160)
console.(anonymous function) @ webflow-designer.min.47df4708fa.js:290
value @ webflow-designer.min.47df4708fa.js:85
Eg.d.function.d.componentDidCatch.c.callback @ webflow-designer.min.47df4708fa.js:159
mf @ webflow-designer.min.47df4708fa.js:158
lf @ webflow-designer.min.47df4708fa.js:158
rh @ webflow-designer.min.47df4708fa.js:159
Xg @ webflow-designer.min.47df4708fa.js:159
Yg @ webflow-designer.min.47df4708fa.js:159
If @ webflow-designer.min.47df4708fa.js:159
enqueueSetState @ webflow-designer.min.47df4708fa.js:160
E.setState @ webflow-designer.min.47df4708fa.js:142
Container.c.onChange @ webflow-designer.min.47df4708fa.js:161
(anonymous) @ webflow-designer.min.47df4708fa.js:161
r @ webflow-designer.min.47df4708fa.js:161
s @ webflow-designer.min.47df4708fa.js:161
requestAnimationFrame (async)
(anonymous) @ webflow-designer.min.47df4708fa.js:161
(anonymous) @ webflow-designer.min.47df4708fa.js:161
Store.emitChange @ webflow-designer.min.47df4708fa.js:161
Flux.emitChange @ webflow-designer.min.47df4708fa.js:161
Flux.dispatch @ webflow-designer.min.47df4708fa.js:161
triggerAction @ webflow-designer.min.47df4708fa.js:103
handle @ webflow-designer.min.47df4708fa.js:103
(anonymous) @ webflow-designer.min.47df4708fa.js:103
value @ webflow-designer.min.47df4708fa.js:38
(anonymous) @ webflow-designer.min.47df4708fa.js:202
setTimeout (async)
RichTextInput.c.startEditingText @ webflow-designer.min.47df4708fa.js:202
RichTextInput.c.onMouseDown @ webflow-designer.min.47df4708fa.js:202
webflow-designer.min.47df4708fa.js:290 There was an error in the native ContentEditor render interface TypeError: Cannot read property 'addEventListener' of null
    at ContentEditor.value (webflow-designer.min.47df4708fa.js:124)
    at webflow-designer.min.47df4708fa.js:124
    at ContentEditor.componentDidUpdate (webflow-designer.min.47df4708fa.js:58)
    at rh (webflow-designer.min.47df4708fa.js:159)
    at Xg (webflow-designer.min.47df4708fa.js:159)
    at Yg (webflow-designer.min.47df4708fa.js:159)
    at If (webflow-designer.min.47df4708fa.js:159)
    at Object.enqueueSetState (webflow-designer.min.47df4708fa.js:160)
    at Container.E.setState (webflow-designer.min.47df4708fa.js:142)
    at Container.c.onChange (webflow-designer.min.47df4708fa.js:161)

Hi @Casey_Hancock,

Thank you so much for posting about this.

We were able to reproduce the behaviour on our end and the team is currently investigating the issue.

We’ll update this post as soon as we have more details.

Thanks in advance for your patience.

1 Like

Hi @Casey_Hancock,

Our team just finished a fix for this issue - it might take a few hours to fully deploy but It should be live before the end of the day today.

Would you be able to refresh the Designer, by pressing CMD+R on a Mac or CTRL+R on a PC and let us know if the issue is solved on your end?

Please let me know if this solves the problem - If not, I’m happy to help further!

Hi @Nita. It’s still a problem there. I you want to set a header tag to something, it’s set to all the text inside the field, not just the words you mark out.

As far as my specific issue using the rich text editor within the CMS editing context, the issue is now resolved. Thank you!

1 Like

@Sven_Erik_Slattedalet

you want to set a header tag to something, it’s set to all the text inside the field, not just the words you mark out.

This is expected behavior. The entire line will be changed into a heading, not just the selected word.

@Brando, that I know… but have a look at this video, and you understand better what I mean. It’s not just one line… it’s everyting inside the Rich text.
https://www.useloom.com/share/3a5c4395d80d49af93429f233c3b38fa

@Sven_Erik_Slattedale whoa! that’s definitely not expected :open_mouth:

I can’t seem to reproduce this over here
CloudApp

If that text was copy/pasted from somewhere else, it may be considered all one line paragraph still. Can you please share a Read-Only?

https://preview.webflow.com/preview/aktiv?utm_source=aktiv&preview=145e6e8e111c0ee840599d4127926463

Hi @Sven_Erik_Slattedale

Made a quick video here for you with a solution. :bowing_man:

2 Likes

Thank you SO much @Brando!!! That solved it for me. So happy for your help… I was starting to loose my hair over this… :smiley:

1 Like

I definitely understand — this was a frustrating one for sure. Happy to hear I could help! :smiley:

3 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.