How to use the blockly.inject function in blockly

var replaceInLineBlockly_ = function(div) {
  var toReplaceArray = div.getElementsByClassName("blockly-readOnly");
  var j = 0;
  for (var i = 0; i < toReplaceArray.length; i++) {
    var toReplace = toReplaceArray[i];
    var content = toReplace.innerHTML;
    var zoom = toReplace.getAttribute("blockly-zoom");
    toReplace.innerHTML = "";
    var localWorkspace = Blockly.inject(
      toReplace,
      _.extend(
        {'readOnly': true},
        zoom ?
          { zoom:
              { controls: false,
                wheel: false,
                startScale: zoom }
          } : {} ));
    var recordUndoBackup = Blockly.Events.recordUndo;
    Blockly.Events.recordUndo = false; // trick to permit top-level shadow blocks
    Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom("" + content + ""), localWorkspace);
    Blockly.Events.recordUndo = recordUndoBackup;
  }
};

componentDidMount = () => {
    // TODO figure out how to use setState here without breaking the toolbox when switching tabs
    this.state.workspace = Blockly.inject(
      this.editorDiv,
      {
        ...this.props.workspaceConfiguration,
        toolbox: this.dummyToolbox,
      },
    );

    if (this.state.xml) {
      if (this.importFromXml(this.state.xml)) {
        this.xmlDidChange();
      } else {
        this.setState({ xml: null }, this.xmlDidChange);
      }
    }

    this.state.workspace.addChangeListener(this.workspaceDidChange);

function setMode(newMode) {
    sParameters.mode = newMode;
    rebuildSearch();
  }

  // Depending on the URL argument, render as LTR or RTL.
  var rtl = sParameters.rtl;

  var mode = _.isString(sParameters.mode) ? sParameters.mode : "demo";
  var isReadOnly = (mode === "view");

  var workspace;
  if (isReadOnly) {

    workspace = Blockly.inject('blocklyDiv', {
        rtl: rtl,
        media: 'media/',
        comments: true,
        disable: true,
        collapse: true,
        readOnly: true,
        realtime: false,
        scrollbars: false,
       });

    SparqlBlocks.Storage.startup(workspace, function() {
    });

  } else {
    var toolbox =
          mode === "test" ?

$.get('xml/toolbox.xml', function (toolbox) {
		require('./code_generators');
		require('./definitions');
		var workspace = blockly.inject('blocklyDiv', {
			media: 'js/blockly/media/',
			toolbox: botUtils.xmlToStr(i18n.xml($.parseXML(botUtils.marketsToXml(toolbox.getElementsByTagName('xml')[0])))),
			zoom: {
				controls: true,
				wheel: false,
				startScale: 1.0,
				maxScale: 3,
				minScale: 0.3,
				scaleSpeed: 1.2
			},
			trashcan: true,
		});
		$.get('xml/main.xml', function (main) {
			blockly.Xml.domToWorkspace(main.getElementsByTagName('xml')[0], workspace);
			blockly.mainWorkspace.getBlockById('trade')
				.setDeletable(false);

$.get('xml/toolbox.xml', function (toolbox) {
	var workspace = blockly.inject('blocklyDiv', {
		media: 'js/blockly/media/',
		toolbox: i18n.xml(toolbox.getElementsByTagName('xml')[0]),
		zoom: {
			controls: true,
			wheel: false,
			startScale: 1.0,
			maxScale: 3,
			minScale: 0.3,
			scaleSpeed: 1.2
		},
		trashcan: true,
	});
	$.get('xml/main.xml', function (main) {
		blockly.Xml.domToWorkspace(main.getElementsByTagName('xml')[0], workspace);
		blockly.mainWorkspace.getBlockById('trade')
			.setDeletable(false);

realtime: false,
        scrollbars: false,
       });

    SparqlBlocks.Storage.startup(workspace, function() {
    });

  } else {
    var toolbox =
          mode === "test" ?
              document.getElementById('toolboxTest') :
        ( mode === "eval" ?
              document.getElementById('toolboxGuide') :
              document.getElementById('toolboxDemo') );

    workspace = Blockly.inject('blocklyDiv', {
        comments: true,
        disable: true,
        collapse: true,
        grid:
          {spacing: 25,
           length: 3,
           colour: '#ccc',
           snap: true},
        maxBlocks: Infinity,
        media: 'media/',
        readOnly: false,
        rtl: rtl,
        scrollbars: true,
        toolbox: toolbox,
        zoom:
          {controls: true,

$.get('xml/toolbox.xml', function (toolbox) {
    require('./code_generators');
    require('./definitions');
    Blockly.Blocks.text.newQuote_ = function(open) {
      var file;
      
      if (open == this.RTL) {
        file = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAYAAAAGuM1UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFpJREFUeNpiZGBg+M+ACRyh9H50CSYGEsEg1AACDlB8HxoAIKwAxAJIcu+h4u+RNcEUz0czMAFJroEBKfiQTUcG95FMF2BBUnAAiA8C8QM05z6A4o1A/AEgwACTSBqO/l02SwAAAABJRU5ErkJggg==';
      } else {
        file = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAYAAAAGuM1UAAAAAXNSR0IArs4c6QAAActpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgSW1hZ2VSZWFkeTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KKS7NPQAAAHFJREFUGBljYICAAiC1H4odIEJwsgHIgskpgEQFgPg9EP8H4vtAjAwUgByQOAjvB2IwaACSMMEEsAiCmI8k5wASZgRikOkgWz4AcSAQg8AFIAaJ3QdxgOABECeCGCANINPRgSNUYD+6BBO6ACH+INQAAKsvFws0VtvEAAAAAElFTkSuQmCC';
      }
      return new Blockly.FieldImage(file, 12, 12, '"');
    };

    var workspace = blockly.inject('blocklyDiv', {
      media: 'js/blockly/media/',
      toolbox: botUtils.xmlToStr(i18n.xml($.parseXML(botUtils.marketsToXml(toolbox.getElementsByTagName('xml')[0])))),
      zoom: {
        wheel: false,
      },
      trashcan: false,
    });
    $.get('xml/main.xml', function (main) {
      blockly.Xml.domToWorkspace(main.getElementsByTagName('xml')[0], workspace);
      blockly.mainWorkspace.getBlockById('trade')
        .setDeletable(false);
      blockly.mainWorkspace.getBlockById('strategy')
        .setDeletable(false);
      blockly.mainWorkspace.getBlockById('finish')
        .setDeletable(false);
      botUtils.updateTokenList();

mounted() {
    var options = this.$props.options || {};
    if (!options.toolbox) {
      options.toolbox = this.$refs["blocklyToolbox"];
    }
    this.workspace = Blockly.inject(this.$refs["blocklyDiv"], options);
  }
}