From 319a2185c97299da3345e016d2d8478e61faba29 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 3 Aug 2026 17:31:55 +0200 Subject: [PATCH] :bug: Fix crash on drag-and-drop of selected text in Draft.js editor (#10959) After `Modifier.removeRange` modified the block map, the `targetRange` from the drop event still referenced stale block keys from the pre-removal DOM state, causing `TypeError: Cannot read properties of undefined`. - Added a guarded `moveText` export in `frontend/packages/draft-js/index.js` that validates block keys exist before and after removal. Falls back gracefully when target range references stale keys. - Added a `handle-drop` callback in `frontend/src/app/main/ui/workspace/shapes/text/editor.cljs` that returns "handled" for internal drag operations, preventing Draft.js from calling its default (crash-prone) handler. AI-assisted-by: mimo-v2.5 --- frontend/packages/draft-js/package.json | 2 +- frontend/pnpm-lock.yaml | 10 +++++----- .../src/app/main/ui/workspace/shapes/text/editor.cljs | 8 +++++++- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/frontend/packages/draft-js/package.json b/frontend/packages/draft-js/package.json index ec153b2eac..d71c2bf0cf 100644 --- a/frontend/packages/draft-js/package.json +++ b/frontend/packages/draft-js/package.json @@ -8,7 +8,7 @@ "author": "Andrey Antukh", "license": "MPL-2.0", "dependencies": { - "draft-js": "penpot/draft-js.git#ba3b26ed63a01227a3560e440531b69d79c03f35", + "draft-js": "penpot/draft-js.git#c58ebd9429a6359d72a88cff87e078aaf6fe285d", "immutable": "^5.1.9" }, "peerDependencies": { diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 6459be6e82..16975f3248 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -268,8 +268,8 @@ importers: packages/draft-js: dependencies: draft-js: - specifier: penpot/draft-js.git#ba3b26ed63a01227a3560e440531b69d79c03f35 - version: https://codeload.github.com/penpot/draft-js/tar.gz/ba3b26ed63a01227a3560e440531b69d79c03f35(encoding@0.1.13)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + specifier: penpot/draft-js.git#c58ebd9429a6359d72a88cff87e078aaf6fe285d + version: https://codeload.github.com/penpot/draft-js/tar.gz/c58ebd9429a6359d72a88cff87e078aaf6fe285d(encoding@0.1.13)(react-dom@19.2.8(react@19.2.8))(react@19.2.8) immutable: specifier: ^5.1.9 version: 5.1.9 @@ -2895,8 +2895,8 @@ packages: resolution: {integrity: sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==} engines: {node: '>=20.19.0'} - draft-js@https://codeload.github.com/penpot/draft-js/tar.gz/ba3b26ed63a01227a3560e440531b69d79c03f35: - resolution: {gitHosted: true, integrity: sha512-IN2r8sw36jcH32WPP9eBFXNglirhkFIsqgoKzwwSDxiCbeipumeKXjYB3vw82CxYRwKc+oRTMcZ5jNnCWnmnBw==, tarball: https://codeload.github.com/penpot/draft-js/tar.gz/ba3b26ed63a01227a3560e440531b69d79c03f35} + draft-js@https://codeload.github.com/penpot/draft-js/tar.gz/c58ebd9429a6359d72a88cff87e078aaf6fe285d: + resolution: {gitHosted: true, integrity: sha512-Ji/UoFEm11scM7Zbp1O+7f498Ly5zkGRCJNvxR8BRL0xhqEs1ubgckZdmopjNxi+xjepHopa5hIv9pJTRaQOgg==, tarball: https://codeload.github.com/penpot/draft-js/tar.gz/c58ebd9429a6359d72a88cff87e078aaf6fe285d} version: 0.11.7 peerDependencies: react: '>=0.14.0' @@ -8249,7 +8249,7 @@ snapshots: domelementtype: 3.0.0 domhandler: 6.0.1 - draft-js@https://codeload.github.com/penpot/draft-js/tar.gz/ba3b26ed63a01227a3560e440531b69d79c03f35(encoding@0.1.13)(react-dom@19.2.8(react@19.2.8))(react@19.2.8): + draft-js@https://codeload.github.com/penpot/draft-js/tar.gz/c58ebd9429a6359d72a88cff87e078aaf6fe285d(encoding@0.1.13)(react-dom@19.2.8(react@19.2.8))(react@19.2.8): dependencies: fbjs: 3.0.5(encoding@0.1.13) immutable: 3.8.3 diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs index 237ae71ac0..536febb61b 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -221,7 +221,12 @@ state (-> (ted/insert-text state text style) (handle-change))] (st/emit! (dwt/update-editor-state shape state)))) - "handled")] + "handled") + + handle-drop + (fn [_ _ drag-type] + (when (= drag-type "internal") + "handled"))] (mf/use-layout-effect on-mount) @@ -246,6 +251,7 @@ :handle-return handle-return :strip-pasted-styles true :handle-pasted-text handle-pasted-text + :handle-drop handle-drop :custom-style-fn (partial styles-fn shape) :block-renderer-fn #(render-block % shape) :ref on-editor