Markdown block is being removed on Edit

[vikasrohit]

Expected behavior

Should not remove the user content.

Actual behavior

It is removing the user content written in the markdown block in a bulleted list.

Steps to reproduce the problem

• Go to https://connect.topcoder-dev.com/projects/8353/messages/34540
• Try to edit the post
• Observe that the content Some text which goes away mysteriously is gone in the edit window (Please don't hit save, otherwise you will loose the content)

Screenshot/screencast

--

Environment

• OS: Any
• Browser (w/version): Any
• User role (client, copilot or manager): Any
• Account used: N/A

[vikasrohit]

fyi @lakshmiathreya

[maxceem]

@vikasrohit I've found one more case in which the first line disappears instead of the second line. And also how to easily reproduce this issue by creating new posts, see demo video https://monosnap.com/file/6OIfYorGVB1Ofm7tzmRWnH7cwTTB6X

[maxceem]

Looks like our Markdown renderer works slightly different from GitHub. On GitHub, to make the second line to be shown as a code we have to add an extra line after the first line, see examples bellow:

Test 1:

• First line starts with dash and after press Enter
  Second line starts with 6 spaces

Test 2:

• First line starts with dash and after press Enter
  Second line starts with 2 spaces

Test 3:

• First line starts with dash and after press Enter TWICE

  Second line starts with 6 spaces
  

[maxceem]

Another way to reproduce the issues is to create a blockquote and add a code block inside:

>     This text starts from 5 spaces

It would be "viewed" as:

but during editing the inner "code" block would disappear:

General issue

The general issue here is that using Markdown markup we can create situations where we would have one block element to be nested into another block element. But WYSIWYG editor doesn't support nested block elements.

Block elements are:

• paragraph
• list items (ordered and unordered)
• code blocks
• blockquotes

So any nested combinations of such blocks would create issues.

[maxceem]

@vikasrohit at the moment we've got a winning submission from the F2F challenge which achieved the next behavior: https://monosnap.com/file/itdkwJbdLHeOl2jPULqK1m5xdZrzP6.

The main disadvantage of this fix, is that existent and new posts are still being created as if "code" is placed inside the list item, while during editing it is shown "outside" on list item. Also, after editing it stays outside.
If you wish, I can try to ask if it's possible to improve this solution and show the "code" block outside of list items from the beginning.

Another alternative solution proposed by the member is the next one:

When code block is nested can we just show that code block as normal text with six spaces in the begining, this will be more consistent and will work same even after editing. For other cases when code is not nested, in edit mode this will be shown similar to view mode.

So the proposition is the next, when we initially created a "code" block we added additional 4 spaces and that's all, initially "code" block didn't look like a code. So what we can do is during editing to show nested "code" blocks not via "code" style, but show it as a regular text with spaces at the beginning aka in Markdown format.

[maxceem]

Here is PR with the winner submission #3469.
And a branch with the potential hotfix https://github.com/appirio-tech/connect-app/tree/hotfix/nested-blocks-in-draftjs

[vikasrohit]

@maxceem in the last few seconds of the video, I can see it is still removing the the second line when you edited the newly created post.
I am okay with the other behavior where it is moving the nested block out of the parent block after editing. Interesting would be to see how it behaves after second edit.

So the proposition is the next, when we initially created a "code" block we added additional 4 spaces and that's all, initially "code" block didn't look like a code. So what we can do is during editing to show nested "code" blocks not via "code" style, but show it as a regular text with spaces at the beginning aka in Markdown format.

I am not understanding it 100% but I think I am okay with it. I am good with always showing the nested blocks as plain text as long as it keeps the spacing intact because user would need someway to distinguish between the parent and nested blocks. I need to see the behavior live in order to approve this.

[maxceem]

in the last few seconds of the video, I can see it is still removing the second line when you edited the newly created post.

I've noticed that, though I couldn't reproduce that issue. I've tried to create several posts in different ways, but it works well.

Here is a more full demo video, including doing the second edit https://monosnap.com/file/nmPfWMDUNluY82pRPhE3o7hUMVxhfa

[maxceem]

I am not understanding it 100% but I think I am okay with it. I am good with always showing the nested blocks as plain text as long as it keeps the spacing intact because user would need someway to distinguish between the parent and nested blocks. I need to see the behavior live in order to approve this.

If you would like to, I can ask the winner to create another solution as a private task. The benefit of such an approach that it would be always consistent and feels less prone to issues. Though visually, it might be confusing keeping some styles while fallback some other styles to Markdown during editing. In the current fix the benefit is, that for cases with list items, we keep styles very close to initial ones. But we have situations, where we cannot show styles during editing, like with blockquotes https://monosnap.com/file/dqBTU7AEiHsVLTjyJj7LX5DY4QwfwG.

If the current approach is good enough then we can use it for now.

[vikasrohit]

I am good with the current approach. However, I think it does not harm to have the winner creating PR for the other way as well, even if we don't use that. It might help us in understanding the limitations and value the current situations more after we see the other fix.
I will merge the hotfix into dev to test out the current approach. If everything looks good, I would ask the product manager tomorrow if we should make a hotfix for it or not.

[vikasrohit]

@lakshmiathreya we are applying a fix in the dev env for this issue. We would like to test it before making a hotfix to the production because the changes involved may cause regression (although we didn't found any during the challenge review) in the way we are rendering the markdown in the messages. It would be great if you can also have a look at the issue and help us in validating its fix. I am also forwarding you the original issue reported by the user.

[vikasrohit]

@maxceem @lakshmiathreya solutions seems to be working fine for me in dev environment, I am good with production move for this. We can plan moving this to production as hotfix.

[maxceem]

@vikasrohit let me know if you would like to me to create a hotfix PR for PROD.

We've got an alternative solution to keep the inner block formatting as markdown text, described in this comment #3456 (comment).

You may have a look on the demo video https://monosnap.com/file/LHOCqY0zzVNbGFXiKDd0kbXP4KJ6eN.

The PR for this solution is here #3480