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

feat(table & codeblock): add up, down, left, and right keyboard options

This commit is contained in:
yanmao 2021-12-30 21:24:33 +08:00
parent cb6e0dd7e9
commit 4f25ce785b
7 changed files with 242 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
plugins/codeblock-vue/src/component/editor.ts
View File

@ -4,6 +4,7 @@ import {
$,
EditorInterface,
isEngine,
isHotkey,
isMobile,
NodeInterface,
} from '@aomao/engine';
@ -130,7 +131,47 @@ class CodeBlockEditor implements CodeBlockEditorInterface {
mirror.execCommand('newlineAndIndent');
},
});
this.codeMirror.on('keydown', (editor, event) => {
console.log(editor.getCursor(), editor.lineCount());
const lineCount = editor.lineCount();
const { line, ch } = editor.getCursor();
const { onUpFocus, onDownFocus, onLeftFocus, onRightFocus } =
this.options;
// 在最后一行
if (line === lineCount - 1) {
const content = editor.getLine(line);
if (ch !== content.length) return;
// 按下下键
if (isHotkey('down', event) || isHotkey('ctrl+n', event)) {
if (onDownFocus) onDownFocus(event);
}
// 按下右键
else if (
isHotkey('right', event) ||
isHotkey('shift+right', event) ||
isHotkey('ctrl+e', event) ||
isHotkey('ctrl+f', event)
) {
if (onRightFocus) onRightFocus(event);
}
}
// 在第一行按下上键
else if (line === 0 && ch === 0) {
// 按下上键
if (isHotkey('up', event) || isHotkey('ctrl+p', event)) {
if (onUpFocus) onUpFocus(event);
}
// 按下左键
else if (
isHotkey('left', event) ||
isHotkey('shift+left', event) ||
isHotkey('ctrl+b', event) ||
isHotkey('ctrl+a', event)
) {
if (onLeftFocus) onLeftFocus(event);
}
}
});
this.container.on('mousedown', (event: MouseEvent) => {
if (!this.codeMirror?.hasFocus()) {
setTimeout(() => {

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

@ -85,6 +85,46 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
);
}, 10);
},
onUpFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusPrevBlock(this, range, true);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
onDownFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusNextBlock(this, range, true);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
onLeftFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change } = this.editor;
const range = change.range.get().cloneRange();
this.focus(range, true);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
onRightFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change } = this.editor;
const range = change.range.get().cloneRange();
this.focus(range, false);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
});
}
#viewAutoWrap?: boolean = undefined;
@ -169,6 +209,38 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
this.editor.card.activate(this.root);
}
onSelectLeft(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
onSelectRight(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
onSelectDown(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
onSelectUp(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
render() {
if (!this.codeEditor) return;
if (!this.codeEditor.container.inEditor()) {

4
plugins/codeblock-vue/src/component/types.ts
View File

@ -8,6 +8,10 @@ export type Options = {
onMouseDown?: (event: MouseEvent | TouchEvent) => void;
container?: NodeInterface;
synatxMap: { [key: string]: string };
onDownFocus?: (event: KeyboardEvent) => void;
onUpFocus?: (event: KeyboardEvent) => void;
onLeftFocus?: (event: KeyboardEvent) => void;
onRightFocus?: (event: KeyboardEvent) => void;
};
export interface CodeBlockEditor {

43
plugins/codeblock/src/component/editor.ts
View File

@ -4,6 +4,7 @@ import {
$,
EditorInterface,
isEngine,
isHotkey,
isMobile,
NodeInterface,
} from '@aomao/engine';
@ -94,7 +95,47 @@ class CodeBlockEditor implements CodeBlockEditorInterface {
const { onFocus } = this.options;
if (onFocus) onFocus();
});
this.codeMirror.on('keydown', (editor, event) => {
console.log(editor.getCursor(), editor.lineCount());
const lineCount = editor.lineCount();
const { line, ch } = editor.getCursor();
const { onUpFocus, onDownFocus, onLeftFocus, onRightFocus } =
this.options;
// 在最后一行
if (line === lineCount - 1) {
const content = editor.getLine(line);
if (ch !== content.length) return;
// 按下下键
if (isHotkey('down', event) || isHotkey('ctrl+n', event)) {
if (onDownFocus) onDownFocus(event);
}
// 按下右键
else if (
isHotkey('right', event) ||
isHotkey('shift+right', event) ||
isHotkey('ctrl+e', event) ||
isHotkey('ctrl+f', event)
) {
if (onRightFocus) onRightFocus(event);
}
}
// 在第一行按下上键
else if (line === 0 && ch === 0) {
// 按下上键
if (isHotkey('up', event) || isHotkey('ctrl+p', event)) {
if (onUpFocus) onUpFocus(event);
}
// 按下左键
else if (
isHotkey('left', event) ||
isHotkey('shift+left', event) ||
isHotkey('ctrl+b', event) ||
isHotkey('ctrl+a', event)
) {
if (onLeftFocus) onLeftFocus(event);
}
}
});
this.codeMirror.on('blur', () => {
const { onBlur } = this.options;
if (onBlur) onBlur();

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

@ -82,6 +82,46 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
CardActiveTrigger.MOUSE_DOWN,
);
},
onUpFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusPrevBlock(this, range, true);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
onDownFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change, card } = this.editor;
const range = change.range.get().cloneRange();
card.focusNextBlock(this, range, true);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
onLeftFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change } = this.editor;
const range = change.range.get().cloneRange();
this.focus(range, true);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
onRightFocus: (event) => {
if (!isEngine(this.editor)) return;
event.preventDefault();
const { change } = this.editor;
const range = change.range.get().cloneRange();
this.focus(range, false);
change.range.select(range);
this.activate(false);
this.toolbarModel?.hide();
},
});
}
#viewAutoWrap?: boolean = undefined;
@ -166,6 +206,38 @@ class CodeBlcok<V extends CodeBlockValue = CodeBlockValue> extends Card<V> {
this.editor.card.activate(this.root);
}
onSelectLeft(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
onSelectRight(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
onSelectDown(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
onSelectUp(event: KeyboardEvent) {
if (!this.codeEditor) return;
event.preventDefault();
this.codeEditor.focus();
this.activate(true);
this.toolbarModel?.show();
}
render() {
if (!this.codeEditor) return;
if (!this.codeEditor.container.inEditor()) {

4
plugins/codeblock/src/component/types.ts
View File

@ -8,6 +8,10 @@ export type Options = {
onMouseDown?: (event: MouseEvent | TouchEvent) => void;
container?: NodeInterface;
synatxMap: { [key: string]: string };
onDownFocus?: (event: KeyboardEvent) => void;
onUpFocus?: (event: KeyboardEvent) => void;
onLeftFocus?: (event: KeyboardEvent) => void;
onRightFocus?: (event: KeyboardEvent) => void;
};
export interface CodeBlockEditor {

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

@ -133,6 +133,8 @@ class TableComponent<V extends TableValue = TableValue>
this.selection.focusCell(next);
return false;
}
} else if (td.length > 0) {
this.scrollbar?.refresh();
}
return;
},
@ -181,6 +183,8 @@ class TableComponent<V extends TableValue = TableValue>
return false;
}
}
} else if (td.length > 0) {
this.scrollbar?.refresh();
}
return;
});
@ -227,6 +231,8 @@ class TableComponent<V extends TableValue = TableValue>
return false;
}
}
} else if (td.length > 0) {
this.scrollbar?.refresh();
}
return;
});