soccerloway / quill-better-table Goto Github PK
View Code? Open in Web Editor NEWModule for better table in Quill, more useful features are supported.
License: MIT License
Module for better table in Quill, more useful features are supported.
License: MIT License
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.
我试过在vue.config.js里面设置
config.plugin('provide').use(webpack.ProvidePlugin, [{
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js'
}]),可是还是不成功,我想问一下你有遇到过这个问题吗,我是在vue里面使用的,我直接npm [email protected]
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.
false
value for operationMenu module optioncontextmenu
listener if operationMenu
is false
Thanks in advance.
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.
This table is so cool but is this only support quill 2.x?
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.
Will you support on Vue?
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",
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.
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.
Can't add header into col
How do I expand the width of the table cell in quill better table ?
The tool is provided by Rudy, thanks.
jsfiddle: jsfiddle demo
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.
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?
你好,我打算在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)
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?
`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.
I added the ability for:
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:
.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.
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
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 !
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?
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.
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.
Table column tool and right-click menu are both disappeared in edge broswer. It seems a Compatibility issue. Maybe events are fail to listen.
Are you planing to add background colour into the cells so that we can add colour in the table cell?
What do Delta's look like for these tables? How does it differ from the 'official' Quilljs Delta format 2.0 for tables?
你好,目前有些扩展功能基于1.3.6基础开发,业务强要求兼容ie11,无法升级quill2
感谢老板,quill-better-table是个非常好的table插件,能否兼容quill 1.3.x版本呢,能实现基础创建表格跟粘贴表格就感激涕零了,自己看了源码,在渲染blot时报错:unable to create table blot,实在无法进行下去了,请求帮助,谢谢
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!
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
As seen here: https://jsfiddle.net/rj82yaqb/2/
Instructions:
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.
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()
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.