@beinformed/annotation-editor

Be Informed annotation editor

The annotation editor is a comprehensive document viewer and annotation tool designed to handle large text documents with rich interactive capabilities. The editor features a three-panel layout consisting of a collapsible table of contents, the main document text area, and an annotation gutter/minimap for navigation.

Users can select text fragments and apply various types of annotations with different visual representations (highlights, markers, etc.). The system supports overlapping annotations that remain visually distinguishable and manageable. Annotations can be added, edited, deleted, and filtered by type, with the ability to link tickets or external references to specific annotations.

The table of contents automatically generates from document sections with titles, labels, or numbers, supporting nested hierarchies that can be expanded or collapsed. Sections can be navigated by clicking in the table of contents or accessed externally via direct linking. The annotation gutter provides a minimap view of all annotations with clickable navigation to jump between them.

The editor maintains accessibility standards with full keyboard navigation support, proper contrast ratios, and responsive design for different screen sizes. Visual feedback is provided for all user interactions, and large documents display progress indicators during loading. The system uses a standardized format for sources and annotations to ensure data consistency and interoperability.

Key interaction patterns include text selection with contextual actions, clickable marked elements for quick access, and seamless navigation between document sections with synchronized table of contents highlighting.