facebook/lexical
 Watch   
 Star   
 Fork   
16 days ago
lexical

v0.30.0

Breaking Changes

Listeners are now always called with the editor they were registered to

#7378 changed the internal updateEditorSync implementation to always use the correct active editor when triggering a listener. This only affects how nested editors delegate their events to listeners attached to a parent editor. If you have listeners attached to the parent editor that expect to be called with the context of the nested editor then you'll have to either also attach the listener to the nested editor, or change the behavior to check the editor argument of the command listener to see which editor the command was originally dispatched to.

Import of markdown blocks preserves separation with shouldPreserveNewLines

#7386 changed the behavior of the markdown import's paragraph merging logic to align with GitHub's markdown editor behavior for list and common markdown formatting expectations when shouldPreserveNewlines is true.

Markdown encoding uses HTML entities to represent leading and trailing whitespace

#7400 changed the markdown encoder to replace leading or trailing whitespace of formatted strings with the corresponding HTML entities

Highlights

Core

  • ✅ #7378 Ensure updateEditorSync is always synchronous and use it when triggering listeners
  • ✅ #7393 Fix right and up arrow key navigation with decorator nodes
  • ✅ #7401 Clone the selection and use $setSelection instead of assigning dirty to true directly
  • ✅ #7397 Change $getTextNodeOffset invariant to warn in prod (error in __DEV__)
  • ✅ #7412 Fix forward line deletion when using control+K
  • 🆕 #7438 Add text-transform styles to exported HTML

Rich Text

  • ✅ #7411 Prevent indentation from becoming negative

Collab

  • ✅ #7330 Don't sync ElementNode __dir property
  • ✅ #7398 Fix scroll position getting changed when someone else makes a change in collab

Markdown

  • ✅ #7386 Preserve paragraph separation after block elements
  • ✅ #7395 Prevent Markdown shortcuts from applying to code-formatted text
  • ✅ #7400 Replace whitespace with code point when the string has leading and trailing whitespaces

List

  • ✅ #7380 Empty list item type change
  • ✅ #7420 Enforce strict list indentation
  • 🆕 #7429 Export registerCheckList

Link

  • ✅ #7366 Add support for image links via NodeSelection

Devtools

  • ✅ #7403 Update debug view to show KEY_ESCAPE_COMMAND immediately

React

  • 🆕 #7404 Add option to disable first item auto-selection in menus

Table

  • 🆕 #7408 Improve logic for pasting table into table
  • 🆕 #7415 Rename and deprecate some table utils

Playground

  • 🆕 #7384 Clear block ElementNode formatting along with TextNode
  • 🆕 #7417 Clear formatting should also clear any indent/outdent if applied
  • ✅ #7368 Remove shared imports from playground for easier re-use
  • ✅ #7388 Use natural dimensions for inherited image size
  • ✅ #7405 Fix floating toolbar position for end-aligned text
  • ✅ #7431 Fix immediate broken image display on load failure

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.29.0...v0.30.0

2025-03-25 14:15:40
lexical

v0.29.0

Breaking Changes

https://github.com/facebook/lexical/pull/7351 : Only select RootNode on removal of last child if there was an existing selection https://github.com/facebook/lexical/pull/7353: Support escaping markdown characters https://github.com/facebook/lexical/pull/7357: Refactor: LexicalNestedComposer add skipEditableListener prop and deprecate initialNodes prop and implicit namespace setting https://github.com/facebook/lexical/pull/7372: Set tableFrozenColumn and tableFrozenRow classes only on the scrollable table wrapper

Highlights

React: 🆕 https://github.com/facebook/lexical/pull/7357: LexicalNestedComposer add skipEditableListener prop and deprecate initialNodes prop and implicit namespace setting

Table: ✅https://github.com/facebook/lexical/pull/7372: Set tableFrozenColumn and tableFrozenRow classes only on the scrollable table wrapper ✅https://github.com/facebook/lexical/pull/7316: Add fallback selection to InsertTableCommand

Core editor: ✅https://github.com/facebook/lexical/pull/7351: Only select RootNode on removal of last child if there was an existing selection ✅https://github.com/facebook/lexical/pull/7354: Ignore input event from inside decorators

