webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-12-11 19:57:23 +03:00
Code Activity

Lexical API: Reviewed docs, Made toolbar its own UI class

Browse Source
This commit is contained in:
Dan Brown
2025-12-05 14:37:46 +00:00
parent 8890746278
commit ab4b1c8efa
4 changed files with 102 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/wysiwyg/api/__tests__/ui.test.ts
View File

@@ -1,5 +1,5 @@
import {createEditorApiInstance} from "./api-test-utils";
import {EditorApiButton, EditorApiToolbarSection} from "../ui";
import {EditorApiButton, EditorApiToolbar, EditorApiToolbarSection} from "../ui";
import {getMainEditorFullToolbar} from "../../ui/defaults/toolbars";
import {EditorContainerUiElement} from "../../ui/framework/core";
import {EditorOverflowContainer} from "../../ui/framework/blocks/overflow-container";
@@ -59,25 +59,39 @@ describe('Editor API: UI Module', () => {
});
describe('getMainToolbarSections()', () => {
it('should return an array of toolbar sections', () => {
describe('getMainToolbar()', () => {
it('should return the main editor toolbar', () => {
const {api, context} = createEditorApiInstance();
context.manager.setToolbar(getMainEditorFullToolbar(context));
const sections = api.ui.getMainToolbarSections();
expect(Array.isArray(sections)).toBe(true);
const toolbar = api.ui.getMainToolbar();
expect(sections[0]).toBeInstanceOf(EditorApiToolbarSection);
expect(toolbar).toBeInstanceOf(EditorApiToolbar);
});
});
describe('EditorApiToolbar', () => {
describe('getSections()', () => {
it('should return the sections of the toolbar', () => {
const {api, context} = createEditorApiInstance();
context.manager.setToolbar(testToolbar());
const toolbar = api.ui.getMainToolbar();
const sections = toolbar?.getSections() || [];
expect(sections.length).toBe(2);
expect(sections[0]).toBeInstanceOf(EditorApiToolbarSection);
})
})
})
describe('EditorApiToolbarSection', () => {
describe('getLabel()', () => {
it('should return the label of the section', () => {
const {api, context} = createEditorApiInstance();
context.manager.setToolbar(testToolbar());
const section = api.ui.getMainToolbarSections()[0];
const section = api.ui.getMainToolbar()?.getSections()[0] as EditorApiToolbarSection;
expect(section.getLabel()).toBe('section-a');
})
});
@@ -87,7 +101,7 @@ describe('Editor API: UI Module', () => {
const {api, context} = createEditorApiInstance();
const toolbar = testToolbar();
context.manager.setToolbar(toolbar);
const section = api.ui.getMainToolbarSections()[0];
const section = api.ui.getMainToolbar()?.getSections()[0] as EditorApiToolbarSection;
const button = api.ui.createButton({label: 'TestButtonText!', action: () => ''});
section.addButton(button);

28
resources/js/wysiwyg/api/ui.ts
View File

@@ -1,5 +1,5 @@
import {EditorButton} from "../ui/framework/buttons";
import {EditorUiContext} from "../ui/framework/core";
import {EditorContainerUiElement, EditorUiContext} from "../ui/framework/core";
import {EditorOverflowContainer} from "../ui/framework/blocks/overflow-container";
type EditorApiButtonOptions = {
@@ -34,13 +34,26 @@ export class EditorApiButton {
}
}
export class EditorApiToolbar {
readonly #toolbar: EditorContainerUiElement;
constructor(toolbar: EditorContainerUiElement) {
this.#toolbar = toolbar;
}
getSections(): EditorApiToolbarSection[] {
const sections = this.#toolbar.getChildren();
return sections.filter(section => {
return section instanceof EditorOverflowContainer;
}).map(section => new EditorApiToolbarSection(section));
}
}
export class EditorApiToolbarSection {
readonly #section: EditorOverflowContainer;
label: string;
constructor(section: EditorOverflowContainer) {
this.#section = section;
this.label = section.getLabel();
}
getLabel(): string {
@@ -65,15 +78,12 @@ export class EditorApiUiModule {
return new EditorApiButton(options, this.#context);
}
getMainToolbarSections(): EditorApiToolbarSection[] {
getMainToolbar(): EditorApiToolbar|null {
const toolbar = this.#context.manager.getToolbar();
if (!toolbar) {
return [];
return null;
}
const sections = toolbar.getChildren();
return sections.filter(section => {
return section instanceof EditorOverflowContainer;
}).map(section => new EditorApiToolbarSection(section));
return new EditorApiToolbar(toolbar);
}
}