Insert an image into the wordpress editor always wrapped in a figure tag. The javascript is used to remove the figure element from the editor if the delete button is used. Editing alingnment left/right/center/none is supported.

admin.js

(function($) {
  $(document).ready(function() {
    $('body').on('mousedown', 'div[aria-label="Remove"]', function(e) {
      var editor = tinyMCE.activeEditor, 
          element = editor.selection.getNode();
          
      if(element.tagName !== 'FIGURE') {
        $(element).parents('figure').remove();
      }
    });
    $('body').on('mousedown', 'div[aria-label="Align left"]', function(e) {
      var editor = tinyMCE.activeEditor, 
          element = editor.selection.getNode(),
          $figure;
          
      if(element.tagName !== 'FIGURE') {
        $figure = $(element).parents('figure');
        $figure.removeClass('aligncenter alignright alignnone');
        $figure.addClass('alignleft');
      }
    });
    $('body').on('mousedown', 'div[aria-label="Align center"]', function(e) {
      var editor = tinyMCE.activeEditor, 
          element = editor.selection.getNode(),
          $figure;
          
      if(element.tagName !== 'FIGURE') {
        $figure = $(element).parents('figure');
        $figure.removeClass('alignleft alignright alignnone');
        $figure.addClass('aligncenter');
      }
    });
    $('body').on('mousedown', 'div[aria-label="Align right"]', function(e) {
      var editor = tinyMCE.activeEditor, 
          element = editor.selection.getNode(),
          $figure;
          
      if(element.tagName !== 'FIGURE') {
        $figure = $(element).parents('figure');
        $figure.removeClass('aligncenter alignleft alignnone');
        $figure.addClass('alignright');
      }
    });
    $('body').on('mousedown', 'div[aria-label="No alignment"]', function(e) {
      var editor = tinyMCE.activeEditor, 
          element = editor.selection.getNode(),
          $figure;
          
      if(element.tagName !== 'FIGURE') {
        $figure = $(element).parents('figure');
        $figure.removeClass('aligncenter alignright alignleft');
        $figure.addClass('alignnone');
      }
    });
  });
}(jQuery));

optional.css

/* To remove any br or p tags that the WordPress editor likes to throw in */
figure img + br,
figure a + br,
figure img + p,
figure a + p  { display: none; }

wordpress-html5-image.php

// Insert Images within Figure Element from Media Uploader
// @see: https://css-tricks.com/snippets/wordpress/insert-images-within-figure-element-from-media-uploader/
function theme_insert_image($html, $id, $caption, $title, $align, $url, $size, $alt ) {
  //Always return an image with a <figure> tag, regardless of link or caption

  //Grab the image tag
  $image_tag = get_image_tag($id, '', $title, $align, $size);

  //Let's see if this contains a link
  $linkptrn = "/<a[^>]*>/";
  $found = preg_match($linkptrn, $html, $a_elem);

  // If no link, do nothing
  if($found > 0) {
    $a_elem = $a_elem[0];

    if(strstr($a_elem, "class=\"") !== false){ // If link already has class defined inject it to attribute
        $a_elem = str_replace("class=\"", "class=\"lightbox ", $a_elem);
    } else { // If no class defined, just add class attribute
        $a_elem = str_replace("<a ", "<a class=\"lightbox\" ", $a_elem);
    }
  } else {
    $a_elem = "";
  }
  // Set up the attributes for the <figure>
  $has_caption = !empty($caption);
  $captionClass = $has_caption ? ' wp-caption' : '';
  $figureId = !empty($id) ? ' id="attachment_' . esc_attr($id) . '"': '';
  $attributes = $figureId . ' class="align' . $align . ' attachment-' . $size . ' size-' . $size . $captionClass . '"';
  
  $output  = '<figure' . $attributes .'>';  
  
  //add the image back in
  $output .= $a_elem;
  $output .= $image_tag;
  if ( $a_elem != "" ) {
    $output .= '</a>';
  }  
  if ( $has_caption ) {
    $output .= '<figcaption class="caption wp-caption-text">' . $caption . '</figcaption>';
  }
  $output .= '</figure>';
  return $output;
}

// Insert Images within Figure Element from Media Uploader
// @see: https://css-tricks.com/snippets/wordpress/insert-images-within-figure-element-from-media-uploader/
add_filter( 'image_send_to_editor', 'theme_insert_image', 10, 9 );
add_filter( 'disable_captions', create_function('$a', 'return true;') );

Everytime i use the delete button, i get a js error and the editor gets cleared

js error: Uncaught TypeError: Cannot read property 'nodeName' of null

I suspect that tinymce wants to delete the tag, but can't after I already deleted the parent with the click event... did this kind of thing happen to you? Do you know how to fix this?

I enqueued the admin script with jquery as a dependency.

just saw your comment right now, i will take a look into it - i had no similar issues, but i have to look how i have implemented it finaly.