From d965c9f6c9837e4199985830a94e5673883596a1 Mon Sep 17 00:00:00 2001
From: Lu Wilson <l2wilson94@gmail.com>
Date: Tue, 4 Jul 2023 16:24:20 +0100
Subject: [PATCH] Firefox: Fix coarse pointer issue (#1701)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes the editor sometimes incorrectly assuming that you're
using a coarse pointer in firefox. It's not a complete fix — it just
avoids some of the bigger issues with it. ie: It disables cursor chat.

To avoid the issue, we just assume that you have a fine pointer if
you're using firefox on desktop.

Eventually, we should do a more complete fix for this.

I QA'd this change on:
* Mac Firefox (no touch screen)
* Windows Firefox (touch screen)
* Android Firefox

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Use firefox on desktop with a touch screen.
2. Check that you can still use cursor chat (when in a shared project).

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fixed firefox not being able to use cursor chat when using a touch
screen on desktop.
---
 packages/editor/api-report.md                  |  2 ++
 packages/editor/src/lib/editor/Editor.ts       | 18 ++++++++++++++++++
 .../editor/src/lib/hooks/useCoarsePointer.ts   |  7 +++++++
 3 files changed, 27 insertions(+)

diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md
index 0db9b47cc..1855b2c54 100644
--- a/packages/editor/api-report.md
+++ b/packages/editor/api-report.md
@@ -559,12 +559,14 @@ export class Editor extends EventEmitter<TLEventMap> {
     };
     get instanceState(): TLInstance;
     interrupt(): this;
+    readonly isAndroid: boolean;
     get isChangingStyle(): boolean;
     set isChangingStyle(v: boolean);
     readonly isChromeForIos: boolean;
     get isCoarsePointer(): boolean;
     set isCoarsePointer(v: boolean);
     get isDarkMode(): boolean;
+    readonly isFirefox: boolean;
     get isFocused(): boolean;
     get isFocusMode(): boolean;
     get isGridMode(): boolean;
diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts
index 4ffa327ca..c29fb4bb4 100644
--- a/packages/editor/src/lib/editor/Editor.ts
+++ b/packages/editor/src/lib/editor/Editor.ts
@@ -253,10 +253,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
 			this.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)
 			this.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
+			this.isFirefox = /firefox/i.test(navigator.userAgent)
+			this.isAndroid = /android/i.test(navigator.userAgent)
 		} else {
 			this.isSafari = false
 			this.isIos = false
 			this.isChromeForIos = false
+			this.isFirefox = false
+			this.isAndroid = false
 		}
 
 		this.store.onBeforeDelete = (record) => {
@@ -424,6 +428,20 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly isChromeForIos: boolean
 
+	/**
+	 * Whether the editor is running on Firefox.
+	 *
+	 * @public
+	 */
+	readonly isFirefox: boolean
+
+	/**
+	 * Whether the editor is running on Android.
+	 *
+	 * @public
+	 */
+	readonly isAndroid: boolean
+
 	/**
 	 * The current HTML element containing the editor.
 	 *
diff --git a/packages/editor/src/lib/hooks/useCoarsePointer.ts b/packages/editor/src/lib/hooks/useCoarsePointer.ts
index 01a90535e..73cbb17ff 100644
--- a/packages/editor/src/lib/hooks/useCoarsePointer.ts
+++ b/packages/editor/src/lib/hooks/useCoarsePointer.ts
@@ -4,6 +4,13 @@ import { useEditor } from './useEditor'
 export function useCoarsePointer() {
 	const editor = useEditor()
 	useEffect(() => {
+		// This is a workaround for a Firefox bug where we don't correctly
+		// detect coarse VS fine pointer. For now, let's assume that you have a fine
+		// pointer if you're on Firefox on desktop.
+		if (editor.isFirefox && !editor.isAndroid && !editor.isIos) {
+			editor.isCoarsePointer = false
+			return
+		}
 		if (window.matchMedia) {
 			const mql = window.matchMedia('(pointer: coarse)')
 			const handler = () => {