From f47692234491f82ada65198eef05c0f9810c7355 Mon Sep 17 00:00:00 2001
From: Rainer Simon <aboutgeo@gmail.com>
Date: Sat, 8 Jan 2022 10:29:38 +0100
Subject: [PATCH] Closes #94

---
 src/editor/widgets/tag/TagWidget.jsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx
index 2903439..a859102 100644
--- a/src/editor/widgets/tag/TagWidget.jsx
+++ b/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} />