Skip to content

Commit

Permalink
pref: simplify selection limit (#74)
Browse files Browse the repository at this point in the history 
* pref: simplify selection limit

* test: fix attribute sort error
  • Loading branch information
@zzxming
zzxming authored Feb 19, 2025
1 parent 33c4982 commit d884577
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 134 deletions.
41 changes: 38 additions & 3 deletions src/__tests__/unit/table-insert-blot.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import TableUp, { TableCellInnerFormat } from '../..';
import { createQuillWithTableModule, createTable, createTableDeltaOps, createTableHTML } from './utils';
import { createQuillWithTableModule, createTable, createTableDeltaOps, createTableHTML, createTaleColHTML } from './utils';

beforeEach(() => {
vi.useFakeTimers();
Expand Down Expand Up @@ -285,7 +285,6 @@ describe('set contents', () => {
tableModule.setCellAttrs([tds[4], tds[5]], 'height', '50px', true);
await vi.runAllTimersAsync();
const delta = quill.getContents();
const insertGetHTML = quill.root.innerHTML;
expect(delta.ops).toEqual([
{ insert: '\n' },
{ insert: { 'table-up-col': { tableId: '1', colId: '1', full: true, width: 50 } } },
Expand All @@ -307,7 +306,43 @@ describe('set contents', () => {
quill.setContents([{ insert: '\n' }]);
quill.setContents(delta);
await vi.runAllTimersAsync();
expect(quill.root.innerHTML).toBe(insertGetHTML);
expect(quill.root).toEqualHTML(
`
<p><br></p><div>
<table cellpadding="0" cellspacing="0">
${createTaleColHTML(2, { width: 50, full: true })}
<tbody>
<tr>
<td style="backround-color: red;">
<div><p>1</p></div>
</td>
<td style="backround-color: red;">
<div><p>2</p></div>
</td>
</tr>
<tr>
<td style="border-color: red;">
<div><p>3</p></div>
</td>
<td style="border-color: red;">
<div><p>4</p></div>
</td>
</tr>
<tr>
<td style="height: 50px;">
<div><p>5</p></div>
</td>
<td style="height: 50px;">
<div><p>6</p></div>
</td>
</tr>
</tbody>
</table>
</div>
<p><br></p>
`,
{ ignoreAttrs: ['class', 'style', 'rowspan', 'colspan', 'data-full', 'data-style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
);
});
});

Expand Down
1 change: 1 addition & 0 deletions src/formats/table-cell-inner-format.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export class TableCellInnerFormat extends ContainerFormat {
node.dataset.rowspan = String(getValidCellspan(rowspan));
node.dataset.colspan = String(getValidCellspan(colspan));
style && (node.dataset.style = style);
node.setAttribute('contenteditable', 'true');
return node;
}

Expand Down
1 change: 1 addition & 0 deletions src/formats/table-wrapper-format.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export class TableWrapperFormat extends ContainerFormat {
e.preventDefault();
e.dataTransfer!.dropEffect = 'none';
});
node.setAttribute('contenteditable', 'false');
return node;
}

Expand Down
132 changes: 1 addition & 131 deletions src/modules/table-selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ export class TableSelection {
table?: HTMLTableElement;
isDisplaySelection = false;
bem = createBEM('selection');
shiftKeyDown: boolean = false;
keySelectionChange: boolean = false;
lastSelection: SelectionData = {
anchorNode: null,
anchorOffset: 0,
Expand Down Expand Up @@ -65,8 +63,6 @@ export class TableSelection {
this.resizeObserver.observe(this.quill.root);

this.quill.root.addEventListener('mousedown', this.mouseDownHandler, { passive: false });
this.quill.root.addEventListener('keydown', this.keydownHandler, { passive: false });
this.quill.root.addEventListener('keyup', this.keyupHandler, { passive: false });
document.addEventListener('selectionchange', this.selectionChangeHandler, { passive: false });
this.quill.on(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
if (this.options.tableMenu) {
Expand Down Expand Up @@ -115,22 +111,6 @@ export class TableSelection {
}
};

keyupHandler = (event: KeyboardEvent) => {
if (event.key === 'Shift') {
this.shiftKeyDown = false;
}
};

keydownHandler = (event: KeyboardEvent) => {
const selectionKey = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'End', 'Home', 'PageDown', 'PageUp']);
if (event.shiftKey) {
this.shiftKeyDown = true;
if (selectionKey.has(event.key)) {
this.keySelectionChange = true;
}
}
};

setSelectionData(selection: Selection, selectionData: SelectionData) {
const { anchorNode, anchorOffset, focusNode, focusOffset } = selectionData;
if (!anchorNode || !focusNode) return;
Expand Down Expand Up @@ -224,8 +204,6 @@ export class TableSelection {

selectionChangeHandler = () => {
const selection = window.getSelection();
const isKeySelectionChange = this.keySelectionChange;
this.keySelectionChange = false;
if (!selection) return;
const { anchorNode, focusNode, anchorOffset, focusOffset } = selection;
if (!anchorNode || !focusNode) return;
Expand All @@ -237,80 +215,6 @@ export class TableSelection {
const anchorNames = findAllParentBlot(anchorBlot);
const focusNames = findAllParentBlot(focusBlot);

if (
anchorBlot
&& anchorBlot.statics.blotName === blotName.tableWrapper
&& focusBlot
&& focusBlot.statics.blotName === blotName.tableWrapper
) {
const tempRange = document.createRange();
tempRange.setStart(anchorNode, anchorOffset);
tempRange.setEnd(focusNode, focusOffset);
const isPoint = tempRange.collapsed;
// if selection collapsed and cursor at the start of tableWrapper.
// is cursor move front from table cell. so set cursor to the end of prev node.
if (anchorOffset === 0 && isPoint) {
const prevNode = this.getFirstTextNode(anchorBlot.prev!.domNode);
const prevOffset = this.getNodeTailOffset(prevNode);
return this.setSelectionData(selection, {
anchorNode: prevNode,
anchorOffset: prevOffset,
focusNode: prevNode,
focusOffset: prevOffset,
});
}
return this.quill.blur();
}
// defect: mousedown at tableWrapper to selection will collapse selection to point
// // If anchor is at tableWrapper and offset is 0, move to the previous row, without changing focus
// // If anchor is at tableWrapper and offset is 1, move to the next row, without changing focus
// // If focus is at tableWrapper and offset is 0, move to the previous row, without changing anchor
// // If focus is at tableWrapper and offset is 1, move to the next row, without changing anchor
// if (anchorBlot && anchorBlot.statics.blotName === blotName.tableWrapper) {
// if (anchorOffset === 0) {
// const newAnchorNode = this.getFirstTextNode(anchorBlot.prev!.domNode);
// const newAnchorOffset = this.getNodeTailOffset(newAnchorNode);
// return this.setSelectionData(selection, {
// anchorNode: newAnchorNode,
// anchorOffset: newAnchorOffset,
// focusNode,
// focusOffset,
// });
// }
// else if (anchorOffset === 1) {
// const newAnchorNode = this.getLastTextNode(anchorBlot.next!.domNode);
// const newAnchorOffset = 0;
// return this.setSelectionData(selection, {
// anchorNode: newAnchorNode,
// anchorOffset: newAnchorOffset,
// focusNode,
// focusOffset,
// });
// }
// }
// if (focusBlot && focusBlot.statics.blotName === blotName.tableWrapper) {
// if (focusOffset === 0) {
// const newFocusNode = this.getFirstTextNode(focusBlot.prev!.domNode);
// const newFocusOffset = this.getNodeTailOffset(newFocusNode);
// return this.setSelectionData(selection, {
// anchorNode,
// anchorOffset,
// focusNode: newFocusNode,
// focusOffset: newFocusOffset,
// });
// }
// else if (focusOffset === 1) {
// const newFocusNode = this.getFirstTextNode(focusBlot.next!.domNode);
// const newFocusOffset = 0;
// return this.setSelectionData(selection, {
// anchorNode,
// anchorOffset,
// focusNode: newFocusNode,
// focusOffset: newFocusOffset,
// });
// }
// }

// if cursor into colgourp should into table or out table by lastSelection
const isAnchorInColgroup = anchorNames.has(blotName.tableColgroup);
const isFocusInColgroup = focusNames.has(blotName.tableColgroup);
Expand Down Expand Up @@ -353,38 +257,7 @@ export class TableSelection {
|| (!isAnchorInCellInner && isFocusInCellInner)
|| (!isFocusInCellInner && isAnchorInCellInner)
) {
if (isKeySelectionChange) {
// limit selection in current cell
this.setSelectionData(selection, this.lastSelection);
}
else {
// mouse selection cover all table
const isUpFromDown = this.selectionDirectionUp(selection);
const tableWrapperBlot = isAnchorInCellInner
? anchorNames.get(blotName.tableWrapper) as TableWrapperFormat
: focusNames.get(blotName.tableWrapper) as TableWrapperFormat;

// 从 tableWrapper 的 0 开始选择还是会出现选区翻转，禁止掉在 tableWrapper 的 0 和 1 的选择: 方式是不允许选择在 tableWrapper
const nextNode = this.getLastTextNode(tableWrapperBlot.next!.domNode);
const prevNode = this.getFirstTextNode(tableWrapperBlot.prev!.domNode);
let { startNode, startOffset, endNode, endOffset } = this.findWrapSelection([
{ node: prevNode, offset: this.getNodeTailOffset(prevNode) },
{ node: nextNode, offset: 0 },
{ node: anchorNode, offset: anchorOffset },
{ node: focusNode, offset: focusOffset },
]);
if (isUpFromDown) {
[startNode, startOffset, endNode, endOffset] = [endNode, endOffset, startNode, startOffset];
}
this.lastSelection = {
anchorNode: startNode,
anchorOffset: startOffset,
focusNode: endNode,
focusOffset: endOffset,
};
this.setSelectionData(selection, this.lastSelection);
}

this.setSelectionData(selection, this.lastSelection);
if (this.selectedTds.length > 0) {
this.hide();
}
Expand Down Expand Up @@ -498,7 +371,6 @@ export class TableSelection {
}

mouseDownHandler = (mousedownEvent: MouseEvent) => {
if (this.shiftKeyDown) return;
const { button, target, clientX, clientY } = mousedownEvent;
const closestTable = (target as HTMLElement).closest('.ql-table') as HTMLTableElement;
if (button !== 0 || !closestTable) return;
Expand Down Expand Up @@ -685,8 +557,6 @@ export class TableSelection {
clearScrollEvent.call(this);

this.quill.root.removeEventListener('mousedown', this.mouseDownHandler);
this.quill.root.removeEventListener('keydown', this.keydownHandler);
this.quill.root.removeEventListener('keyup', this.keyupHandler);
document.removeEventListener('selectionchange', this.selectionChangeHandler);
this.quill.off(Quill.events.SELECTION_CHANGE, this.quillSelectionChangeHandler);
}
Expand Down
1 change: 1 addition & 0 deletions src/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
display: inline-block;
min-width: 100%;
word-break: break-word;
outline: none;
}
}
col {
Expand Down

0 comments on commit d884577

Please sign in to comment.