github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-05 18:04:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Lexical: Updated lexical, added undo state tracking, format styles

Browse Source
This commit is contained in:
Dan Brown
2024-06-23 11:36:48 +01:00
parent ac01c62e6e
commit a07092b7e6
6 changed files with 251 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/wysiwyg/index.ts
View File

@ -12,6 +12,18 @@ export function createPageEditorInstance(editArea: HTMLElement) {
namespace: 'BookStackPageEditor',
nodes: getNodesForPageEditor(),
onError: console.error,
theme: {
text: {
bold: 'editor-theme-bold',
code: 'editor-theme-code',
italic: 'editor-theme-italic',
strikethrough: 'editor-theme-strikethrough',
subscript: 'editor-theme-subscript',
superscript: 'editor-theme-superscript',
underline: 'editor-theme-underline',
underlineStrikethrough: 'editor-theme-underline-strikethrough',
}
}
};
const startingHtml = editArea.innerHTML;

20
resources/js/wysiwyg/ui/defaults/button-definitions.ts
View File

@ -1,9 +1,9 @@
import {EditorBasicButtonDefinition, EditorButtonDefinition} from "../framework/buttons";
import {EditorBasicButtonDefinition, EditorButton, EditorButtonDefinition} from "../framework/buttons";
import {
$createNodeSelection,
$createParagraphNode, $getRoot, $getSelection,
$isParagraphNode, $isTextNode, $setSelection,
BaseSelection, ElementNode, FORMAT_TEXT_COMMAND,
BaseSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, ElementNode, FORMAT_TEXT_COMMAND,
LexicalNode,
REDO_COMMAND, TextFormatType,
UNDO_COMMAND
@ -55,6 +55,14 @@ export const undo: EditorButtonDefinition = {
},
isActive(selection: BaseSelection|null): boolean {
return false;
},
setup(context: EditorUiContext, button: EditorButton) {
button.toggleDisabled(true);
context.editor.registerCommand(CAN_UNDO_COMMAND, (payload: boolean): boolean => {
button.toggleDisabled(!payload)
return false;
}, COMMAND_PRIORITY_LOW);
}
}
@ -66,6 +74,14 @@ export const redo: EditorButtonDefinition = {
},
isActive(selection: BaseSelection|null): boolean {
return false;
},
setup(context: EditorUiContext, button: EditorButton) {
button.toggleDisabled(true);
context.editor.registerCommand(CAN_REDO_COMMAND, (payload: boolean): boolean => {
button.toggleDisabled(!payload)
return false;
}, COMMAND_PRIORITY_LOW);
}
}

23
resources/js/wysiwyg/ui/framework/buttons.ts
View File

@ -1,6 +1,7 @@
import {BaseSelection} from "lexical";
import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
import {el} from "../../helpers";
import {context} from "esbuild";
export interface EditorBasicButtonDefinition {
label: string;
@ -10,17 +11,29 @@ export interface EditorBasicButtonDefinition {
export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
action: (context: EditorUiContext) => void;
isActive: (selection: BaseSelection|null) => boolean;
setup?: (context: EditorUiContext, button: EditorButton) => void;
}
export class EditorButton extends EditorUiElement {
protected definition: EditorButtonDefinition;
protected active: boolean = false;
protected completedSetup: boolean = false;
protected disabled: boolean = false;
constructor(definition: EditorButtonDefinition) {
super();
this.definition = definition;
}
setContext(context: EditorUiContext) {
super.setContext(context);
if (this.definition.setup && !this.completedSetup) {
this.definition.setup(context, this);
this.completedSetup = true;
}
}
protected buildDOM(): HTMLButtonElement {
const label = this.getLabel();
@ -34,6 +47,7 @@ export class EditorButton extends EditorUiElement {
type: 'button',
class: 'editor-button',
title: this.definition.icon ? label : null,
disabled: this.disabled ? 'true' : null,
}, [child]) as HTMLButtonElement;
button.addEventListener('click', this.onClick.bind(this));
@ -61,4 +75,13 @@ export class EditorButton extends EditorUiElement {
getLabel(): string {
return this.trans(this.definition.label);
}
toggleDisabled(disabled: boolean) {
this.disabled = disabled;
if (disabled) {
this.dom?.setAttribute('disabled', 'true');
} else {
this.dom?.removeAttribute('disabled');
}
}
}