Documentation for adding a tinyMCE view for visual live preview of custom shortcode?

I'm trying to add a WYSIWYG visual representation for a custom shortcode into the tinyMCE editor but I can barely find any information on how to do that. Researching the last few days resulted in almost zero or partial information. Why? I don't understand why such an amazing feature seems to not get any attention and support.

This is the best info I could find: https://dtbaker.net/blog/web-development/2014/09/create-your-own-wordpress-tinymce-view-and-shortcode-popup-editor/ But it doesn't explain how to display the UI element as non-block content, so that I can float it right next to text or other elements. Hacking the css doesn't help because the caret will still jump to the next line as soon as something is placed next to it. Also can't find info on how to add custom edit buttons that appear when you click on it like for img tag that lets you align it left/center/right etc.

Is it just me that didn't find anything on that topic or does that information simply not exist? I also found this: https://github.com/WordPress/WordPress/blob/master/wp-includes/js/mce-view.js but can't make sense of it, there doesn't seem to be much info in it on how to actually use it.