Models using legacy (editorjs) rich text fields do not populate in Webiny UI

[cscarbrough]

Version

5.40.5

Operating System

MacOS

Browser

Chrome

What are the steps to reproduce this bug?

1. Create a model using the legacy editorjs text input (unsure if possible to do this - ours was created by migrating our model from an older version of Webiny)
2. Attempt to create a new entry in the model, making sure to enter data in the rich text field.
3. Save the entry, and optionally publish.
4. Refresh the page.
5. Observe that the rich text field is now empty, containing only the "Click here to type" placeholder text.

See the attached video for an example. In the video, I pasted the contents of the rich text field, but this occurs when typing as well.

Screen.Recording.2024-09-05.at.3.11.16.PM.mov

What is the expected behavior?

The field's data should appear in the editing text box as it was when it was saved prior.

What do you see instead?

After refreshing the page or navigating to the entry at a later time, the rich text field no longer has data in it and instead contains the placeholder text "Click here to type"

Screen.Recording.2024-09-05.at.3.11.16.PM.mov

Additional information

• Changing our rich text fields to use the new lexical editor is impractical at this time, as the output of these fields change structure. This would require us to make changes to our production mobile app and do additional work to convert older entries to ensure backwards compatibility. These changes would take weeks and need to be worked into our roadmap.
• The data does get returned via GraphQL queries, so it appears it is being saved without issue.
• I'm happy to attempt fixing this bug myself as I can imagine usage of these legacy editors is relatively low and it looks to be unsupported moving forward, but some assistance finding the location of the potential changes would be vital.

Possible solution

No response

[Pavel910]

@cscarbrough would you mind sending over your model export, so we can import your exact model and test? If you don't want to post it here on Github, send it over a DM on our Slack. In newer versiosn of Webiny, you can't even create a model field with that editor, so we need your export to reproduce. Thanks!

[cscarbrough]

Here's a representative sample model!
webiny-samplemodel.json

[Pavel910]

@cscarbrough Not sure what's going on there, but I'm unable to reproduce it with your sample model. Here's a video from my system 🤔

CleanShot.2024-09-10.at.08.47.39.mp4

[cscarbrough]

This is interesting, we haven't altered any of the code in our environment so we should be operating on the same codebase. Would someone be able to point me to the code that does the updating of the UI and I can investigate on my end?

[Pavel910]

@cscarbrough From the CMS UI perspective, that field is rendered using this field renderer. This renderer is dedicated to the legacy editor.js.

To simplify your debugging, you can create a copy of that renderer, and give it the same plugin name ("cms-editor-field-renderer-rich-text"), which will overwrite the built-in plugin. You can, for example, register your plugin here in your project.

[cscarbrough]

We're preparing for a few big launches so I haven't been able to dig into the code yet, but here's another sample model that's hopefully more helpful. This one was created in a Webiny 5.15.0 instance of the Headless CMS and exported using the code in this repo. We originally went through this process to populate the updated version of our CMS, so it's as representative as it'll get from our workflow.

exported-models.json