quil js parchment error

Question

I get a an error when trying to use a formula module in quill.

The error is:

"[Parchment] Unable to create formula blot"

Following the error message in chrome web development tools leads to the following line in registry.ts (webpack:///./~/parchment/src/registry.ts)

function create(input, value) {
    var match = query(input);
    if (match == null) {
        throw new ParchmentError("Unable to create " + input + " blot");
    }
    var BlotClass = match;
    var node = input instanceof Node ? input : BlotClass.create(value);
    return new BlotClass(node, value);
}

It happens when I try to insert a formula.

This happens when I am using the quill-rails5 but also without using the gem. I removed the gem to simplify the problem. Here is my code:

 var quill = new Quill('#editor', {
      modules: {
 formula: true,   
        toolbar: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block'],
          ['formula'],
        ]
      },
      placeholder: 'Compose a solution...',
      theme: 'snow'  // or 'bubble'
    });

my editor container

  <div id="editor">
      <%= raw sanitize @post.description, tags: %w(strong em div a p br ul ol li), attributes: %w(href) %>
  </div>

So do you have a place with a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve), probably just static HTML+JS without ruby backend on codepen, JSFiddle or something similar? Without such example, it is very hard to guess what's difference between you and working examples provided by Ben. — SergGr, Mar 16 '17 at 21:10
updated the answer with example. Also removed the gem to simplify and reproduce the issue. Thinking it may have to do with the sanitize function maybe? — Ayrad, Mar 17 '17 at 14:58
actually it works now. So the problem could have been with the gem ! — Ayrad, Mar 17 '17 at 15:00
sorry but I don't think what you provided really counts as a good example. And this is probably why it works now. I think what makes sense is to analyze your real HTML generated by Ruby and try to copy-paste it bit by bit into a static file until it breaks. Then you or we can find out what's wrong with Ruby-genrated HTML/JS. — SergGr, Mar 17 '17 at 15:02

score 2 · Accepted Answer · answered Mar 01 '17 at 01:50

2

Did you include katex.js and katex.css as explained in the docs?

A working example:

<!-- Include KaTeX stylesheet -->
<link href="katex.css" rel="stylesheet">

<!-- Include KaTeX library -->
<script href="katex.js" type="text/javascript"></script>

<script type="text/javascript">
var quill = new Quill('#editor', {
  modules: {
    formula: true,          // Include formula module
    toolbar: [['formula']]  // Include button in toolbar
  },
  theme: 'snow'
});
</script>

answered Mar 01 '17 at 01:50

Ben Browitt

1,772
8
10

I did but using the cdn. Could it be the issue? – Ayrad Mar 01 '17 at 01:54
– Ayrad Mar 01 '17 at 01:54
You need to fix the katex urls. – Ben Browitt Mar 01 '17 at 22:15
Not sure it's a url issue. I copied the urls directly from https://github.com/Khan/KaTeX and added them inside the in my application.html.erb. I also tried using ktext gems with no luck – Ayrad Mar 02 '17 at 15:30
Check in the browser console if katex is actually loaded. When I remove katex.js I'm getting the same error: http://codepen.io/anon/pen/MpyNGK – Ben Browitt Mar 03 '17 at 18:53
they look like like they are loaded. Please look at screenshot in updated question. – Ayrad Mar 05 '17 at 15:37

quil js parchment error

1 Answers1