Improve renderperformance

[mrdrogdrog]

Description If you add a new paragraph to any markdown content, then too many html nodes will be updated.

To Reproduce

1. Create a markdown note with 3 paragraphs.
2. Add a new paragraph in the markdown before the existing
3. All paragraphs in the html will be updated.

Expected behavior A new html node will be inserted

Additional context This also causes, that special components like videos will be reseted to the "click to load" state and images will be reloaded.

[mrdrogdrog]

Every child in react, that you create dynamically needs to have a key. React uses this key to identify the old instances of react components and connect them to the current virtual dom elements. Our HTML2React-Converter uses the index of elements in the children array as key. If you add a new element before, then all keys are shifted and all html elements will be altered. If we use a permanent key like the timestamp when the element was created, then this issue should be solved

[mrdrogdrog]

My current attempt is to give every line in a markdown text an identifier. With every rendering I compare the current markdown with the last markdown and identify changed lines. Changed lines get new identifiers. These identifiers are glued to the rendered html via attributes and can be used as react keys. This should cause a rerendering of only the changed lines.

[mrdrogdrog]

The old codimd code used a similar method, but kept the old html dom and compared the html content... I think my method is more efficient.