Skip to content

Commit fbea524

Browse files
AlessioGrAlessioGr
authored
feat(richtext-lexical)!: upgrade lexical from 0.14.5 to 0.15.0 (#6371)
**BREAKING:** This upgrades all lexical packages from 0.14.5 to 0.15.0. If there are any breaking changes within lexical, this could break your project if you use lexical APIs directly (e.g. in custom features). We have not noticed any breaking changes within core. Please consult their changelog: https://github.com/facebook/lexical/releases/tag/v0.15.0
2 parents cb9a20f + 8db9664 commit fbea524

File tree

16 files changed

+229
-199
lines changed

16 files changed

+229
-199
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
"jest": "29.7.0",
129129
"jest-environment-jsdom": "29.7.0",
130130
"jwt-decode": "4.0.0",
131-
"lexical": "0.14.5",
131+
"lexical": "0.15.0",
132132
"lint-staged": "^14.0.1",
133133
"minimist": "1.2.8",
134134
"mongodb-memory-server": "^9.0",

‎packages/richtext-lexical/.eslintrc.cjs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,7 @@ module.exports = {
44
project: ['./tsconfig.json'],
55
tsconfigRootDir: __dirname,
66
},
7+
extends: [
8+
'plugin:@lexical/recommended'
9+
],
710
}

‎packages/richtext-lexical/package.json

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,26 +41,27 @@
4141
},
4242
"dependencies": {
4343
"@faceless-ui/modal": "2.0.2",
44-
"@lexical/headless": "0.14.5",
45-
"@lexical/link": "0.14.5",
46-
"@lexical/list": "0.14.5",
47-
"@lexical/mark": "0.14.5",
48-
"@lexical/markdown": "0.14.5",
49-
"@lexical/react": "0.14.5",
50-
"@lexical/rich-text": "0.14.5",
51-
"@lexical/selection": "0.14.5",
52-
"@lexical/utils": "0.14.5",
44+
"@lexical/headless": "0.15.0",
45+
"@lexical/link": "0.15.0",
46+
"@lexical/list": "0.15.0",
47+
"@lexical/mark": "0.15.0",
48+
"@lexical/markdown": "0.15.0",
49+
"@lexical/react": "0.15.0",
50+
"@lexical/rich-text": "0.15.0",
51+
"@lexical/selection": "0.15.0",
52+
"@lexical/utils": "0.15.0",
5353
"@types/uuid": "^9.0.8",
5454
"bson-objectid": "2.0.4",
5555
"classnames": "^2.3.2",
5656
"deep-equal": "2.2.3",
5757
"json-schema": "^0.4.0",
58-
"lexical": "0.14.5",
58+
"lexical": "0.15.0",
5959
"lodash": "4.17.21",
6060
"react-error-boundary": "4.0.13",
6161
"uuid": "^9.0.1"
6262
},
6363
"devDependencies": {
64+
"@lexical/eslint-plugin": "0.15.0",
6465
"@payloadcms/eslint-config": "workspace:*",
6566
"@payloadcms/next": "workspace:*",
6667
"@payloadcms/translations": "workspace:*",
@@ -72,9 +73,20 @@
7273
"payload": "workspace:*"
7374
},
7475
"peerDependencies": {
76+
"@faceless-ui/modal": "2.0.2",
77+
"@lexical/headless": "0.15.0",
78+
"@lexical/link": "0.15.0",
79+
"@lexical/list": "0.15.0",
80+
"@lexical/mark": "0.15.0",
81+
"@lexical/markdown": "0.15.0",
82+
"@lexical/react": "0.15.0",
83+
"@lexical/rich-text": "0.15.0",
84+
"@lexical/selection": "0.15.0",
85+
"@lexical/utils": "0.15.0",
7586
"@payloadcms/next": "workspace:*",
7687
"@payloadcms/translations": "workspace:*",
7788
"@payloadcms/ui": "workspace:*",
89+
"lexical": "0.15.0",
7890
"payload": "workspace:*",
7991
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
8092
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"

‎packages/richtext-lexical/src/field/features/debug/testRecorder/plugin/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const formatStep = (step: Step) => {
8888
}
8989

9090
export function isSelectAll(event: KeyboardEvent): boolean {
91-
return event.keyCode === 65 && (IS_APPLE ? event.metaKey : event.ctrlKey)
91+
return event.code === 'KeyA' && (IS_APPLE ? event.metaKey : event.ctrlKey)
9292
}
9393

9494
// stolen from LexicalSelection-test

‎packages/richtext-lexical/src/field/features/heading/feature.client.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { createClientComponent } from '../createClientComponent.js'
2121
import { toolbarTextDropdownGroupWithItems } from '../shared/toolbar/textDropdownGroup.js'
2222
import { MarkdownTransformer } from './markdownTransformer.js'
2323

24-
const setHeading = (headingSize: HeadingTagType) => {
24+
const $setHeading = (headingSize: HeadingTagType) => {
2525
const selection = $getSelection()
2626
$setBlocksType(selection, () => $createHeadingNode(headingSize))
2727
}
@@ -68,7 +68,7 @@ const HeadingFeatureClient: FeatureProviderProviderClient<HeadingFeatureProps> =
6868
label: `Heading ${headingSize.charAt(1)}`,
6969
onSelect: ({ editor }) => {
7070
editor.update(() => {
71-
setHeading(headingSize)
71+
$setHeading(headingSize)
7272
})
7373
},
7474
order: i + 2,
@@ -93,7 +93,7 @@ const HeadingFeatureClient: FeatureProviderProviderClient<HeadingFeatureProps> =
9393
label: `Heading ${headingSize.charAt(1)}`,
9494
onSelect: ({ editor }) => {
9595
editor.update(() => {
96-
setHeading(headingSize)
96+
$setHeading(headingSize)
9797
})
9898
},
9999
}

‎packages/richtext-lexical/src/field/features/horizontalRule/component/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function HorizontalRuleComponent({ nodeKey }: { nodeKey: NodeKey }) {
2727
const [editor] = useLexicalComposerContext()
2828
const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)
2929

30-
const onDelete = useCallback(
30+
const $onDelete = useCallback(
3131
(event: KeyboardEvent) => {
3232
if (isSelected && $isNodeSelection($getSelection())) {
3333
event.preventDefault()
@@ -61,10 +61,10 @@ export function HorizontalRuleComponent({ nodeKey }: { nodeKey: NodeKey }) {
6161
},
6262
COMMAND_PRIORITY_LOW,
6363
),
64-
editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
65-
editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
64+
editor.registerCommand(KEY_DELETE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),
65+
editor.registerCommand(KEY_BACKSPACE_COMMAND, $onDelete, COMMAND_PRIORITY_LOW),
6666
)
67-
}, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected])
67+
}, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected])
6868

