@tldraw/editor 3.8.0-canary.13edafe3f1e3 → 3.8.0-canary.14f2faba6b93

package/src/lib/hooks/useCanvasEvents.ts

@@ -117,16 +117,28 @@ export function useCanvasEvents() {
 			async function onDrop(e: React.DragEvent<Element>) {
 				preventDefault(e)
 				stopEventPropagation(e)
-				if (!e.dataTransfer?.files?.length) return
 
-				const files = Array.from(e.dataTransfer.files)
+				if (e.dataTransfer?.files?.length) {
+					const files = Array.from(e.dataTransfer.files)
 
-				await editor.putExternalContent({
-					type: 'files',
-					files,
-					point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
-					ignoreParent: false,
-				})
+					await editor.putExternalContent({
+						type: 'files',
+						files,
+						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						ignoreParent: false,
+					})
+					return
+				}
+
+				const url = e.dataTransfer.getData('url')
+				if (url) {
+					await editor.putExternalContent({
+						type: 'url',
+						url,
+						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+					})
+					return
+				}
 			}
 
 			function onClick(e: React.MouseEvent) {

package/src/lib/hooks/useDocumentEvents.ts

@@ -2,7 +2,7 @@ import { useValue } from '@tldraw/state-react'
 import { useEffect } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
-import { preventDefault, stopEventPropagation } from '../utils/dom'
+import { activeElementShouldCaptureKeys, preventDefault, stopEventPropagation } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
@@ -274,15 +274,6 @@ export function useDocumentEvents() {
 	}, [editor, container, isAppFocused])
 }
 
-const INPUTS = ['input', 'select', 'button', 'textarea']
-
 function areShortcutsDisabled(editor: Editor) {
-	const { activeElement } = document
-
-	return (
-		editor.menus.hasOpenMenus() ||
-		(activeElement &&
-			(activeElement.getAttribute('contenteditable') ||
-				INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1))
-	)
+	return editor.menus.hasOpenMenus() || activeElementShouldCaptureKeys()
 }

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -11,6 +11,13 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	useEffect(() => {
 		function onWheel(e: WheelEvent) {
 			if ((e as any).isSpecialRedispatchedEvent) return
+
+			// if the element is scrollable, don't redispatch the event
+			const elm = ref.current
+			if (elm && elm.scrollHeight > elm.clientHeight) {
+				return
+			}
+
 			preventDefault(e)
 			const cvs = container.querySelector('.tl-canvas')
 			if (!cvs) return

package/src/lib/options.ts

@@ -29,7 +29,6 @@ export interface TldrawOptions {
 	readonly dragDistanceSquared: number
 	readonly defaultSvgPadding: number
 	readonly cameraSlideFriction: number
-	readonly maxPointsPerDrawShape: number
 	readonly gridSteps: readonly {
 		readonly min: number
 		readonly mid: number
@@ -66,11 +65,6 @@ export interface TldrawOptions {
 	 * external context providers. By default, this is `React.Fragment`.
 	 */
 	readonly exportProvider: ComponentType<{ children: React.ReactNode }>
-	/**
-	 * How should the note shape resize? By default it does not resize (except automatically based on its text content),
-	 * but you can set it to be user-resizable using scale.
-	 */
-	readonly noteShapeResizeMode: 'none' | 'scale'
 	/**
 	 * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
 	 */
@@ -90,7 +84,6 @@ export const defaultTldrawOptions = {
 	dragDistanceSquared: 16, // 4 squared
 	defaultSvgPadding: 32,
 	cameraSlideFriction: 0.09,
-	maxPointsPerDrawShape: 500,
 	gridSteps: [
 		{ min: -1, mid: 0.15, step: 64 },
 		{ min: 0.05, mid: 0.375, step: 16 },
@@ -120,6 +113,5 @@ export const defaultTldrawOptions = {
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,
 	exportProvider: Fragment,
-	noteShapeResizeMode: 'none',
 	enableToolbarKeyboardShortcuts: true,
 } as const satisfies TldrawOptions

package/src/lib/utils/dom.ts

@@ -90,3 +90,15 @@ export const setStyleProperty = (
 	if (!elm) return
 	elm.style.setProperty(property, value as string)
 }
+
+const INPUTS = ['input', 'select', 'button', 'textarea']
+
+/** @internal */
+export function activeElementShouldCaptureKeys() {
+	const { activeElement } = document
+	return !!(
+		activeElement &&
+		(activeElement.getAttribute('contenteditable') ||
+			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
+	)
+}

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.8.0-canary.13edafe3f1e3'
+export const version = '3.8.0-canary.14f2faba6b93'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-02-05T15:53:12.008Z',
-	patch: '2025-02-05T15:53:12.008Z',
+	minor: '2025-02-12T14:18:01.831Z',
+	patch: '2025-02-12T14:18:01.831Z',
 }