soccerloway/quill-better-table

Module for better table in Quill, more useful features are supported.

quill-better-table's Issues

only merge/unmerge functionality and making it work alongside the built-in table module

Just asking,

Due to the latest development in QuillJS, table support is built-in in the latest 2.0.0 versions. Sure you know that.

I want to use the built-in functionality (in fact I've already developed the menus with all options to manage tables,rows,columns inside the toolbar and using the already provided table module), but I'm missing the merge/unmerge options.

Do you think it's possible to compile your library but only using the merge/unmerge module and make it work alongside the built-in functionality for tables (without disabling the current table module) ??

Other approach I'm following is trying to make my own selector for cells: currently I can select several cells like you do in your module, but the events I've attached to the td elements do not allow me to select the text inside the cell.. I'm reading your code to try to understand how do you do this part.. working on it.

Thank you for your wonderful module!!! and for any advice you can give me.

Absolute positioning of .qlbt-col-tool doesn't work when the content itself is scrollable

As seen here: https://jsfiddle.net/rj82yaqb/2/

Instructions:

1. Press Enter until the content is scrolling.
2. Create a table and select a cell.
3. Scroll again.

Result: the table elements stay in place while the content scrolls.

This manifests in another error with Right-Click menu: it should check if there is enough space on screen for it and position itself upwards if not; otherwise it creates another scroll which is problematic.

Any plan supporting un/ordered list and image in table cell?

Now, it will break the table. like

quill Cannot import modules/table. Are you sure it was registered?

我试过在vue.config.js里面设置
config.plugin('provide').use(webpack.ProvidePlugin, [{
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
}]),可是还是不成功，我想问一下你有遇到过这个问题吗，我是在vue里面使用的，我直接npm [email protected]

insert column and undo, table is wrong

Error: "Cannot import modules/formula. Are you sure it was registered?"

When I try to use the formula module in your codepen example, it gives the error "Cannot import modules/formula. Are you sure it was registered?". (see it in here). Is this a limitation of quill-2.0.0.-dev.0? Or is it related to your implentation? How can I solve this issue? I want to use both formula and your better-table together.

Thanks for your hard work.

Full of expectation!

column resize not work when place editor in overlay window

When I opened an overlay window with quill + quill-better-table，the column resize did not work.
I fixed it as following picture, the feature worked.

By the way, is it possible to increase the z-index in src for overlay window use case?

Copying and pasting individual H1 tags will not work

Copying and pasting individual H1 tags will not work, but when the H1 tag is copied and pasted with other tags, it is really good.
This problem only appeared in Quill 2.0.0-dev.x, Quill 1.3.6 does not have this problem.

Quill version support

This table is so cool but is this only support quill 2.x?

复制粘贴网页内容时，有些内容会变成 table，格式错乱

似乎非连续文字的都会变成 table。

The scroll bar will be to the top when insert a row in the table

When the editor is too high to have a document scroll bar and the table is in the bottom of the editor. then i insert a row/column in the table, the document scroll bar will go to the top.
This experience is very bad, i have to scroll the scroll bar to the position of table, and then do the other operation.

在vue-quill-editor中无法正常显示table

你好，我打算在vue-quill-editor中使用表格，所以自己fork了一份vue-quill-editor，然后升级了quill。
但是当我引入了better-table时，没有报错，但是表格却无法正常显示，请问有解决办法吗？
引入的代码如下：

import { quillEditor, Quill } from '@ks/ks-vue-quill-editor';

Quill.register({
  'modules/better-table': QuillBetterTable
}, true)

Could you document what the Delta format looks like?

What do Delta's look like for these tables? How does it differ from the 'official' Quilljs Delta format 2.0 for tables?

Plugin cannot work with Error

There are two errors when the editor loaded:

And I cannot get module when I use getModule() function, it returns an undefined

[Bug]Table broken when paste wrapping text

Insert wrapping text into the table and the table is broken.

Disable operationMenu from module options

Currently, the module allows configuring actions available from the context menu. I would've wanted to implement these controls by myself and completely disable the custom context menu set in this module.

TODO

• Allow false value for operationMenu module option
• Skip registering the contextmenu listener if operationMenu is false

Thanks in advance.

I added the ability for 1- moving the table, 2- styling the table.

I added the ability for:

• moving the table.
• styling the table.

Note: I tried to follow your way of making a tool as much as possible.

First: moving the table tool class:

            class table_movingTool {
                isDragging = false;
                parent = null;
                currentTarget = null;
                // google: remove event listener from bind, to get why use these variables.
                boundDrag = this.dragMoveToolHandler.bind(this);
                boundMoving = this.movingTableHandler.bind(this);
                boundDrop = this.dropMoveToolHandler.bind(this);

                constructor(table, quill, options) {
                    if (!table) return null;
                    this.table = table;
                    this.quill = quill;
                    this.options = options;
                    this.domNode = null;
                    this.parent = this.quill.root.parentNode;
                    this.initMovingTool();

                }

                initMovingTool() {
                    this.domNode = document.createElement('div');
                    this.domNode.classList.add('qlbt-move-tool');
                    this.domNode.innerHTML =
                        `<svg style="width:22px;height:22px"  viewBox="0 0 24 24"><path class="ql-custom-stroke-2" d="M20,2H4C2.89,2 2,2.89 2,4V20C2,21.11 2.89,22 4,22H20C21.11,22 22,21.11 22,20V4C22,2.89 21.11,2 20,2M20,20H4V4H20M13,8V10H11V8H9L12,5L15,8M16,15V13H14V11H16V9L19,12M10,13H8V15L5,12L8,9V11H10M15,16L12,19L9,16H11V14H13V16" /></svg>`;
                    this.domNode.addEventListener('mousedown', this.boundDrag);
                    this.parent.appendChild(this.domNode);
                    const tableRect = this.table.getBoundingClientRect();
                    const containerRect = this.quill.root.parentNode.getBoundingClientRect();
                    const tableViewRect = this.table.parentNode.getBoundingClientRect();
                    // css(this.domNode, {
                    //     width: '22px',
                    //     height: '22px',
                    //     left: ''.concat(tableRect.x - 25, 'px'),
                    //     top: ''.concat(tableViewRect.top - containerRect.top, 'px')
                    // });
                    new popper(this.table, this.domNode, {placement: 'bottom-start'}
                    );
                }

                locateMovingTool() {

                    this.quill.getModule('better-table').hideTableTools();
                }

                dragMoveToolHandler(e) {
                    this.isDragging = true;
                    this.table.style.opacity = '0.3';
                    document.addEventListener('mousemove', this.boundMoving);
                    document.addEventListener('mouseup', this.boundDrop);

                }

                dropMoveToolHandler(e) {
                    if (this.isDragging && e.target.nodeName === 'P') {
                        this.table.remove();
                        this.quill.root.insertBefore(this.table, e.target.nextSibling);
                        this.locateMovingTool();

                    }

                    this.isDragging = false;
                    this.table.style.opacity = '1';
                    if (this.currentTarget) this.currentTarget.classList.remove('current-position-table');
                    document.removeEventListener('mousemove', this.boundMoving);
                    document.removeEventListener('mouseup', this.boundDrop);

                }

                movingTableHandler(e) {
                    if (this.currentTarget) this.currentTarget.classList.remove('current-position-table');

                    e.preventDefault();
                    if (e.target.nodeName === 'P') {
                        this.currentTarget = e.target;
                        this.currentTarget.classList.add('current-position-table');
                    }
                }

                destroy() {
                    this.domNode.remove();
                    return null;
                }
            }

Second: stying the table tool class:

            class table_styleTool {
                backgroundColorBound = this.backgroundColorHandler.bind(this);
                borderColorBound = this.borderColorHandler.bind(this);
                borderWidthBound = this.borderWidthHandler.bind(this);
                BorderStyleBound = this.borderStyleHandler.bind(this);
                backgroundColorBtn;
                borderColorBtn;
                borderWidthBtn;
                borderStyleBtn;

                constructor(table, quill, options) {
                    if (!table) return null;
                    this.table = table;
                    this.quill = quill;
                    this.options = options;
                    this.domNode = null;
                    this.parent = this.quill.root.parentNode;
                    this.initStylingTool();
                    this.createStyingItems();

                }

                initStylingTool() {
                    this.domNode = document.createElement('div');
                    this.domNode.classList.add('qlbt-style-tool');
                    this.domNode.addEventListener('click', this.boundClick);
                    this.parent.appendChild(this.domNode);
                    const tableRect = this.table.getBoundingClientRect();
                    const containerRect = this.quill.root.parentNode.getBoundingClientRect();
                    const tableViewRect = this.table.parentNode.getBoundingClientRect();
                    // css(this.domNode, {
                    //     width: '22px',
                    //     height: '22px',
                    //     left: ''.concat(tableRect.x - 25, 'px'),
                    //     top: ''.concat(tableViewRect.top - containerRect.top + 22, 'px')
                    // });
                    new popper(this.table, this.domNode, {
                            placement: 'left-start',
                            modifiers: {
                                offset: {
                                    enabled: true,
                                },
                                preventOverflow: {
                                    enabled: true,
                                    escapeWithReference: true,
                                }
                            }
                        }
                    );
                }

                createStyingItems() {
                    this.backgroundColorBtn = document.createElement('div');
                    this.backgroundColorBtn.id = 'backgroundColor';
                    this.backgroundColorBtn.innerHTML = `<svg style="width:22px;height:22px" viewBox="0 0 24 24">
    <path class="ql-custom-stroke-2" d="M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z" />
</svg>`;

                    this.borderColorBtn = document.createElement('div');
                    this.borderColorBtn.id = 'borderColorBtn';
                    this.borderColorBtn.innerHTML = `<svg style="width:22px;height:22px" viewBox="0 0 24 24">
    <path class="ql-custom-stroke-2" d="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" />
</svg>`;

                    this.borderWidthBtn = document.createElement('div');
                    this.borderWidthBtn.id = 'borderWidthBtn';
                    this.borderWidthBtn.innerHTML = `<svg style="width:22px;height:22px" viewBox="0 0 24 24">
    <path class="ql-custom-stroke-2" d="M3,17H21V15H3V17M3,20H21V19H3V20M3,13H21V10H3V13M3,4V8H21V4H3Z" />
</svg>`;

                    this.borderStyleBtn = document.createElement('div');
                    this.borderStyleBtn.id = 'BorderStyleBtn';
                    this.borderStyleBtn.innerHTML = `<svg style="width:22px;height:22px" viewBox="0 0 24 24">
    <path class="ql-custom-stroke-2" d="M3,16H8V14H3V16M9.5,16H14.5V14H9.5V16M16,16H21V14H16V16M3,20H5V18H3V20M7,20H9V18H7V20M11,20H13V18H11V20M15,20H17V18H15V20M19,20H21V18H19V20M3,12H11V10H3V12M13,12H21V10H13V12M3,4V8H21V4H3Z" />
</svg>`;


                    this.backgroundColorBtn.addEventListener('click', this.backgroundColorBound);
                    this.borderColorBtn.addEventListener('click', this.borderColorBound);
                    this.borderWidthBtn.addEventListener('click', this.borderWidthBound);
                    this.borderStyleBtn.addEventListener('click', this.BorderStyleBound);

                    this.domNode.appendChild(this.backgroundColorBtn);
                    this.domNode.appendChild(this.borderColorBtn);
                    this.domNode.appendChild(this.borderWidthBtn);
                    this.domNode.appendChild(this.borderStyleBtn);

                }

                backgroundColorHandler(e) {

                    const clickedElement = e.target;
                    if (clickedElement === this.backgroundColorBtn) {
                        this.destroyCurrentPicker();
                        this.createColorPicker(this.backgroundColorBtn);
                    } else if (clickedElement.className === 'qlbt-style-colors-item') {
                        const selectedCells = this.quill.getModule('better-table').getSelectedCells();
                        if (!selectedCells) return;

                        selectedCells.forEach(cell => cell.domNode.style.backgroundColor =
                            clickedElement.dataset.value);

                    }
                }

                borderColorHandler(e) {
                    const clickedElement = e.target;
                    if (clickedElement === this.borderColorBtn) {
                        this.destroyCurrentPicker();
                        this.createColorPicker(this.borderColorBtn);
                    } else if (clickedElement.className === 'qlbt-style-colors-item') {
                        const selectedCells = this.quill.getModule('better-table').getSelectedCells();
                        if (!selectedCells) return;

                        selectedCells.forEach(cell => cell.domNode.style.borderColor =
                            clickedElement.dataset.value);
                    }
                }

                borderWidthHandler(e) {
                    const clickedElement = e.target;
                    if (clickedElement === this.borderWidthBtn) {
                        this.destroyCurrentPicker();
                        this.createPicker(this.borderWidthBtn, [0, 1, 1.5, 1.75, 2.25, 3, 4.5,
                            6]);
                    } else if (clickedElement.className === 'qlbt-style-item') {
                        const selectedCells = this.quill.getModule('better-table').getSelectedCells();
                        if (!selectedCells) return;

                        selectedCells.forEach(cell => cell.domNode.style.borderWidth =
                            `${clickedElement.dataset.value}px`);
                    }
                }

                borderStyleHandler(e) {
                    const clickedElement = e.target;
                    if (clickedElement === this.borderStyleBtn) {
                        this.destroyCurrentPicker();
                        this.createPicker(this.borderStyleBtn, ['solid', 'dotted',
                            'dashed']);
                    } else if (clickedElement.className === 'qlbt-style-item') {
                        const selectedCells = this.quill.getModule('better-table').getSelectedCells();
                        if (!selectedCells) return;

                        selectedCells.forEach(cell => cell.domNode.style.borderStyle =
                            clickedElement.dataset.value);
                    }
                }

                destroy() {
                    this.domNode.remove();
                    return null;
                }

                createPicker(pickerParent, items) {
                    let pickerContainer = document.createElement('span');
                    pickerContainer.classList.add('qlbt-style-picker-options');
                    pickerParent.appendChild(pickerContainer);
                    items.forEach(item => {
                        let itemSpan = document.createElement('span');
                        itemSpan.className = 'qlbt-style-item';
                        itemSpan.dataset.value = item;
                        if (pickerParent === this.borderWidthBtn) itemSpan.innerText = item;
                        else {
                            const line = document.createElement('div');
                            line.id = item;
                            itemSpan.appendChild(line);

                        }
                        pickerContainer.appendChild(itemSpan);
                    });
                }

                createColorPicker(colorPickerParent) {
                    let colors = ['#000000', '#e60000', '#ff9900',
                        '#ffff00',
                        '#008a00', '#0066cc', '#9933ff', '#ffffff',
                        '#facccc', '#ffebcc', '#ffffcc', '#cce8cc',
                        '#cce0f5', '#ebd6ff', '#bbbbbb', '#f06666',
                        '#ffc266', '#ffff66', '#66b966', '#66a3e0',
                        '#c285ff', '#888888', '#a10000', '#b26b00',
                        '#b2b200', '#006100', '#0047b2', '#6b24b2',
                        '#444444', '#5c0000', '#663d00', '#666600',
                        '#003700', '#002966', '#3d1466'];

                    let colorPickerContainer = document.createElement('span');
                    colorPickerContainer.classList.add('qlbt-style-colors-picker-options');
                    colorPickerParent.appendChild(colorPickerContainer);
                    colors.forEach(color => {
                        let colorSpan = document.createElement('span');
                        colorSpan.className = 'qlbt-style-colors-item';
                        colorSpan.dataset.value = color;
                        colorSpan.style.backgroundColor = color;
                        colorPickerContainer.appendChild(colorSpan);
                    });
                }

                destroyCurrentPicker() {
                    if (this.backgroundColorBtn.querySelector('span'))
                       this.backgroundColorBtn.removeChild(this.backgroundColorBtn.querySelector('span'));
                    else if (this.borderColorBtn.querySelector('span'))
                        this.borderColorBtn.removeChild(this.borderColorBtn.querySelector('span'));
                    else if (this.borderWidthBtn.querySelector('span'))
                        this.borderWidthBtn.removeChild(this.borderWidthBtn.querySelector('span'));
                    else if (this.borderStyleBtn.querySelector('span'))
                        this.borderStyleBtn.removeChild(this.borderStyleBtn.querySelector('span'));
                }
            }

Also, I added new function the module which is getSelectedCells();

                getSelectedCells() {
                    return this.tableSelection.selectedTds;
                }

I also, added style for these tool, and modify the style for existed tools:

• for TableColumnTool, since changing the length of a column for upper tool is not convenient,
  I change it's style so changing length of a column is like the way Google Docs does it which is above the columns directly, so, take it or leave it.

.quill-better-table-wrapper {
    overflow-x: auto;
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: right;
}

table td {
    border: 1px solid #000;
    padding: 2px 5px;
}

.qlbt-operation-menu {
    background-color: #fff;
    font-size: 14px;
    z-index: 100;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, 30px);
    grid-template-rows: 35px;
    align-items: center;
    justify-items: center;
    transition: opacity 0.5s;
    box-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
    border-radius: 0.4em;
}

