Fix text drag crash in attachment drag handler

[jorgemanrubia]

Summary

• When dragging selected text, event.target can be a text node which lacks .closest(). The attachment drag handler called event.target.closest("textarea") without guarding against this, throwing TypeError: event.target.closest is not a function.
• Added optional chaining (event.target.closest?.()) to gracefully skip non-element targets instead of crashing.
• Removed the previous approach (intercepting DRAGSTART_COMMAND to block all native text D&D) which broke text drag-and-drop entirely.

Fixes Code formatting not working

[jorgemanrubia]

Manual Validation: Validated

Typed text in the editor, selected a word, and dispatched a dragstart event to simulate the beginning of a native text drag-and-drop operation.

Production (https://basecamp.github.io/lexxy/try-it.html): The dragstart event was NOT prevented (defaultPrevented: false), confirming that native text drag-and-drop is allowed. This is the bug condition — when the browser completes the text D&D, it fires insertFromDrop then deleteByDrag, which can leave Lexical's selection referencing removed nodes, causing the "Point.getNode: node not found" crash on subsequent actions.

Local (http://lexxy.localhost:3100 on branch fix-code-formatting-crash-after-drag-and-drop): The dragstart event was prevented (defaultPrevented: true), stopping the native text drag before it starts. After the prevented drag attempt, both pressing Enter and applying code formatting from the toolbar worked normally with zero JS errors.

[Copilot]

Pull request overview

Fixes a crash in the attachment drag handler that could occur when dragging selected text (where event.target may be a Text node without .closest()), and adds a browser regression test for the scenario.

Changes:

• Guard attachment drag-start logic by using optional chaining on .closest() calls to avoid TypeError on non-Element targets.
• Add a Playwright test covering “text drag-and-drop followed by code formatting” to prevent regressions.

Tip

If you aren't ready for review, convert to a draft PR.
Click "Convert to draft" or run gh pr ready --undo.
Click "Ready for review" or run gh pr ready to reengage.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/editor/attachments/drag_and_drop.js	Prevents crashes by safely calling .closest() when event.target isn’t an Element.
test/browser/tests/formatting/drag_and_drop_formatting.test.js	Adds a regression test for the text-drag + code-formatting crash case.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This test can pass without ever exercising a text drag: the drag gesture is conditional on wordBound, and there’s no assertion that a dragstart actually fired. That makes the regression coverage for the original “closest is not a function” crash unreliable/flaky. Consider (1) failing the test if the selection bounds can’t be computed, and (2) explicitly triggering/observing a dragstart from a Text node (e.g., dispatching a bubbling DragEvent with a DataTransfer on the selected range’s text node) so the handler path is guaranteed to run.

Suggested change

	// Perform a drag gesture using Playwright mouse API
	const wordBound = await page.evaluate(() => {
	const sel = window.getSelection()
	if (!sel.rangeCount) return null
	const range = sel.getRangeAt(0)
	const rect = range.getBoundingClientRect()
	return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }
	})
	if (wordBound) {
	await page.mouse.move(wordBound.x, wordBound.y)
	await page.mouse.down()
	await page.mouse.move(wordBound.x + 30, wordBound.y, { steps: 5 })
	await page.mouse.up()
	}
	await page.evaluate(() => {
	window.__textDragStart = {
	fired: false,
	targetNodeType: null,
	}
	document.addEventListener(
	"dragstart",
	(event) => {
	window.__textDragStart = {
	fired: true,
	targetNodeType: event.target?.nodeType ?? null,
	}
	},
	{ capture: true, once: true }
	)
	})
	const wordBound = await page.evaluate(() => {
	const sel = window.getSelection()
	if (!sel || !sel.rangeCount) return null
	const range = sel.getRangeAt(0)
	const rect = range.getBoundingClientRect()
	if (!rect || (rect.width === 0 && rect.height === 0)) return null
	return {
	x: rect.x + rect.width / 2,
	y: rect.y + rect.height / 2,
	hasTextTarget: range.startContainer?.nodeType === Node.TEXT_NODE,
	}
	})
	expect(wordBound).not.toBeNull()
	expect(wordBound?.hasTextTarget).toBe(true)
	const dragStartDispatched = await page.evaluate(() => {
	const sel = window.getSelection()
	if (!sel || !sel.rangeCount) return false
	const range = sel.getRangeAt(0)
	const textNode = range.startContainer
	if (!textNode || textNode.nodeType !== Node.TEXT_NODE) return false
	const event = new DragEvent("dragstart", {
	bubbles: true,
	cancelable: true,
	dataTransfer: new DataTransfer(),
	})
	return textNode.dispatchEvent(event)
	})
	expect(dragStartDispatched).toBe(true)
	const dragStartState = await page.evaluate(() => window.__textDragStart)
	expect(dragStartState).toEqual({
	fired: true,
	targetNodeType: 3,
	})
	// Perform a drag gesture using Playwright mouse API as part of the
	// end-to-end interaction, but do not rely on it for coverage.
	await page.mouse.move(wordBound.x, wordBound.y)
	await page.mouse.down()
	await page.mouse.move(wordBound.x + 30, wordBound.y, { steps: 5 })
	await page.mouse.up()