search

flexion / ef-cms

An Electronic Filing / Case Management System.
24 stars 10 forks source link

Editing a draft Order causes formatting issue if the first paragraph in the Order is indented #10323

Closed ttlenard closed 3 months ago

ttlenard commented 8 months ago

Describe the Bug A clear and concise description of what the bug is. This was reported to us by a Court user. If you have an Order that has the first paragraph indented, and you edit the Order, when the generate screen is displayed, the first paragraph's indentation is no longer present, and the user has to tab the first sentence over again.

Note: This is a duplicate bug report copied over from #10264 which ended causing issues when copying/pasting from a Word document. See associated bug #10321. We will want to relook at this bug and be sure that copying/pasting from Word documents doesn't cause issues when we address this bug.

Business Impact/Reason for Severity low

In which environment did you see this bug? Prod, Test

Who were you logged in as? Court user

What were you doing when you discovered this bug? (Using the application, demoing, smoke tests, testing other functionality, etc.) Testing other functionality

To Reproduce Steps to reproduce the behavior:

  1. Log in as a Judge
  2. Navigate to a case
  3. Click on the Create button
  4. Select Order
  5. Begin drafting some text in the Order, making sure that the first paragraph is tabbed once so that it is indented.
  6. Save the draft
  7. Sign the Order
  8. Remove the signature
  9. Edit the Order
  10. Notice that the first paragraph is no longer indented, and you have to tab it so that the indentation is appropriate again.

Expected Behavior A clear and concise description of what you expected to happen. Formatting of text should not change if you edit an order

Actual Behavior A clear and concise description of what actually happened. The first paragraph indentation is getting removed when you edit an order.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Cause of Bug, If Known

Process for Logging a Bug:

Severity Definition:

Definition of Ready for Bugs(Created 10-4-21)

Definition used: A failure or flaw in the system which produces an incorrect or undesired result that deviates from the expected result or behavior. (Note: Expected results are use cases that have been documented in past user stories as acceptance criteria and test cases, and do not include strange behavior unrelated to use cases.)

The following criteria must be met in order for the development team to begin work on the bug.

The bug must:

Process: If the unexpected results are new use cases that have been identified, but not yet built, new acceptance criteria and test cases should be captured in a new user story and prioritized by the product owner.

If the Court is not able to reproduce the bug, add the “Unable to reproduce” tag. This will provide visibility into the type of support that may be needed by the Court. In the event that the Court cannot reproduce the bug, the Court will work with Flexion to communicate what type of troubleshooting help may be needed.

Definition of Done (Updated 4-14-21)

Product Owner

Engineering

Mwindo commented 4 months ago

Note: This seems to be an issue with quill. The richText going into TextEditor as defaultValue is correct, but editor.getText() removes the tab/space formatting next to html tags (like, in our case <p>). So we will likely need to handle this case in the TextEditor.

ttlenard commented 4 months ago

Please note that the critical bug that ultimately caused us to revert the original bug fix had to do with copying/pasting out of a word document. Here is a sample Order in a word document that we can use for testing.

Order 21070-21 v4 JB.docx

Mwindo commented 4 months ago

I have a minimal change in place that fixes only the initial tab of the text editor. After discussing with @ttlenard and finding a few other places where tabs are not preserved and probably should be, I've decided to investigate a little more.

Inspired vaguely by https://stackoverflow.com/questions/61861976/how-to-preserve-white-space-on-quill-js-while-maintaining-format-of-copy-paste, I think the following code in TextEditor.tsx might solve the issue more broadly (where customCssStyles is new):

            const converter = new QuillDeltaToHtmlConverter(fullDelta.ops, {
              customCssStyles: () => {
                return 'white-space: pre-wrap !important;';
              },
              inlineStyles: {
                size: inlineStylesFontSizes,
              },
            });
            const html = converter.convert();

That said, I want to proceed with caution. Any changes I make I will push to an experimental branch to confirm behavior is as expected.

EDIT: I have verified that pdf tests still pass and that this is not "the same" solution "under the hood" as the problematic fix in https://github.com/flexion/ef-cms/issues/10321.

Mwindo commented 3 months ago

Updates: I have changed the editor so that it should maintain both tabs and indentations across saving/reloading orders. @ttlenard has done some testing in experimental1 (thank you!).