When trying to insert a table into a quill editor I get an error "[Parchment] Unable to create table blot"

Question

In a vue.js application using the quill editor - as provided by module vue-quill-editor. I want to enhance the editor with table eiting capabilities using module "better-table" provided by npm module "quill-better-table".

When I try to insert a table into the editor though, I get the error message

quill.js:148 Uncaught Error: [Parchment] Unable to create table blot
    at new ParchmentError (quill.js:148)
    at Object.create (quill.js:178)
    at TableCellLine.ShadowBlot.wrap (quill.js:5875)
    at TableCellLine.FormatBlot.wrap (quill.js:3683)
    at TableCellLine.optimize (quill-better-table.js:1360)
    at optimize (quill.js:7258)
    at LinkedList.forEach (quill.js:7121)
    at ScrollBlot.optimize (quill.js:7288)
    at Scroll.optimize (quill.js:4379)
    at ScrollBlot.update (quill.js:7331)

More specifically, I get this error message in a loop, until the browser crashes.

I'm ony showing the relevant parts (hopefully) of the code:

main.ts:

import VueQuillEdtitor, { Quill } from 'vue-quill-editor';
import quillBetterTable from 'quill-better-table';

(window as any).Quill = Quill;
Quill.register("modules/better-table", quillBetterTable);

Vue.use(VueQuillEdtitor);

HtmlEditor.vue:

  <quill-editor v-model="content"
                ref="editor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
....
import { Quill } from 'vue-quill-editor';
....

  data() {
    return {
      editorOption: {
        debug: "debug",
        theme: "snow",
        modules: {
          toolbar : false, 
          "better-table": true
        }
      }
    };
  },
  computed: {
    editor(): Quill {
      return (this.$refs.editor as any).quill
    }
  },
....

  methods: {
    insertTable() {
      const tableModule = this.editor.getModule('better-table');
      tableModule.insertTable(3, 3);
    },

I would have expected that calling method insertTable inserts a table into the editor, but instead I get exceptions in a loop.

Answer 1

vue-quill-editor is using quill version 1.3.4 (s.f. https://github.com/surmon-china/vue-quill-editor/blob/master/package.json). quill-better-table requires quilljs v2.0.0-dev.3.

They are incompatible.