6969
useEffect(() => {
7070
const hrElem = editor.getElementByKey(nodeKey)

‎packages/richtext-lexical/src/field/features/horizontalRule/nodes/HorizontalRuleNode.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export class HorizontalRuleNode extends DecoratorNode<React.ReactElement> {
4949
static importDOM(): DOMConversionMap | null {
5050
return {
5151
hr: () => ({
52-
conversion: convertHorizontalRuleElement,
52+
conversion: $convertHorizontalRuleElement,
5353
priority: 0,
5454
}),
5555
}
@@ -107,7 +107,7 @@ export class HorizontalRuleNode extends DecoratorNode<React.ReactElement> {
107107
}
108108
}
109109

110-
function convertHorizontalRuleElement(): DOMConversionOutput {
110+
function $convertHorizontalRuleElement(): DOMConversionOutput {
111111
return { node: $createHorizontalRuleNode() }
112112
}
113113

‎packages/richtext-lexical/src/field/features/link/nodes/LinkNode.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export class LinkNode extends ElementNode {
6060
static importDOM(): DOMConversionMap | null {
6161
return {
6262
a: (node: Node) => ({
63-
conversion: convertAnchorElement,
63+
conversion: $convertAnchorElement,
6464
priority: 1,
6565
}),
6666
}
@@ -210,7 +210,7 @@ export class LinkNode extends ElementNode {
210210
}
211211
}
212212

213-
function convertAnchorElement(domNode: Node): DOMConversionOutput {
213+
function $convertAnchorElement(domNode: Node): DOMConversionOutput {
214214
let node: LinkNode | null = null
215215
if (isHTMLAnchorElement(domNode)) {
216216
const content = domNode.textContent
@@ -239,7 +239,7 @@ export function $isLinkNode(node: LexicalNode | null | undefined): node is LinkN
239239
export const TOGGLE_LINK_COMMAND: LexicalCommand<LinkPayload | null> =
240240
createCommand('TOGGLE_LINK_COMMAND')
241241

242-
export function toggleLink(payload: LinkPayload): void {
242+
export function $toggleLink(payload: LinkPayload): void {
243243
const selection = $getSelection()
244244

245245
if (!$isRangeSelection(selection) && !payload.selectedNodes.length) {
@@ -349,6 +349,8 @@ export function toggleLink(payload: LinkPayload): void {
349349
})
350350
}
351351
}
352+
/** @deprecated renamed to {@link $toggleLink} by @lexical/eslint-plugin rules-of-lexical */
353+
export const toggleLink = $toggleLink
352354

353355
function $getLinkAncestor(node: LexicalNode): LinkNode | null {
354356
return $getAncestor(node, (ancestor) => $isLinkNode(ancestor)) as LinkNode

‎packages/richtext-lexical/src/field/features/link/plugins/autoLink/index.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ function extractMatchingNodes(
158158
return [matchingOffset, unmodifiedBeforeNodes, matchingNodes, unmodifiedAfterNodes]
159159
}
160160

161-
function createAutoLinkNode(
161+
function $createAutoLinkNode_(
162162
nodes: TextNode[],
163163
startIndex: number,
164164
endIndex: number,
@@ -182,6 +182,7 @@ function createAutoLinkNode(
182182
const textNode = $createTextNode(match.text)
183183
textNode.setFormat(linkTextNode.getFormat())
184184
textNode.setDetail(linkTextNode.getDetail())
185+
textNode.setStyle(linkTextNode.getStyle())
185186
linkNode.append(textNode)
186187
linkTextNode.replace(linkNode)
187188
return remainingTextNode
@@ -218,6 +219,7 @@ function createAutoLinkNode(
218219
const textNode = $createTextNode(firstLinkTextNode.getTextContent())
219220
textNode.setFormat(firstLinkTextNode.getFormat())
220221
textNode.setDetail(firstLinkTextNode.getDetail())
222+
textNode.setStyle(firstLinkTextNode.getStyle())
221223
linkNode.append(textNode, ...linkNodes)
222224
// it does not preserve caret position if caret was at the first text node
223225
// so we need to restore caret position
@@ -234,7 +236,7 @@ function createAutoLinkNode(
234236
return undefined
235237
}
236238

237-
function handleLinkCreation(
239+
function $handleLinkCreation(
238240
nodes: TextNode[],
239241
matchers: LinkMatcher[],
240242
onChange: ChangeHandler,
@@ -266,7 +268,7 @@ function handleLinkCreation(
266268

267269
const actualMatchStart = invalidMatchEnd + matchStart - matchingOffset
268270
const actualMatchEnd = invalidMatchEnd + matchEnd - matchingOffset
269-
const remainingTextNode = createAutoLinkNode(
271+
const remainingTextNode = $createAutoLinkNode_(
270272
matchingNodes,
271273
actualMatchStart,
272274
actualMatchEnd,
@@ -405,7 +407,7 @@ function useAutoLink(
405407
(startsWithSeparator(textNode.getTextContent()) || !$isAutoLinkNode(previous))
406408
) {
407409
const textNodesToMatch = getTextNodesToMatch(textNode)
408-
handleLinkCreation(textNodesToMatch, matchers, onChangeWrapped)
410+
$handleLinkCreation(textNodesToMatch, matchers, onChangeWrapped)
409411
}
410412

411413
handleBadNeighbors(textNode, matchers, onChangeWrapped)

‎packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
7777
setStateData({})
7878
}, [setIsLink, setLinkUrl, setLinkLabel, setSelectedNodes])
7979

80-
const updateLinkEditor = useCallback(() => {
80+
const $updateLinkEditor = useCallback(() => {
8181
const selection = $getSelection()
8282
let selectedNodeDomRect: DOMRect | undefined = null
8383

@@ -204,22 +204,22 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
204204
editor.dispatchCommand(TOGGLE_LINK_COMMAND, payload)
205205

206206
// Now, open the modal
207-
updateLinkEditor()
207+
$updateLinkEditor()
208208
toggleModal(drawerSlug)
209209

210210
return true
211211
},
212212
COMMAND_PRIORITY_LOW,
213213
),
214214
)
215-
}, [editor, updateLinkEditor, toggleModal, drawerSlug])
215+
}, [editor, $updateLinkEditor, toggleModal, drawerSlug])
216216

217217
useEffect(() => {
218218
const scrollerElem = anchorElem.parentElement
219219

220220
const update = (): void => {
221221
editor.getEditorState().read(() => {
222-
void updateLinkEditor()
222+
void $updateLinkEditor()
223223
})
224224
}
225225

@@ -236,20 +236,20 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
236236
scrollerElem.removeEventListener('scroll', update)
237237
}
238238
}
239-
}, [anchorElem.parentElement, editor, updateLinkEditor])
239+
}, [anchorElem.parentElement, editor, $updateLinkEditor])
240240

241241
useEffect(() => {
242242
return mergeRegister(
243243
editor.registerUpdateListener(({ editorState }) => {
244244
editorState.read(() => {
245-
void updateLinkEditor()
245+
void $updateLinkEditor()
246246
})
247247
}),
248248

249249
editor.registerCommand(
250250
SELECTION_CHANGE_COMMAND,
251251
() => {
252-
void updateLinkEditor()
252+
void $updateLinkEditor()
253253
return true
254254
},
255255
COMMAND_PRIORITY_LOW,
@@ -267,13 +267,13 @@ export function LinkEditor({ anchorElem }: { anchorElem: HTMLElement }): React.R
267267
COMMAND_PRIORITY_HIGH,
268268
),
269269
)
270-
}, [editor, updateLinkEditor, isLink, setNotLink])
270+
}, [editor, $updateLinkEditor, isLink, setNotLink])
271271

272272
useEffect(() => {
273273
editor.getEditorState().read(() => {
274-
void updateLinkEditor()
274+
void $updateLinkEditor()
275275
})
276-
}, [editor, updateLinkEditor])
276+
}, [editor, $updateLinkEditor])
277277

278278
return (
279279
<React.Fragment>

0 commit comments

Comments
 (0)