Improve render performance (#511)

Massive improvement of render performance by:
- replacing the codimd-line-marker with an in-memory map
- an observation of the changed markdown code to identify changed lines
- a unique react-key calculation

src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx

@@ -4,17 +4,17 @@ import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
 import { ComponentReplacer } from '../ComponentReplacer'
 import { AsciinemaFrame } from './asciinema-frame'
 
-export class AsciinemaReplacer implements ComponentReplacer {
+export class AsciinemaReplacer extends ComponentReplacer {
   private counterMap: Map<string, number> = new Map<string, number>()
 
-  getReplacement (node: DomElement): React.ReactElement | undefined {
+  public getReplacement (node: DomElement, index: number): React.ReactElement | undefined {
     const attributes = getAttributesFromCodiMdTag(node, 'asciinema')
     if (attributes && attributes.id) {
       const asciinemaId = attributes.id
       const count = (this.counterMap.get(asciinemaId) || 0) + 1
       this.counterMap.set(asciinemaId, count)
       return (
-        <AsciinemaFrame key={`asciinema_${asciinemaId}_${count}`} id={asciinemaId}/>
+        <AsciinemaFrame key={index} id={asciinemaId}/>
       )
     }
   }