Implement add above and below

file-group.js

@@ -30,6 +30,28 @@ export class FileGroup extends HTMLElement {
       }
     })
     this.shadowRoot.appendChild(bGroup)
+    this.contentEl.addEventListener(
+      'click-add-above',
+      e => {
+        const el = document.createElement(
+          'm-editor-file-view'
+        )
+        e.target.insertAdjacentElement(
+          'beforebegin', el
+        )
+      },
+    )
+    this.contentEl.addEventListener(
+      'click-add-below',
+      e => {
+        const el = document.createElement(
+          'm-editor-file-view'
+        )
+        e.target.insertAdjacentElement(
+          'afterend', el
+        )
+      },
+    )
   }
 
   connectedCallback() {

file-view.js

@@ -18,10 +18,14 @@ export class FileView extends HTMLElement {
   }
 
   textEn = {
+    addAbove: 'Add above',
+    addBelow: 'Add below',
     delete: 'Delete',
   }
 
   textEs = {
+    addAbove: 'Añadir arriba',
+    addBelow: 'Añadir abajo',
     delete: 'Borrar',
   }
 
@@ -58,6 +62,16 @@ export class FileView extends HTMLElement {
     this.menu = document.createElement(
       'm-menu-dropdown'
     )
+    this.menu.add(this.text.addAbove, () => {
+      this.dispatchEvent(new CustomEvent(
+        'click-add-above', {bubbles: true}
+      ))
+    })
+    this.menu.add(this.text.addBelow, () => {
+      this.dispatchEvent(new CustomEvent(
+        'click-add-below', {bubbles: true}
+      ))
+    })
     this.menu.add(this.text.delete, () => {
       this.remove()
     })