stash changes

src/editor/Editor.jsx

@@ -117,7 +117,8 @@ const Editor = props => {
 
   const onOk = _ => {
     // Removes the 'draft' flag from all bodies
-    const undraft = annotation => annotation.clone({
+    const undraft = annotation => 
+    annotation.clone({
       body : annotation.bodies.map(({ draft, ...rest }) =>
         draft ? { ...rest, ...creationMeta(rest) } : rest )
     });
@@ -141,7 +142,6 @@ const Editor = props => {
   // Use default comment + tag widget unless host app overrides
   const widgets = props.config.widgets ? 
     props.config.widgets.map(getWidget) : DEFAULT_WIDGETS;
-
   return (
     <div ref={element} className="r6o-editor">
       <div className="r6o-arrow" />

src/editor/widgets/comment/Comment.jsx

@@ -24,11 +24,17 @@ const Comment = props => {
     props.onDelete(props.body);
     setIsMenuVisible(false); 
   }
-
   const onUpdateComment = evt => {
     props.onUpdate(props.body, { ...props.body, value: evt.target.value });
   }
 
+  const onUpdateDropdown = evt => {
+    console.log('update dropdown')
+    console.log(evt)
+    console.log(props.body)
+    props.onUpdate(props.body, { ...props.body, purpose: evt.target.value });
+  }
+
   const creatorInfo = props.body.creator && 
     <div className="r6o-lastmodified">
       <span className="r6o-lastmodified-by">{props.body.creator.name || props.body.creator.id}</span>
@@ -53,15 +59,13 @@ const Comment = props => {
         onChange={onUpdateComment} 
         onSaveAndClose={props.onSaveAndClose}
       />
-
+      { props.purpose == true &&
-      <TypeDropdown 
+        <TypeDropdown  
-        editable={isEditable}
+            editable={isEditable}
-        content={props.body.purpose} 
+            content={props.body.purpose} 
-        onChange={onUpdateComment} 
+            onChange={onUpdateDropdown} 
-        onSaveAndClose={props.onSaveAndClose}
+            onSaveAndClose={props.onSaveAndClose}
-      />
+          /> } 
-      { creatorInfo }
-
       <div 
         className={isMenuVisible ? "r6o-icon r6o-arrow-down r6o-menu-open" : "r6o-icon r6o-arrow-down"} 
         onClick={() => setIsMenuVisible(!isMenuVisible)}>

src/editor/widgets/comment/CommentWidget.jsx

@@ -2,8 +2,9 @@ import React from 'preact/compat';
 import Comment from './Comment';
 import TextEntryField from './TextEntryField';
 import i18n from '../../../i18n';
+import TypeDropdown from './TypeDropdown';
+
 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'
@@ -28,10 +29,12 @@ const getDraftReply = (existingDraft, isReply) => {
  */
 const CommentWidget = props => {
   // All comments (draft + non-draft)
+  console.log(props.annotation)
   const all = props.annotation ? 
     props.annotation.bodies.filter(isComment) : [];
 
   // Last draft comment without a creator field goes into the reply field
+  console.log(all)
   const draftReply = getDraftReply(all.slice().reverse().find(b => b.draft && !b.creator), all.length > 1); 
 
   // All except draft reply
@@ -80,6 +83,7 @@ const CommentWidget = props => {
         <Comment 
           key={idx} 
           env={props.env}
+          purpose={props.purpose}
           readOnly={isReadOnly(body)} 
           body={body} 
           onUpdate={props.onUpdateBody}
@@ -92,6 +96,7 @@ const CommentWidget = props => {
           <TextEntryField
             content={draftReply.value}
             editable={true}
+            purpose={props.purpose}
             placeholder={comments.length > 0 ? i18n.t('Add a reply...') : i18n.t('Add a comment...')}
             onChange={onEditReply}
             onSaveAndClose={() => props.onSaveAndClose()}

src/editor/widgets/comment/TypeDropdown.jsx

@@ -1,23 +1,29 @@
-import React from 'preact/compat';
+import React, { Component } from 'preact/compat';
-import { useRef } from 'preact/hooks';
+import ContentEditable from 'react-contenteditable';
-import useClickOutside from '../../useClickOutside';
 import i18n from '../../../i18n';
+
 const purposes = ['assessing', 'bookmarking', 'classifying', 'commenting', 'describing', 'editing', 'highlighting', 'identifying', 'linking', 'moderating', 'questioning']
 
-const DropdownMenu = props => {
+export default class TypeDropdown extends Component {
-  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>
-  )
 
+  // CTRL+Enter functions as Ok
+  onKeyDown = evt => {
+    if (evt.which === 13 && evt.ctrlKey)
+      this.props.onSaveAndClose();
+  }
+
+  render() {
+    return (
+      <div>
+        <div>{this.props.content}</div>
+      <select name="purpose" id="purpose" disabled={this.props.editable ? false : true }>
+        {purposes.map(purpose => (
+          <option value={purpose} selected={purpose == this.props.content}>
+            {purpose}
+          </option>
+        ))}
+      </select>
+      </div>
+    )
+  }
 } 
-
-export default DropdownMenu;