Paragraphs re-work

[jmartinesp]

What?

The progression of the decisions around line breaks are as follow:

1. In the beginning we used <br /> tags to represent new lines as most of our nodes were inline ones and it seemed like the simplest solution at the time.
2. Since the introduction of lists, we realised that we’d have to add some extra offsets to represent intermediate positions between list items and before/after the list: to do that we started using zero-width spaces (ZWSP) characters to try to delimit that position and add an extra offset.
3. This however, led to some issues with mapping indexes on Android/iOS, and also increased complexity quite a bit since we now had to check for special characters inside the different text nodes.
4. Since using ZWSP characters was really complex, we tried using a ‘ZWSP node’ instead, which simplified some checks. This however, didn’t fix all issues with index mappings and we realised that we had add ZWSP to both the block nodes/lists and another one after it, which had its own issues (parsing, finding the right adjacent nodes when a ZWSP was present…).

None of these solutions actually worked, so we proposed a new approach: use paragraphs along with other block nodes instead of line breaks, remove the ZWSPs altogether from the codebase and add extra offsets where needed.

Steps:

1. Replace line breaks with actual <p> tags as much as possible.
2. Try to remove all traces of ZWSP nodes/chars in our codebase.
3. Add an extra offset to the cursor position at the end of block nodes when they have a next sibling:

"Foo <pre>bar</pre>" // Doesn't need to add an extra offset at the end since there is no next sibling
"<pre>Foo</pre> bar" // Needs to add an extra offset there, as visually there will be a new line after the <pre> tag

// So, this cursor position is 3
"<pre>Foo|</pre> bar"
// And this one is 4
"<pre>Foo</pre>| bar"

This also has the extra benefit that we’ll always use inline nodes (formatting, links, text, etc.) with inline nodes and block nodes with block nodes (paragraphs, blockquotes, pre, lists), making it easier to make them work together.

Why?

// Say we have a list like this:
<ul><li>A</li><li>B</li></ul>

// This cursor position
<ul><li>A|</li><li>B</li></ul>
// And this one
<ul><li>A</li><li>|B</li></ul>
 
// Are technically the same (1)

// The same happens to
<pre>Code|</pre>Text
// And
<pre>Code</pre>|Text

So we need a way to differentiate them.

Work to do:

• Add paragraph block nodes.
• Use paragraphs instead of line break nodes as much as possible.
• Update the way selection is read and written in the tests and find_pos.
• Fix code blocks.
• Fix quotes.
• Fix lists.
• Fix indentation.
• Make sure a container node only has either inline nodes or block nodes inside.
• Fix selection mis-matches in some corner cases.
• Fix backspacing.
• Remove ZWSP nodes.

[jmartinesp]

Status update of this task:

• 41 failing tests (only 😅 ).
• Quotes and code blocks now share code for creating new lines, and most of the code in their 'add' and 'remove' methods is actually the same. We might be able to also share that code if we pass some lambdas/functions to generate the new nodes and process the children.
• Lists are mostly working too, only indentation is failing, but that's because there is a selection mismatch happening when we turn <li>Outer<br/>Inner</li> into <li>Outer<ul><li>Inner</li></ul>, the line break is lost there. A solution would be to turn it into <li><p>Outer</p><ul><li>Inner</li></ul> instead.

Next steps:

• Fix those indentation issues, that is, create a function to wrap existing inline nodes in a list item into a paragraph.
• Fix backspacing, I'll probably need to implement some new algorithm to merge the contents of 2 block nodes when backspacing between them.

[sonarqubecloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

0.0% Coverage
18.0% Duplication