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