Handling creation metadata (creator, created, modified)

src/Environment.js

@@ -1,3 +1,8 @@
+/**
+ * Difference between server time and client time, in milliseconds
+ */
+let serverTimeDifference = 0;
+
 export default {
   
   /**
@@ -14,4 +19,13 @@ export default {
    * avatarURL .... OPTIONAL + not supported at the moment
    */
 
+   // Sets a server time to 
+   setServerTime: serverNow => {
+    const browserNow = Date.now()
+    serverTimeDifference = serverNow - browserNow;
+   },
+   
+   getCurrentTimeAdjusted: () =>
+     (new Date(Date.now() + serverTimeDifference)).toISOString()
+
 }

src/editor/Editor.jsx

@@ -1,5 +1,6 @@
 import React from 'preact/compat';
 import { useState, useRef, useEffect } from 'preact/hooks';
+import Environment from '../Environment';
 import setPosition from './setPosition';
 import i18n from '../i18n';
 
@@ -63,15 +64,36 @@ const Editor = props => {
     return () => resizeObserver.disconnect();
   }, []);
 
+  // Creator and created/modified timestamp metadata
+  const creationMeta = body => {
+    const meta = {};
+
+    // No point in adding meta while we're in draft state
+    if (!body.draft) {
+      const { user } = Environment;
+      if (user) meta.creator = {};
+      if (user.id) meta.creator.id = user.id;
+      if (user.displayName) meta.creator.name = user.displayName;
+
+      if (body.created)
+        body.modified = Environment.getCurrentTimeAdjusted();
+      else
+        body.created = Environment.getCurrentTimeAdjusted();
+    }
+
+    return meta;
+  }
+
   const onAppendBody = body => setCurrentAnnotation(
     currentAnnotation.clone({ 
-      body: [ ...currentAnnotation.bodies, body ] 
+      body: [ ...currentAnnotation.bodies, { ...body, ...creationMeta(body) } ] 
     })
   );
 
   const onUpdateBody = (previous, updated) => setCurrentAnnotation(
     currentAnnotation.clone({
-      body: currentAnnotation.bodies.map(body => body === previous ? updated : body)
+      body: currentAnnotation.bodies.map(body => 
+        body === previous ? { ...updated, ...creationMeta(updated) } : body)
     })
   );
 
@@ -84,7 +106,8 @@ const Editor = props => {
   const onOk = _ => {
     // Removes the 'draft' flag from all bodies
     const undraft = annotation => annotation.clone({
-      body : annotation.bodies.map(({ draft, ...rest }) => rest)
+      body : annotation.bodies.map(({ draft, ...rest }) =>
+        draft ? { ...rest, ...creationMeta(rest) } : rest )
     });
 
     // Current annotation is either a selection (if it was created from 

src/editor/widgets/comment/Comment.jsx

@@ -26,7 +26,10 @@ const Comment = props => {
 
   return props.readOnly ? (
     <div className="r6o-widget comment">
-      {props.body.value}
+      <div className="value">{props.body.value}</div>
+      <div className="lastmodified">
+        <div className="lastmodified-by">{props.body.creator?.name}</div>
+      </div>
     </div>
   ) : (
     <div className={ isEditable ? "r6o-widget comment editable" : "r6o-widget comment"}>
@@ -36,6 +39,12 @@ const Comment = props => {
         onChange={onUpdateComment} 
         onSaveAndClose={props.onSaveAndClose} 
       />
+      
+      { props.body.creator && 
+        <div className="lastmodified">
+          <div className="lastmodified-by">{props.body.creator.name}</div>
+        </div>
+      }
 
       <div 
         className={isMenuVisible ? "icon arrow-down menu-open" : "icon arrow-down"} 

themes/default/editor/widgets/comment/_comment.scss

@@ -1,10 +1,19 @@
 .r6o-widget.comment {
   font-size:14px;
-  min-height:3em;
+  min-height:1em;
   background-color:#fff;
   position:relative;
   padding:8px 10px;
 
+  .lastmodified {
+    border:1px solid $lightgrey-border;
+    display:inline-block;
+    border-radius:2px;
+    padding:4px 5px;
+    line-height:100%;
+    font-size:12px;
+  }
+
   .arrow-down {
     position:absolute;
     height: 20px;