Closes #15

public/annotations.w3c.json

@@ -102,11 +102,11 @@
     "@context": "http://www.w3.org/ns/anno.jsonld",
     "type": "Annotation",
     "id": "#relation-1",
-    "body": [{
+    "body": {
       "type": "TextualBody",
       "value": "MyTag",
       "purpose": "tagging"
-    }],
+    },
     "motivation": "linking",
     "target": [
       {

public/index.html

@@ -7,8 +7,7 @@
     <link href="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/recogito.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
-    <!-- script src="https://cdn.jsdelivr.net/npm/@recogito/[email protected]/dist/recogito.min.js"></script -->
-    <script src="recogito.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@recogito/recogito-js@latest/dist/recogito.min.js"></script>
     <style>
       html, body {
         padding:10px 20px;

src/NetworkCanvas.js

@@ -239,7 +239,7 @@ export default class NetworkCanvas extends EventEmitter {
   setAnnotations = annotations => annotations.forEach(a => {
     const start = NetworkNode.findById(a.targets[0].id);
     const end = NetworkNode.findById(a.targets[1].id);
-    this.addEdge(new NetworkEdge(a.id, start, end));
+    this.addEdge(new NetworkEdge(a.id, start, end, a.bodies));
   });
 
   unregisterInstance = instance => 

src/NetworkEdge.js

@@ -2,13 +2,13 @@ import WebAnnotation from '@recogito/recogito-client-core/src/WebAnnotation';
 
 export default class NetworkEdge {
 
-  constructor(id, start, end) {
+  constructor(id, start, end, bodies) {
     this.id = id;
 
     this.start = start;
     this.end = end;
 
-    this.bodies = [];
+    this.bodies = bodies || [];
   }
 
   matchesAnnotation = annotation => {

src/index.jsx

@@ -6,7 +6,8 @@ import mountEditor from './editor/mountEditor';
 
 /** Checks if the given annotation represents a connection **/
 const isConnection = annotation => {
-  const { targets } = annotation;
+  const targets = Array.isArray(annotation.target) ?
+    annotation.target : [ annotation.target ];
 
   if (targets.length !== 2)
     return false;
@@ -45,18 +46,20 @@ class ConnectionsPlugin extends EventEmitter {
     // Intercept setAnnotation API method
     const _setAnnotations = instance.setAnnotations;
 
-    instance.setAnnotations = arg =>
+    instance.setAnnotations = arg => {
+      const all = (arg || []);
+
+      // Split text annotations from connections
+      const annotations = all.filter(a => !isConnection(a));
+      const connections = all.filter(a => isConnection(a));
+
       // Set annotations on instance first
-      _setAnnotations(arg).then(() => {
+      return _setAnnotations(annotations).then(() => {
         // Then create relations
-        const annotations = arg || []; // Allow null arg
-
-        const connections = annotations
-          .map(a => new WebAnnotation(a))
-          .filter(isConnection);
-
-        this.canvas.setAnnotations(connections);
+        const wrapped = connections.map(a => new WebAnnotation(a));
+        this.canvas.setAnnotations(wrapped);
       });
+    }
 
     // When annotations are deleted, also delete
     // in-/outgoing connections