Trying to render (read-only) tables with Quill

[andrei-cacio]

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

[xinglianhou]

you can see the version of 2.0.0-dev.0

[andrei-cacio]

hmm, I have copied the Table module from 2.0.0-dev.0 (with the custom blots TableContainer, TableRow, TableCell, TableBody) and simply pasted them in my project and registered the module like so:

Quill.register('modules/table', TableModule);

and when I initialize Quill I tell it to use the Table module too:

new Quill(..., { 
   modules: { table: {} }
}); 

but still nothing. I still get <p /> instead of table elements. Is there other logic parts in the quill core which help with the table support?

[wuxiandiejia]

Maybe this demo can help you https://codepen.io/quill/pen/QxypzX Table module has a insertTable method.

[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?

[xinglianhou]

it change a lot from 1.x to 2.0 dev the base class 'Parchment' also change something,like add the 'AllowContainer' attr. In my project,I just use the quill2.0dev and parchment2.0.0 One day,release 1.x to support table,then change the package.

[benbro]

Work on tables is already in the develop branch. You can check if previous attempts to add table to the 1.x branch match your requirements but duplicating the effort is probably a waste. https://github.com/quilljs/quill/issues/117

[padraigfl]

moved comment to more relevant issue here

[mmouterde]

It could be done using BlockEmbed :

let BlockEmbed = Quill.import('blots/block/embed');
class TableBlot extends BlockEmbed {
    static blotName = 'table';
    static tagName = 'table';
    static className = 'table';
    constructor(node) {
        super(node);
        this.domNode.setAttribute('contenteditable', 'false');
    }
    length() {
        return 1;
    }
}
Quill.register(TableBlot);

[Harish-78]

It could be done using BlockEmbed :

let BlockEmbed = Quill.import('blots/block/embed');
class TableBlot extends BlockEmbed {
    static blotName = 'table';
    static tagName = 'table';
    static className = 'table';
    constructor(node) {
        super(node);
        this.domNode.setAttribute('contenteditable', 'false');
    }
    length() {
        return 1;
    }
}
Quill.register(TableBlot);

then how to implement the table in quill