Formula-entry and mathematical typesetting block

formula-block-editor.js

const { registerBlockType } = wp.blocks;
const { TextareaControl } = wp.components;
const { createElement: el } = wp.element;

const attributes = {
  formula: { type: 'string' },
  rendered: {
    type: 'string',
    source: 'attribute',
    selector: 'img',
    attribute: 'src',
    default: ''
  }
}

const Edit = ( { attributes: { formula, rendered }, className, isSelected, setAttributes } ) => 
  el( 'div', { className }, [
    isSelected && el( TextareaControl, {
      label: "Formula source",
      value: formula,
      onChange: newFormula => setAttributes( { 
          formula: newFormula,
          rendered: 'data:image/svg+xml;base64,' + btoa( window.MathJax.tex2svg( newFormula ).innerHTML ),
      } ) },
      formula
    ),
    el( 'div', {}, el( 'img', { src: rendered } ) )
  ]
);

const Save = ( { attributes: { rendered }, className } ) =>
  el( 'div', { className }, el( 'img', { src: rendered } ) );

registerBlockType(
  'dmsnell/formula',
  {
    title: 'Formula Entry',
    icon: 'welcome-write-blog',
    category: 'common',
    attributes: attributes,
    edit: Edit,
    save: Save,
  }
);

formula-block.php

<?php
/**
* Plugin Name: Formula Block
* Plugin URI: http://wordpress.com/
* Description: Enter LaTeX-style formulas interactively
* Version: 1.0
* Author: Dennis Snell <[email protected]>
* Author URI: wordpress.com
* License: GPL-2.0
**/

defined( 'ABSPATH' ) or die( 'Cannot access script directly' );

add_action( 'init', function() {
	wp_register_script( 'mathjax-svg', plugins_url( 'tex-mml-svg.js', __FILE__ ), [] );

	wp_enqueue_script( 
		'formula-block-editor', 
		plugins_url( 'formula-block-editor.js', __FILE__ ), 
		[ 'mathjax-svg', 'wp-blocks', 'wp-components', 'wp-element' ] 
	);
} );