function textareaCreate(textEl, verticalMiddle, val, onchange, onblur) {
	let foreign = svgEl('foreignObject');
	const textarea = document.createElement('textarea');
	const draw = () => foreignWidthSet(textEl, foreign, textarea, textareaPaddingAndBorder, textareaStyle.textAlign);

	textarea.value = val || '';
	textarea.oninput = function() {
		svgTextDraw(textEl, verticalMiddle, textarea.value);
		onchange(textarea.value);
		draw();
	};
	textarea.onblur = function() {
		onblur(textarea.value);
	};
	textarea.onpointerdown = function(evt) {
		evt.stopImmediatePropagation();
	};

	foreign.appendChild(textarea);
	textEl.parentElement.appendChild(foreign);

	const textareaStyle = getComputedStyle(textarea);
	// must be in px
	const textareaPaddingAndBorder = parseInt(textareaStyle.paddingLeft) + parseInt(textareaStyle.borderWidth);
	draw();

	textarea.focus();

	return {
		dispose: () => { foreign.remove(); foreign = null; },
		draw
	};
}
Create teaxtArea above SVGTextElement 'textEl'
update 'textEl' with text from teaxtArea
resize teaxtArea - so teaxtArea always cover all 'textEl'
@param {SVGTextElement} textEl
@param {number} verticalMiddle em
@param {string} val
@param {{(val:string):void}} onchange
@param {{(val:string):void}} onblur