How does the rich content editor handle line spacing?

[KellenBrosnahan]

I'm having trouble understanding how the Canvas text editor decides how to handle line spacing. The attached screenshots show an example. One renders a larger gap between two bullet points, while the other doesn't.

My experience in this and other cases seems to suggest that the text editor has some kind of internal state that it uses to make these decisions. For example, I've experienced that adding two blank lines and deleting two other blank lines in the same block doesn't necessarily get back the original spacing. I apologize for the lack of reprex; I don't know how it works well enough to get it to happen consistently.

My questions are as follows:

1. Is there a way to manually specify line spacing (in a manner similar to Google Docs)?

2. Is there a place where I can find documentation for the content editor to get a better sense of how it makes these decisions?

PS. In this particular instance, the HTML code suggests that the issue comes from how the list environments were grouped into blocks. 

[james_whalley]

@KellenBrosnahan Do you happen to be pasting this content in from another source? That can sometimes bring in formatting from the source document that gets handled weird in the RCE. If you use the feature Paste and Match Style, it will bring the content over, but match the existing style of the Canvas page. I bet that you can see this visual difference by opening the html mode of the Canvas item.

While there is not a button for line spacing in the RCE, you can alter it via the html.

[bwsf]

Your note about the HTML seems to have the solution. These are two separate lists that are next to each other. Presumably the extra space is there from Canvas' style putting automatic padding around lists or between different elements.

Reproducible examples and explanation

Reproducible example using only the RCE:

1. Create a list.
2. Between list items, insert a blank line that is not in the list (e.g. by pressing enter twice after a list item).
3. On that line, go to Format > Formats > Blocks > Div. This appears in the RCE as a blank line between two separate lists.
4. Press save or switch to HTML. Canvas gets rid of the empty div block (it doesn't show up in the code) and also gets rid of the extra line.

Canvas is tidying up: we generally don't want unused tags hanging around. What results is that the two separate lists are now right next to each other with nothing in between. 

Normally when the user deletes a line between two separate lists of the same type, the RCE automatically merges the two lists. However, when the line is removed through code tidying, the lists stay separate. Charitably, this could be a feature, not a bug, so that people can (for some reason) have separate but adjacent lists.

From James Whalley's suggestion, perhaps if something was cut and pasted from another source, that source included some extra, unused HTML tags that Canvas tidied up in this way.

We can also reproduce this problem in the RCE alone by adding and deleting a table:

1. Create a list.
2. Insert a blank line between list items.
3. With your cursor on that blank line, insert a table. Now delete the table.

Again, the intervening code disappeared but Canvas didn't combine the lists on either side of it.

Fix

1. Select all the lines in the affected lists.
2. Click "Ordered and Unordered Lists" in the editor's toolbar. This should remove existing lists. 
3. Now click "Ordered and Unordered Lists" again to create a new list.

If you have nested lists or multiple levels, there's some more pain in doing this and recreating those features. In that case, if you feel comfortable editing the HTML, then editing out the extra </ul><ul> tag pairs (or </ol></ol>) would be easier.