[Notebook] Press Enter to save notebook entries #3579

nasa · Dec 9, 2020 · 4c3d63b · 4c3d63b
1 parent ce8c31c
commit 4c3d63b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue
@@ -14,6 +14,9 @@
                  class="c-ne__text"
                  :class="{'c-ne__input' : !readOnly }"
                  :contenteditable="!readOnly"
+                 tabindex="0"
+                 @keydown.enter.exact.prevent
+                 @keyup.enter.exact.prevent="updateEntryValue($event, entry.id)"
                  @blur="updateEntryValue($event, entry.id)"
                  @focus="updateCurrentEntryValue($event, entry.id)"
             >{{ entry.text }}</div>
@@ -33,6 +36,7 @@
     >
         <button class="c-icon-button c-icon-button--major icon-trash"
                 title="Delete this entry"
+                tabindex="-1"
                 @click="deleteEntry"
         >
         </button>
@@ -272,16 +276,21 @@ export default {
                 return;
             }
 
-            const entryPos = this.entryPosById(entryId);
+            target.blur();
+
             const value = target.textContent.trim();
-            if (this.currentEntryValue !== value) {
-                target.textContent = value;
+            if (this.currentEntryValue === value) {
+                return;
+            }
 
-                const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
-                entries[entryPos].text = value;
+            target.textContent = value;
+            this.currentEntryValue = value;
 
-                this.updateEntries(entries);
-            }
+            const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
+            const entryPos = this.entryPosById(entryId);
+            entries[entryPos].text = value;
+
+            this.updateEntries(entries);
         },
         updateEntries(entries) {
             this.$emit('updateEntries', entries);

diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss
@@ -292,6 +292,8 @@
         &:focus {
             background: $colorInputBg;
         }
+
+        white-space: pre-wrap;
     }
 
     &__section-and-page {