Editor JS how to install the math module

Question

I'm using editor js (a block-style editor) for my app. You can install plugins for this editor to extend is functionality. On GitHub there is a math block plugin that I was trying to use there. But I can't get it to work. Hower here is my code:

First I include the plugin (which is the bundle.js on GitHub):

<script type="text/javascript" src="./plugins/editorjs/blocks/math.js"></script><!-- Math -->

Then I just folowed the normal setup (which worked for the other official plugins)

var editor = new EditorJS({
   ...

   tools: {
   ...
   Math: {
     class: Math,
   },
  }

  ...
});

When I try to type something I get the error TypeError: Math.floor is not a function. Did I miss something?

Edit

https://flaming-cl.github.io/editorPlugin/

There is this example which works, but I don't understand it, there are so many files. I need more like a basic example with just the necessary CDN files.

Answer 1

Okey, I just remade the Plugin with Katex and it's working fine now. Here is my code, maybe it helps someone. Please keep in mind that this code may have bugs etc...

formala.js

class Formula {
  static get toolbox() {
    return {
      title: 'Formula',
      icon: '<?xml version="1.0" encoding="iso-8859-1"?>\r\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r\n<svg version="1.1" id="fxicon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r\n\t width="15px" height="15px" viewBox="0 0 142.514 142.514" style="enable-background:new 0 0 142.514 142.514;"\r\n\t xml:space="preserve">\r\n<g>\r\n\t<g>\r\n\t\t<path d="M34.367,142.514c11.645,0,17.827-10.4,19.645-16.544c0.029-0.097,0.056-0.196,0.081-0.297\r\n\t\t\tc4.236-17.545,10.984-45.353,15.983-65.58h17.886c3.363,0,6.09-2.726,6.09-6.09c0-3.364-2.727-6.09-6.09-6.09H73.103\r\n\t\t\tc1.6-6.373,2.771-10.912,3.232-12.461l0.512-1.734c1.888-6.443,6.309-21.535,13.146-21.535c6.34,0,7.285,9.764,7.328,10.236\r\n\t\t\tc0.27,3.343,3.186,5.868,6.537,5.579c3.354-0.256,5.864-3.187,5.605-6.539C108.894,14.036,104.087,0,89.991,0\r\n\t\t\tC74.03,0,68.038,20.458,65.159,30.292l-0.49,1.659c-0.585,1.946-2.12,7.942-4.122,15.962H39.239c-3.364,0-6.09,2.726-6.09,6.09\r\n\t\t\tc0,3.364,2.726,6.09,6.09,6.09H57.53c-6.253,25.362-14.334,58.815-15.223,62.498c-0.332,0.965-2.829,7.742-7.937,7.742\r\n\t\t\tc-7.8,0-11.177-10.948-11.204-11.03c-0.936-3.229-4.305-5.098-7.544-4.156c-3.23,0.937-5.092,4.314-4.156,7.545\r\n\t\t\tC13.597,130.053,20.816,142.514,34.367,142.514z"/>\r\n\t\t<path d="M124.685,126.809c3.589,0,6.605-2.549,6.605-6.607c0-1.885-0.754-3.586-2.359-5.474l-12.646-14.534l12.271-14.346\r\n\t\t\tc1.132-1.416,1.98-2.926,1.98-4.908c0-3.59-2.927-6.231-6.703-6.231c-2.547,0-4.527,1.604-6.229,3.684l-9.531,12.454L98.73,78.391\r\n\t\t\tc-1.89-2.357-3.869-3.682-6.7-3.682c-3.59,0-6.607,2.551-6.607,6.609c0,1.885,0.756,3.586,2.357,5.471l11.799,13.592\r\n\t\t\tL86.647,115.67c-1.227,1.416-1.98,2.926-1.98,4.908c0,3.589,2.926,6.229,6.699,6.229c2.549,0,4.53-1.604,6.229-3.682l10.19-13.4\r\n\t\t\tl10.193,13.4C119.872,125.488,121.854,126.809,124.685,126.809z"/>\r\n\t</g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n<g>\r\n</g>\r\n</svg>'
    };
  }

  constructor({data}){
    this.data = data;
  }

  render(){
    this.wrapper = document.createElement('div');
    const input = document.createElement('input');
    const inner = document.createElement('div');

    this.wrapper.classList.add('formula-block');
    this.wrapper.appendChild(inner).classList.add('inner-formula-wrapper');
    this.wrapper.appendChild(input).classList.add('cdx-input');

    input.placeholder = 'Enter a LaText formala here...';
    var value = this.data && this.data.text ? this.data.text : '';
    input.value = value;

    //.replace(/\\/g,"\\\\");

    this._createFormala(this.data && this.data.text ? this.data.text : 'eqation: ');


    var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
    for(event of eventList) {
        input.addEventListener(event, (event) => {
          this._createFormala(input.value.replace(/\$/g, ''));
        });
    }


    inner.onclick = function() {
      this.closest('.formula-block').classList.toggle('is-edit');
    }




    return this.wrapper;
  }

  _createFormala(text){
    const input = document.createElement('input');input.value = text;

    var rendered_formula = katex.renderToString(text, {
        throwOnError: false
    });

    input.placeholder = 'Caption...';

    this.wrapper.getElementsByClassName('inner-formula-wrapper').item(0).innerHTML = rendered_formula;

  }

  save(blockContent){
    const input = blockContent.querySelector('input');

    return {
      text: input.value.replace(/\$/g, '')
    }
  }

  validate(savedData){
    if (!savedData.text.trim()){
      return false;
    }

    return true;
  }
}

Tools list config

var editor = EditorJS({
  ...
  
  tools: {
    ...
    formula: Formula,
  }
  
  ...
});

Load the Katext Files and formala.js

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script type="text/javascript" src="./plugins/editorjs/blocks/formula.js"></script><!-- Formula -->

Data Input Usage

  {
      "type": "formula",
      "data": {
          "text": '\\pm\\sqrt{a^2 + b^2} \\newline a ',
      }
  },