✨ Show banner when in edit mode

src/components/InteractiveEditor/EditItem.vue

@@ -152,10 +152,17 @@ export default {
     },
     /* Saves the updated item to VueX Store */
     saveItem() {
+      // Convert form data back into section.item data structure
       const structured = {};
       this.formData.forEach((row) => { structured[row.name] = row.value; });
+      // Some attributes need a little extra formatting
       const newItem = this.formatBeforeSave(structured);
+      // Update the data store, with new item data
       this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      // If we're not already in edit mode, enable it now
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+      // Close edit menu
+      this.$emit('closeEditMenu');
     },
     /* Adds filed from extras list to main form, then removes from extras list */
     appendNewField(fieldId) {

src/components/InteractiveEditor/EditModeTopBanner.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="edit-mode-top-banner">
+    <span>Edit Mode Enabled</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+div.edit-mode-top-banner {
+  width: 100%;
+  text-align: center;
+  padding: 0.2rem 0;
+  background: var(--primary);
+  opacity: var(--dimming-factor);
+  span {
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--background);
+  }
+}
+</style>