.qlbt-operation-menu .qlbt-operation-menu-item {
    background-color: #fff;
    cursor: pointer;
    color: #595959;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: .3s;
    border: none;
}


.qlbt-col-tool, .qlbt-move-tool, .qlbt-style-tool {
    position: absolute;
    display: flex;
    z-index: 99;
    height: 16px;
}

.qlbt-col-tool {
    margin-top: -15px;
    margin-left: -3px;
    opacity: 0;
}

.qlbt-move-tool, .qlbt-style-tool {

    opacity: .35;
    transition: .2s;
    cursor: pointer;
}

.qlbt-style-tool .icon {
    position: relative;
}

.qlbt-move-tool:hover,
.qlbt-move-tool:focus-within,
.qlbt-style-tool:focus-within,
.qlbt-style-tool:hover {
    opacity: .8;
    transition: .2s;
}

.qlbt-style-tool {
    display: grid;

}

.qlbt-col-tool:hover .qlbt-col-tool-cell {
    /*background-color: var(--light-primary);*/
    transition: .2s;

}

.qlbt-col-tool .qlbt-col-tool-cell {
    position: relative;
    background-color: #fff;
    /*border-top: 1px solid #000;*/
    /*border-right: 2px solid #000;*/
    /*border-bottom: 1px solid #000;*/
}

