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