Fix widget paste index, add widget render transitions

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Fixes
 
+* Pasting a widget now pastes it after the focused widget, instead of before.
 * Add missing Pages manager shortcuts list helper.
 * Improve the `isEmpty` method of the rich text widget to take into account the HTML blocks (`<figure>` and `<table>`) that are not empty but do not contain any plain text.
 

modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue

@@ -41,40 +41,40 @@
         />
       </template>
     </div>
-    <div class="apos-areas-widgets-list">
+    <TransitionGroup name="apos-widget-list" tag="div">
       <AposAreaWidget
-        v-for="(widget, i) in next"
-        :key="widget._id"
-        :area-id="areaId"
-        :widget="widget"
-        :meta="meta[widget._id]"
-        :generation="generation"
-        :i="i"
-        :options="options"
-        :next="next"
-        :following-values="followingValues"
-        :doc-id="docId"
-        :context-menu-options="contextMenuOptions"
-        :field-id="fieldId"
-        :field="field"
-        :disabled="field && field.readOnly"
-        :widget-hovered="hoveredWidget"
-        :non-foreign-widget-hovered="hoveredNonForeignWidget"
-        :widget-focused="focusedWidget"
-        :max-reached="maxReached"
-        :rendering="rendering(widget)"
-        @up="up"
-        @down="down"
-        @remove="remove"
-        @cut="cut"
-        @copy="copy"
-        @edit="edit"
-        @clone="clone"
-        @update="update"
-        @add="add"
-        @paste="paste"
-      />
-    </div>
+          v-for="(widget, i) in next"
+          :key="widget._id"
+          :area-id="areaId"
+          :widget="widget"
+          :meta="meta[widget._id]"
+          :generation="generation"
+          :i="i"
+          :options="options"
+          :next="next"
+          :following-values="followingValues"
+          :doc-id="docId"
+          :context-menu-options="contextMenuOptions"
+          :field-id="fieldId"
+          :field="field"
+          :disabled="field && field.readOnly"
+          :widget-hovered="hoveredWidget"
+          :non-foreign-widget-hovered="hoveredNonForeignWidget"
+          :widget-focused="focusedWidget"
+          :max-reached="maxReached"
+          :rendering="rendering(widget)"
+          @up="up"
+          @down="down"
+          @remove="remove"
+          @cut="cut"
+          @copy="copy"
+          @edit="edit"
+          @clone="clone"
+          @update="update"
+          @add="add"
+          @paste="paste"
+        />
+    </TransitionGroup>
   </div>
 </template>
 
@@ -337,7 +337,7 @@
         return;
       }
 
-      this.paste(Math.max(this.focusedWidgetIndex, 0));
+      this.paste(Math.max(this.focusedWidgetIndex + 1, 0));
     },
     handleRemove() {
       if (
@@ -816,4 +816,20 @@
   }
 }
 
+.apos-widget-list-enter-active,
+.apos-widget-list-leave-active {
+  @include apos-transition($duration:0.3s);
+
+  & {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.apos-widget-list-enter-from,
+.apos-widget-list-leave-to {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
 </style>