.qlbt-col-tool .qlbt-col-tool-cell:first-child {
    /*border-left: 2px solid #000;*/
}

.qlbt-col-tool .qlbt-col-tool-cell-holder {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 2px;
    background-color: var(--primary);
    cursor: ew-resize;
}

.qlbt-col-tool .qlbt-col-tool-cell-holder:hover {
    background-color: #35a7ed;
}

.qlbt-col-tool .qlbt-col-tool-cell-holder::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    display: block;
    width: 8px;
    height: 100%;
}

.qlbt-col-tool .qlbt-col-tool-cell-holder::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    display: block;
    width: 8px;
    height: 100%;
}


button.ql-copy-format.ql-active {
    cursor: url('data:image/svg+xml;utf8,<svg width="18"height="18" viewBox="0 0 22 22"><path class="ql-fill"d="M18,4V3A1,1 0 0,0 17,2H5A1,1 0 0,0 4,3V7A1,1 0 0,0 5,7H17A1,1 0 0,0 11,7V6H19V10H9V21A1,1 0 0,0 10,22H12A1,1 0 0,0 11,21V12H21V4H18Z"/></svg>'), auto;
}

#insertColumnLeft:hover path, #insertColumnRight:hover path, #insertRowUp:hover path,
#insertRowDown:hover {
    fill: var(--success);
    transition: .3s;

}

