Public Editor Fe

Public Editor

Our client "Public Editor" is on a mission to fight missinformation in the digital space. For this they needed a reliable and swift annotation system for their webapp.

Project Overview

React was our framework of choice because of its

Component-Based Architecture
Flexibility

It was also being used in the client's existing codebase.

Challenges

Allow users to dynamically highlight text based on real-time interactions.

Automatically discern and resolve annotated markers based on the type of annotation.

Display analytics in the form of charts.

Challenges Unearthed

1 . Highlighting Edge Cases

Text highlighting sounds straightforward until you dive deep into its intricacies.

2 . Too many Re-renders

Every unnecessary re-render would mean potential lags and stutters – anathema for a real-time system.

3 . Multiple Annotation Dilemma

When a piece of text carries multiple annotations, a new challenge emerges: determining which annotation marker to prioritize and resolve first.

Overlap: When two annotations exist in the same region.
SuperMarker: An annotation that entirely contains another annotation.
Nesting: The concept of placing one annotation within another.

Adaptive Highlighting

We crafted a sophisticated algorithm capable of handling diverse text highlighting scenarios.

The Algorithm:

We utilize RxJS observables to adeptly track real-time interactions with .marker eleme`nts, representing text annotations.
By leveraging subjects like activeMarkerAction$ and activeLegendAction$, the system maintains a live list of hovered markers and ensures responsive behavior for outside clicks and document visibility changes.
The getNodeTypes function enriches the setup by dynamically forming a node type tree from DOM elements, facilitating intelligent annotation.

Annotation Priority Logic

The primary goal is to handle cases where multiple annotations might overlap or be nested within each other. This ensures an intuitive user feedback loop.

The Algorithm:

A custom array-like structure to manage annotations, often referred to as markers.
It applies special considerations for overlaps, nesting, and relationships between the markers and resolves them accordingly.

How to Craft a Real-Time Annotation System with React & RxJs

Public Editor

Challenges

Let's start building a great product together!