Don't memoize node selection to deal with Lexical freezing selected nodes in development

#540
#507 (comment)

Author: jorgemanrubia

app/assets/javascript/lexxy.js

@@ -7856,26 +7856,19 @@ class Selection {
     this.#containEditorFocus();
   }
 
-  clear() {
-    this.current = null;
-  }
-
   set current(selection) {
-    if (xr(selection)) {
-      this.editor.getEditorState().read(() => {
-        this._current = Lr();
-        this.#syncSelectedClasses();
-      });
-    } else {
-      this.editor.update(() => {
-        this.#syncSelectedClasses();
-        this._current = null;
-      });
-    }
+    this.editor.update(() => {
+      this.#syncSelectedClasses();
+    });
   }
 
-  get current() {
-    return this._current
+  get hasNodeSelection() {
+    let result = false;
+    this.editor.getEditorState().read(() => {
+      const selection = Lr();
+      result = selection !== null && xr(selection);
+    });
+    return result
   }
 
   get cursorPosition() {
@@ -8068,18 +8061,18 @@ class Selection {
   }
 
   get #currentlySelectedKeys() {
-    if (this._currentlySelectedKeys) { return this._currentlySelectedKeys }
+    if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
 
-    this._currentlySelectedKeys = new Set();
+    this.currentlySelectedKeys = new Set();
 
     const selection = Lr();
     if (selection && xr(selection)) {
       for (const node of selection.getNodes()) {
-        this._currentlySelectedKeys.add(node.getKey());
+        this.currentlySelectedKeys.add(node.getKey());
       }
     }
 
-    return this._currentlySelectedKeys
+    return this.currentlySelectedKeys
   }
 
   #processSelectionChangeCommands() {
@@ -8209,7 +8202,7 @@ class Selection {
     this.#highlightNewItems();
 
     this.previouslySelectedKeys = this.#currentlySelectedKeys;
-    this._currentlySelectedKeys = null;
+    this.currentlySelectedKeys = null;
   }
 
   #clearPreviouslyHighlightedItems() {
@@ -8231,31 +8224,31 @@ class Selection {
   }
 
   async #selectPreviousNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
     } else {
       this.#selectInLexical(this.nodeBeforeCursor);
     }
   }
 
   async #selectNextNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
     } else {
       this.#selectInLexical(this.nodeAfterCursor);
     }
   }
 
   async #selectPreviousTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
     } else {
       this.#selectInLexical(this.topLevelNodeBeforeCursor);
     }
   }
 
   async #selectNextTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
     } else {
       this.#selectInLexical(this.topLevelNodeAfterCursor);
@@ -8264,10 +8257,9 @@ class Selection {
 
   async #withCurrentNode(fn) {
     await nextFrame();
-    if (this.current) {
+    if (this.hasNodeSelection) {
       this.editor.update(() => {
-        this.clear();
-        fn(this.current.getNodes()[0]);
+        fn(Lr().getNodes()[0]);
         this.editor.focus();
       });
     }
@@ -9171,8 +9163,8 @@ class Contents {
     let focusNode = null;
 
     this.editor.update(() => {
-      if (xr(this.#selection.current)) {
-        const nodesToRemove = this.#selection.current.getNodes();
+      if (xr(Lr())) {
+        const nodesToRemove = Lr().getNodes();
         if (nodesToRemove.length === 0) return
 
         focusNode = this.#findAdjacentNodeTo(nodesToRemove);
@@ -9184,7 +9176,6 @@ class Contents {
 
     this.editor.update(() => {
       this.#selectAfterDeletion(focusNode);
-      this.#selection.clear();
       this.editor.focus();
     });
   }

app/assets/javascript/lexxy.js.br

@@ -278,8 +278,8 @@ export default class Contents {
     let focusNode = null
 
     this.editor.update(() => {
-      if ($isNodeSelection(this.#selection.current)) {
-        const nodesToRemove = this.#selection.current.getNodes()
+      if ($isNodeSelection($getSelection())) {
+        const nodesToRemove = $getSelection().getNodes()
         if (nodesToRemove.length === 0) return
 
         focusNode = this.#findAdjacentNodeTo(nodesToRemove)
@@ -291,7 +291,6 @@ export default class Contents {
 
     this.editor.update(() => {
       this.#selectAfterDeletion(focusNode)
-      this.#selection.clear()
       this.editor.focus()
     })
   }

app/assets/javascript/lexxy.js.gz

@@ -24,26 +24,19 @@ export default class Selection {
     this.#containEditorFocus()
   }
 
-  clear() {
-    this.current = null
-  }
-
   set current(selection) {
-    if ($isNodeSelection(selection)) {
-      this.editor.getEditorState().read(() => {
-        this._current = $getSelection()
-        this.#syncSelectedClasses()
-      })
-    } else {
-      this.editor.update(() => {
-        this.#syncSelectedClasses()
-        this._current = null
-      })
-    }
+    this.editor.update(() => {
+      this.#syncSelectedClasses()
+    })
   }
 
-  get current() {
-    return this._current
+  get hasNodeSelection() {
+    let result = false
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection()
+      result = selection !== null && $isNodeSelection(selection)
+    })
+    return result
   }
 
   get cursorPosition() {
@@ -236,18 +229,18 @@ export default class Selection {
   }
 
   get #currentlySelectedKeys() {
-    if (this._currentlySelectedKeys) { return this._currentlySelectedKeys }
+    if (this.currentlySelectedKeys) { return this.currentlySelectedKeys }
 
-    this._currentlySelectedKeys = new Set()
+    this.currentlySelectedKeys = new Set()
 
     const selection = $getSelection()
     if (selection && $isNodeSelection(selection)) {
       for (const node of selection.getNodes()) {
-        this._currentlySelectedKeys.add(node.getKey())
+        this.currentlySelectedKeys.add(node.getKey())
       }
     }
 
-    return this._currentlySelectedKeys
+    return this.currentlySelectedKeys
   }
 
   #processSelectionChangeCommands() {
@@ -377,7 +370,7 @@ export default class Selection {
     this.#highlightNewItems()
 
     this.previouslySelectedKeys = this.#currentlySelectedKeys
-    this._currentlySelectedKeys = null
+    this.currentlySelectedKeys = null
   }
 
   #clearPreviouslyHighlightedItems() {
@@ -399,31 +392,31 @@ export default class Selection {
   }
 
   async #selectPreviousNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
     } else {
       this.#selectInLexical(this.nodeBeforeCursor)
     }
   }
 
   async #selectNextNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
     } else {
       this.#selectInLexical(this.nodeAfterCursor)
     }
   }
 
   async #selectPreviousTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
     } else {
       this.#selectInLexical(this.topLevelNodeBeforeCursor)
     }
   }
 
   async #selectNextTopLevelNode() {
-    if (this.current) {
+    if (this.hasNodeSelection) {
       await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
     } else {
       this.#selectInLexical(this.topLevelNodeAfterCursor)
@@ -432,10 +425,9 @@ export default class Selection {
 
   async #withCurrentNode(fn) {
     await nextFrame()
-    if (this.current) {
+    if (this.hasNodeSelection) {
       this.editor.update(() => {
-        this.clear()
-        fn(this.current.getNodes()[0])
+        fn($getSelection().getNodes()[0])
         this.editor.focus()
       })
     }