#deleteColumn:hover path, #deleteRow:hover path, #deleteTable:hover path {
    fill: var(--danger);
    transition: .3s;
}

#insertColumnLeft path, #insertColumnRight path, #insertRowUp path,
#insertRowDown, #deleteColumn path, #deleteRow path, #deleteTable path {
    transition: .3s;
}

.qlbt-operation-menu *:not(hr):hover {
    background-color: var(--light-primary);
}

.current-position-table {
    border-radius: .3em;
    border: 1px var(--dark-gray) dotted;
    background-color: var(--white);
    padding: 30px;
    transition: .3s;
}

.qlbt-style-colors-picker-options {
    background-color: #fff;
    position: absolute;
    top: 1px;
    right: 40px;
    padding: 3px 5px;
    width: 152px;
}

.qlbt-style-picker-options {
    background-color: #fff;
    display: grid;
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-gap: 5px;
    position: absolute;
    top: 1px;
    right: 40px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--black);
    box-shadow: 0 0 6px #00000035;
    border-radius: .3em;
}

.qlbt-style-colors-item {
    border: 1px solid transparent;
    float: left;
    height: 16px;
    margin: 2px;
    width: 16px;
    z-index: 50;
    transition: .2s;
}

.qlbt-style-item {
    z-index: 50;
    padding: 5px;
    transition: .2s;

}

.qlbt-style-item:hover, .qlbt-style-colors-item:hover, .selected-item {
    opacity: 1;
    transition: .2s;
}

.qlbt-style-colors-item:hover, .selected-item {
    border-color: var(--dark-gray);
    transition: .2s;
}

.qlbt-style-item:hover, .selected-item {
    background-color: var(--light-primary);
    transition: .2s;

}

#solid {
    width: 50px;
    margin: 4px;
    display: inline-block;
    border-top: 2px solid rgb(0, 0, 0);
}

#dotted {
    width: 50px;
    margin-bottom: 4px;
    display: inline-block;
    border-top: 2px dotted rgb(0, 0, 0);
}

#dashed {
    width: 50px;
    margin-bottom: 4px;
    display: inline-block;
    border-top: 2px dashed rgb(0, 0, 0);
}

Note: I use popper.js for positioning the tools, you can remove it or consider using it.

feel free to take and modfiy my code as needed.

I'm sorry if issues page is not the place for these kind of posts.

incompatibility with quill 2.0.0.4

I found quill 2.0.0.4
https://libraries.io/npm/quill

I am using 2.0.0.4 because 2.0.0.3 has some input issues especially with the Chinese input I am using.
(I think is a bug of 2.0.0.3

However I found out that quill-better-table has some errors with 2.0.0.4:
Javascript errors:

quill-better-table.min.js:2152 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at table_selection_TableSelection.mouseDownHandler (quill-better-table.min.js:2152)
mouseDownHandler @ quill-better-table.min.js:2152

Could I know if there could be possible fixes?
Thank you so much!

Clicking "insert table" when it's inside another table breaks the table

Like this:

Can't add header into col

Can't add header into col

[Bug]The col number is wrong when merge all columns and rows to a cell

Insert a 3X3 table and merge all columns and row to a cell, the column number of top column control bar is wrong(expect 1 but 3):

Support for Vue?

Will you support on Vue?

Multi whitespaces will become one when pasting

I guess the quill version(2.0.0-dev.3) is a problem because there is no such problem on the Quill official website which use v1.3.6.

expect:

actual:

Pasting plain text also changes to table format

If I paste a copy of my notes on it, or if I paste a block of code on it, it's going to be in table format, but I don't want it in table format.

Copy - paste almost works perfectly

Hi.

This plugin is just awesome, the missing support for tables has been a real problem, because people (especially engineers ;) take copy - paste from Excel as granted feature.

I found a bug/problem with the copy - paste feature. If I try to copy a table, the pasted table looks kinda odd -> the borders for the second column are missing? Here's an example:

https://drive.google.com/file/d/1rfpHVa4Y5DbI_vn4Inc5Y7Dj_N4TAWmS/view?usp=sharing

I am getting an error which briefs- ERROR TypeError: **Cannot read property 'pop' of undefined** at new quill_better_table_BetterTable **(quill-better-table.js:2979)** quill.keyboard.bindings['Backspace'].pop()

I am getting an error which briefs- ERROR TypeError: Cannot read property 'pop' of undefined
at new quill_better_table_BetterTable (quill-better-table.js:2979)

quill.keyboard.bindings['Backspace'].pop()

Update on support of multi-line and copy past on V2 version

Hi,
Multi-line support on tables is a blocker on our project, where we integrated quill.js v2. Could you share if there are technical solutions that you can think of but you didn't implement them because you don't need it, or if it is just not possible from your perspective?

Thank you !

Table in table rendering error

When the HTML to be rendered is a table in the table, it causes error.

<table border=1>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td><table>
      <tbody>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
        <tr>
          <td>3</td>
        </tr>
      </tbody>
    </table></td>
   </tr>
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

inserting <p> tag instead of table

APP.COMPONENT.TS

`import {Component, OnInit, AfterViewInit, ViewChild, ElementRef} from '@angular/core';

import QuillBetterTable from 'quill-better-table';

declare const Quill: any;

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('editable', {static: true}) editRef: ElementRef;

quill: any;

ngOnInit() {
setTimeout(() => {
this.initEditor();
}, 1000);
}

initEditor(): void {
Quill.register({
'modules/better-table': QuillBetterTable
}, true);
// tslint:disable-next-line:no-unused-expression
this.quill = new Quill(this.editRef.nativeElement, {
theme: 'snow',
modules: {
table: false,
'better-table': {
operationMenu: {
items: {
unmergeCells: {
text: 'Another unmerge cells name'
}
}
}
},
keyboard: {
bindings: QuillBetterTable.keyboardBindings
}
}
}
);
}
ngAfterViewInit() { }

onInsertTable() {
const tableModule = this.quill.getModule('better-table');
tableModule.insertTable(3, 3);
}
}
`

its showing me above error if quill not installed and after installing quill with npm, code is working fine but only inserting <p> tag (paragraph tag) multiple times.

When merging n column cells it takes the width of 1 cell

How do I expand the width of the table cell in quill better table ?

Integrate the tool of inserting table into the toolbar module of quill

The tool is provided by Rudy, thanks.
jsfiddle: jsfiddle demo

[bug]There will be a empty tr left if i delete the last row of a table

This will cause the bottom border of the table to disappear.

Table breaks if nested tables or new lines are inserted in table cells.

Content with nested tables/cells or new lines in cells breaks the table structure.
Same happens when when pasting.

Is there a way to fix this?

Are there plans to migrate to Quill official version 1.3.7(or 1.3.6)

After all, 2.0.0-dev.3 is a development version, not an official version, and also wants to know how much it costs to migrade?

ArrowDown skips to last row in FireFox

When your selection is on a line above a table and press ArrowDown, the selection will jump to the last row instead of the first, skipping the other rows.

ArrowUp does work though.

This behaviour is vastly different than in Chrome.

In Chrome the selection will go to the first cell in the first row, then second cell, etc. When it reaches the last cell in a row it will go on to the next row and first cell.

Simply put:
In Chrome ArrowDown/Up will navigate through the table horizontally.
In FireFox ArrowDown/Up will navigate through the table vertically, but, skips to the last row when using ArrowDown.

Quill Version 1.3.6, not working with better table

Is this intended for handling regular table html?

If I initialize the editor with html which uses regular table tags, should this plugin parse it correctly?
I haven't been able to achieve this, but perhaps I am setting it up wrong.

bgcolor

Are you planing to add background colour into the cells so that we can add colour in the table cell?

add formatted text causes the table to split

example copy text with line feed，this will change a table into two.
Formatted text：
Updating a19799ec..dc10ea6d
Fast-forward

Copy and paste results:

Table column tool and right-click menu are both disappeared in edge broswer.

Table column tool and right-click menu are both disappeared in edge broswer. It seems a Compatibility issue. Maybe events are fail to listen.

Pasting multiple lines breaks the table

When copying multiple lines into the table it breaks. I think that due to the clipboard module, each line is seen as a delta insert which does not check against the table and simply inserts it in between.

Here's a GIF that shows what happened:

Here's what the clipboard text/html data returned:

<html><body>
<!--StartFragment--><p>test</p><p>test</p><!--EndFragment-->
</body>
</html>

Here's what the clipboard text/plain data returned: test\ntest

Edit:
This also breaks the showTableTools function

Is there a definition of the Delta Format generated by quill-better-table

I'm trying to write a parser for the Quill Better Table format, and while reverse-engineering it is not impossible, is there a definition anywhere of what qbt produces?

Can support for ie11, add babel in webpack config

Alignment for table

First, I wrapped table with a scrollable div to show intact table, and the width of scrollable div was 100 percent.
Second, to achieve that, it must change the layout styles and change the algorithm for table operations. The complexity will increase.
I think alignment for table is hard to achieve in this repo, but is possible.

undo/redo does not work with merge/split actions

Maybe you aware of that, but want to let you know

You can try on the demo
https://codepen.io/soccerloway/pen/WWJowj

Merge some cells, and hit Ctrl+Z to trigger the undo functionality. Nothing happens.
Undo functionality triggered by Ctrl+Z works for other actions like insert row up/down, etc.

td background can not initial corrent

Copy a table which td has "background-color", and then paste it in editor, the table cell's background-color is wrong.

I noticed quill-better-table's new api "colors", support set background-color to table cell, but can't support initial/paste situation.
When can you support it？

using in Angular with quill.js, Insert table doesn't work

Hi, soccerloway, I am using quill.js in my angular project, and decide integrate this awesome table
component to my project, but after setting configs in my project, the [insert table] function doesn't work as expected.
it only generate some <p><br/></p> in my editor, and no error complains
Are you saw this problem in before and Could you tell me where is this problem about? Thank you! 🙏

version:
"quill": "2.0.0-dev.0",
"quill-better-table": "^1.2.4",

Pressing the List button while in a table cell breaks the table and it is impossible to recover

While inside a table cell, pressing the "List" button on the toolbar results in a broken table layout -- presumably a block being introduced between table cells. Unfortunately, it is impossible to remove this block.

It is possible that this bug affects other block types as well.

请求兼容 1.3.x版本，请求帮助

你好，目前有些扩展功能基于1.3.6基础开发，业务强要求兼容ie11，无法升级quill2
感谢老板，quill-better-table是个非常好的table插件，能否兼容quill 1.3.x版本呢，能实现基础创建表格跟粘贴表格就感激涕零了，自己看了源码，在渲染blot时报错：unable to create table blot，实在无法进行下去了，请求帮助，谢谢