search

invoiceninja / ui

Invoice Ninja: Web admin portal built with React
https://app.invoicing.co
Other
52 stars 46 forks source link

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

Open unguzov opened 3 weeks ago

unguzov commented 3 weeks ago

Setup

Interface

Checklist

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

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 commented 2 weeks ago

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...