Skip to content

Commit 03490d6

Browse files
ssddanbrownssddanbrown
committed
Lexical: Added RTL/LTR actions
Kinda useless though due to Lexical reconciler :(
1 parent 5f46d71 commit 03490d6

5 files changed

Lines changed: 70 additions & 9 deletions

File tree

‎resources/icons/editor/direction-ltr.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎resources/icons/editor/direction-rtl.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎resources/js/wysiwyg/ui/defaults/buttons/alignments.ts‎

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@ import {EditorUiContext} from "../../framework/core";
55
import alignCenterIcon from "@icons/editor/align-center.svg";
66
import alignRightIcon from "@icons/editor/align-right.svg";
77
import alignJustifyIcon from "@icons/editor/align-justify.svg";
8+
import ltrIcon from "@icons/editor/direction-ltr.svg";
9+
import rtlIcon from "@icons/editor/direction-rtl.svg";
810
import {
911
$getBlockElementNodesInSelection,
10-
$selectionContainsAlignment, $selectSingleNode, $toggleSelection, getLastSelection
12+
$selectionContainsAlignment, $selectionContainsDirection, $selectSingleNode, $toggleSelection, getLastSelection
1113
} from "../../../utils/selection";
1214
import {CommonBlockAlignment} from "../../../nodes/_common";
1315
import {nodeHasAlignment} from "../../../utils/nodes";
1416

1517

16-
function setAlignmentForSection(editor: LexicalEditor, alignment: CommonBlockAlignment): void {
18+
function setAlignmentForSelection(editor: LexicalEditor, alignment: CommonBlockAlignment): void {
1719
const selection = getLastSelection(editor);
1820
const selectionNodes = selection?.getNodes() || [];
1921

@@ -35,11 +37,21 @@ function setAlignmentForSection(editor: LexicalEditor, alignment: CommonBlockAli
3537
$toggleSelection(editor);
3638
}
3739

40+
function setDirectionForSelection(editor: LexicalEditor, direction: 'ltr' | 'rtl'): void {
41+
const selection = getLastSelection(editor);
42+
43+
const elements = $getBlockElementNodesInSelection(selection);
44+
for (const node of elements) {
45+
console.log('setting direction', node);
46+
node.setDirection(direction);
47+
}
48+
}
49+
3850
export const alignLeft: EditorButtonDefinition = {
3951
label: 'Align left',
4052
icon: alignLeftIcon,
4153
action(context: EditorUiContext) {
42-
context.editor.update(() => setAlignmentForSection(context.editor, 'left'));
54+
context.editor.update(() => setAlignmentForSelection(context.editor, 'left'));
4355
},
4456
isActive(selection: BaseSelection|null) {
4557
return $selectionContainsAlignment(selection, 'left');
@@ -50,7 +62,7 @@ export const alignCenter: EditorButtonDefinition = {
5062
label: 'Align center',
5163
icon: alignCenterIcon,
5264
action(context: EditorUiContext) {
53-
context.editor.update(() => setAlignmentForSection(context.editor, 'center'));
65+
context.editor.update(() => setAlignmentForSelection(context.editor, 'center'));
5466
},
5567
isActive(selection: BaseSelection|null) {
5668
return $selectionContainsAlignment(selection, 'center');
@@ -61,7 +73,7 @@ export const alignRight: EditorButtonDefinition = {
6173
label: 'Align right',
6274
icon: alignRightIcon,
6375
action(context: EditorUiContext) {
64-
context.editor.update(() => setAlignmentForSection(context.editor, 'right'));
76+
context.editor.update(() => setAlignmentForSelection(context.editor, 'right'));
6577
},
6678
isActive(selection: BaseSelection|null) {
6779
return $selectionContainsAlignment(selection, 'right');
@@ -72,9 +84,31 @@ export const alignJustify: EditorButtonDefinition = {
7284
label: 'Align justify',
7385
icon: alignJustifyIcon,
7486
action(context: EditorUiContext) {
75-
context.editor.update(() => setAlignmentForSection(context.editor, 'justify'));
87+
context.editor.update(() => setAlignmentForSelection(context.editor, 'justify'));
7688
},
7789
isActive(selection: BaseSelection|null) {
7890
return $selectionContainsAlignment(selection, 'justify');
7991
}
8092
};
93+
94+
export const directionLTR: EditorButtonDefinition = {
95+
label: 'Left to right',
96+
icon: ltrIcon,
97+
action(context: EditorUiContext) {
98+
context.editor.update(() => setDirectionForSelection(context.editor, 'ltr'));
99+
},
100+
isActive(selection: BaseSelection|null) {
101+
return $selectionContainsDirection(selection, 'ltr');
102+
}
103+
};
104+
105+
export const directionRTL: EditorButtonDefinition = {
106+
label: 'Right to left',
107+
icon: rtlIcon,
108+
action(context: EditorUiContext) {
109+
context.editor.update(() => setDirectionForSelection(context.editor, 'rtl'));
110+
},
111+
isActive(selection: BaseSelection|null) {
112+
return $selectionContainsDirection(selection, 'rtl');
113+
}
114+
};

‎resources/js/wysiwyg/ui/toolbars.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,14 @@ import {
5151
textColor,
5252
underline
5353
} from "./defaults/buttons/inline-formats";
54-
import {alignCenter, alignJustify, alignLeft, alignRight} from "./defaults/buttons/alignments";
54+
import {
55+
alignCenter,
56+
alignJustify,
57+
alignLeft,
58+
alignRight,
59+
directionLTR,
60+
directionRTL
61+
} from "./defaults/buttons/alignments";
5562
import {
5663
bulletList,
5764
indentDecrease,
@@ -117,11 +124,13 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
117124
]),
118125

119126
// Alignment
120-
new EditorOverflowContainer(4, [
127+
new EditorOverflowContainer(6, [ // TODO - Dynamic
121128
new EditorButton(alignLeft),
122129
new EditorButton(alignCenter),
123130
new EditorButton(alignRight),
124131
new EditorButton(alignJustify),
132+
new EditorButton(directionLTR), // TODO - Dynamic
133+
new EditorButton(directionRTL), // TODO - Dynamic
125134
]),
126135

127136
// Lists

‎resources/js/wysiwyg/utils/selection.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
$createNodeSelection,
33
$createParagraphNode, $createRangeSelection,
44
$getRoot,
5-
$getSelection, $isDecoratorNode,
5+
$getSelection, $isBlockElementNode, $isDecoratorNode,
66
$isElementNode,
77
$isTextNode,
88
$setSelection,
@@ -199,6 +199,22 @@ export function $selectionContainsAlignment(selection: BaseSelection | null, ali
199199
return false;
200200
}
201201

202+
export function $selectionContainsDirection(selection: BaseSelection | null, direction: 'rtl'|'ltr'): boolean {
203+
204+
const nodes = [
205+
...(selection?.getNodes() || []),
206+
...$getBlockElementNodesInSelection(selection)
207+
];
208+
209+
for (const node of nodes) {
210+
if ($isBlockElementNode(node) && node.getDirection() === direction) {
211+
return true;
212+
}
213+
}
214+
215+
return false;
216+
}
217+
202218
export function $getBlockElementNodesInSelection(selection: BaseSelection | null): ElementNode[] {
203219
if (!selection) {
204220
return [];

0 commit comments

Comments
 (0)