diff --git a/src/editor/widgets/comment/Comment.jsx b/src/editor/widgets/comment/Comment.jsx index 4830b13..3ad5886 100644 --- a/src/editor/widgets/comment/Comment.jsx +++ b/src/editor/widgets/comment/Comment.jsx @@ -3,9 +3,11 @@ import { useState } from 'preact/hooks'; import TimeAgo from 'timeago-react'; import DropdownMenu from './DropdownMenu'; import TextEntryField from './TextEntryField'; +import TypeDropdown from './TypeDropdown'; import { ChevronDownIcon } from '../../../Icons'; import i18n from '../../../i18n'; + /** A single comment inside the CommentWidget **/ const Comment = props => { @@ -38,7 +40,6 @@ const Comment = props => { } - return props.readOnly ? (
{props.body.value}
@@ -50,9 +51,15 @@ const Comment = props => { editable={isEditable} content={props.body.value} onChange={onUpdateComment} - onSaveAndClose={props.onSaveAndClose} + onSaveAndClose={props.onSaveAndClose} + /> + + - { creatorInfo }
body.type === 'TextualBody' && ( - !body.hasOwnProperty('purpose') || body.purpose === 'commenting' || body.purpose === 'replying' + !body.hasOwnProperty('purpose') || purposes.indexOf(body.purpose) > -1 ); /** @@ -25,7 +27,6 @@ const getDraftReply = (existingDraft, isReply) => { * Renders a list of comment bodies, followed by a 'reply' field. */ const CommentWidget = props => { - // All comments (draft + non-draft) const all = props.annotation ? props.annotation.bodies.filter(isComment) : []; @@ -73,7 +74,6 @@ const CommentWidget = props => { // Global setting as last possible option return props.readOnly; } - return ( <> { comments.map((body, idx) => diff --git a/src/editor/widgets/comment/TypeDropdown.jsx b/src/editor/widgets/comment/TypeDropdown.jsx new file mode 100644 index 0000000..bf030b0 --- /dev/null +++ b/src/editor/widgets/comment/TypeDropdown.jsx @@ -0,0 +1,23 @@ +import React from 'preact/compat'; +import { useRef } from 'preact/hooks'; +import useClickOutside from '../../useClickOutside'; +import i18n from '../../../i18n'; +const purposes = ['assessing', 'bookmarking', 'classifying', 'commenting', 'describing', 'editing', 'highlighting', 'identifying', 'linking', 'moderating', 'questioning'] + +const DropdownMenu = props => { + const ref = useRef(); + // Custom hook that notifies when clicked outside this component + useClickOutside(ref, () => props.onClickOutside()); + return ( + + ) + +} + +export default DropdownMenu; \ No newline at end of file