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 { }; 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 { 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 { */ 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 = () => {