Annotation Rendering

The annotated-text library supports different render types for annotations, allowing you to visually distinguish annotations using highlights, underlines, gutter markers, and custom renderers.

Overview

Annotation rendering lets you:

• Apply different visual styles to annotations (highlight, underline, gutter)
• Dynamically assign render types per annotation using a renderFn
• Use built-in renderers or create custom ones
• Register single or multiple renderers at once

Three built-in renderers are registered by default:

Renderer	Key	Description
HighlightAnnotationRender	highlight	Background highlight behind the text
UnderLineAnnotationRender	underline	Line beneath the text
GutterAnnotationRender	gutter	Marker in the gutter area

Example with default renderers

Configuration

Default Renderer

When no renderFn is provided, or when renderFn returns null or a key that does not match any registered renderer, the default renderer is used. By default this is highlight. Override it with setRenderParams:

createAnnotatedText(containerId)
  .setRenderParams({
    defaultRenderer: 'underline'
  })

Render Function

Use renderFn to choose a renderer per annotation. It receives the annotation and should return a registered renderer key, or null to fall back to the default:

createAnnotatedText(containerId)
  .setRenderParams({
    renderFn: (annotation) => annotation.target
  })

The function can contain any logic:

createAnnotatedText(containerId)
  .setRenderParams({
    renderFn: (annotation) => {
      if (annotation.type === 'entity') return 'highlight';
      if (annotation.type === 'relation') return 'underline';
      return 'gutter';
    }
  })

Registering Renderers

Single Renderer

import { createAnnotatedText, HighlightAnnotationRender } from "@ghentcdh/annotated-text";

createAnnotatedText(containerId)
  .registerRender(new HighlightAnnotationRender());

Multiple Renderers

import {
  createAnnotatedText,
  GutterAnnotationRender,
  UnderLineAnnotationRender,
} from "@ghentcdh/annotated-text";

createAnnotatedText(containerId)
  .registerRenders(
    new GutterAnnotationRender(),
    new UnderLineAnnotationRender(),
  );

Chaining

All methods return the instance, so calls can be chained:

createAnnotatedText(containerId)
  .registerRender(new HighlightAnnotationRender())
  .registerRenders(
    new GutterAnnotationRender(),
    new UnderLineAnnotationRender(),
  )
  .setText(text)
  .setAnnotations(annotations);

Full Example with defaults

Default display renderer (highlight)

Underline display renderer