webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-01-03 23:42:28 +03:00
Code Activity

Lexical: Added ui container type

Browse Source 
Structured UI logical to be fairly standard and mostly covered via
a base class that handles context and core dom work.
This commit is contained in:
Dan Brown
2024-05-29 20:38:31 +01:00
parent 483d9bf26c
commit dc1a40ea74
12 changed files with 240 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
resources/js/wysiwyg/ui/index.ts
View File

@@ -4,49 +4,17 @@ import {
LexicalEditor,
SELECTION_CHANGE_COMMAND
} from "lexical";
import {EditorButton, EditorButtonDefinition} from "./editor-button";
import {
blockquoteButton, boldButton, codeButton,
dangerCalloutButton,
h2Button,
h3Button, h4Button, h5Button,
infoCalloutButton, italicButton, paragraphButton, redoButton, strikethroughButton, subscriptButton,
successCalloutButton, superscriptButton, underlineButton, undoButton,
warningCalloutButton
} from "./buttons";
const toolbarButtonDefinitions: EditorButtonDefinition[] = [
undoButton, redoButton,
infoCalloutButton, warningCalloutButton, dangerCalloutButton, successCalloutButton,
h2Button, h3Button, h4Button, h5Button,
blockquoteButton, paragraphButton,
boldButton, italicButton, underlineButton, strikethroughButton,
superscriptButton, subscriptButton, codeButton,
];
import {getMainEditorFullToolbar} from "./toolbars";
export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) {
const toolbarContainer = document.createElement('div');
toolbarContainer.classList.add('editor-toolbar-container');
const buttons = toolbarButtonDefinitions.map(definition => {
return new EditorButton(definition, editor);
});
const buttonElements = buttons.map(button => button.getDOMElement());
toolbarContainer.append(...buttonElements);
element.before(toolbarContainer);
const toolbar = getMainEditorFullToolbar();
toolbar.setContext({editor});
element.before(toolbar.getDOMElement());
// Update button states on editor selection change
editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
const selection = $getSelection();
for (const button of buttons) {
button.updateActiveState(selection);
}
toolbar.updateState({editor, selection});
return false;
}, COMMAND_PRIORITY_LOW);
}