Markdown: 🆕 https://github.com/facebook/lexical/pull/7353: Feature: Support escaping markdown characters

Playground: 🆕 https://github.com/facebook/lexical/pull/7352 : Chore: Improve accessibility of DraggableBlockPlugin add block button ✅https://github.com/facebook/lexical/pull/7334: Table action menu visibility with cell overflow ✅https://github.com/facebook/lexical/pull/7362: Fix equation rendering in Safari 🆕 https://github.com/facebook/lexical/pull/7371: Chore: Update excalidraw to v0.18.0 Doc: ✅https://github.com/facebook/lexical/pull/7365: Update react.md, fix typo

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.28.0...v0.29.0

2025-03-19 02:15:42
lexical

v0.28.0

Ad-hoc minor release with important bug fixes and some enabling features. The most important fix is in #7341 - where under certain conditions nodes may not be updated in the DOM at all (this bug is rarely triggered and has been around for 3+ years).

Breaking Changes

NodeSelection default delete handler #7323

If you have any $onDelete handlers copied from the playground for KEY_DELETE_COMMAND and KEY_BACKSPACE_COMMAND, you can delete them all now. If you leave them in, it will have similar bugs as prior to this PR.

The default KEY_DELETE_COMMAND and KEY_BACKSPACE_COMMAND handlers now event.preventDefault() and call DELETE_CHARACTER_COMMAND for NodeSelection (in addition to the existing RangeSelection behavior).

The DELETE_CHARACTER_COMMAND handler now handles NodeSelection by calling the new NodeSelection.deleteNodes() method which places a new RangeSelection where the first selected node was (if any, and if it was the current selection) and then removes all of the selected nodes.

RootNode and ListItemNode splice #7341

This PR moves the incorrectly overridden append methods for RootNode and ListNode and moves it to the ElementNode's primitive splice method. For RootNode this means that the exception you'd get for appending a leaf node to the root will be thrown in all situations when that node is inserted, rather than just append. For ListNode this means that the automatic ListItemNode wrapping applies in all situations when children are inserted into the node, not just append.

$insertNodeToNearestRoot changes #7342

Previously $insertNodeToNearestRoot could create empty ElementNode when splitting the current node, now it respects canBeEmpty() and will not split in those cases (e.g. ListNode).

ListItemNode CSS #7325

The approach used in #7024 (since v0.26.0) to have a ListItemNode bullet inherit the style of the first text node was too broad, the inline style on the ListItemNode cascades to all of its children. The only way around this is to change the approach.

To retain this feature, you need to add CSS to your theme to specifically style the marker pseudo-element based on these new custom properties. Here's an example from the playground css:

.PlaygroundEditorTheme__listItem::marker {
  color: var(--listitem-marker-color);
  background-color: var(--listitem-marker-background-color);
  font-family: var(--listitem-marker-font-family);
  font-size: var(--listitem-marker-font-size);
}

TableCellNode importDOM #7318

The importDOM implementation for TableCellNode has been corrected to behave as other Lexical roots do with regard to converting <br> tags to LineBreakNode and wrapping runs of top-level inline nodes (including inline decorators) with ParagraphNode. If you have any specific workarounds accounting for the previous behavior, you can remove them. The one difference from other import paths is that a solitary <br> (e.g. <td><br></td>) is converted to an empty ParagraphNode rather than a ParagraphNode containing a LineBreakNode.

getDOMSlot #7336

If you're using the undocumented internal getDOMSlot API, you may need to change your types. There is now a type parameter for ElementDOMSlot so that the element property can be specialized.

Highlights

Core:

  • 🆕 #7321 Add mutatedNodes to UpdateListener payload
  • 🆕 #7323 Add a default delete handler for NodeSelection - this allowed a lot of boilerplate code to be deleted, and all of the existing implementations were subtly broken
  • ✅ #7341 Fix bug in transformer loop that would cause nodes not to get reconciled
  • ✅ #7342 Handle canBeEmpty() in $splitNodes
  • 🆕 #7344 Apply RootNode transforms last

List:

  • ✅ #7325 Move ListItemNode text style inheritance to CSS custom properties

Tables:

  • ✅ #7336 Fix updateDOM for scrollable TableNode
  • ✅ #7318 Fix table cell line breaks

