aswi20220x00-gitlab/webapp/components/annotation/DocumentAnnotationView.tsx @ 61acc160

/**
 * Creates an annotation view of a document.
 * @returns The annotation view.
 */
import { ChangeEvent, useContext } from 'react';
import { AnnotationContext } from '../../contexts/AnnotationContext';
import { Button, Input, Space } from 'antd';

export function DocumentAnnotationView() {
    const { annotation, changeDocumentNote } = useContext(AnnotationContext);

    if (!annotation) {
        return <p>Probíhá načítání anotace ...</p>;
    }

    const onChangeNote = (e: ChangeEvent<HTMLTextAreaElement>) => {
        changeDocumentNote(e.currentTarget.value);
    };

    return (
        <div>
            <div className="mb-3">
                <h5>Poznámka</h5>
                <Input.TextArea
                    defaultValue={annotation.note ?? ''}
                    onBlur={onChangeNote}
                />
            </div>
            <h5>Obsah</h5>
            <div
                dangerouslySetInnerHTML={{ __html: annotation.documentToRender ?? '' }}
            />
        </div>
    );
}