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: Added RTL/LTR actions

Browse Source 
Kinda useless though due to Lexical reconciler :(
This commit is contained in:
Dan Brown
2024-09-16 12:29:46 +01:00
parent 5f46d71af0
commit 03490d6597
5 changed files with 70 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,15 +5,17 @@ import {EditorUiContext} from "../../framework/core";
import alignCenterIcon from "@icons/editor/align-center.svg";
import alignRightIcon from "@icons/editor/align-right.svg";
import alignJustifyIcon from "@icons/editor/align-justify.svg";
import ltrIcon from "@icons/editor/direction-ltr.svg";
import rtlIcon from "@icons/editor/direction-rtl.svg";
import {
$getBlockElementNodesInSelection,
$selectionContainsAlignment, $selectSingleNode, $toggleSelection, getLastSelection
$selectionContainsAlignment, $selectionContainsDirection, $selectSingleNode, $toggleSelection, getLastSelection
} from "../../../utils/selection";
import {CommonBlockAlignment} from "../../../nodes/_common";
import {nodeHasAlignment} from "../../../utils/nodes";
function setAlignmentForSection(editor: LexicalEditor, alignment: CommonBlockAlignment): void {
function setAlignmentForSelection(editor: LexicalEditor, alignment: CommonBlockAlignment): void {
const selection = getLastSelection(editor);
const selectionNodes = selection?.getNodes() || [];
@ -35,11 +37,21 @@ function setAlignmentForSection(editor: LexicalEditor, alignment: CommonBlockAli
$toggleSelection(editor);
}
function setDirectionForSelection(editor: LexicalEditor, direction: 'ltr' | 'rtl'): void {
const selection = getLastSelection(editor);
const elements = $getBlockElementNodesInSelection(selection);
for (const node of elements) {
console.log('setting direction', node);
node.setDirection(direction);
}
}
export const alignLeft: EditorButtonDefinition = {
label: 'Align left',
icon: alignLeftIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSection(context.editor, 'left'));
context.editor.update(() => setAlignmentForSelection(context.editor, 'left'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'left');
@ -50,7 +62,7 @@ export const alignCenter: EditorButtonDefinition = {
label: 'Align center',
icon: alignCenterIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSection(context.editor, 'center'));
context.editor.update(() => setAlignmentForSelection(context.editor, 'center'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'center');
@ -61,7 +73,7 @@ export const alignRight: EditorButtonDefinition = {
label: 'Align right',
icon: alignRightIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSection(context.editor, 'right'));
context.editor.update(() => setAlignmentForSelection(context.editor, 'right'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'right');
@ -72,9 +84,31 @@ export const alignJustify: EditorButtonDefinition = {
label: 'Align justify',
icon: alignJustifyIcon,
action(context: EditorUiContext) {
context.editor.update(() => setAlignmentForSection(context.editor, 'justify'));
context.editor.update(() => setAlignmentForSelection(context.editor, 'justify'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsAlignment(selection, 'justify');
}
};
export const directionLTR: EditorButtonDefinition = {
label: 'Left to right',
icon: ltrIcon,
action(context: EditorUiContext) {
context.editor.update(() => setDirectionForSelection(context.editor, 'ltr'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsDirection(selection, 'ltr');
}
};
export const directionRTL: EditorButtonDefinition = {
label: 'Right to left',
icon: rtlIcon,
action(context: EditorUiContext) {
context.editor.update(() => setDirectionForSelection(context.editor, 'rtl'));
},
isActive(selection: BaseSelection|null) {
return $selectionContainsDirection(selection, 'rtl');
}
};

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

@ -51,7 +51,14 @@ import {
textColor,
underline
} from "./defaults/buttons/inline-formats";
import {alignCenter, alignJustify, alignLeft, alignRight} from "./defaults/buttons/alignments";
import {
alignCenter,
alignJustify,
alignLeft,
alignRight,
directionLTR,
directionRTL
} from "./defaults/buttons/alignments";
import {
bulletList,
indentDecrease,
@ -117,11 +124,13 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
]),
// Alignment
new EditorOverflowContainer(4, [
new EditorOverflowContainer(6, [ // TODO - Dynamic
new EditorButton(alignLeft),
new EditorButton(alignCenter),
new EditorButton(alignRight),
new EditorButton(alignJustify),
new EditorButton(directionLTR), // TODO - Dynamic
new EditorButton(directionRTL), // TODO - Dynamic
]),
// Lists

18
resources/js/wysiwyg/utils/selection.ts
View File

@ -2,7 +2,7 @@ import {
$createNodeSelection,
$createParagraphNode, $createRangeSelection,
$getRoot,
$getSelection, $isDecoratorNode,
$getSelection, $isBlockElementNode, $isDecoratorNode,
$isElementNode,
$isTextNode,
$setSelection,
@ -199,6 +199,22 @@ export function $selectionContainsAlignment(selection: BaseSelection | null, ali
return false;
}
export function $selectionContainsDirection(selection: BaseSelection | null, direction: 'rtl'|'ltr'): boolean {
const nodes = [
...(selection?.getNodes() || []),
...$getBlockElementNodesInSelection(selection)
];
for (const node of nodes) {
if ($isBlockElementNode(node) && node.getDirection() === direction) {
return true;
}
}
return false;
}
export function $getBlockElementNodesInSelection(selection: BaseSelection | null): ElementNode[] {
if (!selection) {
return [];