2024-05-30 23:50:55 +08:00
|
|
|
import {BaseSelection} from "lexical";
|
|
|
|
import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
|
2024-05-30 03:38:31 +08:00
|
|
|
import {el} from "../../helpers";
|
|
|
|
|
2024-06-13 02:51:42 +08:00
|
|
|
export interface EditorBasicButtonDefinition {
|
2024-05-30 03:38:31 +08:00
|
|
|
label: string;
|
2024-06-20 03:00:29 +08:00
|
|
|
icon?: string|undefined;
|
2024-06-13 02:51:42 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
|
2024-07-01 17:44:23 +08:00
|
|
|
action: (context: EditorUiContext, button: EditorButton) => void;
|
|
|
|
isActive: (selection: BaseSelection|null, context: EditorUiContext) => boolean;
|
2024-06-23 18:36:48 +08:00
|
|
|
setup?: (context: EditorUiContext, button: EditorButton) => void;
|
2024-05-30 03:38:31 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export class EditorButton extends EditorUiElement {
|
|
|
|
protected definition: EditorButtonDefinition;
|
2024-05-30 23:50:55 +08:00
|
|
|
protected active: boolean = false;
|
2024-06-23 18:36:48 +08:00
|
|
|
protected completedSetup: boolean = false;
|
|
|
|
protected disabled: boolean = false;
|
2024-05-30 03:38:31 +08:00
|
|
|
|
2024-06-23 22:50:41 +08:00
|
|
|
constructor(definition: EditorButtonDefinition|EditorBasicButtonDefinition) {
|
2024-05-30 03:38:31 +08:00
|
|
|
super();
|
2024-06-23 22:50:41 +08:00
|
|
|
|
|
|
|
if ((definition as EditorButtonDefinition).action !== undefined) {
|
|
|
|
this.definition = definition as EditorButtonDefinition;
|
|
|
|
} else {
|
|
|
|
this.definition = {
|
|
|
|
...definition,
|
|
|
|
action() {
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
isActive: () => {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
2024-05-30 03:38:31 +08:00
|
|
|
}
|
|
|
|
|
2024-06-23 18:36:48 +08:00
|
|
|
setContext(context: EditorUiContext) {
|
|
|
|
super.setContext(context);
|
|
|
|
|
|
|
|
if (this.definition.setup && !this.completedSetup) {
|
|
|
|
this.definition.setup(context, this);
|
|
|
|
this.completedSetup = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
protected buildDOM(): HTMLButtonElement {
|
2024-06-20 03:00:29 +08:00
|
|
|
|
|
|
|
const label = this.getLabel();
|
|
|
|
let child: string|HTMLElement = label;
|
|
|
|
if (this.definition.icon) {
|
2024-07-01 22:10:22 +08:00
|
|
|
child = el('div', {class: 'editor-button-icon'});
|
2024-06-20 03:00:29 +08:00
|
|
|
child.innerHTML = this.definition.icon;
|
|
|
|
}
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
const button = el('button', {
|
|
|
|
type: 'button',
|
2024-05-30 19:25:25 +08:00
|
|
|
class: 'editor-button',
|
2024-06-20 03:00:29 +08:00
|
|
|
title: this.definition.icon ? label : null,
|
2024-06-23 18:36:48 +08:00
|
|
|
disabled: this.disabled ? 'true' : null,
|
2024-06-20 03:00:29 +08:00
|
|
|
}, [child]) as HTMLButtonElement;
|
2024-05-30 03:38:31 +08:00
|
|
|
|
2024-05-30 19:25:25 +08:00
|
|
|
button.addEventListener('click', this.onClick.bind(this));
|
2024-05-30 03:38:31 +08:00
|
|
|
|
|
|
|
return button;
|
|
|
|
}
|
|
|
|
|
2024-05-30 19:25:25 +08:00
|
|
|
protected onClick() {
|
2024-07-01 17:44:23 +08:00
|
|
|
this.definition.action(this.getContext(), this);
|
2024-05-30 19:25:25 +08:00
|
|
|
}
|
|
|
|
|
2024-05-30 03:38:31 +08:00
|
|
|
updateActiveState(selection: BaseSelection|null) {
|
2024-07-01 17:44:23 +08:00
|
|
|
const isActive = this.definition.isActive(selection, this.getContext());
|
|
|
|
this.setActiveState(isActive);
|
|
|
|
}
|
|
|
|
|
|
|
|
setActiveState(active: boolean) {
|
|
|
|
this.active = active;
|
2024-05-30 23:50:55 +08:00
|
|
|
this.dom?.classList.toggle('editor-button-active', this.active);
|
2024-05-30 03:38:31 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
updateState(state: EditorUiStateUpdate): void {
|
|
|
|
this.updateActiveState(state.selection);
|
|
|
|
}
|
2024-05-30 23:50:55 +08:00
|
|
|
|
|
|
|
isActive(): boolean {
|
|
|
|
return this.active;
|
|
|
|
}
|
|
|
|
|
|
|
|
getLabel(): string {
|
|
|
|
return this.trans(this.definition.label);
|
|
|
|
}
|
2024-06-23 18:36:48 +08:00
|
|
|
|
|
|
|
toggleDisabled(disabled: boolean) {
|
|
|
|
this.disabled = disabled;
|
|
|
|
if (disabled) {
|
|
|
|
this.dom?.setAttribute('disabled', 'true');
|
|
|
|
} else {
|
|
|
|
this.dom?.removeAttribute('disabled');
|
|
|
|
}
|
|
|
|
}
|
2024-05-30 19:25:25 +08:00
|
|
|
}
|