update: table & codeblock & mention
This commit is contained in:
parent
e9585a7a86
commit
f73ebe947c
|
@ -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');
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
);
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue