Sanity Library Reference Docs
    Preparing search index...

    Interface BlockAnnotationProps

    Props for rendering a Portable Text annotation

    If you want to render a mix of the annotated text and non-text content, you have to attribute the non-text containers with contentEditable={false}. See the second example.

    Example: Simple example of customizing the annotation text to render yellow.

    (props: BlockAnnotationProps) =>
      props.renderDefault({
        ...props,
        textElement: <span style={{color: 'yellow'}}>{props.textElement}</span>,
      })

    Note that the form content container is attributed as contentEditable={false}. This is to signal to the text editor that this content isn't part of the editable text.

    (props: BlockAnnotationProps) => {
      return (
        <>
          // Render the annotated text
          <span onClick={props.onOpen}>
            {props.textElement}
          </span>
          // Render the editing form if the object is opened
          {props.open && (
            <Dialog
              contentEditable={false} // Attribute this as non-editable to the text editor
              header={`Edit ${props.schemaType.title}`}
              id={`dialog-${props.value._key}`}
              onClickOutside={props.onClose}
              onClose={props.onClose}
            >
              <Box margin={2} padding={2}>
                {props.children}
              </Box>
            </Dialog>
         )}
        </>
      )
    }
    interface BlockAnnotationProps {
        __unstable_floatingBoundary: HTMLElement;
        __unstable_referenceBoundary: HTMLElement;
        __unstable_referenceElement: HTMLElement;
        __unstable_textElementFocus?: boolean;
        children: ReactNode;
        focused: boolean;
        markers: PortableTextMarker[];
        onClose: () => void;
        onOpen: () => void;
        onPathFocus: (path: Path) => void;
        onRemove: () => void;
        open: boolean;
        parentSchemaType: SchemaType;
        path: Path;
        presence: FormNodePresence[];
        readOnly: boolean;
        renderAnnotation?: RenderAnnotationCallback;
        renderBlock?: RenderBlockCallback;
        renderDefault: (props: BlockAnnotationProps) => Element;
        renderField: RenderFieldCallback;
        renderInlineBlock?: RenderBlockCallback;
        renderInput: RenderInputCallback;
        renderItem: RenderArrayOfObjectsItemCallback;
        renderPreview: RenderPreviewCallback;
        schemaType: ObjectSchemaType & { i18nTitleKey?: string };
        selected: boolean;
        textElement: Element;
        validation: FormNodeValidation[];
        value: PortableTextObject;
    }
    Index

    Properties

    __unstable_floatingBoundary __unstable_referenceBoundary __unstable_referenceElement __unstable_textElementFocus? children focused markers onClose onOpen onPathFocus onRemove open parentSchemaType path presence readOnly renderAnnotation? renderBlock? renderDefault renderField renderInlineBlock? renderInput renderItem renderPreview schemaType selected textElement validation value

    Properties

    __unstable_floatingBoundary

    __unstable_floatingBoundary: HTMLElement

    Boundary element of the floating toolbar element.

    __unstable_referenceBoundary

    __unstable_referenceBoundary: HTMLElement

    Boundary element where the text for this annotation appears.

    __unstable_referenceElement

    __unstable_referenceElement: HTMLElement

    DOM element for the annotated text.

    Optional__unstable_textElementFocus

    __unstable_textElementFocus?: boolean

    Wether the annotated text node has editor focus.

    differs from focused which is wether the annotation object has form focus.

    children: ReactNode

    The input form for the annotation object.

    If you wrap this in something, you must make sure to put contentEditable={false} on the root container. Otherwise the editor will think content is part of the editable text and will error.

    focused: boolean

    If the editor form for this annotation object currently have form focus.

    markers: PortableTextMarker[]

    Markers (meta data) connected to this annotation.

    • use renderBlock and renderInlineBlock interfaces instead
    onClose: () => void

    Closes the editing form connected to this annotation.

    onOpen: () => void

    Opens the editing form connected to this annotation.

    onPathFocus: (path: Path) => void

    Focus a form node in the object for this annotation.

    Type declaration

      • (path: Path): void

      • Parameters

        • path: Path

          the relative path to the form node to put focus on.

        Returns void

    onRemove: () => void

    Removes the annotation object from the text.

    open: boolean

    If the annotation is currently opened for editing.

    parentSchemaType: SchemaType

    The parent schema type. For annotations this this the block type.

    path: Path

    The full form path to this annotation from document root.

    presence: FormNodePresence[]

    Form presence for this annotation.

    readOnly: boolean

    Is the annotation object read only?

    renderAnnotation?: RenderAnnotationCallback

    Plugin chain render callback.

    renderBlock?: RenderBlockCallback

    Plugin chain render callback.

    renderDefault: (props: BlockAnnotationProps) => Element

    Plugin chain render callback.

    renderField: RenderFieldCallback

    Plugin chain render callback.

    renderInlineBlock?: RenderBlockCallback

    Plugin chain render callback.

    renderInput: RenderInputCallback

    Plugin chain render callback.

    renderItem: RenderArrayOfObjectsItemCallback

    Plugin chain render callback.

    renderPreview: RenderPreviewCallback

    Plugin chain render callback.

    schemaType: ObjectSchemaType & { i18nTitleKey?: string }

    The schema type for the annotation object.

    selected: boolean

    If the annotated text currently is selected by the user.

    textElement: Element

    React element of the text that is being annotated.

    validation: FormNodeValidation[]

    Form validation for the annotation object.

    value: PortableTextObject

    Value of the annotation object.

    Settings

    Member Visibility

    On This Page

    Properties