').append(svg.clone()).html(), true);\n svgCanvas.ungroupSelectedElement();\n // TODO: To undo the adding of the Formula you now have to undo twice.\n // This should only be once!\n svgCanvas.moveSelectedElements(locationX, locationY, true);\n }\n );\n }\n\n const buttons = [{\n id: 'tool_mathjax',\n type: 'mode',\n icon: 'mathjax.png',\n events: {\n async click () {\n // Set the mode.\n svgCanvas.setMode('mathjax');\n\n // Only load Mathjax when needed, we don't want to strain Svg-Edit any more.\n // From this point on it is very probable that it will be needed, so load it.\n if (mathjaxLoaded === false) {\n $(\n '
' +\n '' +\n '
' +\n '$${}$$' +\n '
' +\n '
' +\n '
' +\n '
' +\n '' +\n '' +\n '
' +\n '
' +\n '
' +\n '
'\n ).insertAfter('#svg_prefs').hide();\n\n // Make the MathEditor draggable.\n $('#mathjax_container').draggable({\n cancel: 'button,fieldset',\n containment: 'window'\n });\n\n // Add functionality and picture to cancel button.\n $('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true))\n .on('click touched', function () {\n $('#mathjax').hide();\n });\n\n // Add functionality and picture to the save button.\n $('#tool_mathjax_save').prepend($.getSvgIcon('ok', true))\n .on('click touched', function () {\n saveMath();\n $('#mathjax').hide();\n });\n\n // MathJax preprocessing has to ignore most of the page.\n $('body').addClass('tex2jax_ignore');\n\n try {\n await import('./mathjax/MathJax.min.js'); // ?config=TeX-AMS-MML_SVG.js');\n // When MathJax is loaded get the div where the math will be rendered.\n MathJax.Hub.queue.Push(function () {\n math = MathJax.Hub.getAllJax('#mathjax_creator')[0];\n console.log(math); // eslint-disable-line no-console\n mathjaxLoaded = true;\n console.log('MathJax Loaded'); // eslint-disable-line no-console\n });\n } catch (e) {\n console.log('Failed loading MathJax.'); // eslint-disable-line no-console\n $.alert('Failed loading MathJax. You will not be able to change the mathematics.');\n }\n }\n }\n }\n }];\n\n return {\n name: strings.name,\n svgicons: 'mathjax-icons.xml',\n buttons: strings.buttons.map((button, i) => {\n return Object.assign(buttons[i], button);\n }),\n\n mouseDown () {\n if (svgCanvas.getMode() === 'mathjax') {\n return {started: true};\n }\n return undefined;\n },\n mouseUp (opts) {\n if (svgCanvas.getMode() === 'mathjax') {\n // Get the coordinates from your mouse.\n const zoom = svgCanvas.getZoom();\n // Get the actual coordinate by dividing by the zoom value\n locationX = opts.mouse_x / zoom;\n locationY = opts.mouse_y / zoom;\n\n $('#mathjax').show();\n return {started: false}; // Otherwise the last selected object dissapears.\n }\n return undefined;\n },\n callback () {\n $('