Skip to content

Commit

Permalink
fix: insert table fixed should not display srollbar (#52)
Browse files Browse the repository at this point in the history 
* fix: insert table fixed should not display srollbar

* test: add more test about scrollbar and fix some bug
  • Loading branch information
@zzxming
zzxming authored Dec 21, 2024
1 parent ea0d1a9 commit ec47245
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 16 deletions.
27 changes: 23 additions & 4 deletions src/__tests__/e2e/table-resize.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,26 @@ test('test TableResizeBox fixed width', async ({ page }) => {
expect(cellBounding).not.toBeNull();

// col
const colBoundingBox = (await page.locator('#editor2 .table-up-resize-box__col-separator').nth(1).boundingBox())!;
const colBoundingBox = await page.locator('#editor2 .table-up-resize-box__col-separator').nth(1).boundingBox();
expect(colBoundingBox).not.toBeNull();
if (!colBoundingBox) {
throw new Error('colBoundingBox is null');
}
await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4, colBoundingBox.y + 4);
await page.mouse.down();
await page.mouse.move(colBoundingBox.x + colBoundingBox.width - 4 + 100, colBoundingBox.y + 4);
await page.mouse.up();
expect(page.locator('#editor2 .ql-table-wrapper col').nth(1)).toHaveAttribute('width', `${Math.floor(cellBounding.width - 4) + 100}px`);

// row
const rowBoundingBox = (await page.locator('#editor2 .table-up-resize-box__row-separator').nth(1).boundingBox())!;
const rowBoundingBox = await page.locator('#editor2 .table-up-resize-box__row-separator').nth(1).boundingBox();
expect(rowBoundingBox).not.toBeNull();
await page.mouse.move(rowBoundingBox.x, rowBoundingBox.y + rowBoundingBox.height - 4);
if (!rowBoundingBox) {
throw new Error('rowBoundingBox is null');
}
await page.mouse.move(rowBoundingBox.x + 4, rowBoundingBox.y + rowBoundingBox.height - 4);
await page.mouse.down();
await page.mouse.move(rowBoundingBox.x, rowBoundingBox.y + rowBoundingBox.height - 4 + 100);
await page.mouse.move(rowBoundingBox.x + 4, rowBoundingBox.y + rowBoundingBox.height - 4 + 100);
await page.mouse.up();
const cells = await page.locator('#editor2 .ql-table-wrapper tr').nth(1).locator('td').all();
expect(cells.length).toEqual(3);
Expand Down Expand Up @@ -109,6 +115,19 @@ test('test TableResizeBox full width', async ({ page }) => {
await expect(cols.nth(2)).toHaveAttribute('width', '20%');
});

test('test TableResizeBox position', async ({ page }) => {
await createTableBySelect(page, 'container2', 3, 3);

const firstCell = page.locator('#editor2').getByRole('cell').nth(0);
await firstCell.click();
const firstCellBounding = (await firstCell.boundingBox())!;
expect(firstCellBounding).not.toBeNull();
const toolBounding = (await page.locator('#editor2 .table-up-toolbox .table-up-resize-box').boundingBox())!;
expect(toolBounding).not.toBeNull();
expect(firstCellBounding.x).toEqual(toolBounding.x);
expect(firstCellBounding.y).toEqual(toolBounding.y);
});

test('test TableResizeScale', async ({ page }) => {
await createTableBySelect(page, 'container1', 3, 3);
const centerCell = page.locator('#editor1').getByRole('cell').nth(4);
Expand Down
1 change: 1 addition & 0 deletions src/__tests__/e2e/table-scrollbar.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ test('test TableScrollbar', async ({ page }) => {
const cellBounding = (await centerCell.boundingBox())!;
expect(cellBounding).not.toBeNull();

await page.waitForTimeout(200);
expect(await page.locator('#editor2 .table-up-scrollbar.is-vertical').isVisible()).toBeFalsy();
expect(await page.locator('#editor2 .table-up-scrollbar.is-horizontal').isVisible()).toBeFalsy();

Expand Down
2 changes: 1 addition & 1 deletion src/formats/table-main-format.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { TableRowFormat } from './table-row-format';
export class TableMainFormat extends ContainerFormat {
static blotName = blotName.tableMain;
static tagName = 'table';
static className = 'ql-table';

static create(value: TableValue) {
const node = super.create() as HTMLElement;
Expand All @@ -20,7 +21,6 @@ export class TableMainFormat extends ContainerFormat {
node.removeAttribute('date-align');
}
full && (node.dataset.full = String(full));
node.classList.add('ql-table');
node.setAttribute('cellpadding', '0');
node.setAttribute('cellspacing', '0');
return node;
Expand Down
27 changes: 26 additions & 1 deletion src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,10 +597,11 @@ export class TableUp {
throw new Error(`Not supported ${currentBlot.statics.blotName} insert into table.`);
}

const borderWidth = this.calculateTableCellBorderWidth();
const rootStyle = getComputedStyle(this.quill.root);
const paddingLeft = Number.parseInt(rootStyle.paddingLeft);
const paddingRight = Number.parseInt(rootStyle.paddingRight);
const width = Number.parseInt(rootStyle.width) - paddingLeft - paddingRight;
const width = Number.parseInt(rootStyle.width) - paddingLeft - paddingRight - borderWidth;

const tableId = randomId();
const colIds = new Array(columns).fill(0).map(() => randomId());
Expand Down Expand Up @@ -647,6 +648,30 @@ export class TableUp {
this.quill.focus();
}

calculateTableCellBorderWidth() {
const tableStr = `
<table class="${TableMainFormat.className}">
<tbody>
<tr>
<td class="${TableCellFormat.className}"></td>
</tr>
</tbody>
</table>
`;
const div = document.createElement('div');
div.className = TableWrapperFormat.className;
div.innerHTML = tableStr;
div.style.position = 'absolute';
div.style.left = '-9999px';
div.style.top = '-9999px';
div.style.visibility = 'hidden';
this.quill.root.appendChild(div);
const tempTableStyle = window.getComputedStyle(div.querySelector('td')!);
const borderWidth = Number.parseFloat(tempTableStyle.borderWidth) || 0;
this.quill.root.removeChild(div);
return borderWidth;
}

// handle unusual delete cell
fixUnusuaDeletelTable(tableBlot: TableMainFormat) {
// calculate all cells
Expand Down
23 changes: 13 additions & 10 deletions src/modules/table-resize/table-resize-box.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Parchment as TypeParchment } from 'quill';
import type TableUp from '../..';
import type { TableColFormat, TableMainFormat, TableRowFormat } from '../..';
import Quill from 'quill';
import { TableBodyFormat } from '../../formats';
import { addScrollEvent, clearScrollEvent, createBEM } from '../../utils';
import { TableResizeCommon } from './table-resize-common';
import { isTableAlignRight } from './utils';
Expand Down Expand Up @@ -150,16 +151,18 @@ export class TableResizeBox extends TableResizeCommon {
}

update() {
const tableMainRect = this.tableMain.domNode.getBoundingClientRect();
const tableWrapperRect = this.tableWrapper.domNode.getBoundingClientRect();
const tableNodeX = Math.max(tableMainRect.x, tableWrapperRect.x);
const tableNodeY = Math.max(tableMainRect.y, tableWrapperRect.y);
const [tableBodyBlot] = this.tableMain.descendant(TableBodyFormat, this.tableMain.length() - 1);
if (!tableBodyBlot) return;
const tableBodyRect = tableBodyBlot.domNode.getBoundingClientRect();
const rootRect = this.quill.root.getBoundingClientRect();
Object.assign(this.root.style, {
top: `${tableNodeY - rootRect.y}px`,
left: `${tableNodeX - rootRect.x}px`,
top: `${tableBodyRect.y - rootRect.y}px`,
left: `${tableBodyRect.x - rootRect.x}px`,
});

const tableMainRect = this.tableMain.domNode.getBoundingClientRect();
const tableWrapperRect = this.tableWrapper.domNode.getBoundingClientRect();

let cornerTranslateX = -1 * this.size;
let rowHeadWrapperTranslateX = -1 * this.size;
if (isTableAlignRight(this.tableMain)) {
Expand Down Expand Up @@ -213,9 +216,9 @@ export class TableResizeBox extends TableResizeCommon {

if (this.tableCols.length > 0) {
let colHeadStr = '';
for (const [index, col] of this.tableCols.entries()) {
for (const [, col] of this.tableCols.entries()) {
const width = col.domNode.getBoundingClientRect().width;
colHeadStr += `<div class="${this.bem.be('col-header')}" style="width: ${width + (index === this.tableCols.length - 1 ? 1 : 0)}px">
colHeadStr += `<div class="${this.bem.be('col-header')}" style="width: ${width}px">
<div class="${this.bem.be('col-separator')}" style="height: ${tableMainRect.height + this.size - 3}px"></div>
</div>`;
}
Expand All @@ -241,9 +244,9 @@ export class TableResizeBox extends TableResizeCommon {

if (this.tableRows.length > 0) {
let rowHeadStr = '';
for (const [index, row] of this.tableRows.entries()) {
for (const [, row] of this.tableRows.entries()) {
const height = `${row.domNode.getBoundingClientRect().height}px`;
rowHeadStr += `<div class="${this.bem.be('row-header')}" style="height: ${Number.parseFloat(height) + (index === this.tableRows.length - 1 ? 1 : 0)}px">
rowHeadStr += `<div class="${this.bem.be('row-header')}" style="height: ${Number.parseFloat(height)}px">
<div class="${this.bem.be('row-separator')}" style="width: ${tableMainRect.width + this.size - 3}px"></div>
</div>`;
}
Expand Down

0 comments on commit ec47245

Please sign in to comment.