React:

  • ✅ #7315 Remove unused direct dependencies
  • 🆕 #7338 Add onElementChanged callback to DraggableBlockPlugin

Playground:

  • ✅ #7337 Table actions should clear selection instead of moving it to the beginning
  • 🆕 #7338 Add "+" button to DraggableBlockPlugin

Utils:

  • 🆕 #7340 Add a type predicate to objectKlassEquals

New APIs

UpdateListenerPayload mutatedNodes #7321

A mutatedNodes property is now present in the UpdateListener payload. This was done to accommodate the use case when you want to have a MutationListener that listens to all nodes (this is useful in combination with NodeState). Note that this property is only calculated when at least one MutationListener is registered (e.g. editor.registerMutationListener(RootNode, () => {}) is sufficient to compute mutatedNodes for all nodes).

NodeSelection deleteNodes #7323

NodeSelection.deleteNodes() was added to support the default delete handler

RootNode node transform #7344

There is now an ordering guarantee that RootNode node transforms are called last, and documentation about the special case that RootNode is always considered intentionally dirty when any other node is dirty

@lexical/react/LexicalDraggableBlockPlugin onElementChanged #7338

An onElementChanged prop was added to make it possible to implement the "+" button in the playground

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.27.2...v0.28.0

2025-03-12 06:14:37
lexical

v0.27.2

