Fixes the cursor position when clicking on a Slate block

On pages with many blocks, clicking on a Slate block would cause the click position to be lost, with the cursor jumping to the beginning of the text.
Now, we save the position and set it on the Slate block after it is selected.

Author: wesleybl

packages/volto-slate/src/editor/SlateEditor.jsx

@@ -54,6 +54,7 @@ class SlateEditor extends Component {
     this.createEditor = this.createEditor.bind(this);
     this.multiDecorator = this.multiDecorator.bind(this);
     this.handleChange = this.handleChange.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
     this.getSavedSelection = this.getSavedSelection.bind(this);
     this.setSavedSelection = this.setSavedSelection.bind(this);
     this.scheduleFocus = this.scheduleFocus.bind(this);
@@ -73,6 +74,31 @@ class SlateEditor extends Component {
 
     this.editor = null;
     this.selectionTimeout = null;
+    this.pendingPointerSelection = null;
+  }
+
+  handlePointerDown(event) {
+    if (this.props.selected) return;
+
+    const nativeEvent = event.nativeEvent || event;
+    const domPoint = document.caretPositionFromPoint?.(
+      nativeEvent.clientX,
+      nativeEvent.clientY,
+    );
+    if (!domPoint) return;
+
+    try {
+      const point = ReactEditor.toSlatePoint(
+        this.state.editor,
+        [domPoint.offsetNode, domPoint.offset],
+        { exactMatch: false, suppressThrow: true },
+      );
+      if (point) {
+        this.pendingPointerSelection = { anchor: point, focus: point };
+      }
+    } catch {
+      this.pendingPointerSelection = null;
+    }
   }
 
   getSavedSelection() {
@@ -185,7 +211,10 @@ class SlateEditor extends Component {
     if (!prevProps.selected && this.props.selected) {
       // if the SlateEditor becomes selected from unselected
 
-      if (window.getSelection().type === 'None') {
+      if (this.pendingPointerSelection) {
+        Transforms.select(this.state.editor, this.pendingPointerSelection);
+        this.pendingPointerSelection = null;
+      } else if (window.getSelection().type === 'None') {
         // TODO: why is this condition checked?
         Transforms.select(
           this.state.editor,
@@ -325,6 +354,7 @@ class SlateEditor extends Component {
                 this.props.onBlur && this.props.onBlur();
                 return null;
               }}
+              onPointerDown={this.handlePointerDown}
               onClick={this.props.onClick}
               onSelect={(e) => {
                 if (!selected && this.props.onFocus) {