Merge pull request #143 from oleksandr-danylchenko/#142-span-ordered-…

…highlights-rendering

#142 [`SPANS`] Added highlights sorting for the renderer

packages/text-annotator/src/highlight/span/spansRenderer.ts

@@ -56,7 +56,20 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     if (shouldRedraw)
       highlightLayer.innerHTML = '';
 
-    highlights.forEach(highlight => {
+    /**
+     * Highlights rendering in the span highlight layer is an order-sensitive operation.
+     * The later the highlight is rendered, the higher it will be in the visual stack.
+     *
+     * By default, we should expect that the newer highlight
+     * will be rendered over the older one
+     */
+    const highlightsByCreation = [...highlights].sort((highlightA, highlightB) => {
+      const { annotation: { target: { created: createdA } } } = highlightA;
+      const { annotation: { target: { created: createdB } } } = highlightB;
+      return createdA.getTime() - createdB.getTime();
+    });
+
+    highlightsByCreation.forEach(highlight => {
       highlight.rects.map(rect => {
         const zIndex = computeZIndex(rect, highlights);
         const style = paint(highlight, viewportBounds, currentStyle, painter, zIndex);