add dropdown to widget

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 => {
         </span> 
       }
     </div>
-
   return props.readOnly ? (
     <div className="r6o-widget comment">
       <div className="r6o-readonly-comment">{props.body.value}</div>
@@ -50,9 +51,15 @@ const Comment = props => {
         editable={isEditable}
         content={props.body.value} 
         onChange={onUpdateComment} 
-        onSaveAndClose={props.onSaveAndClose} 
+        onSaveAndClose={props.onSaveAndClose}
+      />
+
+      <TypeDropdown 
+        editable={isEditable}
+        content={props.body.purpose} 
+        onChange={onUpdateComment} 
+        onSaveAndClose={props.onSaveAndClose}
       />
-      
       { creatorInfo }
 
       <div 

src/editor/widgets/comment/CommentWidget.jsx

@@ -2,14 +2,16 @@ import React from 'preact/compat';
 import Comment from './Comment';
 import TextEntryField from './TextEntryField';
 import i18n from '../../../i18n';
-
+const purposes = ['assessing', 'bookmarking', 'classifying', 'commenting', 'describing', 'editing', 'highlighting', 'identifying', 'linking', 'moderating', 'questioning']
+console.log(purposes)
 /**
  * Comments are TextualBodies where the purpose field is either 
  * blank or 'commenting' or 'replying'
  */
+
 const isComment = body => 
   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) => 

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 (
+    <select name="purpose" id="purpose">
+      {purposes.map(purpose => (
+        <option value={purpose} selected={purpose == props.content}>
+          {purpose}
+        </option>
+      ))}
+    </select>
+  )
+
+}
+
+export default DropdownMenu;