webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Lexical: Updated toolbar & text node exporting

Browse Source 
- Updated toolbar to match existing editor, including dynamic RTL/LTR
  controls.
- Updated text node handling to not include spans and extra classes when
  not needed. Added & update tests to cover.
This commit is contained in:
Dan Brown
2024-09-23 17:36:16 +01:00
parent 8b32e6c15a
commit a62d8381be
16 changed files with 152 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/wysiwyg/ui/framework/manager.ts
View File

@ -163,6 +163,10 @@ export class EditorUIManager {
});
}
getDefaultDirection(): 'rtl' | 'ltr' {
return this.getContext().options.textDirection === 'rtl' ? 'rtl' : 'ltr';
}
protected updateContextToolbars(update: EditorUiStateUpdate): void {
for (let i = this.activeContextToolbars.length - 1; i >= 0; i--) {
const toolbar = this.activeContextToolbars[i];

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

@ -32,7 +32,7 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro
manager.setContext(context);
// Create primary toolbar
manager.setToolbar(getMainEditorFullToolbar());
manager.setToolbar(getMainEditorFullToolbar(context));
// Register modals
for (const key of Object.keys(modals)) {

17
resources/js/wysiwyg/ui/toolbars.ts
View File

@ -1,5 +1,5 @@
import {EditorButton} from "./framework/buttons";
import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiElement} from "./framework/core";
import {EditorContainerUiElement, EditorSimpleClassContainer, EditorUiContext, EditorUiElement} from "./framework/core";
import {EditorFormatMenu} from "./framework/blocks/format-menu";
import {FormatPreviewButton} from "./framework/blocks/format-preview-button";
import {EditorDropdownButton} from "./framework/blocks/dropdown-button";
@ -80,7 +80,10 @@ import {el} from "../utils/dom";
import {EditorButtonWithMenu} from "./framework/blocks/button-with-menu";
import {EditorSeparator} from "./framework/blocks/separator";
export function getMainEditorFullToolbar(): EditorContainerUiElement {
export function getMainEditorFullToolbar(context: EditorUiContext): EditorContainerUiElement {
const inRtlMode = context.manager.getDefaultDirection() === 'rtl';
return new EditorSimpleClassContainer('editor-toolbar-main', [
// History state
@ -124,17 +127,17 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
]),
// Alignment
new EditorOverflowContainer(6, [ // TODO - Dynamic
new EditorOverflowContainer(6, [
new EditorButton(alignLeft),
new EditorButton(alignCenter),
new EditorButton(alignRight),
new EditorButton(alignJustify),
new EditorButton(directionLTR), // TODO - Dynamic
new EditorButton(directionRTL), // TODO - Dynamic
]),
inRtlMode ? new EditorButton(directionLTR) : null,
inRtlMode ? new EditorButton(directionRTL) : null,
].filter(x => x !== null)),
// Lists
new EditorOverflowContainer(5, [
new EditorOverflowContainer(3, [
new EditorButton(bulletList),
new EditorButton(numberList),
new EditorButton(taskList),