Don't assume that diffs will have an appropriate child node

[turt2live]

Fixes element-hq/element-web#11497

This is a regression from react-sdk v1.5.0 where the diff feature was added in the first place. It only affects lists.

Note: lists look a bit weird after this change, but it seems like a better option than exploding.

[bwindels]

Thanks for looking into this! I'm not entirely sure what the science behind this fix is apart from "never end up with an undefined node" at all costs, which is fair enough. The core of the problem seems to be that the dom diff library gives weird (wrong) diff actions when inserting an DOM node in the tree (like adding an <li> to an <ul>).

I tried locally going from:

 - hello 

to

- hello - world 

which indeed reproduces the problem, and the diffing library gives some surprising diff actions:

Diff actions

[ { "action": "addTextElement", "route": [ 0, 0 ], "value": "\n" }, { "action": "addElement", "route": [ 0, 1 ], "element": { "nodeName": "LI", "attributes": {}, "childNodes": [ { "nodeName": "#text", "data": "hello" } ] } }, { "action": "modifyTextElement", "route": [ 0, 3, 0 ], "oldValue": "hello", "newValue": "world" } ]

The route [0, 3, 0] of the last modifyTextElement action seems wrong, as [0, 3] points to a text node with \n, so looking for child 0 won't work.

Aaaanyway, I don't think we want to spend more time on this, it's not a hugely important use case, and getting rid of the error is the main thing, albeit lists looking a bit off, so great to have a fix 👍👍

[turt2live]

Sorry, I definitely thought I included the investigative efforts I went through but for the record they were in fact what you found. Apologies for sending you down that road :s