JIRATransformer not generating <img> tags from editor

Jira Development
, ,
1

Hello,
I have the following test code:

import React, { useRef, useState } from 'react';
import { withComponentConfiguration } from '../shared/component-configuration';
import { Editor } from '@atlaskit/editor-core';
import { JIRATransformer } from '@atlaskit/editor-jira-transformer';

function PanelComponentTestInternal() {
	const editor = useRef();
	const [htmlValue, setHtmlValue] = useState();

	function getTransformer(schema) {
		return new JIRATransformer(schema);
	}

	function editorOnReady({ editorView }) {
		editor.current = editorView;
		const htmlValue = getEditorHtmlValue();
		setHtmlValue(htmlValue);
	}

	function getEditorHtmlValue() {
		if (editor.current) {
			const { schema, doc } = editor.current.state;

			return getTransformer(schema).encode(doc);
		} else {
			return undefined;
		}
	}

	const imageUploadHandler = (e, fn) => {
		if (e && e.type === 'paste') {
			// TODO
		} else if (e && e.type === 'drop') {
			// TODO
		} else {
			// TODO
		}

		fn({
			src: 'https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2121,x_0,y_175/f_auto,q_auto,w_1100/v1554921998/shape/mentalfloss/549585-istock-909106260.jpg'
		});
	};

	function onSave(event) {
		const htmlValue = getEditorHtmlValue();
		setHtmlValue(htmlValue);
	}

	return (
		<div>
			<h1>Editor:</h1>
			<Editor
				quickInsert={true}
				allowTextColor={true}
				allowRule={true}
				allowTables={true}
				allowHelpDialog={true}
				defaultValue={{
					type: 'doc',
					content: [
						{
							type: 'mediaSingle',
							attrs: {
								layout: 'center'
							},
							content: [
								{
									type: 'media',
									attrs: {
										type: 'external',
										url: 'https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2121,x_0,y_175/f_auto,q_auto,w_1100/v1554921998/shape/mentalfloss/549585-istock-909106260.jpg'
									}
								}
							]
						}
					]
				}}
				legacyImageUploadProvider={Promise.resolve(imageUploadHandler)}
				appearance="comment"
				onEditorReady={editorOnReady}
				contentTransformerProvider={(schema) => getTransformer(schema)}
				media={{
					allowMediaSingle: true,
					allowMediaGroup: true,
					allowLinking: true,
					allowRemoteDimensionsFetch: true,
					allowLazyLoading: true
				}}
				onSave={onSave}
			/>
			<h1>HTML Value:</h1>
			<p>{htmlValue}</p>
		</div>
	);
}

export const PanelComponentTest = withComponentConfiguration(PanelComponentTestInternal, 'PanelComponentTest');

The code doing something very simple - it converting the content in the editor to HTML code.
The thing that not working is that it does not convert the image part.

Given that I have this node:

{
	type: 'mediaSingle',
	attrs: {
		layout: 'center'
	},
	content: [
		{
			type: 'media',
			attrs: {
				type: 'external',
				url: 'https://images2.minutemediacdn.com/image/upload/c_crop,h_1193,w_2121,x_0,y_175/f_auto,q_auto,w_1100/v1554921998/shape/mentalfloss/549585-istock-909106260.jpg'
			}
		}
	]
}

I expect that the output of the HTML will contain the image (img tag with the link).

How to make it work?
Thanks