From 1cc01c429fb51e072a3e3b33ee58b24bbf046d65 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 26 Mar 2026 15:58:58 +0100
Subject: [PATCH 01/23] Add venv to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 922c12c4..254e939d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 # Virtual environment
 ENV/
 .env/
+venv/
 
 # node
 node_modules

From af7c6f72d2e36a0c7af496fdda49baf513ebe9fb Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 26 Mar 2026 15:59:52 +0100
Subject: [PATCH 02/23] Change icon of annotation button to pen

---
 frontend/vre/field/field.view.mustache | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/vre/field/field.view.mustache b/frontend/vre/field/field.view.mustache
index 8c973dde..aa5be9f8 100644
--- a/frontend/vre/field/field.view.mustache
+++ b/frontend/vre/field/field.view.mustache
@@ -3,4 +3,4 @@
     {{#linkedRecordUri}}<a href="/record/{{linkedRecordUri}}" target="_blank" title="Go to linked record">{{displayText}}</a>{{/linkedRecordUri}}
     {{^linkedRecordUri}}{{displayText}}{{/linkedRecordUri}}
 </div><div class="annotations"></div></td>
-<td><a class="fa-regular fa-message comment" role="button"></a></td>
+<td><a class="fa-solid fa-pen comment text-decoration-none" role="button" title="Add correction"></a></td>

From 37a762c653362c96f22264e0b39443d768371192 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 26 Mar 2026 16:42:06 +0100
Subject: [PATCH 03/23] Prefill original text for new correcting annotations

---
 frontend/vre/annotation/annotation.edit.view.js | 5 +++--
 frontend/vre/field/annotatable.view.js          | 7 +++++--
 frontend/vre/field/field.view.js                | 7 +++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/vre/annotation/annotation.edit.view.js b/frontend/vre/annotation/annotation.edit.view.js
index eba595b7..fcf50eb9 100644
--- a/frontend/vre/annotation/annotation.edit.view.js
+++ b/frontend/vre/annotation/annotation.edit.view.js
@@ -14,7 +14,7 @@ export var AnnotationEditView = View.extend({
         'reset': 'reset',
     },
     initialize: function(options) {
-        _.assign(this, _.pick(options, ['existing']));
+        _.assign(this, _.pick(options, ['existing', 'defaultText']));
         this.render().$el.popover({
             container: 'body',
             content: confirmDeletionTemplate(this),
@@ -53,8 +53,9 @@ export var AnnotationEditView = View.extend({
             if (tag) this.$('select').val(tag);
             this.$('select').trigger('change');
         } else {
+            var text = this.model.get('oa:hasBody') || this.defaultText;
             this.$el.html(this.template({
-                currentText: this.model.get('oa:hasBody'),
+                currentText: text,
                 cid: this.cid,
             }));
         }
diff --git a/frontend/vre/field/annotatable.view.js b/frontend/vre/field/annotatable.view.js
index cf943b03..4b4dfb7f 100644
--- a/frontend/vre/field/annotatable.view.js
+++ b/frontend/vre/field/annotatable.view.js
@@ -17,7 +17,7 @@ export var AnnotatableView = AggregateView.extend({
         this.listenTo(this.collection, 'edit', this.edit);
     },
 
-    edit: function(model) {
+    edit: function(model, defaultText) {
         var project = vreChannel.request('projects:current').id,
             editTarget = model.clone().set('context', project),
             preExisting = this.collection.get(editTarget),
@@ -32,7 +32,10 @@ export var AnnotatableView = AggregateView.extend({
             this.items.splice(index, 1, newRow);
             oldRow.remove();
         } else {
-            newRow = new AnnotationEditView({model: editTarget});
+            newRow = new AnnotationEditView({
+                model: editTarget,
+                defaultText: defaultText,
+            });
             this.items.push(newRow);
         }
         this.placeItems();
diff --git a/frontend/vre/field/field.view.js b/frontend/vre/field/field.view.js
index 014beb9e..cf671c82 100644
--- a/frontend/vre/field/field.view.js
+++ b/frontend/vre/field/field.view.js
@@ -54,11 +54,14 @@ export var FieldView = AnnotatableView.extend({
         var attributes = {
             "oa:hasSource": this.collection.underlying.target,
             "edpopcol:field": fieldId,
-            "motivation": "oa:commenting",
+            "motivation": "oa:editing",
         };
         if (fieldContents) {
             attributes['edpopcol:originalText'] = fieldContents['edpoprec:originalText'];
         }
-        this.edit(new Annotation(attributes));
+        this.edit(
+            new Annotation(attributes),
+            fieldContents['edpoprec:originalText'],
+        );
     },
 });

From 63057a06266be1c683dacd15e767ffebd10b10ce Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 26 Mar 2026 16:42:17 +0100
Subject: [PATCH 04/23] Do not use nested table

---
 frontend/vre/annotation/annotation.edit.view.js       | 2 +-
 frontend/vre/annotation/annotation.edit.view.mustache | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/vre/annotation/annotation.edit.view.js b/frontend/vre/annotation/annotation.edit.view.js
index fcf50eb9..d393c41f 100644
--- a/frontend/vre/annotation/annotation.edit.view.js
+++ b/frontend/vre/annotation/annotation.edit.view.js
@@ -5,7 +5,7 @@ import confirmDeletionTemplate from './annotation.confirm.deletion.mustache';
 import {glossary} from "../utils/glossary";
 
 export var AnnotationEditView = View.extend({
-    tagName: 'tr',
+    tagName: 'div',
     className: 'form-inline',
     template: annotationEditTemplate,
     glossaryTemplate: annotationTagEditTemplate,
diff --git a/frontend/vre/annotation/annotation.edit.view.mustache b/frontend/vre/annotation/annotation.edit.view.mustache
index 2bdfd2ad..12f859ee 100644
--- a/frontend/vre/annotation/annotation.edit.view.mustache
+++ b/frontend/vre/annotation/annotation.edit.view.mustache
@@ -1,4 +1,4 @@
-<td><textarea
+<div><textarea
     type=text
     name=value
     form=form-{{cid}}
@@ -11,4 +11,4 @@
     <button type=button class="btn btn-danger" aria-label=Delete>
         <span class="fa fa-trash" aria-hidden=true></span>
     </button>
-</form></td>
+</form></div>

From 23bd7c4695dabcb54429aa48e5f52cb7815eb3b8 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Fri, 27 Mar 2026 12:38:22 +0100
Subject: [PATCH 05/23] Allow submitting annotation with Enter

---
 frontend/vre/annotation/annotation.edit.view.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/vre/annotation/annotation.edit.view.js b/frontend/vre/annotation/annotation.edit.view.js
index d393c41f..8948fb3e 100644
--- a/frontend/vre/annotation/annotation.edit.view.js
+++ b/frontend/vre/annotation/annotation.edit.view.js
@@ -12,6 +12,7 @@ export var AnnotationEditView = View.extend({
     events: {
         'submit': 'submit',
         'reset': 'reset',
+        'keydown textarea': 'handleTextareaKeydown',
     },
     initialize: function(options) {
         _.assign(this, _.pick(options, ['existing', 'defaultText']));
@@ -38,6 +39,13 @@ export var AnnotationEditView = View.extend({
         if (this.model.get('motivation') === 'oa:tagging') {
             glossary.on('update', this.render);
         }
+        setTimeout(() => {
+            var el = this.$('textarea').get(0);
+            if (el) {
+                el.focus();
+                el.select();
+            }
+        }, 0);
     },
     render: function() {
         if (this.model.get('motivation') === 'oa:tagging') {
@@ -92,4 +100,12 @@ export var AnnotationEditView = View.extend({
         this.$('button[aria-label="Delete"]').popover('hide');
         this.trigger('trash', this);
     },
+    handleTextareaKeydown: function(event) {
+        /* We want to use a textarea to give the user more space, but
+           most of the time they will write only one line. */
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.submit(event);
+        }
+    }
 });

From 98da03bf66c766d65b92a9dbad07b1d9b9b61902 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Fri, 27 Mar 2026 12:38:40 +0100
Subject: [PATCH 06/23] Allow OA.editing as a motivation in backend

---
 backend/annotations/api.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/annotations/api.py b/backend/annotations/api.py
index 0e106957..b093d041 100644
--- a/backend/annotations/api.py
+++ b/backend/annotations/api.py
@@ -163,14 +163,14 @@ def post(self, request, **kwargs):
         if s3 != target:
             raise ValidationError('Source must be a property of the target')
         motivation = request_graph.value(s1, OA.motivatedBy, None, OA.commenting)
-        if motivation == OA.commenting:
+        if motivation in (OA.commenting, OA.editing):
             if not isinstance(body, Literal):
-                raise ValidationError('Comment must be a literal')
+                raise ValidationError('Body must be a literal when commenting or editing')
         elif motivation == OA.tagging:
             if not isinstance(body, URIRef):
                 raise ValidationError('Tag must be a URI')
         else:
-            raise ValidationError('Only commenting or tagging is supported at this time')
+            raise ValidationError('Only commenting, tagging and editing are supported at this time')
 
         # Step 2: normalize the data. We modify the request_graph in place
         # because this is convenient.

From ecc1628547283785b8706339e731065d29f905f1 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Fri, 27 Mar 2026 13:16:19 +0100
Subject: [PATCH 07/23] Correctly show edit annotations

---
 frontend/vre/annotation/annotation.model.js   |  2 +-
 frontend/vre/annotation/comment.view.js       |  3 ++-
 frontend/vre/annotation/comment.view.mustache |  2 +-
 frontend/vre/field/field.view.js              | 17 +++++++++++------
 frontend/vre/field/field.view.mustache        |  6 +++---
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/vre/annotation/annotation.model.js b/frontend/vre/annotation/annotation.model.js
index 35276c01..a4aced69 100644
--- a/frontend/vre/annotation/annotation.model.js
+++ b/frontend/vre/annotation/annotation.model.js
@@ -35,7 +35,7 @@ export var Annotation = JsonLdModel.extend({
     urlRoot: '/api/annotation/',
 
     getDisplayText: function() {
-        if (this.get('motivation') === 'oa:commenting') {
+        if (this.get('motivation') === 'oa:commenting' || this.get('motivation') === 'oa:editing') {
             return this.get('oa:hasBody');
         } else if (this.get('motivation') === 'oa:tagging') {
             var id = this.get('tagURL');
diff --git a/frontend/vre/annotation/comment.view.js b/frontend/vre/annotation/comment.view.js
index faa8a88e..49c47e19 100644
--- a/frontend/vre/annotation/comment.view.js
+++ b/frontend/vre/annotation/comment.view.js
@@ -26,7 +26,8 @@ export var CommentView = View.extend({
         var updatedDate = this.model.getUpdatedDate();
         var author = this.model.getAuthor();
         Object.assign(templateData, {
-            isFieldAnnotation: this.fieldAnnotation,
+            isFieldComment: this.fieldAnnotation && this.model.get('motivation') === 'oa:commenting',
+            originalText: this.model.get('motivation') === 'oa:editing' && this.model.get('edpopcol:originalText'),
             isTag: this.model.get('motivation') === 'oa:tagging',
             displayText: this.model.getDisplayText(),
             author: (author ? author.getUsername() : null),
diff --git a/frontend/vre/annotation/comment.view.mustache b/frontend/vre/annotation/comment.view.mustache
index 2a141d9f..5accf9f4 100644
--- a/frontend/vre/annotation/comment.view.mustache
+++ b/frontend/vre/annotation/comment.view.mustache
@@ -1 +1 @@
-<td title="{{publishedDate}}{{#updatedDate}} (updated: {{updatedDate}}){{/updatedDate}}"><span {{#isFieldAnnotation}}class="field-annotation"{{/isFieldAnnotation}}>{{#isTag}}<b>Tag: </b>{{/isTag}}{{displayText}} </span>{{#author}}<span class="authored-by">@{{author}}</span>{{/author}} </td>
+<td title="{{#originalText}}Text before correction: {{originalText}}. {{/originalText}}{{publishedDate}}{{#updatedDate}} (updated: {{updatedDate}}){{/updatedDate}}"><span {{#isFieldComment}}class="field-annotation"{{/isFieldComment}}>{{#isTag}}<b>Tag: </b>{{/isTag}}{{displayText}} </span>{{#author}}<span class="authored-by">@{{author}}</span>{{/author}} </td>
diff --git a/frontend/vre/field/field.view.js b/frontend/vre/field/field.view.js
index cf671c82..fb794e58 100644
--- a/frontend/vre/field/field.view.js
+++ b/frontend/vre/field/field.view.js
@@ -15,6 +15,7 @@ export var FieldView = AnnotatableView.extend({
 
     initialize: function(options) {
         this.render().listenTo(this.model, 'change:value', this.render);
+        this.listenTo(this.collection, 'update', this.render);
         parent(this).initialize.call(this, options);
     },
 
@@ -23,12 +24,17 @@ export var FieldView = AnnotatableView.extend({
     },
 
     events: {
-        'click a.comment': 'addComment',
+        'click a.comment': 'addEdit',
+    },
+
+    hasEdit: function() {
+        return this.collection.length > 0; // TODO check for just edits
     },
 
     renderContainer: function() {
         const templateData = {
             field: this.model.get('key'),
+            hasEdit: !this.hasEdit(),
         };
         // Check if model is of Field model before using these methods, because
         // there are some tests relating to old-style annotations that assign
@@ -47,7 +53,7 @@ export var FieldView = AnnotatableView.extend({
         return this;
     },
 
-    addComment: function(event) {
+    addEdit: function(event) {
         event.preventDefault();
         var fieldId = this.model.get('key');
         var fieldContents = this.model.get('value');
@@ -58,10 +64,9 @@ export var FieldView = AnnotatableView.extend({
         };
         if (fieldContents) {
             attributes['edpopcol:originalText'] = fieldContents['edpoprec:originalText'];
+            this.edit(new Annotation(attributes), fieldContents['edpoprec:originalText']);
+        } else {
+            this.edit(new Annotation(attributes));
         }
-        this.edit(
-            new Annotation(attributes),
-            fieldContents['edpoprec:originalText'],
-        );
     },
 });
diff --git a/frontend/vre/field/field.view.mustache b/frontend/vre/field/field.view.mustache
index aa5be9f8..548a1909 100644
--- a/frontend/vre/field/field.view.mustache
+++ b/frontend/vre/field/field.view.mustache
@@ -1,6 +1,6 @@
 <td><u title="{{fieldInfo.description}}">{{fieldInfo.name}}</u></td>
-<td><div>
+<td>{{#hasEdit}}<div>
     {{#linkedRecordUri}}<a href="/record/{{linkedRecordUri}}" target="_blank" title="Go to linked record">{{displayText}}</a>{{/linkedRecordUri}}
     {{^linkedRecordUri}}{{displayText}}{{/linkedRecordUri}}
-</div><div class="annotations"></div></td>
-<td><a class="fa-solid fa-pen comment text-decoration-none" role="button" title="Add correction"></a></td>
+</div>{{/hasEdit}}<div class="annotations"></div></td>
+<td>{{#hasEdit}}<a class="fa-solid fa-pen comment text-decoration-none" role="button" title="Add correction"></a>{{/hasEdit}}</td>

From b0a5a3675554fc2b78f8ef67d5442018af888204 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 2 Apr 2026 15:22:25 +0200
Subject: [PATCH 08/23] Separate motivations for additions and corrections

---
 backend/annotations/api.py                  | 4 ++--
 frontend/vre/annotation/annotation.model.js | 2 +-
 frontend/vre/field/field.view.js            | 5 +++--
 frontend/vre/field/field.view.mustache      | 5 ++++-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/backend/annotations/api.py b/backend/annotations/api.py
index b093d041..e953c303 100644
--- a/backend/annotations/api.py
+++ b/backend/annotations/api.py
@@ -163,14 +163,14 @@ def post(self, request, **kwargs):
         if s3 != target:
             raise ValidationError('Source must be a property of the target')
         motivation = request_graph.value(s1, OA.motivatedBy, None, OA.commenting)
-        if motivation in (OA.commenting, OA.editing):
+        if motivation in (OA.commenting, OA.editing, OA.describing):
             if not isinstance(body, Literal):
                 raise ValidationError('Body must be a literal when commenting or editing')
         elif motivation == OA.tagging:
             if not isinstance(body, URIRef):
                 raise ValidationError('Tag must be a URI')
         else:
-            raise ValidationError('Only commenting, tagging and editing are supported at this time')
+            raise ValidationError('Only commenting, tagging, editing and describing are supported')
 
         # Step 2: normalize the data. We modify the request_graph in place
         # because this is convenient.
diff --git a/frontend/vre/annotation/annotation.model.js b/frontend/vre/annotation/annotation.model.js
index a4aced69..cf6792c6 100644
--- a/frontend/vre/annotation/annotation.model.js
+++ b/frontend/vre/annotation/annotation.model.js
@@ -35,7 +35,7 @@ export var Annotation = JsonLdModel.extend({
     urlRoot: '/api/annotation/',
 
     getDisplayText: function() {
-        if (this.get('motivation') === 'oa:commenting' || this.get('motivation') === 'oa:editing') {
+        if (['oa:commenting', 'oa:editing', 'oa:describing'].includes(this.get('motivation'))) {
             return this.get('oa:hasBody');
         } else if (this.get('motivation') === 'oa:tagging') {
             var id = this.get('tagURL');
diff --git a/frontend/vre/field/field.view.js b/frontend/vre/field/field.view.js
index fb794e58..02bbe5dc 100644
--- a/frontend/vre/field/field.view.js
+++ b/frontend/vre/field/field.view.js
@@ -35,6 +35,7 @@ export var FieldView = AnnotatableView.extend({
         const templateData = {
             field: this.model.get('key'),
             hasEdit: !this.hasEdit(),
+            isEmpty: typeof this.model.get('value') === 'undefined',
         };
         // Check if model is of Field model before using these methods, because
         // there are some tests relating to old-style annotations that assign
@@ -56,11 +57,11 @@ export var FieldView = AnnotatableView.extend({
     addEdit: function(event) {
         event.preventDefault();
         var fieldId = this.model.get('key');
-        var fieldContents = this.model.get('value');
+        var fieldContents = this.model.get('value'); // If undefined, this field did not exist in the original record
         var attributes = {
             "oa:hasSource": this.collection.underlying.target,
             "edpopcol:field": fieldId,
-            "motivation": "oa:editing",
+            "motivation": (fieldContents ? "oa:editing" : "oa:describing"),
         };
         if (fieldContents) {
             attributes['edpopcol:originalText'] = fieldContents['edpoprec:originalText'];
diff --git a/frontend/vre/field/field.view.mustache b/frontend/vre/field/field.view.mustache
index 548a1909..f837bf22 100644
--- a/frontend/vre/field/field.view.mustache
+++ b/frontend/vre/field/field.view.mustache
@@ -3,4 +3,7 @@
     {{#linkedRecordUri}}<a href="/record/{{linkedRecordUri}}" target="_blank" title="Go to linked record">{{displayText}}</a>{{/linkedRecordUri}}
     {{^linkedRecordUri}}{{displayText}}{{/linkedRecordUri}}
 </div>{{/hasEdit}}<div class="annotations"></div></td>
-<td>{{#hasEdit}}<a class="fa-solid fa-pen comment text-decoration-none" role="button" title="Add correction"></a>{{/hasEdit}}</td>
+<td>{{#hasEdit}}
+    {{#isEmpty}}<a class="fa-solid fa-plus comment text-decoration-none" role="button" title="Make addition"></a>{{/isEmpty}}
+    {{^isEmpty}}<a class="fa-solid fa-pen comment text-decoration-none" role="button" title="Add correction"></a>{{/isEmpty}}
+{{/hasEdit}}</td>

From 6a3c5e6171520ccd6d59afed1cb1099ebd12c47d Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 9 Apr 2026 16:22:28 +0200
Subject: [PATCH 09/23] Show corrected values in table

---
 frontend/vre/field/field.model.js   | 30 +++++++++++++++++++++++++----
 frontend/vre/record/record.model.js |  3 +--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/frontend/vre/field/field.model.js b/frontend/vre/field/field.model.js
index 1c6f700c..5909de19 100644
--- a/frontend/vre/field/field.model.js
+++ b/frontend/vre/field/field.model.js
@@ -11,15 +11,35 @@ import {
 } from "../utils/record-ontology";
 import {getStringLiteral} from "../utils/jsonld.model";
 
+/**
+ * Get correction for a field value based on
+ * @param value
+ * @param {Annotations} [annotations] - annotations for the record
+ * @returns {string|undefined}
+ */
+function getCorrectedTextForFieldValue(value, annotations) {
+    if (!annotations) return undefined;
+    var annotation = annotations.find(x => {
+        return x.get('edpopcol:originalText') === value['edpoprec:originalText']
+    });
+    if (annotation) {
+        return annotation.get('oa:hasBody');
+    }
+    return undefined;
+}
+
 /**
  * Get a default main display string of the `value` attribute of a
  * field flattened using {@link FlatterFields}. Currently, this is
  * the normalized "summary text" if available and otherwise the
  * original text from the source database.
  * @param {object} value
+ * @param {Annotations} [annotations] - annotations for the field
  * @return {string}
  */
-function getMainDisplayOfFieldValue(value) {
+function getMainDisplayOfFieldValue(value, annotations = null) {
+    var correctedText = getCorrectedTextForFieldValue(value, annotations);
+    if (correctedText) return correctedText;
     return value['edpoprec:summaryText'] || value['edpoprec:originalText'];
 }
 
@@ -28,16 +48,18 @@ export var Field = Backbone.Model.extend({
     idAttribute: 'key',
     /**
      * Get the default rendering of the field
+     *
+     * @param {Annotations} annotations - Optional annotations for the field
      * @return {string}
      */
-    getMainDisplay() {
+    getMainDisplay(annotations = null) {
         // Currently, only normalizedText is supported.
         const value = this.get('value');
         if (!value) return value;
         if (_.isArray(value)) {
-            return _.map(value, getMainDisplayOfFieldValue).join(' ; ');
+            return _.map(value, (value) => getMainDisplayOfFieldValue(value, annotations)).join(' ; ');
         }
-        return getMainDisplayOfFieldValue(value);
+        return getMainDisplayOfFieldValue(value, annotations);
     },
     getFieldInfo() {
         const property = properties.get(this.id);
diff --git a/frontend/vre/record/record.model.js b/frontend/vre/record/record.model.js
index ba7dd85b..db43f12d 100644
--- a/frontend/vre/record/record.model.js
+++ b/frontend/vre/record/record.model.js
@@ -2,7 +2,6 @@ import { Annotations } from '../annotation/annotation.model';
 import { JsonLdModel, JsonLdNestedCollection} from "../utils/jsonld.model";
 import { FlatFields } from "../field/field.model";
 import {vreChannel} from "../radio";
-import { FilteredCollection } from "../utils/filtered.collection";
 
 /**
  * Get the URL to fetch the record on its own from the backend.
@@ -56,7 +55,7 @@ export var Record = JsonLdModel.extend({
             id: this.id,  // id is used for identification by Tabular by default
         };
         fields.forEach((field) => {
-            data[field.id] = field.getMainDisplay();
+            data[field.id] = field.getMainDisplay(this.annotations);
         });
         return data;
     },

From 292a90b8b5453592a9ded45f6153f9a05ba6e6f6 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 9 Apr 2026 20:02:29 +0200
Subject: [PATCH 10/23] Update table when annotations are deleted

---
 frontend/vre/record/record.model.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/vre/record/record.model.js b/frontend/vre/record/record.model.js
index db43f12d..fcab075f 100644
--- a/frontend/vre/record/record.model.js
+++ b/frontend/vre/record/record.model.js
@@ -65,7 +65,10 @@ export var Record = JsonLdModel.extend({
             if (!this.isNew()) {
                 this.annotations.fetch();
             }
-            this.annotations.on('sync', () => this.trigger('annotations:loaded', this));
+            /* Trigger annotations:loaded to rerender the table row with annotations
+               on sync (which happens after fetching, creating and editing an annotation
+               and remove (which happens after deleting an annotation) */
+            this.annotations.on('sync remove', () => this.trigger('annotations:loaded', this));
         }
         return this.annotations;
     },

From 2543014e862c06146e7201bab293b67cd14f5d11 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 9 Apr 2026 20:18:49 +0200
Subject: [PATCH 11/23] Give modal focus on opening to make Esc key work

---
 frontend/vre/record/record.detail.view.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/vre/record/record.detail.view.js b/frontend/vre/record/record.detail.view.js
index f653da3e..652b3dc9 100644
--- a/frontend/vre/record/record.detail.view.js
+++ b/frontend/vre/record/record.detail.view.js
@@ -25,6 +25,8 @@ export var RecordDetailView = CompositeView.extend({
     attributes: {
         'role': 'dialog',
         'data-bs-focus': 'false',
+        'data-bs-keyboard': 'true',
+        'tabindex': '-1',
     },
 
     subviews: [{
@@ -131,6 +133,7 @@ export var RecordDetailView = CompositeView.extend({
 
     display: function() {
         this.$el.modal('show');
+        this.$el.focus();
         return this;
     },
 

From 33b326ff4878cb5f9af8c5a2aee965008560de97 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 9 Apr 2026 20:19:44 +0200
Subject: [PATCH 12/23] Show annotations to empty fields in table

---
 frontend/vre/field/field.model.js | 45 ++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/frontend/vre/field/field.model.js b/frontend/vre/field/field.model.js
index 5909de19..b66fae0a 100644
--- a/frontend/vre/field/field.model.js
+++ b/frontend/vre/field/field.model.js
@@ -13,15 +13,25 @@ import {getStringLiteral} from "../utils/jsonld.model";
 
 /**
  * Get correction for a field value based on
- * @param value
+ * @param {Object} value - the specific value to get the display of
+ * @param {Field} field - the whole field object
  * @param {Annotations} [annotations] - annotations for the record
  * @returns {string|undefined}
  */
-function getCorrectedTextForFieldValue(value, annotations) {
+function getCorrectedTextForFieldValue(value, field, annotations) {
     if (!annotations) return undefined;
-    var annotation = annotations.find(x => {
-        return x.get('edpopcol:originalText') === value['edpoprec:originalText']
-    });
+    var annotation;
+    if (!value) {
+        // Field missing in the source data: edpopcol:originalText should not be present
+        annotation = annotations.find(x => {
+            return x.get('edpopcol:field') === field.id && !x.get('edpopcol:originalText');
+        });
+    } else {
+        // Field present in the source data: check if edpopcol:originalText matches
+        annotation = annotations.find(x => {
+            return x.get('edpopcol:field') === field.id && x.get('edpopcol:originalText') === value['edpoprec:originalText']
+        });
+    }
     if (annotation) {
         return annotation.get('oa:hasBody');
     }
@@ -32,13 +42,14 @@ function getCorrectedTextForFieldValue(value, annotations) {
  * Get a default main display string of the `value` attribute of a
  * field flattened using {@link FlatterFields}. Currently, this is
  * the normalized "summary text" if available and otherwise the
- * original text from the source database.
- * @param {object} value
+ * original text from the source database. If
+ * @param {Object} value - the specific value to get the display of
+ * @param {Field} field - the whole field object
  * @param {Annotations} [annotations] - annotations for the field
  * @return {string}
  */
-function getMainDisplayOfFieldValue(value, annotations = null) {
-    var correctedText = getCorrectedTextForFieldValue(value, annotations);
+function getMainDisplayOfFieldValue(value, field, annotations = null) {
+    var correctedText = getCorrectedTextForFieldValue(value, field, annotations);
     if (correctedText) return correctedText;
     return value['edpoprec:summaryText'] || value['edpoprec:originalText'];
 }
@@ -55,11 +66,19 @@ export var Field = Backbone.Model.extend({
     getMainDisplay(annotations = null) {
         // Currently, only normalizedText is supported.
         const value = this.get('value');
-        if (!value) return value;
-        if (_.isArray(value)) {
-            return _.map(value, (value) => getMainDisplayOfFieldValue(value, annotations)).join(' ; ');
+        if (!value) {
+            // Field is missing in the source data: return annotation if present
+            var correctedText = getCorrectedTextForFieldValue(null, this, annotations);
+            if (correctedText)
+                return correctedText;
+            else
+                return '';
+        } else if (_.isArray(value)) {
+            // Field is repeated: concatenate all values
+            return _.map(value, (value) => getMainDisplayOfFieldValue(value, this, annotations)).join(' ; ');
+        } else {
+            return getMainDisplayOfFieldValue(value, this, annotations);
         }
-        return getMainDisplayOfFieldValue(value, annotations);
     },
     getFieldInfo() {
         const property = properties.get(this.id);

From 2b4eecc8e53c1be176626e40cea80a22e46c4c2b Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Sun, 26 Apr 2026 13:46:35 +0200
Subject: [PATCH 13/23] Close annotation editor on escape

---
 frontend/vre/annotation/annotation.edit.view.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/vre/annotation/annotation.edit.view.js b/frontend/vre/annotation/annotation.edit.view.js
index 8948fb3e..782715c7 100644
--- a/frontend/vre/annotation/annotation.edit.view.js
+++ b/frontend/vre/annotation/annotation.edit.view.js
@@ -106,6 +106,10 @@ export var AnnotationEditView = View.extend({
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             this.submit(event);
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.reset(event);
         }
     }
 });

From 1e22a2a23c68c87c8d8d2dcd265b8bb5c9b649d7 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Sun, 26 Apr 2026 14:00:16 +0200
Subject: [PATCH 14/23] Allow dismissing the modal with escape after closing
 annotation editor

---
 frontend/vre/annotation/annotation.edit.view.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/vre/annotation/annotation.edit.view.js b/frontend/vre/annotation/annotation.edit.view.js
index 782715c7..c5a6718d 100644
--- a/frontend/vre/annotation/annotation.edit.view.js
+++ b/frontend/vre/annotation/annotation.edit.view.js
@@ -70,13 +70,22 @@ export var AnnotationEditView = View.extend({
         return this;
     },
     remove: function() {
+        var parentElement = this.el.parentElement;
         this.$el.popover('dispose');
         this.trashConfirmer.off();
         this.trashCanceller.off();
         if (this.model.get('motivation') === 'oa:tagging') {
             this.$('select').select2('destroy');
         }
-        return View.prototype.remove.call(this);
+        var result = View.prototype.remove.call(this);
+        if (parentElement) {
+            // Give focus to parent element to make escape key work
+            if (!parentElement.hasAttribute('tabindex')) {
+                parentElement.setAttribute('tabindex', '-1');
+            }
+            parentElement.focus();
+        }
+        return result;
     },
     submit: function(event) {
         event.preventDefault();

From 5a6b981061674b97089719033d2c6004efcace14 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 21 May 2026 11:40:55 +0200
Subject: [PATCH 15/23] Add clarification about textarea focus timeout

---
 frontend/vre/annotation/annotation.edit.view.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/vre/annotation/annotation.edit.view.js b/frontend/vre/annotation/annotation.edit.view.js
index c5a6718d..b566758a 100644
--- a/frontend/vre/annotation/annotation.edit.view.js
+++ b/frontend/vre/annotation/annotation.edit.view.js
@@ -39,6 +39,7 @@ export var AnnotationEditView = View.extend({
         if (this.model.get('motivation') === 'oa:tagging') {
             glossary.on('update', this.render);
         }
+        // Focus on textarea, but wait for one cycle to ensure DOM is ready
         setTimeout(() => {
             var el = this.$('textarea').get(0);
             if (el) {

From 5a147b1ab760054aff50fef6dd4fb6d31db14d9d Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 21 May 2026 11:42:42 +0200
Subject: [PATCH 16/23] Remove redundant line

---
 frontend/vre/field/field.model.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/vre/field/field.model.js b/frontend/vre/field/field.model.js
index b66fae0a..6762d629 100644
--- a/frontend/vre/field/field.model.js
+++ b/frontend/vre/field/field.model.js
@@ -35,7 +35,6 @@ function getCorrectedTextForFieldValue(value, field, annotations) {
     if (annotation) {
         return annotation.get('oa:hasBody');
     }
-    return undefined;
 }
 
 /**

From bec3dbd3e73bd15bada1df9711c34a6394aa4bc3 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 21 May 2026 11:44:12 +0200
Subject: [PATCH 17/23] Fix incomplete comment

---
 frontend/vre/field/field.model.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/vre/field/field.model.js b/frontend/vre/field/field.model.js
index 6762d629..ffe7848b 100644
--- a/frontend/vre/field/field.model.js
+++ b/frontend/vre/field/field.model.js
@@ -41,7 +41,8 @@ function getCorrectedTextForFieldValue(value, field, annotations) {
  * Get a default main display string of the `value` attribute of a
  * field flattened using {@link FlatterFields}. Currently, this is
  * the normalized "summary text" if available and otherwise the
- * original text from the source database. If
+ * original text from the source database. If there is a correction
+ * for the field value, use that instead.
  * @param {Object} value - the specific value to get the display of
  * @param {Field} field - the whole field object
  * @param {Annotations} [annotations] - annotations for the field

From 6af110ab16723a93a80a310d7d9fba778faf2522 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 21 May 2026 11:45:49 +0200
Subject: [PATCH 18/23] Simplify code

Co-authored-by: Julian Gonggrijp <j.gonggrijp@uu.nl>
---
 frontend/vre/field/field.model.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/vre/field/field.model.js b/frontend/vre/field/field.model.js
index ffe7848b..82d532f9 100644
--- a/frontend/vre/field/field.model.js
+++ b/frontend/vre/field/field.model.js
@@ -68,11 +68,7 @@ export var Field = Backbone.Model.extend({
         const value = this.get('value');
         if (!value) {
             // Field is missing in the source data: return annotation if present
-            var correctedText = getCorrectedTextForFieldValue(null, this, annotations);
-            if (correctedText)
-                return correctedText;
-            else
-                return '';
+            return getCorrectedTextForFieldValue(null, this, annotations) || '';
         } else if (_.isArray(value)) {
             // Field is repeated: concatenate all values
             return _.map(value, (value) => getMainDisplayOfFieldValue(value, this, annotations)).join(' ; ');

From cde9d6f8a9ff65f965fafa672cf8f6a243dbba0f Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 21 May 2026 11:54:46 +0200
Subject: [PATCH 19/23] Use has method of Backbone.js model

Co-authored-by: Julian Gonggrijp <j.gonggrijp@uu.nl>
---
 frontend/vre/field/field.view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/vre/field/field.view.js b/frontend/vre/field/field.view.js
index 02bbe5dc..fc56d21f 100644
--- a/frontend/vre/field/field.view.js
+++ b/frontend/vre/field/field.view.js
@@ -35,7 +35,7 @@ export var FieldView = AnnotatableView.extend({
         const templateData = {
             field: this.model.get('key'),
             hasEdit: !this.hasEdit(),
-            isEmpty: typeof this.model.get('value') === 'undefined',
+            isEmpty: !this.model.has('value'),
         };
         // Check if model is of Field model before using these methods, because
         // there are some tests relating to old-style annotations that assign

From bddd07927ad863c4e4ccee8b11617be8b62d8418 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 21 May 2026 13:46:23 +0200
Subject: [PATCH 20/23] Change confusing template data key name

---
 frontend/vre/field/field.view.js       | 2 +-
 frontend/vre/field/field.view.mustache | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/vre/field/field.view.js b/frontend/vre/field/field.view.js
index fc56d21f..bf441be5 100644
--- a/frontend/vre/field/field.view.js
+++ b/frontend/vre/field/field.view.js
@@ -34,7 +34,7 @@ export var FieldView = AnnotatableView.extend({
     renderContainer: function() {
         const templateData = {
             field: this.model.get('key'),
-            hasEdit: !this.hasEdit(),
+            hasNoEdit: !this.hasEdit(),
             isEmpty: !this.model.has('value'),
         };
         // Check if model is of Field model before using these methods, because
diff --git a/frontend/vre/field/field.view.mustache b/frontend/vre/field/field.view.mustache
index f837bf22..41642d16 100644
--- a/frontend/vre/field/field.view.mustache
+++ b/frontend/vre/field/field.view.mustache
@@ -1,8 +1,8 @@
 <td><u title="{{fieldInfo.description}}">{{fieldInfo.name}}</u></td>
-<td>{{#hasEdit}}<div>
+<td>{{#hasNoEdit}}<div>
     {{#linkedRecordUri}}<a href="/record/{{linkedRecordUri}}" target="_blank" title="Go to linked record">{{displayText}}</a>{{/linkedRecordUri}}
     {{^linkedRecordUri}}{{displayText}}{{/linkedRecordUri}}
-</div>{{/hasEdit}}<div class="annotations"></div></td>
+</div>{{/hasNoEdit}}<div class="annotations"></div></td>
 <td>{{#hasEdit}}
     {{#isEmpty}}<a class="fa-solid fa-plus comment text-decoration-none" role="button" title="Make addition"></a>{{/isEmpty}}
     {{^isEmpty}}<a class="fa-solid fa-pen comment text-decoration-none" role="button" title="Add correction"></a>{{/isEmpty}}

From 4a1552fde708f3bf968486c3361181e1a2cfec85 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 21 May 2026 13:46:53 +0200
Subject: [PATCH 21/23] Remove code duplication

Co-authored-by: Julian Gonggrijp <j.gonggrijp@uu.nl>
---
 frontend/vre/field/field.model.js | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/vre/field/field.model.js b/frontend/vre/field/field.model.js
index 82d532f9..78893104 100644
--- a/frontend/vre/field/field.model.js
+++ b/frontend/vre/field/field.model.js
@@ -11,6 +11,15 @@ import {
 } from "../utils/record-ontology";
 import {getStringLiteral} from "../utils/jsonld.model";
 
+function annotationMatchesField(field, value) {
+    var originalText = value && value['edpoprec:originalText'];
+    return function(anno) {
+        if (anno.get('edpopcol:field') !== field.id) return false;
+        var annoText = anno.get('edpopcol:originalText');
+        return originalText == null ? !annoText : annoText === originalText;
+    };
+}
+
 /**
  * Get correction for a field value based on
  * @param {Object} value - the specific value to get the display of
@@ -20,18 +29,7 @@ import {getStringLiteral} from "../utils/jsonld.model";
  */
 function getCorrectedTextForFieldValue(value, field, annotations) {
     if (!annotations) return undefined;
-    var annotation;
-    if (!value) {
-        // Field missing in the source data: edpopcol:originalText should not be present
-        annotation = annotations.find(x => {
-            return x.get('edpopcol:field') === field.id && !x.get('edpopcol:originalText');
-        });
-    } else {
-        // Field present in the source data: check if edpopcol:originalText matches
-        annotation = annotations.find(x => {
-            return x.get('edpopcol:field') === field.id && x.get('edpopcol:originalText') === value['edpoprec:originalText']
-        });
-    }
+    var annotation = annotations.find(annotationMatchesField(field, value));
     if (annotation) {
         return annotation.get('oa:hasBody');
     }

From 84e7017c701def2b7ca96d5939d56783adc81d33 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 28 May 2026 12:04:27 +0200
Subject: [PATCH 22/23] Update changed attribute name in other area

---
 frontend/vre/field/field.view.mustache | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/vre/field/field.view.mustache b/frontend/vre/field/field.view.mustache
index 41642d16..c1b17f96 100644
--- a/frontend/vre/field/field.view.mustache
+++ b/frontend/vre/field/field.view.mustache
@@ -3,7 +3,7 @@
     {{#linkedRecordUri}}<a href="/record/{{linkedRecordUri}}" target="_blank" title="Go to linked record">{{displayText}}</a>{{/linkedRecordUri}}
     {{^linkedRecordUri}}{{displayText}}{{/linkedRecordUri}}
 </div>{{/hasNoEdit}}<div class="annotations"></div></td>
-<td>{{#hasEdit}}
+<td>{{#hasNoEdit}}
     {{#isEmpty}}<a class="fa-solid fa-plus comment text-decoration-none" role="button" title="Make addition"></a>{{/isEmpty}}
     {{^isEmpty}}<a class="fa-solid fa-pen comment text-decoration-none" role="button" title="Add correction"></a>{{/isEmpty}}
-{{/hasEdit}}</td>
+{{/hasNoEdit}}</td>

From 93a6c2fe458d5cefc02df7d0534a486113aa1034 Mon Sep 17 00:00:00 2001
From: Tijmen Baarda <tijmenbaarda@gmail.com>
Date: Thu, 30 Jul 2026 16:11:26 +0200
Subject: [PATCH 23/23] Fix frontend unit tests for AnnotationEditView

---
 frontend/vre/annotation/annotation.edit.view.js    | 2 +-
 frontend/vre/field/record.annotations.view.test.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/vre/annotation/annotation.edit.view.js b/frontend/vre/annotation/annotation.edit.view.js
index b566758a..432762a5 100644
--- a/frontend/vre/annotation/annotation.edit.view.js
+++ b/frontend/vre/annotation/annotation.edit.view.js
@@ -6,7 +6,7 @@ import {glossary} from "../utils/glossary";
 
 export var AnnotationEditView = View.extend({
     tagName: 'div',
-    className: 'form-inline',
+    className: 'form-inline annotation-editor',
     template: annotationEditTemplate,
     glossaryTemplate: annotationTagEditTemplate,
     events: {
diff --git a/frontend/vre/field/record.annotations.view.test.js b/frontend/vre/field/record.annotations.view.test.js
index e8b2efc5..f948e927 100644
--- a/frontend/vre/field/record.annotations.view.test.js
+++ b/frontend/vre/field/record.annotations.view.test.js
@@ -46,9 +46,9 @@ var oneDown = numAnnotations - 1;
 
 function assertEditorAppended() {
     assert(this.view.items.length === oneUp);
-    assert(this.view.$('tr').length === oneUp);
+    assert(this.view.$('tr').length === numAnnotations);
     assert(this.editor instanceof AnnotationEditView);
-    assert(this.view.$('tr').get(-1) === this.editor.el);
+    assert(this.view.$('div.annotation-editor').get(0) === this.editor.el);
 }
 
 function assertEditorRemoved() {
@@ -189,9 +189,9 @@ describe('RecordAnnotationsView', function() {
 
         it('inserts a new AnnotationEditView', function() {
             assert(this.view.items.length === numAnnotations);
-            assert(this.view.$('tr').length === numAnnotations);
+            assert(this.view.$('div.annotation-editor').length === 1);
             assert(this.editor instanceof AnnotationEditView);
-            assert(this.view.$('tr').get(this.position) === this.editor.el);
+            assert(this.view.$('div.annotation-editor').get(0) === this.editor.el);
         });
 
         it('edits the pre-existing model', function() {