Improve *selection* placeholder in Snippets to better support non-text nodes

[RealRaven2000]

The placeholder selection can be used to add HTML to existing selected material in an email. When the selection goes across different content this can be erratic (it only really works with text only in its current forms).

Ideally I want to be able to highlight a non-text HTML object and "decorate" it with some "outer HTML". For example, I have the following snippet, which I want to use to add a border and shadow to a selected image:

<div style="border: 1px solid rgba(80, 80, 80, 0.3); box-shadow: rgba(80, 80, 80, 0.3) 5px 5px 5px; width:max-content;">
*selection*
</div>

note: I added line breaks for readability

In the current version this will wrap the containing element (paragraph) which is not intended. Expected behavior: if an image is selected just insert the image into the <div> element.

[RealRaven2000]

Implemented in 3.12.1 on 28/06/2022