v0.27.2 is an ad-hoc patch release to address the prismjs CVE (#7313). The way Lexical uses prismjs should not trigger that issue even in previous versions as it doesn't insert user generated HTML with "id" tags or use the autoloader plug-in, but it's good practice to keep up with security updates either way.

Highlights

Code:

  • ✅ #7313 Update prismjs dependency to 1.30.0

Collab:

  • ✅ #7295 Prevent collab element nodes from removing other nodes from node map

Table:

  • 🆕 #7297 Add table cell selection handler for touch devices
  • ✅ #7309 Fix unintended touch table cell selection when scrolling

Playground:

  • 🆕 #7299 Add touch support for TableCellResizer
  • ✅ #7305 Fix row height resizing for merged cells

What's Changed

Full Changelog: https://github.com/facebook/lexical/compare/v0.27.1...v0.27.2

2025-03-05 04:23:35
lexical

v0.27.1

v0.27.1 is an ad-hoc patch release to address the regression introduced in v0.26.0 with LexicalNode.getCommonAncestor which occurs when calling node.getCommonAncestor(node) when !$isElementNode(node) (#7287).

Highlights

Core:

  • ✅ #7271 Fix non-ElementNode regression in getCommonAncestor

Core + List:

  • ✅ #7282 Add RTL direction support in output HTML for ElementNode and ListItemNode (previously this was only on ParagraphNode)

Table:

  • ✅ #7283 Fix click and drag table selection in Firefox

What's Changed

Full Changelog: https://github.com/facebook/lexical/compare/v0.27.0...v0.27.1

2025-03-04 00:28:00
lexical

v0.27.0

v0.27.0 ad-hoc release to address v0.26.0 regressions.

Breaking Changes

Core:

  • #7270 - To handle platform differences and avoid piercing shadow roots, arrow key navigation for RangeSelection is now handled by lexical in more scenarios when crossing the boundaries of elements. This should only affect "exotic" custom element nodes such as TableNode. All code in @lexical/table has been updated accordingly, but if you have something like a custom table implementation then it may require additional updates (probably in the direction of removing workarounds rather than adding them).

Highlights

Core:

  • ✅ #7271 Fix invalid import from self
  • ✅ #7270 Address deleteLine regression in #7248

Playground:

  • ✅ #7273 Apply correct column headers when column contains vertically merged cells
  • 🆕 #7279 Add HR theme config for selected state

Utils:

  • ✅ #7275 Don't include parent's siblings when starting $dfs at last child

Collab/Table:

  • ✅ #7277 TableCellNode vertical align not syncing

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.26.0...v0.27.0

2025-03-01 05:35:42
lexical

v0.26.0

v0.26.0 is a monthly release packed with bug fixes and a major new experimental feature, the NodeState API (#7117).

Breaking Changes

Core:

  • #7248 As a follow-up to https://github.com/facebook/lexical/pull/7180 the collapseAtStart logic now continues through both inline and non-inline nodes so long as there are no previous siblings, roots, or shadow roots encountered. This is because nodes such as CollapsibleTitleNode had a collapseAtStart that returns true but contain nodes that are not inline and have a collapseAtStart that returns false (e.g. ParagraphNode).

    In order to fix an inconsistency for how nested !isInline elements behave, CollapsibleContainerNode is now a shadowRoot. The CollapsibleContentNode was already a shadowRoot. This is now similar to the situation for tables where both TableNode and TableCellNode are both shadowRoot. The fix here also moved collapseAtStart from CollapsibleTitleNode to CollapsibleContainerNode which makes a bit more sense since the whole container gets collapsed, not just the title. The title is still the only location that you can initiate this collapse from, since it is always the first child.

React:

  • #7219 Exports from @lexical/react that had been deprecated since v0.16.0 (June 2024) have been removed:
    • All default exports were removed, each module has a named export
    • The inconsistently named @lexical/react/LexicalTableOfContents was moved to @lexical/react/LexicalTableOfContentsPlugin

Highlights

Core:

  • 🆕 #7117 Experimental Node State: Add a generic state property to all nodes. More documentation and examples to come in the next few weeks. New APIs:
  • 🆕 #7135 Refactor RangeSelection.getNodes() to use NodeCaret APIs. Introduces new APIs with a total ordering for PointCaret and getting common ancestors.
  • ✅ #7225 deleteCharacter through ListNode->ListItemNode (applies to nested !isInline elements in general)
  • ✅ #7256 Point.isBefore could return incorrect result due to normalization
  • ✅ #7239 Fix selection shifting when deleting paragraphs on Android Chrome
  • ✅ #7226 Added isInline implementations to TextNode and LineBreakNode

Collab:

  • ✅ #7217 Normalize multiple adjacent merge conflicts in one block

List:

  • ✅ #7225 Retain selection styling when exiting nested list
  • 🆕 #7024 Bullet item style matches text style

Mark:

  • ✅ #7255 Identify <mark> as an inline element

Playground:

  • ✅ #7233 Image component rerenders on every editor update
  • ✅ #7229 Table action menu dropdown positioning
  • 🆕 #7208 Playground dev/prod vite configs have been unified and example vite configurations have been refactored to allow for npm run monorepo:dev command which runs the examples with the version of lexical in the repository (useful for developing examples based on unreleased features, or debugging situations that are difficult to create in the playground)

Table:

  • ✅ #7213 Prevent adjacent cell selection on triple-click

React:

  • ✅ #7237 Ensure attributes are set immediately on menu
  • ✅ #7264 Menu element not cleaned up on unmount
  • ✂️ #7219 Remove deprecated default exports

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.25.0...v0.26.0

2025-02-21 01:51:41
lexical

v0.25.0

v0.25.0 is an ad-hoc release targeted at addressing an input regression with Android Chrome (#7218) , but includes many other fixes (particularly around deleteCharacter) and several new features (such as the NodeCaret API).

Breaking Changes

Core:

  • #7180 ElementNode.collapseAtStart(range) would previously only be called on the direct parent of the anchor's node, so the presence of anything like a LinkNode would prevent a ListItemNode from collapsing. Now it will also be called on parents under certain conditions.

  • #7155 #7204 The heuristic used in RangeSelection.deleteCharacter to handle merging blocks and deleting decorators from a collapsed selection has been refactored for consistency. It now traverses the node tree directly instead of attempting to use browser selection APIs.

Tables:

  • #7192 It's no longer possible to create nested tables with normal UI actions. It's likely that this will change in the future when nested tables work correctly with the rest of the table infrastructure.

Highlights

Core:

  • 🆕 #7046 New NodeCaret API for traversal of the document tree
  • ✅ #7180 Collapse through inline elements in deleteCharacter
  • ✅ #7186 Highlight formatting now supported by TextNode importDOM (plus toolbar support in the playground)
  • ✅ #7175 Workaround for delete character with emoji grapheme customers that do not include non-BMP code points
  • ✅ #7155 Improve character deletion around shadow roots and decorators
  • ✅ #7218 Remove Android Chrome workaround

Tables:

  • 🆕 #7077 TableCell support for verticalAlign
  • 🆕 #7134 #7190 TableNode support for freezing the first column and row
  • ✅ #7161 Ensure rectangular table cell merge behavior
  • ✅ #7192 Nested tables are disabled
  • 🆕 #7205 TableNode support for style attribute

Code:

  • ✅ #7187 Fix selection boundaries in code block

React:

  • ✅ #7185 Typeahead menu now respects read-only mode

Playground:

  • ✅ #7194 Optimize table cell resizer event listeners
  • ✅ #7215 Remove redundant Suspense from node decorators

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.24.0...v0.25.0

2025-02-07 08:12:35
lexical

v0.24.0

Breaking Changes

Build:

  • 🆕 #7047 All commonjs prod builds are now optimized with terser instead of the unmaintained closure compiler

Core editor:

  • ✅ #7037 editor.focus() now happens synchronously when called from inside of an update, as if it was implemented with a command dispatch. Previously it would defer which is confusing behavior because the expected side-effect is to change the selection which you really do want to happen synchronously.

Lexical List:

  • 🆕 #7037 insertList and removeList are now deprecated, use $insertList and $removeList instead
  • ✅ #7037 INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND and REMOVE_LIST_COMMAND now update synchronously when dispatched from inside an update, rather than deferring a nested update (this is the expected behavior for commands)

Highlights

Core editor:

  • ✅ Fix: Infinite loop when splitting invalid ListItemNode #7037
  • ✅ Fix: Handle MutationObserver/input event re-ordering when using contentEditable inside of an iframe #7045
  • ✅ Fix: Normalize selection after applyDOMRange to account for Firefox differences #7050
  • ✅ Fix: triple click around inline elements (links) #7055
  • ✅ Fix: iOS Autocorrect strips formatting by reporting wrong dataType #5789
  • ✅ Fix: In the Safari browser, during the compositing event process, the delete key exhibits unexpected behavior #7061
  • ✅ Fix: Chrome on android deletion bugs #7122

Collab:

  • 🆕 Feature: Allow passing in custom syncCursorPositions function to collab hook #7053
  • ✅ Fix: handle text node being split by Yjs redo #7098

List:

  • ✅ Fix: Prevent error when calling formatList when selection is at root by #6994
  • ✅ Fix: ListItemNode serialization throws #7116

Mark:

  • 🆕 Feature: include inline decorator nodes in marks #7086
  • ✅ Fix: $wrapSelectionInMarkNode with element points #7132

Markdown:

  • ✅ Fix: support link and inline code text formats #7004

Playground:

  • ✅ Fix: Columns Layout Item Overflow #7066
  • 🆕 Feature: TableOfContents Scroll smooth behaviour #7069
  • ✅ Fix: prevent growing whitespaces in markdown table toggle #7041
  • ✅ Fix: Ensure Delete Node handles all node types #7096

React:

  • ✅ Fix: Import JSX type from React to prevent "Cannot find namespace 'JSX'"-error when type-checking with React 19 #7080

Table:

  • 🆕 Feature: Support table alignment #7044
  • ✅ Fix: Prevent error if pasted table has empty row #7057

Utils:

  • 🆕 Feature: Add reverse dfs iterator #7107 #7112

Build:

  • 🆕 All commonjs prod builds are now optimized with terser instead of the unmaintained closure compiler #7047
  • ✅ Change fork modules to use production only when NODE_ENV explicitly set to production #7065

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.23.1...v0.24.0

2025-01-10 02:24:46
lexical

v0.23.1

Breaking Changes

The only breaking change in this release is minor (#7023) and should not affect any correct code. However, if you are counting the number of times your update listener is called during editor.setRootElement(null) then you will have to change that expectation.

Highlights

Highlights since v0.23.0

Core Editor:

  • ✅ Fix: Updates are committed on editor.setRootElement(null) #7023
  • ✅ Fix: TabNode deserialization regression from v0.23.0 #7031

Mark:

React:

What's Changed

New Contributors

Full Changelog: https://github.com/facebook/lexical/compare/v0.23.0...v0.23.1