fix: hide cursor when editor not focused

makeplane · Nov 28, 2024 · d798833 · d798833
1 parent e206224
commit d798833
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 217 deletions.
diff --git a/packages/editor/src/core/extensions/smooth-cursor/plugin-better.ts b/packages/editor/src/core/extensions/smooth-cursor/plugin-better.ts
diff --git a/packages/editor/src/core/extensions/smooth-cursor/plugin-good.ts b/packages/editor/src/core/extensions/smooth-cursor/plugin-good.ts
diff --git a/packages/editor/src/core/extensions/smooth-cursor/plugin.ts b/packages/editor/src/core/extensions/smooth-cursor/plugin.ts
@@ -6,10 +6,18 @@ export const PROSEMIRROR_SMOOTH_CURSOR_CLASS = "prosemirror-smooth-cursor";
 export function smoothCursorPlugin(): Plugin {
   let smoothCursor: HTMLElement | null = typeof document === "undefined" ? null : document.createElement("div");
   let rafId: number | undefined;
+  let isEditorFocused = false;
 
   function updateCursor(view?: EditorView, cursor?: HTMLElement) {
     if (!view || !view.dom || view.isDestroyed || !cursor) return;
 
+    // Hide cursor if editor is not focused
+    if (!isEditorFocused) {
+      cursor.style.display = "none";
+      return;
+    }
+    cursor.style.display = "block";
+
     const { state, dom } = view;
     const { selection } = state;
     if (!isTextSelection(selection)) return;
@@ -43,28 +51,40 @@ export function smoothCursorPlugin(): Plugin {
 
       const update = () => {
         if (rafId !== undefined) {
-          console.log("cleaning up 1: " + rafId);
           cancelAnimationFrame(rafId);
         }
         updateCursor(view, cursor);
       };
 
+      const handleFocus = () => {
+        isEditorFocused = true;
+        update();
+      };
+
+      const handleBlur = () => {
+        isEditorFocused = false;
+        update();
+      };
+
       let observer: ResizeObserver | undefined;
       if (window.ResizeObserver) {
         observer = new window.ResizeObserver(update);
         observer?.observe(view.dom);
       }
 
       doc.addEventListener("selectionchange", update);
+      view.dom.addEventListener("focus", handleFocus);
+      view.dom.addEventListener("blur", handleBlur);
 
       return {
         update,
         destroy: () => {
           doc.removeEventListener("selectionchange", update);
+          view.dom.removeEventListener("focus", handleFocus);
+          view.dom.removeEventListener("blur", handleBlur);
           observer?.unobserve(view.dom);
           // Clean up any pending animation frame
           if (rafId !== undefined) {
-            console.log("cleaning up 2: " + rafId);
             cancelAnimationFrame(rafId);
           }
         },
@@ -81,9 +101,9 @@ export function smoothCursorPlugin(): Plugin {
         ]);
       },
 
-      attributes: {
-        class: "smooth-cursor-enabled",
-      },
+      attributes: () => ({
+        class: isEditorFocused ? "smooth-cursor-enabled" : "",
+      }),
     },
   });
 }

diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
@@ -478,17 +478,6 @@ p + p {
 [data-background-color="purple"] {
   background-color: var(--editor-colors-purple-background);
 }
-/* end background colors */
-@keyframes caret-flash-smooth {
-  0%,
-  100% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
 
 .smooth-cursor-enabled {
   caret-color: transparent;
@@ -504,5 +493,4 @@ p + p {
   transition: transform 0.2s var(--ease-out-quart);
   will-change: transform;
   opacity: 0.8;
-  animation: cursorPulse 0.8s ease-in-out infinite;
 }