1
|
/**
|
2
|
* Creates an annotation view of a document.
|
3
|
* @returns The annotation view.
|
4
|
*/
|
5
|
import { useContext } from 'react';
|
6
|
import { AnnotationContext } from '../../contexts/AnnotationContext';
|
7
|
import { Button } from 'antd';
|
8
|
import { DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME } from '../../constants';
|
9
|
|
10
|
export function DocumentAnnotationView() {
|
11
|
const { annotation } = useContext(AnnotationContext);
|
12
|
|
13
|
if (!annotation) {
|
14
|
return <p>Probíhá načítání anotace ...</p>;
|
15
|
}
|
16
|
|
17
|
function getCss() {
|
18
|
|
19
|
let css = 'span.annotation {border-bottom: 2px solid;}\n';
|
20
|
css += 'span {line-height: 30px}\n';
|
21
|
css +=
|
22
|
'span[end="1"] {border-end-end-radius: 0px; border-right: 1px solid darkgray}\n';
|
23
|
css +=
|
24
|
'span[start="1"] {border-end-start-radius: 0px; border-left: 1px solid darkgray}\n';
|
25
|
|
26
|
for (const info of annotation?.cssInfo ?? []) {
|
27
|
css += `span[${DOCUMENT_INSTANCE_ID_ATTRIBUTE_NAME}="${info.instanceId}"] { border-color:${info.color}; padding-bottom: ${info.padding}px }\n`;
|
28
|
}
|
29
|
|
30
|
return <style dangerouslySetInnerHTML={{ __html: css }}></style>;
|
31
|
}
|
32
|
|
33
|
return (
|
34
|
<div>
|
35
|
{getCss()}
|
36
|
<div
|
37
|
dangerouslySetInnerHTML={{ __html: annotation.documentToRender ?? '' }}
|
38
|
/>
|
39
|
</div>
|
40
|
);
|
41
|
}
|