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 35e211c81..9c879aa7e 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs @@ -142,16 +142,30 @@ (fn [event state] (st/emit! (dwt/update-editor-state shape (ted/editor-split-block state))) "handled")) + + on-pointer-down + (mf/use-callback + (fn [event] + (let [target (dom/get-target event) + closest (.closest ^js target "foreignObject")] + ;; Capture mouse pointer to detect the movements even if cursor + ;; leaves the viewport or the browser itself + ;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture + (when closest + (dom/stop-propagation event) + (.setPointerCapture closest (.-pointerId event)))))) ] (mf/use-layout-effect on-mount) - [:div.text-editor {:ref self-ref - :style {:cursor cur/text} - :class (dom/classnames - :align-top (= (:vertical-align content "top") "top") - :align-center (= (:vertical-align content) "center") - :align-bottom (= (:vertical-align content) "bottom"))} + [:div.text-editor + {:ref self-ref + :style {:cursor cur/text} + :on-pointer-down on-pointer-down + :class (dom/classnames + :align-top (= (:vertical-align content "top") "top") + :align-center (= (:vertical-align content) "center") + :align-bottom (= (:vertical-align content) "bottom"))} [:> draft/Editor {:on-change on-change :on-blur on-blur diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index a9aeca2be..3a3b4de04 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -434,14 +434,11 @@ on-pointer-down (mf/use-callback (fn [event] - (let [target (dom/get-target event) - closest (.closest target "foreignObject")] + (let [target (dom/get-target event)] ;; Capture mouse pointer to detect the movements even if cursor ;; leaves the viewport or the browser itself ;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture - (if closest - (.setPointerCapture closest (.-pointerId event)) - (.setPointerCapture target (.-pointerId event)))))) + (.setPointerCapture target (.-pointerId event))))) on-pointer-up (mf/use-callback