Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lists change style when edited #23507

Closed
Arnei opened this issue Oct 17, 2022 · 2 comments
Closed

Lists change style when edited #23507

Arnei opened this issue Oct 17, 2022 · 2 comments
Labels
A-Composer O-Occasional Affects or can be seen by some users regularly or most users rarely S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect

Comments

@Arnei
Copy link

Arnei commented Oct 17, 2022

Steps to reproduce

  1. In a room, create a chat message with the following properties:
    i. At least one line of text.
    ii. A list of items with at least one item in a sublist
  2. Edit the message slightly. For example, add or delete a character.
  3. Watch all list elements gain additional padding
  4. Edit the message sligtly again.
  5. Watch all list elements lose the additional padding.
  6. Repeat

A screencap of what it looks like:
Screencast.webm

It seems that editing a message like the one described above results in all the list items text being wrapped in <p></p> tags. These then receive a margin from the markdown-body style, adding space between the list elements. Curiously, this does not happen if the list does not contain any sublist or if the list is the only part of the message.

Potentially related part of the code: https://github.com/matrix-org/matrix-react-sdk/blob/631720b21b9260bd05478e92034f8b9c46be342b/src/Markdown.ts#L282

Outcome

What did you expect?

For list style to be consist across edits.

What happened instead?

List gained/lost padding after edits.

Operating system

Fedora 35

Browser information

Firefox 102.0.2

URL for webapp

develop from a couple days ago

Application version

Version von Element: !!UNSET!! Version von Olm: 3.2.12

Homeserver

No response

Will you send logs?

No

@Arnei Arnei added the T-Defect label Oct 17, 2022
@t3chguy
Copy link
Member

t3chguy commented Oct 17, 2022

Related #22863

Arnei added a commit to Arnei/matrix-react-sdk that referenced this issue Oct 17, 2022
Under certain circumstances (see issue linked below), the content of list elements are wrapped in paragraph tags, resulting in unintentional styling. This PR provides a workaround by not allowing nodes in a "list" to get wrapped in paragraph tags.

To be honest, I doubt this is the optimal solution. But it is at least a solution that can hopefully prove at least as a starting point on how to resolve the accompanying issue.

Resolves: element-hq/element-web#23507

Signed-off-by: Arne Wilken arnepokemon@yahoo.de
@dbkr dbkr added S-Minor Impairs non-critical functionality or suitable workarounds exist A-Composer O-Occasional Affects or can be seen by some users regularly or most users rarely labels Oct 18, 2022
@t3chguy
Copy link
Member

t3chguy commented Nov 2, 2022

Duplicate of #10725

@t3chguy t3chguy marked this as a duplicate of #10725 Nov 2, 2022
@t3chguy t3chguy closed this as completed Nov 2, 2022
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Composer O-Occasional Affects or can be seen by some users regularly or most users rarely S-Minor Impairs non-critical functionality or suitable workarounds exist T-Defect
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants