slate: set DOM selection to slate selection more robustly on anything that involves focus

Author: williamstein

src/packages/frontend/editors/slate/edit-bar/list-edit.tsx

@@ -122,7 +122,7 @@ export const ListEdit: React.FC<Props> = ({ listProperties, editor }) => {
       style={{ color: "#666" }}
       onClick={() => {
         moveListItemUp(editor);
-        ReactEditor.focus(editor, false, true);
+        ReactEditor.focus(editor, false);
       }}
     >
       <Icon name={"arrow-up"} />
@@ -137,7 +137,7 @@ export const ListEdit: React.FC<Props> = ({ listProperties, editor }) => {
       style={{ color: "#666" }}
       onClick={() => {
         moveListItemDown(editor);
-        ReactEditor.focus(editor, false, true);
+        ReactEditor.focus(editor, false);
       }}
     >
       <Icon name={"arrow-down"} />

src/packages/frontend/editors/slate/editable-markdown.tsx

@@ -622,7 +622,7 @@ export const EditableMarkdown: React.FC<Props> = React.memo((props: Props) => {
         // about selection at all.  TODO: we might be able to avoid the
         // slateDiff stuff entirely via some tricky stuff, e.g., managing
         // the cursor on the plain text side before/after the change, since
-        // codemirror is much faster att "setValueNoJump".
+        // codemirror is much faster at "setValueNoJump".
         // The main time we use this optimization here is when opening the
         // document in the first place, in which case we're converting
         // the document from "Loading..." to it's initial value.

src/packages/frontend/editors/slate/elements/code-block/insert-bar.tsx

@@ -25,23 +25,21 @@ function InsertButton({ children, onClick }) {
 }
 
 export default function InsertBar({ editor, element, info, above }) {
-  //const { hasLanguageModel } = useFileContext();
-
   const insert = (node: Node, offset = 0) => {
     let path = findElement(editor, element);
     if (path && !above) {
       path = Path.next(path);
     }
     Transforms.insertNodes(editor, node, { at: path });
-    ReactEditor.focus(editor, true, true);
+    ReactEditor.focus(editor, true);
     if (path) {
       setTimeout(() => {
         const sel = {
           anchor: { path: path!, offset: 0 },
           focus: { path: path!, offset },
         };
         Transforms.setSelection(editor, sel);
-        ReactEditor.focus(editor, true, true);
+        ReactEditor.focus(editor, true);
       }, 50);
     }
   };

src/packages/frontend/editors/slate/elements/codemirror.tsx

@@ -129,7 +129,7 @@ export const SlateCodeMirror: React.FC<Props> = React.memo(
           ...cmOptions?.extraKeys,
           "Shift-Enter": () => {
             Transforms.move(editor, { distance: 1, unit: "line" });
-            ReactEditor.focus(editor, false, true);
+            ReactEditor.focus(editor, false);
             onShiftEnter?.();
           },
           // We make it so doing select all when not everything is
@@ -342,7 +342,7 @@ function cursorHandlers(editor, isInline: boolean | undefined) {
     if (cur_line === n && cur_ch === line_length) {
       //Transforms.move(editor, { distance: 1, unit: "line" });
       moveCursorDown(editor, true);
-      ReactEditor.focus(editor, false, true);
+      ReactEditor.focus(editor, false);
       return true;
     } else {
       return false;
@@ -358,7 +358,7 @@ function cursorHandlers(editor, isInline: boolean | undefined) {
         if (!isInline) {
           moveCursorToBeginningOfBlock(editor);
         }
-        ReactEditor.focus(editor, false, true);
+        ReactEditor.focus(editor, false);
       } else {
         commands.goLineUp(cm);
       }
@@ -367,7 +367,7 @@ function cursorHandlers(editor, isInline: boolean | undefined) {
       const cur = cm.getCursor();
       if (cur?.line === cm.firstLine() && cur?.ch == 0) {
         Transforms.move(editor, { distance: 1, unit: "line", reverse: true });
-        ReactEditor.focus(editor, false, true);
+        ReactEditor.focus(editor, false);
       } else {
         commands.goCharLeft(cm);
       }

src/packages/frontend/editors/slate/format/commands.ts

@@ -311,6 +311,12 @@ export function getCollapsedSelection(editor: SlateEditor): Range {
 export function setSelectionAndFocus(editor: ReactEditor, selection): void {
   ReactEditor.focus(editor);
   Transforms.setSelection(editor, selection);
+
+  // see comment in react-editor.ts
+  const { updateDOMSelection } = editor;
+  if (updateDOMSelection != null) {
+    window.requestAnimationFrame(updateDOMSelection);
+  }
 }
 
 export function restoreSelectionAndFocus(editor: SlateEditor): void {

src/packages/frontend/editors/slate/slate-react/plugin/react-editor.ts

@@ -137,11 +137,7 @@ export const ReactEditor = {
    * Focus the editor.
    */
 
-  focus(
-    editor: ReactEditor,
-    force: boolean = false,
-    preserveSelection: boolean = false,
-  ): void {
+  focus(editor: ReactEditor, force: boolean = false): void {
     const { selection } = editor;
     const el = ReactEditor.toDOMNode(editor, editor);
     IS_FOCUSED.set(editor, true);
@@ -155,7 +151,7 @@ export const ReactEditor = {
       el.blur();
       el.focus({ preventScroll: true });
     }
-    if (selection != null && preserveSelection) {
+    if (selection != null) {
       // I've changed the focus method to optionally preserve the selection if there is one.
       // However, doing this when not needed may be the cause of
       // https://github.com/sagemathinc/cocalc/issues/6803
@@ -166,6 +162,13 @@ export const ReactEditor = {
       // it's very important to restore the selection to where it was before
       // focusing, since otherwise the selection is reset to the top of the document.
       Transforms.setSelection(editor, selection);
+      // Critical to update the DOM selection ASAP, but not in same render loop (since that's too soon).
+      // Note that useLayoutEffect is not quick enough and things get broken without this below.  An example
+      // is in virtualized mode when moving a list item down in a list.
+      const { updateDOMSelection } = editor;
+      if (updateDOMSelection != null) {
+        window.requestAnimationFrame(updateDOMSelection);
+      }
     }
   },