Fix: Floating toolbar flashes on hover over empty lines when the sele…

…ction is backwards. (#3959)
facebook · Feb 24, 2023 · 3d1dd92 · 3d1dd92 · vercel · Feb 24, 2023
1 parent 9f4f60c
commit 3d1dd92
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/lexical-playground/src/plugins/FloatingTextFormatToolbarPlugin/index.tsx
@@ -67,6 +67,32 @@ function TextFormatFloatingToolbar({
     editor.dispatchCommand(INSERT_INLINE_COMMAND, undefined);
   };
 
+  function mouseMoveListener(e: MouseEvent) {
+    if (
+      popupCharStylesEditorRef?.current &&
+      (e.buttons === 1 || e.buttons === 3)
+    ) {
+      popupCharStylesEditorRef.current.style.pointerEvents = 'none';
+    }
+  }
+  function mouseUpListener(e: MouseEvent) {
+    if (popupCharStylesEditorRef?.current) {
+      popupCharStylesEditorRef.current.style.pointerEvents = 'auto';
+    }
+  }
+
+  useEffect(() => {
+    if (popupCharStylesEditorRef?.current) {
+      document.addEventListener('mousemove', mouseMoveListener);
+      document.addEventListener('mouseup', mouseUpListener);
+
+      return () => {
+        document.removeEventListener('mousemove', mouseMoveListener);
+        document.removeEventListener('mouseup', mouseUpListener);
+      };
+    }
+  }, [popupCharStylesEditorRef]);
+
   const updateTextFormatFloatingToolbar = useCallback(() => {
     const selection = $getSelection();