innov
/
am-editor11212
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update(table & codeblock): Move the cursor up, down, left, and right on the keyboard in the card

This commit is contained in:
yanmao 2021-12-30 21:54:59 +08:00
parent 4f25ce785b
commit 458bcd2f48
3 changed files with 141 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
plugins/codeblock-vue/src/component/index.ts
View File

@ -90,8 +90,14 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusPrevBlock(this, range, true);
change.range.select(range);
const prev = this.root.prev();
const cardComponent = prev ? card.find(prev) : undefined;
if (cardComponent?.onSelectUp) {
cardComponent.onSelectUp(event);
} else {
card.focusPrevBlock(this, range, false);
change.range.select(range);
}
this.activate(false);
this.toolbarModel?.hide();
},
@ -100,8 +106,14 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusNextBlock(this, range, true);
change.range.select(range);
const next = this.root.next();
const cardComponent = next ? card.find(next) : undefined;
if (cardComponent?.onSelectDown) {
cardComponent.onSelectDown(event);
} else {
card.focusNextBlock(this, range, false);
change.range.select(range);
}
this.activate(false);
this.toolbarModel?.hide();
},

20
plugins/codeblock/src/component/index.ts
View File

@ -87,8 +87,14 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusPrevBlock(this, range, true);
change.range.select(range);
const prev = this.root.prev();
const cardComponent = prev ? card.find(prev) : undefined;
if (cardComponent?.onSelectUp) {
cardComponent.onSelectUp(event);
} else {
card.focusPrevBlock(this, range, false);
change.range.select(range);
}
this.activate(false);
this.toolbarModel?.hide();
},
@ -97,8 +103,14 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusNextBlock(this, range, true);
change.range.select(range);
const next = this.root.next();
const cardComponent = next ? card.find(next) : undefined;
if (cardComponent?.onSelectDown) {
cardComponent.onSelectDown(event);
} else {
card.focusNextBlock(this, range, false);
change.range.select(range);
}
this.activate(false);
this.toolbarModel?.hide();
},

117
plugins/table/src/component/index.ts
View File

@ -133,8 +133,11 @@ class TableComponent<V extends TableValue = TableValue>
this.selection.focusCell(next);
return false;
}
} else if (td.length > 0) {
this.scrollbar?.refresh();
}
if (td.length > 0) {
setTimeout(() => {
this.scrollbar?.refresh();
}, 0);
}
return;
},
@ -142,7 +145,7 @@ class TableComponent<V extends TableValue = TableValue>
// 下键选择
this.editor.on('keydown:down', (event) => {
if (!isEngine(this.editor)) return;
const { change } = this.editor;
const { change, card } = this.editor;
const range = change.range.get();
const td = range.endNode.closest('td');
@ -182,16 +185,33 @@ class TableComponent<V extends TableValue = TableValue>
this.selection.focusCell(nextTd, true);
return false;
}
} else {
event.preventDefault();
const cloneRange = range.cloneRange();
const next = this.root.next();
const cardComponent = next
? card.find(next)
: undefined;
if (cardComponent?.onSelectDown) {
cardComponent.onSelectDown(event);
} else {
card.focusNextBlock(this, cloneRange, false);
change.range.select(cloneRange);
}
return false;
}
} else if (td.length > 0) {
this.scrollbar?.refresh();
}
if (td.length > 0) {
setTimeout(() => {
this.scrollbar?.refresh();
}, 0);
}
return;
});
// 上键选择
this.editor.on('keydown:up', (event) => {
if (!isEngine(this.editor)) return;
const { change } = this.editor;
const { change, card } = this.editor;
const range = change.range.get();
const td = range.endNode.closest('td');
@ -230,12 +250,61 @@ class TableComponent<V extends TableValue = TableValue>
this.selection.focusCell(prevTd);
return false;
}
} else {
event.preventDefault();
const cloneRange = range.cloneRange();
const prev = this.root.prev();
const cardComponent = prev
? card.find(prev)
: undefined;
if (cardComponent?.onSelectUp) {
cardComponent.onSelectUp(event);
} else {
card.focusPrevBlock(this, cloneRange, false);
change.range.select(cloneRange);
}
return false;
}
} else if (td.length > 0) {
this.scrollbar?.refresh();
}
if (td.length > 0) {
setTimeout(() => {
this.scrollbar?.refresh();
}, 0);
}
return;
});
// 左键选择
this.editor.on('keydown:left', () => {
if (!isEngine(this.editor)) return;
const { change } = this.editor;
const range = change.range.get();
const td = range.endNode.closest('td');
if (td.length === 0) return;
const contentElement = td.find('.table-main-content');
if (!contentElement) return;
if (td.length > 0) {
setTimeout(() => {
this.scrollbar?.refresh();
}, 0);
}
});
// 右键选择
this.editor.on('keydown:right', () => {
if (!isEngine(this.editor)) return;
const { change } = this.editor;
const range = change.range.get();
const td = range.endNode.closest('td');
if (td.length === 0) return;
const contentElement = td.find('.table-main-content');
if (!contentElement) return;
if (td.length > 0) {
setTimeout(() => {
this.scrollbar?.refresh();
}, 0);
}
});
}
if (this.colorTool) return;
this.colorTool = new ColorTool(this.editor, this.id, {
@ -383,6 +452,38 @@ class TableComponent<V extends TableValue = TableValue>
return;
}
onSelectUp(event: KeyboardEvent) {
const { tableModel } = this.selection;
if (!tableModel) return;
for (let r = tableModel.rows - 1; r >= 0; r--) {
for (let c = 0; c < tableModel.cols; c++) {
const cell = tableModel.table[r][c];
if (!this.helper.isEmptyModelCol(cell) && cell.element) {
event.preventDefault();
this.selection.focusCell(cell.element, false);
return false;
}
}
}
return;
}
onSelectDown(event: KeyboardEvent) {
const { tableModel } = this.selection;
if (!tableModel) return;
for (let r = 0; r < tableModel.rows; r++) {
for (let c = 0; c < tableModel.cols; c++) {
const cell = tableModel.table[r][c];
if (!this.helper.isEmptyModelCol(cell) && cell.element) {
event.preventDefault();
this.selection.focusCell(cell.element);
return false;
}
}
}
return;
}
updateAlign(event: MouseEvent, align: 'top' | 'middle' | 'bottom' = 'top') {
event.preventDefault();
this.conltrollBar.setAlign(align);