The setup consists of Drupal 8 + Webform (ver. 5.6 - https://www.drupal.org/project/webform/releases/8.x-5.6) + CKEditor Image Upload (https://www.drupal.org/project/ckeditor_uploadimage). This allows for users to copy and paste screenshots of issues into CKEditor easily.
When the user takes a screenshot and then uses CTRL+V to paste into CKEditor - the image is uploaded to the server and it works perfectly.
The problem arises when the user right clicks within CKEditor and selects "paste" from CKEditor's right click context menu - it then embeds the image directly (data uri - eg.
<img data-widget="uploadimage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiwAA....)
which isn't a problem, until I the email is sent.
I'm using a Twig Template for the body of the message (it's being emailed / pushed into a ticketing system, thus the need to customize the look) and the code is the following:
{% set upload_screenshot = webform_token('[webform_submission:values:upload_screenshot]', webform_submission) %}
{% if upload_screenshot %}
<p><strong>Screenshot(s):</strong></p><p> {{ upload_screenshot }}
{# Used to try to debug why data uris weren't rendering - with webform debug it displays data uri images, but the downside is that it doesn't render regular image uploads. #}
{#{{ webform_debug(upload_screenshot) }}#}</p>
{% endif %}
If I use the "Default" template, any type of image (whether uploaded or as an embedded image) works fine. So I'm starting to think it's the way that webform_token processes / outputs the information.
When I inspect the code in the broken image, I notice that the data: is removed from the src
<img data-widget="uploadimage" src="image/png;base64,iVBORw0KGg )
For the meantime I'm disabling the right click context menu with this module. (https://www.drupal.org/project/ckeditor_browser_context_menu)
Any ideas on how I can get the images (whether uploaded or embedded) in a custom twig email template would be appreciated.