Skip to content

Commit 529ee35

Browse files
irahopkinsonirahopkinson
authored
update Lexical v0.38.2 (#418)
- fix text direction - also remove `body` from usj nodes styles
1 parent 11195b7 commit 529ee35

File tree

23 files changed

+333
-344
lines changed

23 files changed

+333
-344
lines changed

‎demos/perf-react/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@
1111
"react-dom": ">=18.3.1"
1212
},
1313
"dependencies": {
14-
"@lexical/headless": "^0.34.0",
15-
"@lexical/html": "^0.34.0",
16-
"@lexical/react": "^0.34.0",
17-
"@lexical/selection": "^0.34.0",
18-
"@lexical/utils": "^0.34.0",
14+
"@lexical/headless": "^0.38.2",
15+
"@lexical/html": "^0.38.2",
16+
"@lexical/react": "^0.38.2",
17+
"@lexical/selection": "^0.38.2",
18+
"@lexical/utils": "^0.38.2",
1919
"base-64": "^1.0.0",
2020
"epitelete-html": "^0.2.21-beta.2",
2121
"json-difference": "^1.16.1",
22-
"lexical": "^0.34.0",
22+
"lexical": "^0.38.2",
2323
"open-patcher": "1.0.0-beta.1",
2424
"proskomma-core": "^0.11.0",
2525
"pure-uuid": "^1.8.1"

‎demos/perf-vanilla/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"dev": "vite"
88
},
99
"dependencies": {
10-
"@lexical/rich-text": "^0.34.0",
11-
"lexical": "^0.34.0"
10+
"@lexical/rich-text": "^0.38.2",
11+
"lexical": "^0.38.2"
1212
},
1313
"devDependencies": {
1414
"shared": "workspace:~",

‎demos/platform/src/app/NodeOptionsDropDown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ export type NodesMode = keyof typeof nodesModeNames;
1111

1212
export default function NodeOptionsDropDown({
1313
nodesMode,
14-
handleSelect,
14+
onSelect,
1515
disabled = false,
1616
}: {
1717
nodesMode: NodesMode;
18-
handleSelect: (nodesMode: NodesMode) => void;
18+
onSelect: (nodesMode: NodesMode) => void;
1919
disabled?: boolean;
2020
}): ReactElement {
2121
return (
@@ -30,7 +30,7 @@ export default function NodeOptionsDropDown({
3030
<DropDownItem
3131
key={itemNodesMode}
3232
className={"item node-options " + dropDownActiveClass(nodesMode === itemNodesMode)}
33-
onClick={() => handleSelect(itemNodesMode as NodesMode)}
33+
onClick={() => onSelect(itemNodesMode as NodesMode)}
3434
>
3535
<i className={"icon node-options " + keyToClassName(itemNodesMode)} />
3636
{nodesModeNames[itemNodesMode as NodesMode]}

‎demos/platform/src/app/NoteEditor.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
EditorOptions,
44
EditorRef,
55
getDefaultViewOptions,
6-
ViewOptions,
76
} from "@eten-tech-foundation/platform-editor";
87
import { EMPTY_USJ } from "@eten-tech-foundation/scripture-utilities";
98
import { SerializedVerseRef } from "@sillsdev/scripture";
@@ -13,20 +12,21 @@ import { forwardRef, useMemo } from "react";
1312
interface NoteEditorProps {
1413
isVisible: boolean;
1514
scrRef: SerializedVerseRef;
16-
viewOptions?: ViewOptions;
15+
options?: EditorOptions;
1716
onCancel: () => void;
1817
onSubmit: () => void;
1918
}
2019

2120
export const NoteEditor = forwardRef<EditorRef, NoteEditorProps>(
22-
({ isVisible, scrRef, viewOptions, onCancel, onSubmit }, ref) => {
23-
const options = useMemo<EditorOptions>(() => {
21+
({ isVisible, scrRef, options, onCancel, onSubmit }, ref) => {
22+
const noteEditorOptions = useMemo<EditorOptions>(() => {
2423
return {
24+
...options,
2525
hasExternalUI: true,
2626
debug: false,
27-
view: { ...(viewOptions ?? getDefaultViewOptions()), noteMode: "expanded" },
27+
view: { ...(options?.view ?? getDefaultViewOptions()), noteMode: "expanded" },
2828
};
29-
}, [viewOptions]);
29+
}, [options]);
3030

3131
return (
3232
<div
@@ -82,7 +82,7 @@ export const NoteEditor = forwardRef<EditorRef, NoteEditorProps>(
8282
defaultUsj={EMPTY_USJ}
8383
scrRef={scrRef}
8484
onScrRefChange={() => undefined}
85-
options={options}
85+
options={noteEditorOptions}
8686
/>
8787
</div>
8888
</div>

‎demos/platform/src/app/TextDirectionDropDown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ function dropDownActiveClass(active: boolean): string {
1212

1313
export default function TextDirectionDropDown({
1414
textDirection,
15-
handleSelect,
15+
onSelect,
1616
disabled = false,
1717
}: {
1818
textDirection: TextDirection;
19-
handleSelect: (textDirection: TextDirection) => void;
19+
onSelect: (textDirection: TextDirection) => void;
2020
disabled?: boolean;
2121
}): ReactElement {
2222
return (
@@ -31,7 +31,7 @@ export default function TextDirectionDropDown({
3131
<DropDownItem
3232
key={item}
3333
className={"item view-mode " + dropDownActiveClass(textDirection === item)}
34-
onClick={() => handleSelect(item as TextDirection)}
34+
onClick={() => onSelect(item as TextDirection)}
3535
>
3636
<i className={"icon view-mode " + item} />
3737
{directionToNames[item as TextDirection]}

‎demos/platform/src/app/ViewModeDropDown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const customViewModeNames = {
1212

1313
export default function ViewModeDropDown({
1414
viewMode,
15-
handleSelect,
15+
onSelect,
1616
disabled = false,
1717
}: {
1818
viewMode: string;
19-
handleSelect: (viewMode: string) => void;
19+
onSelect: (viewMode: string) => void;
2020
disabled?: boolean;
2121
}): ReactElement {
2222
return (
@@ -31,7 +31,7 @@ export default function ViewModeDropDown({
3131
<DropDownItem
3232
key={itemViewMode}
3333
className={"item view-mode " + dropDownActiveClass(viewMode === itemViewMode)}
34-
onClick={() => handleSelect(itemViewMode)}
34+
onClick={() => onSelect(itemViewMode)}
3535
>
3636
<i className={"icon view-mode " + viewModeToClassName(itemViewMode)} />
3737
{customViewModeNames[itemViewMode as ViewMode]}

‎demos/platform/src/app/app.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -429,12 +429,9 @@ export default function App() {
429429
/>
430430
<label htmlFor="hasSpellCheckBox">Has spell check</label>
431431
</div>
432-
<TextDirectionDropDown
433-
textDirection={textDirection}
434-
handleSelect={setTextDirection}
435-
/>
436-
<ViewModeDropDown viewMode={viewMode} handleSelect={setViewMode} />
437-
<NodeOptionsDropDown nodesMode={nodesMode} handleSelect={setNodesMode} />
432+
<TextDirectionDropDown textDirection={textDirection} onSelect={setTextDirection} />
433+
<ViewModeDropDown viewMode={viewMode} onSelect={setViewMode} />
434+
<NodeOptionsDropDown nodesMode={nodesMode} onSelect={setNodesMode} />
438435
</div>
439436
{viewMode === CUSTOM_VIEW_MODE && (
440437
<div className="custom-view-options">
@@ -540,7 +537,7 @@ export default function App() {
540537
ref={noteEditorRef}
541538
isVisible={isNoteEditorVisible}
542539
scrRef={scrRef}
543-
viewOptions={viewOptions}
540+
options={options}
544541
onCancel={handleNoteEditorCancel}
545542
onSubmit={handleNoteEditorSubmit}
546543
/>

‎libs/shared-react/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@
3737
"dependencies": {
3838
"@eten-tech-foundation/scripture-utilities": "workspace:~",
3939
"@floating-ui/dom": "^1.7.4",
40-
"@lexical/react": "^0.34.0",
41-
"@lexical/utils": "^0.34.0",
40+
"@lexical/react": "^0.38.2",
41+
"@lexical/utils": "^0.38.2",
4242
"fast-equals": "^5.2.2",
43-
"lexical": "^0.34.0",
43+
"lexical": "^0.38.2",
4444
"quill-delta": "^5.1.0"
4545
},
4646
"devDependencies": {

‎libs/shared-react/src/plugins/usj/TextDirectionPlugin.tsx‎

Lines changed: 12 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,32 @@
11
import { TextDirection } from "./text-direction.model";
22
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
3-
import { $findMatchingParent } from "@lexical/utils";
4-
import {
5-
$getSelection,
6-
$isRangeSelection,
7-
COMMAND_PRIORITY_HIGH,
8-
KEY_DOWN_COMMAND,
9-
LexicalEditor,
10-
} from "lexical";
3+
import { LexicalEditor } from "lexical";
114
import { useEffect } from "react";
12-
import { getNodeElementTagName } from "shared";
135

146
export function TextDirectionPlugin({ textDirection }: { textDirection: TextDirection }): null {
157
const [editor] = useLexicalComposerContext();
168
useTextDirection(editor, textDirection);
17-
useArrowKeys(editor);
189
return null;
1910
}
2011

2112
function useTextDirection(editor: LexicalEditor, textDirection: TextDirection) {
2213
useEffect(() => {
23-
function updateTextDirection() {
24-
const rootElement = editor.getRootElement();
25-
if (!rootElement || textDirection === "auto") return;
26-
27-
rootElement.dir = textDirection;
28-
const placeholderClassName = editor._config.theme.placeholder;
29-
const placeholderElement = document.getElementsByClassName(
30-
placeholderClassName,
31-
)[0] as HTMLElement;
32-
if (placeholderElement) placeholderElement.dir = textDirection;
33-
}
34-
35-
updateTextDirection();
14+
updateTextDirection(editor, textDirection);
3615
return editor.registerUpdateListener(({ dirtyElements }) => {
37-
if (dirtyElements.size > 0) updateTextDirection();
16+
if (dirtyElements.size > 0) updateTextDirection(editor, textDirection);
3817
});
3918
}, [editor, textDirection]);
4019
}
4120

42-
/**
43-
* Change the direction of the left and right arrow keys if the immediate text direction is
44-
* different than the property setting.
45-
* @param editor - The LexicalEditor instance used to access the DOM.
46-
*/
47-
function useArrowKeys(editor: LexicalEditor) {
48-
useEffect(() => {
49-
const $handleKeyDown = (event: KeyboardEvent): boolean => {
50-
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return false;
51-
52-
const selection = $getSelection();
53-
if (!$isRangeSelection(selection)) return false;
54-
55-
// Find the closest paragraph element
56-
const anchorNode = selection.anchor.getNode();
57-
const paragraphNode = $findMatchingParent(
58-
anchorNode,
59-
(node) => getNodeElementTagName(node, editor) === "p",
60-
);
61-
if (!paragraphNode) return false;
62-
63-
// Get the DOM element corresponding to the paragraph node
64-
const paragraphElement = editor.getElementByKey(paragraphNode.getKey());
65-
if (!paragraphElement) return false;
66-
67-
// Check if directions are different
68-
const inputDiv = paragraphElement.parentElement;
69-
const paragraphDir = paragraphElement.dir || "ltr";
70-
const inputDir = (inputDiv?.dir ?? "") || "ltr";
71-
if (!inputDiv || paragraphDir === inputDir) return false;
72-
73-
// Move in the opposite direction
74-
const isBackward =
75-
(inputDiv.dir === "rtl" && event.key === "ArrowLeft") ||
76-
(inputDiv.dir === "ltr" && event.key === "ArrowRight");
77-
selection.modify("move", isBackward, "character");
21+
function updateTextDirection(editor: LexicalEditor, textDirection: TextDirection) {
22+
if (textDirection === "auto") return;
7823

79-
event.preventDefault();
80-
return true;
81-
};
24+
const rootElement = editor.getRootElement();
25+
if (rootElement) rootElement.dir = textDirection;
8226

83-
return editor.registerCommand(KEY_DOWN_COMMAND, $handleKeyDown, COMMAND_PRIORITY_HIGH);
84-
}, [editor]);
27+
const placeholderClassName = editor._config.theme.placeholder;
28+
const placeholderElement = document.getElementsByClassName(
29+
placeholderClassName,
30+
)[0] as HTMLElement;
31+
if (placeholderElement) placeholderElement.dir = textDirection;
8532
}

‎libs/shared/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@
3737
},
3838
"dependencies": {
3939
"@eten-tech-foundation/scripture-utilities": "workspace:~",
40-
"@lexical/mark": "^0.34.0",
41-
"@lexical/utils": "^0.34.0",
40+
"@lexical/mark": "^0.38.2",
41+
"@lexical/utils": "^0.38.2",
4242
"@sillsdev/scripture": "^2.0.2",
43-
"lexical": "^0.34.0",
43+
"lexical": "^0.38.2",
4444
"tslib": "^2.8.1"
4545
},
4646
"devDependencies": {

0 commit comments

Comments
 (0)