Skip to main content

extension-annotation

package @remirror/extension-annotation

class AnnotationExtension

This extension allows to annotate the content in your editor.

Extend the Annotation interface to store application specific information like tags or color.

Signature:

export declare class AnnotationExtension<Type extends Annotation = Annotation> extends PlainExtension<AnnotationOptions<Type>> 

Extends: PlainExtension<AnnotationOptions<Type>>

(Some inherited members may not be shown because they are not represented in the documentation.)

property name

Signature:

get name(): "annotation";

method addAnnotation

Adds an annotation spanning the currently selected content.

In order to use this command make sure you have the [[AnnotationExtension]] added to your editor.

Signature:

addAnnotation(annotationData: OmitTextAndPosition<Type>): CommandFunction;

Parameters:

ParameterTypeDescription
annotationDataOmitTextAndPosition<Type>the data for the provided annotation.

Returns:

CommandFunction

method createPlugin

Create the custom code block plugin which handles the delete key amongst other things.

Signature:

createPlugin(): CreateExtensionPlugin<AnnotationState<Type>>;

Returns:

CreateExtensionPlugin<AnnotationState<Type>>

method getAnnotations

Signature:

getAnnotations(): Helper<Type[]>;

Returns:

Helper<Type[]>

all annotations in the editor.

In order to use this helper make sure you have the [[AnnotationExtension]] added to your editor.

method getAnnotationsAt

Signature:

getAnnotationsAt(pos?: PrimitiveSelection, includeEdges?: boolean): Helper<Type[]>;

Parameters:

ParameterTypeDescription
posPrimitiveSelection(Optional) the position in the root document to find annotations.
includeEdgesboolean(Optional) whether to match annotations that start or end exactly on the given pos

Returns:

Helper<Type[]>

all annotations at a specific position in the editor.

In order to use this helper make sure you have the [[AnnotationExtension]] added to your editor.

method onSetOptions

Signature:

protected onSetOptions(props: OnSetOptionsProps<AnnotationOptions<Type>>): void;

Parameters:

ParameterTypeDescription
propsOnSetOptionsProps<AnnotationOptions<Type>>

Returns:

void

method redrawAnnotations

Forcefully redraws the annotations

Call this function if the styling of the annotations changes.

Signature:

redrawAnnotations(): CommandFunction;

Returns:

CommandFunction

method removeAnnotations

Removes a list of annotations.

In order to use this command make sure you have the [[AnnotationExtension]] added to your editor.

Signature:

removeAnnotations(annotationIds: string[]): CommandFunction;

Parameters:

ParameterTypeDescription
annotationIdsstring[]the ids of the annotations to be removed.

Returns:

CommandFunction

method selectionHasAnnotation

Signature:

selectionHasAnnotation(pos?: PrimitiveSelection): Helper<boolean>;

Parameters:

ParameterTypeDescription
posPrimitiveSelection(Optional) the optional selection to check for, if left undefined it default to the current selection

Returns:

Helper<boolean>

true if the selection includes an annotation or is included within an annotation.

In order to use this helper make sure you have the [[AnnotationExtension]] added to your editor.

method setAnnotations

Sets the annotation. Use this to initialize the extension based on loaded data.

In order to use this command make sure you have the [[AnnotationExtension]] added to your editor.

Signature:

setAnnotations(annotations: Array<OmitText<Type>>): CommandFunction;

Parameters:

ParameterTypeDescription
annotationsArray<OmitText<Type>>the initial annotation to be set.

Returns:

CommandFunction

method updateAnnotation

Updates an existing annotation with a new value.

In order to use this command make sure you have the [[AnnotationExtension]] added to your editor.

Signature:

updateAnnotation(id: string, annotationDataWithoutId: Omit<OmitTextAndPosition<Type>, 'id'>): CommandFunction;

Parameters:

ParameterTypeDescription
idstringthe annotation id to update.
annotationDataWithoutIdOmit<OmitTextAndPosition<Type>, 'id'>the annotation data without the id.

Returns:

CommandFunction

function createCenteredAnnotationPositioner()

Render a positioner which captures the selected annotation.

Signature:

export declare function createCenteredAnnotationPositioner(getAnnotationsAt: GetAnnotationsAt): Positioner<{
from: Coords;
to: Coords;
}>;

Parameters:

ParameterTypeDescription
getAnnotationsAtGetAnnotationsAt

Returns:

Positioner<{ from: Coords; to: Coords; }>

Remarks:

This extends the selection positioner. The difference is that the from and to coordinates are picked from shortest annotation selected.

interface Annotation

Signature:

export interface Annotation 

property className

Classname added to the annotation when it's rendered. This can be used e.g. to have annotations in different colors

Signature:

className?: string;

property from

Document position where the annotation starts.

Signature:

from: number;

property id

Unique identifier of the annotation

Signature:

id: string;

property text

Plain text of what is annotated, i.e. content between from->start. This allows applications fetching the annotation to work with them without having to query Prosemirror for the text.

Signature:

text: string;

property to

Document position where the annotation ends.

Signature:

to: number;

interface AnnotationOptions

Signature:

export interface AnnotationOptions<Type extends Annotation = Annotation> extends ObsoleteOptions<ExternalMapOptions<Type>> 

Extends: ObsoleteOptions<ExternalMapOptions<Type>>

(Some inherited members may not be shown because they are not represented in the documentation.)

property blockSeparator

Allows to format the text returned for each annotation.

When blockSeparator is given, it will be inserted whenever a new block node is started.

Signature:

blockSeparator?: AcceptUndefined<string>;

property getStore

Signature:

getStore?: () => AnnotationStore<Type>;

property getStyle

Method to calculate styles for a segment with one or more annotations

Signature:

getStyle?: GetStyle<Type>;

Remarks:

This can be used e.g. to assign different shades of a color depending on the amount of annotations in a segment.

interface AnnotationStore

Signature:

export interface AnnotationStore<Type extends Annotation> 

property addAnnotation

Signature:

addAnnotation: (data: OmitText<Type>) => void;

property formatAnnotations

Signature:

formatAnnotations: () => Array<OmitText<Type>>;

property removeAnnotations

Signature:

removeAnnotations: (ids: string[]) => void;

property setAnnotations

Signature:

setAnnotations: (annotations: Array<OmitText<Type>>) => void;

property updateAnnotation

Signature:

updateAnnotation: (id: string, updateData: OmitTextAndPosition<Type>) => void;

type OmitText

Remove the text field from an annotation.

Signature:

export type OmitText<Type extends Annotation> = Omit<Type, 'text'>;

References: Annotation

type OmitTextAndPosition

Get the data of the annotation without the fields managed by ProseMirror.

Signature:

export type OmitTextAndPosition<Type extends Annotation> = Omit<Type, 'text' | 'from' | 'to'>;

References: Annotation