Closes #94

src/editor/widgets/tag/TagWidget.jsx

@@ -14,7 +14,7 @@ const TagWidget = props => {
 
   // All tags (draft + non-draft)
   const all = props.annotation ? 
-    props.annotation.bodies.filter(b => b.type === 'TextualBody' && b.purpose === 'tagging') : [];
+    props.annotation.bodies.filter(b => b.purpose === 'tagging') : [];
 
   // Last draft tag goes into the input field
   const draftTag = getDraftTag(all.slice().reverse().find(b => b.draft)); 
@@ -50,9 +50,18 @@ const TagWidget = props => {
   }
 
   const onSubmit = tag => {
-    const { draft, ...toSubmit } = tag.label ? 
-      { ...draftTag, value: tag.label, source: tag.uri } :
-      { ...draftTag, value: tag }; 
+    const toSubmit = tag.uri ? {
+        type: 'SpecificResource',
+        purpose: 'tagging',
+        source: {
+          id: tag.uri,
+          label: tag.label
+        }
+      } : {
+        type: 'TextualBody',
+        purpose: 'tagging',
+        value: tag.label || tag
+      };
 
     if (draftTag.value.trim().length === 0) {
       props.onAppendBody(toSubmit);
@@ -61,16 +70,19 @@ const TagWidget = props => {
     }
   }
 
+  // Shorthand
+  const tagValue = tag => tag.value || tag.source.label;
+
   return (
     <div className="r6o-widget r6o-tag">
       { tags.length > 0 &&
         <ul className="r6o-taglist">
           { tags.map(tag =>
-            <li key={tag.value} onClick={toggle(tag.value)}>
-              <span className="r6o-label">{tag.value}</span>
+            <li key={tagValue(tag)} onClick={toggle(tag)}>
+              <span className="r6o-label">{tagValue(tag)}</span>
 
               {!props.readOnly &&
-                <CSSTransition in={showDelete === tag.value} timeout={200} classNames="r6o-delete">
+                <CSSTransition in={showDelete === tag} timeout={200} classNames="r6o-delete">
                   <span className="r6o-delete-wrapper" onClick={onDelete(tag)}>
                     <span className="r6o-delete">
                       <CloseIcon width={12} />