React app: New lines not preserved in Terms/Footer/Notes when switch between Flutter and React

[unguzov]

Setup

• Version: v5.9.4-C160
• Environment: selfhost

Interface

• Flutter: []
• React: []
• Both: [X]

Checklist

• Can you replicate the issue on our v5 demo site https://demo.invoiceninja.com or https://react.invoicing.co/demo?
• YES
• Have you searched existing issues?
• YES
• Have you reported this to Slack/forum before posting?
• YES
• Have you inspected the logs in storage/logs/laravel.log for any errors?
• N/A

Describe the bug

There is a problem with the new lines in Terms/Footer/Notes fields when switch from Flutter to React.

Steps To Reproduce

Bug can be reproduced in demo instances.

In Flutter, quote - terms/footer/notes write and save:

L1
L2
L3
L4

Result In React for the same quote and fields (after hard refresh, just in case):

L1 L2 L3 L4

Save again the same quote in React (do not add new lines or change anything), then go to Flutter and refresh all. The result is:
<p>L1 L2 L3 L4</p>

Option “Enable Markdown” ON or OFF give the same results.

Expected Behavior

New lines used in Flutter must be preserved in React and vice versa. The new lines works just fine in product descriptions for example.

[turbo124]

The react application using a wysiwyg editor which wraps all content in at least a P tag. The flutter application does not have a wysiwyg editor and stores in plain text.

This is a compatibility issue, but i'm not sure there is an actual solution on this one.

[unguzov]

This is big issue, because it prevents switching to React (as yellow bar suggests in latest versions). All existing records with new lines for footer, terms, notes, etc. will be smashed in one line.

I understand that going back to Flutter can introduce compatibility issues and that's fine. But going forward to React at this moment will mess up all existing footers and notes and that will cause troubles.

Maybe when reading from React these fields, the new lines can be converted to <br> tags? This will preserve new lines on existing records for React and will work fine. This will also introduce HTML markup back in Flutter, but this will not be a problem if someone do not want to switch back to Flutter.

[turbo124]

@beganovich for consideration... Flutter does not add any markup to these sections. so when users move to react, any line breaks are lost.

thoughts on ways to gracefully handle this with TinyMCE and/or pre/post processing?

[beganovich]

I think we can try to "guess" HTML by wrapping every line in p and swapping \n with br.

It should help going forward, but would definitely break if you go back to Flutter and see bunch of p tags and breaks.

[LarsK1]

Hi,
this will cause even bigger problemes - when using the React web app and the mobile app or the desktop app the problem get's even worse, since they will exists after Flutter Web is deprecated...

[itkfm]

I don’t want to add much noise to this issue but I feel like I should mention that the current behavior breaks horribly with lists that have no list character In the React UI the list is now one long sausage of text It’s neither fun the read when there’s is a list character but in that case its mildly better.

[itkfm]

Couldn’t you wrap the plain text in a <pre> … </pre> pair?

[itkfm]

I also terribly miss the option insert empty lines through <br/><br/>.
Empty lines created in tiny end up collapsed in the HTML/PDF rendering. (Like a line-break.)

[turbo124]

Disabling enable markdown definitely works for me with this. it then allows the linebreaks to appear as expected.