search

invoiceninja / ui

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

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

Open unguzov opened 4 months ago

unguzov commented 4 months 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 4 months 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 4 months 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 4 months 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 4 months 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 4 months 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...

itkfm commented 3 months ago

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

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

itkfm commented 3 months ago

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

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