Refactor code

src/ui/mathview.js

@@ -1,4 +1,5 @@
 import View from '@ckeditor/ckeditor5-ui/src/view';
+
 import { renderEquation } from '../utils';
 
 export default class MathView extends View {
@@ -15,7 +16,7 @@ export default class MathView extends View {
 		} );
 
 		this.setTemplate( {
-			tag: 'div',
+			tag: 'iframe',
 			attributes: {
 				class: [
 					'ck',
@@ -26,7 +27,43 @@ export default class MathView extends View {
 	}
 
 	updateMath() {
-		renderEquation( this.value, this.element, this.engine, this.display );
+		const el = this.element;
+		if ( el ) {
+			// Fixme
+			// eslint-disable-next-line
+			setTimeout( () => {
+				let docEl = ( el.contentWindow || el.contentDocument );
+				if ( docEl.document ) {
+					docEl = docEl.document;
+				}
+
+				const headEl = docEl.head;
+
+				// Remove old styles
+				while ( headEl.hasChildNodes() ) {
+					headEl.removeChild( headEl.firstChild );
+				}
+
+				// Add all MathJax styles
+				const styles = document.head.getElementsByTagName( 'style' ); // eslint-disable-line
+				for ( const style of styles ) {
+					const id = style.getAttribute( 'id' );
+					if ( id && id.startsWith( 'MJX' ) ) {
+						headEl.appendChild( style.cloneNode( true ) );
+					}
+				}
+
+				const links = document.head.getElementsByTagName( 'link' ); // eslint-disable-line
+				for ( const link of links ) {
+					headEl.appendChild( link.cloneNode( true ) );
+				}
+
+				const bodyEl = docEl.body;
+				bodyEl.setAttribute( 'style', 'margin-left: 0; margin-right: 0; user-select: none;' );
+
+				renderEquation( this.value, bodyEl, this.engine, this.display );
+			}, 100 );
+		}
 	}
 
 	render() {