aswi20220x00-gitlab/webapp/components/annotation/DocumentAnnotationView.tsx @ e02e004e

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

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

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

    function getCss() {

        let css = 'span.annotation {border-bottom: 2px solid;}\n';
        css += 'span {line-height: 30px}\n';
        css +=
            'span[end="1"] {border-end-end-radius: 0px; border-right: 1px solid darkgray}\n';
        css +=
            'span[start="1"] {border-end-start-radius: 0px; border-left: 1px solid darkgray}\n';

        for (const info of annotation?.cssInfo ?? []) {
            css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${info.instanceId}"] { border-color:${info.color}; padding-bottom: ${info.padding}px }\n`;
        }

        return <style dangerouslySetInnerHTML={{ __html: css }}></style>;
    }

    return (
        <div>
            {getCss()}
            <div
                dangerouslySetInnerHTML={{ __html: annotation.documentToRender ?? '' }}
            />
        </div>
    );
}