update: table & codeblock & mention

This commit is contained in:
yanmao 2022-01-05 21:32:49 +08:00
parent e9585a7a86
commit f73ebe947c
8 changed files with 34 additions and 20 deletions

View File

@ -1,4 +1,4 @@
import { DATA_ELEMENT, ROOT } from '../constants';
import { DATA_ELEMENT, ROOT, UI_SELECTOR } from '../constants';
import { EngineInterface, NodeInterface, Selector } from '../types';
import { $ } from '../node';
import { isMobile } from '../utils';
@ -15,6 +15,7 @@ class Container {
private options: Options;
private node: NodeInterface;
private _focused: boolean = false;
private _isMousedown = false;
constructor(selector: Selector, options: Options) {
this.node = $(selector);
@ -93,30 +94,36 @@ class Container {
engine.change.apply(range);
}
});
let isMousedown = false;
document.addEventListener('mousedown', this.docMouseDown);
this.node.on(isMobile ? 'touchstart' : 'mousedown', () => {
isMousedown = true;
this._isMousedown = true;
setTimeout(() => {
if (!this._focused) {
this._focused = true;
engine.trigger('focus');
}
isMousedown = false;
this._isMousedown = false;
}, 10);
});
this.node.on('focus', () => {
isMousedown = false;
this._isMousedown = false;
this._focused = true;
engine.trigger('focus');
});
this.node.on('blur', () => {
if (isMousedown) return;
isMousedown = false;
if (this._isMousedown) return;
this._isMousedown = false;
this._focused = false;
engine.trigger('blur');
});
}
docMouseDown = (e: MouseEvent) => {
if (e.target && $(e.target).closest(UI_SELECTOR).length > 0) {
this._isMousedown = true;
}
};
isFocus() {
return this._focused;
}
@ -148,6 +155,7 @@ class Container {
destroy() {
const { className, engine } = this.options;
document.removeEventListener('mousedown', this.docMouseDown);
this.node.removeAttributes(DATA_ELEMENT);
this.node.removeAttributes('contenteditable');
this.node.removeAttributes('role');

View File

@ -98,6 +98,7 @@ class CodeBlockEditor implements CodeBlockEditorInterface {
this.codeMirror.on('blur', () => {
const { onBlur } = this.options;
this.codeMirror?.setCursor(this.codeMirror.lineCount() - 1, 0);
if (onBlur) onBlur();
});
if (isMobile) {

View File

@ -21,13 +21,14 @@ import CodeBlockComponent, {
} from './component';
import locales from './locales';
export interface CodeblockOptions extends PluginOptions {
export interface CodeBlockOptions extends PluginOptions {
hotkey?: string | Array<string>;
markdown?: boolean;
alias?: Record<string, string>;
}
// 缩写替换
const MODE_ALIAS: { [key: string]: string } = {
const MODE_ALIAS = {
text: 'plain',
sh: 'bash',
ts: 'typescript',
@ -38,10 +39,11 @@ const MODE_ALIAS: { [key: string]: string } = {
vb: 'basic',
md: 'markdown',
'c++': 'cpp',
'c#': 'csharp',
};
export default class<
T extends CodeblockOptions = CodeblockOptions,
T extends CodeBlockOptions = CodeBlockOptions,
> extends Plugin<T> {
static get pluginName() {
return 'codeblock';
@ -103,7 +105,8 @@ export default class<
const modeText = (
undefined === match[1] ? '' : match[1]
).toLowerCase();
const mode = MODE_ALIAS[modeText] || modeText;
const alias = { ...(this.options.alias || {}), ...MODE_ALIAS };
const mode = alias[modeText] || modeText;
if (mode || mode === '') {
event.preventDefault();

View File

@ -139,6 +139,7 @@ class CodeBlockEditor implements CodeBlockEditorInterface {
});
this.codeMirror.on('blur', () => {
const { onBlur } = this.options;
this.codeMirror?.setCursor(this.codeMirror.lineCount() - 1, 0);
if (onBlur) onBlur();
});
if (isMobile) {

View File

@ -24,6 +24,7 @@ import locales from './locales';
export interface CodeBlockOptions extends PluginOptions {
hotkey?: string | Array<string>;
markdown?: boolean;
alias?: Record<string, string>;
}
// 缩写替换
@ -38,6 +39,7 @@ const MODE_ALIAS = {
vb: 'basic',
md: 'markdown',
'c++': 'cpp',
'c#': 'csharp',
};
export default class<
@ -104,7 +106,8 @@ export default class<
const modeText = (
undefined === match[1] ? '' : match[1]
).toLowerCase();
const mode = MODE_ALIAS[modeText] || modeText;
const alias = { ...(this.options.alias || {}), ...MODE_ALIAS };
const mode = alias[modeText] || modeText;
if (mode || mode === '') {
event.preventDefault();

View File

@ -247,7 +247,7 @@ class CollapseComponent implements CollapseComponentInterface {
? options.onLoading(this.root)
: this.engine.trigger('mention:loading', this.root);
body = this.getBody();
if (result) body?.append(result);
if (result) body?.empty().append(result);
} else if (data.filter((item) => !!item.key).length === 0) {
const result =
this.engine.trigger('mention:empty', this.root) ||
@ -255,7 +255,7 @@ class CollapseComponent implements CollapseComponentInterface {
? options?.onEmpty(this.root)
: this.renderEmpty(this.root));
body = this.getBody();
if (result) body?.append(result);
if (result) body?.empty().append(result);
} else if (
options?.onRender ||
(result = this.engine.trigger(
@ -270,7 +270,7 @@ class CollapseComponent implements CollapseComponentInterface {
: result
).then((content: any) => {
const body = this.getBody();
if (content) body?.append(content);
if (content) body?.empty().append(content);
this.#scrollbar?.destroy();
if (body)
this.#scrollbar = new Scrollbar(body, false, true, false);

View File

@ -456,7 +456,6 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
* @returns
*/
onMouseDownColsHeader = (event: MouseEvent | TouchEvent) => {
event.preventDefault();
const trigger = $(event.target || []).closest(
Template.COLS_HEADER_TRIGGER_CLASS,
);
@ -477,7 +476,6 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface {
* @returns
*/
onMouseDownRowsHeader = (event: MouseEvent | TouchEvent) => {
event.preventDefault();
const trigger = $(event.target || []).closest(
Template.ROWS_HEADER_TRIGGER_CLASS,
);

View File

@ -171,7 +171,7 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
cursor: move;
}
.table-wrapper .table-cols-header .table-cols-header-item.selected .col-dragger {
display: block;
display: flex;
position: absolute;
left: -1px;
top: -1px;
@ -180,6 +180,8 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
background: #4daaff;
border-radius: 0;
z-index: 1;
justify-content: center;
align-items: center;
}
.table-wrapper.data-table-highlight-col .table-cols-header .table-cols-header-item .col-dragger,.table-wrapper.data-table-highlight-all .table-cols-header .table-cols-header-item .col-dragger {
@ -230,8 +232,6 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"]
.table-wrapper .table-cols-header .table-cols-header-item .col-dragger .data-icon-drag {
font-size: 10px;
color: #fff;
position: relative;
top: -6px;
}
.table-wrapper .table-cols-header .table-cols-header-item .col-dragger .data-icon-drag::before {