[Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called #6894

etrepum · 2024-12-02T02:13:29Z

Description

Adds documentation about focus to the selection documentation.
Adds a 'skip-dom-selection' update tag. Both of these are relevant to a very common FAQ which is about how to avoid the editor taking over the selection with a programmatic update.
Changes the type of updateDOM to be more correct, the prevNode argument should always be this (the same class, but a different instance). This fixes some subclassing issues.
Changes the behavior of onUpdate and $onUpdate to always be called. Previously they would be skipped if the update containing them did not make any nodes dirty. It's often useful to use $onUpdate to attach some logic in a dispatchCommand that does not need to update nodes or the selection but needs to do something with the reconciled DOM or editor afterwards.
registerNodeTransform now only marks relevant nodes as dirty, instead of all nodes
Some of the implementation details of Autocomplete nodes were changed to be more compatible with collab, though issues still remain (Bug: Autocomplete on Collab - suggestion appears in a different session while composing on another. #6844)

Closes #6514
Clsoes #4474

Upgrade Notes

If you have code that expects onUpdate or $onUpdate to not be called if the update did not make any nodes or the selection dirty, then you will have to change your code accordingly.

Now when registerNodeTransform is called, only relevant nodes (by type, including support for withKlass) are marked dirty. Previously, all nodes in the editor were marked as dirty when any transform was registered (except RootNode, which was a special case).

Test plan

Unit tests were added for the new behavior of onUpdate / $onUpdate and the 'skip-dom-selection' tag.

vercel · 2024-12-02T02:13:34Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2024 7:25am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2024 7:25am

github-actions · 2024-12-02T02:15:16Z

size-limit report 📦

Path	Size
lexical - cjs	31.09 KB (0%)
lexical - esm	30.96 KB (0%)
@lexical/rich-text - cjs	40.13 KB (0%)
@lexical/rich-text - esm	32.8 KB (0%)
@lexical/plain-text - cjs	38.71 KB (0%)
@lexical/plain-text - esm	30.12 KB (0%)
@lexical/react - cjs	42.05 KB (0%)
@lexical/react - esm	34.21 KB (0%)

etrepum · 2024-12-10T18:17:08Z

packages/lexical-utils/src/markSelection.ts

-              currentAnchorNodeDOM,
-              editor._config,
-            )));
+            ($isTextNode(currentAnchorNode) &&


These changes are just to allow TypeScript to infer that the type of currentAnchorNode and previousAnchorNode are both TextNode which is required to satisfy updateDOM. Strictly speaking it could still violate constraints if they have different TextNode-compatible constructors, e.g. !(previousAnchorNode instanceof currentAnchorNode.constructor) but this is not something that TypeScript can detect and we already have a runtime invariant to ensure the constructor never changes for a node with a given key.

packages/lexical-website/docs/concepts/selection.md

etrepum · 2024-12-12T01:17:23Z

It looks like there's one failing flaky collab+firefox e2e test that now reliably fails in this PR. I'll investigate further before merge.

1 failed
[1]     [firefox] › packages/lexical-playground/__tests__/e2e/Autocomplete.spec.mjs:76:3 › Autocomplete › Can autocomplete in the same format as the original text

etrepum · 2024-12-13T05:54:39Z

So what's currently happening here is:

Left editor changes the font size
Left editor types a character or two
Right editor sees the new text node with font size change, considers it a conflict for whatever reason, and creates a new paragraph
Right editor's new paragraph ends up moving the browser's focus to the right editor, so the rest of the characters end up being typed into the Right editor's new paragraph

etrepum · 2024-12-13T06:00:52Z

Autocomplete is a necessary condition for this, so it seems that interaction between autocomplete and collab is the real problem here

etrepum

This is passing all tests now, just needs a re-approval. Added some commentary on the new changes.

etrepum · 2024-12-13T16:59:16Z

packages/lexical-playground/__tests__/e2e/Autocomplete.spec.mjs

@@ -52,7 +52,12 @@ test.describe('Autocomplete', () => {
          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
          dir="ltr">
          <span data-lexical-text="true">Sort by alpha</span>
-          <span data-lexical-text="true"></span>
+          <span


I changed the autocomplete node to render more than an empty span in collab, but set its display to none. This makes it easier to see what's going on in the DOM. I think ultimately there should be some other solution for autocomplete in collab that doesn't get synchronized.

etrepum · 2024-12-13T17:17:48Z

packages/lexical/src/LexicalEditor.ts

@@ -960,7 +970,10 @@ export class LexicalEditor {
      registeredNodes.push(registeredReplaceWithNode);
    }

-    markAllNodesAsDirty(this, klass.getType());
+    markNodesWithTypesAsDirty(


I renamed this internal function because now it actually does what we need it to do

etrepum · 2024-12-13T17:18:22Z

packages/lexical/src/LexicalUpdates.ts

@@ -607,7 +607,8 @@ export function $commitPendingUpdates(
    editor._editable &&
    // domSelection will be null in headless
    domSelection !== null &&
-    (needsUpdate || pendingSelection === null || pendingSelection.dirty)
+    (needsUpdate || pendingSelection === null || pendingSelection.dirty) &&
+    !tags.has('skip-dom-selection')


This is the logic that skips DOM selection with that tag

etrepum · 2024-12-13T17:19:21Z

packages/lexical/src/LexicalUpdates.ts

@@ -1005,6 +1006,7 @@ function $beginUpdate(

  const shouldUpdate =
    editor._dirtyType !== NO_DIRTY_NODES ||
+    editor._deferred.length > 0 ||


This is where we defer the update whenever there is an onUpdate, so you can attach the callback, do some mutations in another update issued that tick, and still get a callback

etrepum · 2024-12-13T17:19:43Z

packages/lexical/src/LexicalUtils.ts

@@ -72,7 +72,6 @@ import {
  internalGetActiveEditorState,
  isCurrentlyReadOnlyMode,
  triggerCommandListeners,
-  updateEditor,


I didn't see a reason to use this internal function here

etrepum · 2024-12-13T17:21:40Z

packages/lexical/src/LexicalUtils.ts

-  // Mark all existing text nodes as dirty
-  updateEditor(
-    editor,
+export function markNodesWithTypesAsDirty(


Previously whenever a transform was registered we marked all nodes in the editor as dirty, which was surprisingly the biggest factor in the collab+autocomplete+selection issue. Now it only marks relevant nodes as dirty, which in this case is none. We can use the same internal facility developed for registerMutationListener initialization to find the matching nodes by type in the reconciled editor state to determine which ones should be marked as dirty.

etrepum · 2024-12-13T17:22:42Z

packages/lexical/src/LexicalUtils.ts

-        node.markDirty();
+      for (const nodeMap of dirtyNodeMaps) {
+        for (const node of nodeMap.values()) {
+          node.markDirty();


We don't need to check if the nodes are attached, worst case they just end up being re-inserted in the nodeMap and get GC'd on reconciliation.

etrepum · 2024-12-13T17:23:24Z

packages/lexical/src/LexicalUtils.ts

@@ -1825,17 +1833,26 @@ export function getCachedTypeToNodeMap(
  );
  let typeToNodeMap = cachedNodeMaps.get(editorState);
  if (!typeToNodeMap) {
-    typeToNodeMap = new Map();
+    typeToNodeMap = computeTypeToNodeMap(editorState);


This is just extracting some logic to a function, nothing was changed here, I thought I might need to do it with a live EditorState but then realized that the frozen one will work even better since all nodes in the live editorstate are either in the frozen one or are already dirty.

etrepum · 2024-12-13T17:24:04Z

packages/lexical/src/index.ts

@@ -29,6 +29,7 @@ export type {
  SerializedEditor,
  Spread,
  Transform,
+  UpdateListener,


I thought I was going to need to use tags in the updateListener in the Autocomplete plugin and noticed this type was not exported

…ts context Changing the focus behavior was more difficult than expected. Apparently when Lexical has a Selection then it will 'steal' the focus whenever changes to its content is made. There have been made changes to Lexical just recently that would allow us to avoid this (facebook/lexical#6894) but we haven't updated to this version yet and updating this closely before the EAP seems risky. I found a workaround in one of the discussions that suggests to set the selection to `null` when making a change. In order to do this I refactored some of the function to make them more composable. Instead of calling `editor.update` directly these functions are now supposed to be called from `editor.update`. Since I've added a helper for creating a promise-version of `editor.update` anyway, I also addressed one of the issues I've encountered in the last PR, namely that `onUpdate` is not called when the editor state doesn't change. This will btw also be fixed on the Lexical side by the above mentioned PR.

…ts context (#6385) Closes srch-1483 Changing the focus behavior was more difficult than expected. Apparently when Lexical has a Selection then it will 'steal' the focus whenever changes to its content is made. There have been made changes to Lexical just recently that would allow us to avoid this (facebook/lexical#6894) but we haven't updated to this version yet and updating this closely before the EAP seems risky. I found a workaround in one of the discussions that suggests to set the selection to `null` when making a change. In order to do this I refactored some of the function to make them more composable. Instead of calling `editor.update` directly these functions are now supposed to be called from `editor.update`. Since I've added a helper for promisifying `editor.update` anyway, I also addressed one of the issues I've encountered in the last PR, namely that `onUpdate` is not called when the editor state doesn't change. To prevent accidentally calling it in a way that would not resolve the promise, the callback has to return a boolean. This will btw also be fixed on the Lexical side by the above mentioned PR. ## Test plan Manual testing https://github.com/user-attachments/assets/296cca9e-b8e3-433e-a39a-befbb8fe2017

New update tag: skip-dom-selection

6c94c33

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 2, 2024

vercel bot deployed to Preview – lexical-playground December 2, 2024 02:14 View deployment

vercel bot deployed to Preview – lexical December 2, 2024 02:14 View deployment

Merge remote-tracking branch 'origin/main' into skip-dom-selection

25392d5

vercel bot deployed to Preview – lexical December 6, 2024 05:25 View deployment

vercel bot deployed to Preview – lexical-playground December 6, 2024 05:25 View deployment

Merge remote-tracking branch 'origin/main' into skip-dom-selection

8c2a4b1

etrepum changed the title ~~[lexical] Feature: New update tag: skip-dom-selection~~ [Breaking Change][lexical] Feature: New update tag: skip-dom-selection Dec 6, 2024

etrepum added 3 commits December 6, 2024 12:30

update version

b08c549

Clean up old grid selection errors/test names

8dca353

fix updateDOM types

774cb10

vercel bot deployed to Preview – lexical-playground December 6, 2024 21:25 View deployment

vercel bot deployed to Preview – lexical December 6, 2024 21:25 View deployment

call onUpdate / $onUpdate even when nothing will change

2305da9

vercel bot deployed to Preview – lexical-playground December 8, 2024 01:26 View deployment

vercel bot deployed to Preview – lexical December 8, 2024 01:26 View deployment

etrepum added 2 commits December 8, 2024 16:27

unit test

2428272

Merge remote-tracking branch 'origin/main' into skip-dom-selection

64ce7e2

vercel bot deployed to Preview – lexical December 9, 2024 00:28 View deployment

vercel bot deployed to Preview – lexical-playground December 9, 2024 00:28 View deployment

tsc

a3ccd8b

vercel bot deployed to Preview – lexical December 9, 2024 00:35 View deployment

vercel bot deployed to Preview – lexical-playground December 9, 2024 00:35 View deployment

Merge remote-tracking branch 'origin/main' into skip-dom-selection

a5e8b27

vercel bot deployed to Preview – lexical-playground December 10, 2024 18:06 View deployment

vercel bot deployed to Preview – lexical December 10, 2024 18:06 View deployment

use typedoc syntax

31902e3

vercel bot deployed to Preview – lexical-playground December 11, 2024 05:54 View deployment

vercel bot deployed to Preview – lexical December 11, 2024 05:54 View deployment

etrepum commented Dec 11, 2024

View reviewed changes

ivailop7 previously approved these changes Dec 11, 2024

View reviewed changes

zurfyx previously approved these changes Dec 12, 2024

View reviewed changes

etrepum changed the title ~~[Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called~~ [NOMERGE][Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called Dec 12, 2024

Avoid marking the whole state as dirty when registering a node transform

cd6cce1

etrepum dismissed stale reviews from zurfyx and ivailop7 via cd6cce1 December 13, 2024 07:19

Merge branch 'main' into skip-dom-selection

5d02114

vercel bot deployed to Preview – lexical December 13, 2024 07:21 View deployment

vercel bot deployed to Preview – lexical-playground December 13, 2024 07:21 View deployment

fix test expectations

5836044

vercel bot deployed to Preview – lexical-playground December 13, 2024 07:25 View deployment

vercel bot deployed to Preview – lexical December 13, 2024 07:25 View deployment

etrepum requested a review from zurfyx December 13, 2024 16:57

etrepum changed the title ~~[NOMERGE][Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called~~ [Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called Dec 13, 2024

etrepum commented Dec 13, 2024

View reviewed changes

zurfyx approved these changes Dec 13, 2024

View reviewed changes

etrepum added this pull request to the merge queue Dec 13, 2024

Merged via the queue into facebook:main with commit 66f805c Dec 13, 2024
43 checks passed

etrepum mentioned this pull request Dec 16, 2024

Bug: Editor is focused when the initialConfig editorState converts from markdown and registerNodeTransform has been used #4474

Closed

fkling mentioned this pull request Dec 17, 2024

fix(onebox): Do not focus editor when inserting/updating search results context sourcegraph/cody#6385

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called #6894

[Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called #6894

etrepum commented Dec 2, 2024 •

edited

Loading

vercel bot commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading

etrepum Dec 10, 2024

etrepum commented Dec 12, 2024

etrepum commented Dec 13, 2024

etrepum commented Dec 13, 2024

etrepum left a comment

etrepum Dec 13, 2024

etrepum Dec 13, 2024

etrepum Dec 13, 2024

etrepum Dec 13, 2024

etrepum Dec 13, 2024

etrepum Dec 13, 2024

etrepum Dec 13, 2024

etrepum Dec 13, 2024

etrepum Dec 13, 2024

[Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called #6894

[Breaking Change][lexical] Feature: New update tag: skip-dom-selection, $onUpdate now always called #6894

Conversation

etrepum commented Dec 2, 2024 • edited Loading

Description

Upgrade Notes

Test plan

vercel bot commented Dec 2, 2024 • edited Loading

github-actions bot commented Dec 2, 2024 • edited Loading

size-limit report 📦

Choose a reason for hiding this comment

etrepum commented Dec 12, 2024

etrepum commented Dec 13, 2024

etrepum commented Dec 13, 2024

etrepum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etrepum commented Dec 2, 2024 •

edited

Loading

vercel bot commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading