[Bug]-[600]:RichTextEditor not loading at start

[lublak]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

Currently i have a RichTextEditor.
The "default text" is filled by a database.
In widget edit mode (where you can place the appsmith widgets) it works fine.
Now I deploy the app and open it it does not work. The editor remains empty.
If I change the page in the same app via the navigation bar of Appsmith and change back again it works.
It can be a disaster if the editor is empty and when changing the data then the current data is completely deleted from the database (onChange).

Steps To Reproduce

1. Place a RichTextEditor Widget
2. Use a database query (postgres) {{RichTextData.data[0].data}} (SELECT data FROM RichTextData;)
3. Deploy
4. Open the deployed app

Environment

Release

Version

Self-Hosted

[Nikhil-Nandagopal]

@lublak it seems to be working for me. Can you share an app that reproduces this issue?

[lublak]

@Nikhil-Nandagopal yes i can. (But i removed the password from the datasource)
IntranetMenu.zip

[lublak]

{{MenuData.data[0].data}} is undefined for the first start.
I added just replaced it with {{MenuData.data[0].data}}test so a i can see in deployed editor: undefined

[Nikhil-Nandagopal]

@lublak can you reproduce this with our users db? I tried replacing your query with fetch users and was able to get it to work

[lublak]

I found the issue @Nikhil-Nandagopal
The iis reverse proxy has blocked the websocket connection.

Interesting then only that appsmith itself continues to run. It would be more practical to lock the entire app in case of a failed connection in order to avoid erroneous data in case of a faulty connection.

[lublak]

But after releasing the websocket there is another problem.
What is also problematic here is the delay.
The user can already enter data. The data arrives delayed and is then inserted in the editor.
And sometimes it doesn't load at all.
So relatively unstable.
Example F5: Works mostly fine, sometimes a littlebit delayed
Example CRTL+F5: Increased: No loading of data. Or rather rarely delayed.

[Nikhil-Nandagopal]

@lublak what you can do here is disable the RTE if the Query is in a loading state to prevent user inputs till the query returns

[lublak]

@Nikhil-Nandagopal just for a info i can reproduce the issue of non loading data also at your app.appsmith site:
https://app.appsmith.com/applications/6225c53e45ea27345b4970f2/pages/6225c53e45ea27345b4970f5
Ctrl+F5 breaks the application.

[lublak]

disable the RTE

The thing about protecting because of the delay is a good thing. But unfortunately does not fix the problem that sometimes it is not loaded at all
Tested with: Firefox Edge (Edge you only need F5 to break the application, switching pages works)

[lublak]

@Nikhil-Nandagopal
Just a small thought, maybe sometimes the editor was not initialized yet. Possibly by the browser cache it is sometimes initialized faster before the data are there.
The data is sometimes faster and sometimes slower.

editor.on('init', function (e) {
  editor.setContent(content);
});

Alternatively, the html can be set directly in the textarea before the editor is created:
https://www.tiny.cloud/docs/demo/basic-example/

[Nikhil-Nandagopal]

@lublak we're now able to reproduce the issue.
You need to open this on Safari and you will be able to see it. To reproduce it, we need to kill the safari desktop app and re-open it

[dilippitchika]

Adding an app where this can be reproduced, please check the app in safari
RTEissue.json.zip

[dilippitchika]

@lublak can you check and let us know if this is happening?

[lublak]

@dilippitchika For me the error still occurs: https://app.appsmith.com/applications/6225c53e45ea27345b4970f2/pages/6225c53e45ea27345b4970f5

What I notice is that undo is not set when it remains empty and undo is set when the content is successfully loaded.

I have the feeling that setContent is not called. Unfortunately I don't know how cypress is called (setTinyMceContent).

https://github.com/appsmithorg/appsmith/blob/release/app/client/cypress/support/commands.js#L2907

[Nikhil-Nandagopal]

I can reproduce this on prod as well

[dilippitchika]

@vivekverma2312 need some help here, we are able to reproduce this in safari in macbooks but the user reported that this is happening in firefox in a different OS.

Can we ask someone to check this across browsers and OS and help us with a report before we start triaging this?

[vivekverma2312]

@Tooluloope Able to repro the issue on Windows (Chrome & Firefox)
The data is not populating on RTE after deployment. If we change the page in view mode then the data starts populating.
https://loom.com/share/50bcab3eacc84aefb7711d3621ca6dbc

[dilippitchika]

@vivekverma2312 is this happening anywhere else in mac? Or we only checked windows?

@somangshu whom can we assign this to? I believe this is clearly reproducible in windows machines.

[somangshu]

This is happening on windows and as said above and also on safari on mac. @techbhavin please triage to identify the problem here

[dilippitchika]

Stats

Stat	Values
Reach	150
Effort (months)	0.5

[dilippitchika]

Above estimate is just to rank better, not a real estimate yet