Issue 377 (react-live) - Fixes cursor positioning when typing really fast

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/green-humans-leave.md

@@ -0,0 +1,5 @@
+---
+'use-editable': patch
+---
+
+To address incorrect cursor positioning when typing fast, moved position tracking to a ref and added a setTimeout to allow DOM to update within edit methods.

package.json

@@ -50,6 +50,7 @@
     "@ampproject/rollup-plugin-closure-compiler": "^0.26.0",
     "@babel/core": "^7.11.6",
     "@babel/plugin-transform-object-assign": "^7.10.4",
+    "@changesets/cli": "^2.27.8",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",

src/useEditable.ts

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useMemo } from 'react';
+import { useState, useLayoutEffect, useMemo, useRef } from 'react';
 
 export interface Position {
   position: number;
@@ -178,6 +178,7 @@ export const useEditable = (
   if (!opts) opts = {};
 
   const unblock = useState([])[1];
+  const positionRef = useRef<Position | null>(null);
   const state: State = useState(() => {
     const state: State = {
       observer: null as any,
@@ -206,6 +207,7 @@ export const useEditable = (
           const position = getPosition(element);
           const prevContent = toString(element);
           position.position += content.length - prevContent.length;
+          positionRef.current = position;
           state.position = position;
           state.onChange(content, position);
         }
@@ -223,7 +225,9 @@ export const useEditable = (
           range = makeRange(element, start, end);
           range.deleteContents();
           if (append) range.insertNode(document.createTextNode(append));
-          setCurrentRange(makeRange(element, start + append.length));
+          setTimeout(() => {
+            setCurrentRange(makeRange(element, start + append.length));
+          }, 0);
         }
       },
       move(pos: number | { row: number; column: number }) {
@@ -238,8 +242,9 @@ export const useEditable = (
             if (pos.row) position += lines.join('\n').length + 1;
             position += pos.column;
           }
-
-          setCurrentRange(makeRange(element, position));
+          setTimeout(() => {
+            setCurrentRange(makeRange(element, position));
+          }, 0);
         }
       },
       getState() {
@@ -252,18 +257,15 @@ export const useEditable = (
     []
   );
 
-  // Only for SSR / server-side logic
-  if (typeof navigator !== 'object') return edit;
-
   useLayoutEffect(() => {
     state.onChange = onChange;
 
     if (!elementRef.current || opts!.disabled) return;
 
     state.disconnected = false;
     state.observer.observe(elementRef.current, observerSettings);
-    if (state.position) {
-      const { position, extent } = state.position;
+    if (positionRef.current) {
+      const { position, extent } = positionRef.current;
       setCurrentRange(
         makeRange(elementRef.current, position, position + extent)
       );
@@ -348,6 +350,7 @@ export const useEditable = (
       if (state.queue.length) {
         disconnect();
         const content = toString(element);
+        positionRef.current = position;
         state.position = position;
         let mutation: MutationRecord | void;
         let i = 0;
@@ -396,6 +399,7 @@ export const useEditable = (
 
         if (history) {
           disconnect();
+          positionRef.current = history[0];
           state.position = history[0];
           state.onChange(history[1], history[0]);
         }
@@ -459,10 +463,11 @@ export const useEditable = (
 
     const onSelect = (event: Event) => {
       // Chrome Quirk: The contenteditable may lose its selection immediately on first focus
-      state.position =
+      positionRef.current =
         window.getSelection()!.rangeCount && event.target === element
           ? getPosition(element)
           : null;
+      state.position = positionRef.current;
     };
 
     const onPaste = (event: HTMLElementEventMap['paste']) => {