Closes #361

packages/annotorious/src/model/w3c/W3CImageFormatAdapter.ts

@@ -62,7 +62,7 @@ export const parseW3CImageAnnotation = (
         created: created ? new Date(created) : undefined,
         creator: parseW3CUser(creator),
         updated: modified ? new Date(modified) : undefined,
-        ...rest.target,
+        ...(Array.isArray(rest.target) ? rest.target[0] : rest.target),
         annotation: annotationId,
         selector
       }
@@ -91,7 +91,7 @@ export const serializeW3CImageAnnotation = (
       serializeFragmentSelector(selector.geometry as RectangleGeometry) :
       serializeSVGSelector(selector);
 
-  return {
+  const serialized = {
     ...annotation,
     '@context': 'http://www.w3.org/ns/anno.jsonld',
     id: annotation.id,
@@ -105,5 +105,13 @@ export const serializeW3CImageAnnotation = (
       source,
       selector: w3CSelector
     }
-  }
+  } as W3CImageAnnotation;
+
+  // Remove core properties that should not appear in the W3C annotation
+  delete serialized.bodies;
+
+  if ('annotation' in serialized.target)
+    delete serialized.target.annotation;
+
+  return serialized;
 }

packages/annotorious/test/model/w3c/W3CImageFormatAdapter.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { ShapeType } from '../../../src/model';
-import { parseW3CImageAnnotation } from '../../../src/model';
+import { parseW3CImageAnnotation, serializeW3CImageAnnotation} from '../../../src/model';
 
 import { annotations } from './fixtures';
 
@@ -20,3 +20,21 @@ describe('parseW3CImageAnnotation', () => {
   });
 });
 
+describe('serializeW3CImageAnnotation', () => {
+  it('should serialize the sample annotations correctly', () => {
+    // @ts-ignore
+    const parsed = annotations.map(a => parseW3CImageAnnotation(a));
+
+    const core = parsed.map(result => result.parsed!).filter(Boolean);
+    expect(core.length).toBe(parsed.length);
+
+    const serialized = core.map(annotation => serializeW3CImageAnnotation(annotation, 'http://www.example.com/source/1'));
+
+    serialized.forEach((a, idx) => {
+      const e = annotations[idx];
+      expect(a.id).toBe(e.id);
+      expect('bodies' in a).toBeFalsy();
+    })
+  })
+});
+