webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-09 10:22:51 +03:00
Code Activity

Lexical: Added alignment detoggle, fixed inital focus area

Browse Source
This commit is contained in:
Dan Brown
2024-09-21 17:02:54 +01:00
parent 654a7a5d03
commit e6edd9340e
4 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/js/wysiwyg/todo.md
View File

@@ -22,5 +22,4 @@
## Bugs
- Focus/click area reduced to content area, single line on initial access
- List selection can get lost on nesting/unnesting

28
resources/js/wysiwyg/ui/defaults/buttons/alignments.ts
View File

@@ -1,4 +1,4 @@
import {$isElementNode, BaseSelection, LexicalEditor} from "lexical";
import {$isElementNode, BaseSelection} from "lexical";
import {EditorButtonDefinition} from "../../framework/buttons";
import alignLeftIcon from "@icons/editor/align-left.svg";
import {EditorUiContext} from "../../framework/core";
@@ -15,26 +15,28 @@ import {CommonBlockAlignment} from "../../../nodes/_common";
import {nodeHasAlignment} from "../../../utils/nodes";
function setAlignmentForSelection(editor: LexicalEditor, alignment: CommonBlockAlignment): void {
const selection = getLastSelection(editor);
function setAlignmentForSelection(context: EditorUiContext, alignment: CommonBlockAlignment): void {
const selection = getLastSelection(context.editor);
const selectionNodes = selection?.getNodes() || [];
// Handle inline node selection alignment
if (selectionNodes.length === 1 && $isElementNode(selectionNodes[0]) && selectionNodes[0].isInline() && nodeHasAlignment(selectionNodes[0])) {
selectionNodes[0].setAlignment(alignment);
$selectSingleNode(selectionNodes[0]);
$toggleSelection(editor);
context.manager.triggerFutureStateRefresh();
return;
}
// Handle normal block/range alignment
const elements = $getBlockElementNodesInSelection(selection);
for (const node of elements) {
if (nodeHasAlignment(node)) {
node.setAlignment(alignment)
}
const alignmentNodes = elements.filter(n => nodeHasAlignment(n));
const allAlreadyAligned = alignmentNodes.every(n => n.getAlignment() === alignment);
const newAlignment = allAlreadyAligned ? '' : alignment;
for (const node of alignmentNodes) {
node.setAlignment(newAlignment);
}
$toggleSelection(editor);
context.manager.triggerFutureStateRefresh();
}
function setDirectionForSelection(context: EditorUiContext, direction: 'ltr' | 'rtl'): void {
@@ -52,7 +54,7 @@ export const alignLeft: EditorButtonDefinition = {
label: 'Align left',
icon: alignLeftIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSelection(context.editor, 'left'));
context.editor.update(() => setAlignmentForSelection(context, 'left'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'left');
@@ -63,7 +65,7 @@ export const alignCenter: EditorButtonDefinition = {
label: 'Align center',
icon: alignCenterIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSelection(context.editor, 'center'));
context.editor.update(() => setAlignmentForSelection(context, 'center'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'center');
@@ -74,7 +76,7 @@ export const alignRight: EditorButtonDefinition = {
label: 'Align right',
icon: alignRightIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSelection(context.editor, 'right'));
context.editor.update(() => setAlignmentForSelection(context, 'right'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'right');
@@ -85,7 +87,7 @@ export const alignJustify: EditorButtonDefinition = {
label: 'Align justify',
icon: alignJustifyIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSelection(context.editor, 'justify'));
context.editor.update(() => setAlignmentForSelection(context, 'justify'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'justify');