Trying to render (read-only) tables with Quill

It is more a technical question rather than an issue but I cannot figure out how to solve it.

I am trying to render make Quill render a simple table. I do not intend to have manipulations on that table, only on the text in the cells.

<div id="content">
    <table>
        <tbody>
            <tr>
                <th data-rte-fence=""><b>Table header</b></th>
            </tr>
            <tr>
                <td data-rte-fence="">row 1</td>
            </tr>
            <tr>
                <td data-rte-fence="">row 2</td>
            </tr>
        </tbody>
    </table>
</div>

I created my blots like so:

import Quill from 'quill';

const { Block, Container } = Quill.import('parchment');

class TableCell extends Block {
    static tagName = 'TD';
    static blotName = 'table-cell';
}

class TableHead extends Block {
    static tagName = 'TH';
    static blotName = 'table-head';
}

class TableRow extends Block {
    static tagName = 'TR';
    static blotName = 'table-row';
    static allowedChildren = [TableHead, TableCell];
}

class TableBody extends Block {
    static tagName = 'TBODY';
    static blotName = 'table-body';
    static allowedChildren = [TableRow];
}

class Table extends Block {
    static tagName = 'TABLE';
    static blotName = 'table';
    static allowedChildren = [TableBody];
}

Quill.register(Table);
Quill.register(TableBody);
Quill.register(TableRow);
Quill.register(TableCell);
Quill.register(TableHead);

However I spin it I am still getting this error:

Uncaught Error: Cannot insert block into scroll

After reading the parchment docs I understood that Block blots are similar to block like elements like <p></p> or <div></div> so I figured that they could be a good fit for <table>, <tbody> etc. So I figured that it would be enough just to create the blots and populate them with the correct tag names and Quill will simply render them.

In the parchment docs only three kind of blots are described: Block, Inline and Embed however in the Quill code base I see all sorts of blots used like: Container, Scroll etc. I couldn’t find the relationship between them and I don’t understand when to use one and when the other. In my examples, I simply inherit from the Block blot.

Any help is kindly appreciated thanks!

Steps for Reproduction

Demo here: https://codesandbox.io/s/rmlrl2oqqn StackOverflow question: https://stackoverflow.com/questions/53871816/handling-table-raw-html-in-quill

Expected behavior: Simply rendering the table

Actual behavior: Error when inserting the block

Platforms:

Chrome, MacOS Mojave

Version:

1.3.6

[andrei-cacio]

The demo is based on Quill 2.0. Which isn’t released yet. I wouldn’t feel too comfortable going in production with a dev release. All the docs and reading material are written for Quill 1.x. (Or if there are docs for Quill 2.0 please link me). I tried installing Quill 2.0 but a lot of the API’s have changed and I would have to rewrite a lot of logic for it to work. Also because of there aren’t any docs I have to dig deep into the source code to understand how everything works in Quill 2.0.

Isn’t there a way to make tables work in Quill 1.x?

[padraigfl]

moved comment to more relevant issue here