diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.cljs index cd8d70a87b..ecf5374f28 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/v3_editor.cljs @@ -215,9 +215,9 @@ keeps the caret cell size. macOS vertical characters retain nonempty screen bounds so its native IME can anchor to them. In vertical text the surface (`vertical-rl`, `line-height: 1`) aligns its caret cell with the - text column on macOS, except in Safari. Safari has been observed to show - horizontal candidates for vertical text, so it keeps the surface right - of the column, like other platforms whose windows open below the caret. + text column on Windows and on macOS outside Safari. Safari has been observed + to show horizontal candidates for vertical text, so it keeps the surface + right of the column, like Linux where candidates open below the caret. `origin` holds the pointer overlay's top-left and width, in the same page space as the caret rect." @@ -241,8 +241,9 @@ ime-surface-collapse) ")")) ;; vertical-rl puts the DOM caret in the surface's rightmost cell. ;; Safari's horizontal candidate window needs an anchor beside - ;; the column. Chrome and Firefox use the column itself on macOS. - (let [right (if (and macos-vertical? (not (cf/check-browser? :safari))) + ;; the column. Windows and non-Safari macOS use the column itself. + (let [right (if (or (cf/check-platform? :windows) + (and macos-vertical? (not (cf/check-browser? :safari)))) (+ x width) (+ x (* 2.15 width)))] (set! (.-left style) (dm/str (- right (:x origin) (:width origin)) "px")))) diff --git a/frontend/test/frontend_tests/render_wasm/texts_test.cljs b/frontend/test/frontend_tests/render_wasm/texts_test.cljs index de42a8d277..ba9f87db8e 100644 --- a/frontend/test/frontend_tests/render_wasm/texts_test.cljs +++ b/frontend/test/frontend_tests/render_wasm/texts_test.cljs @@ -235,11 +235,22 @@ ys (map #(js/Math.floor (+ 180 (* % step))) (range 81))] (t/is (every? pos? (map - (rest ys) ys)))))) -(t/deftest ^:async linux-and-windows-vertical-ime-anchor-stays-right-of-the-text-column - (doseq [platform [:linux :windows] - browser [:chrome :firefox :safari]] +(t/deftest ^:async windows-vertical-ime-anchor-matches-the-text-column + (doseq [width [12 24 72] + browser [:chrome :edge :firefox]] + (let [rect {:x 400 :y 180 :width width :height 1} + result (await (ime-surface-style :windows true rect 1 browser))] + ;; Windows opens vertical candidates to the left of the composition + ;; range. Keep that range in the text column so candidates clear it. + (t/is (= (+ (:x rect) width) (:right result))) + (t/is (= (:y rect) (:top result))) + (t/is (= "vertical-rl" (:writing-mode result))) + (t/is (= "scaleY(0.001)" (:transform result)))))) + +(t/deftest ^:async linux-vertical-ime-anchor-stays-right-of-the-text-column + (doseq [browser [:chrome :firefox :safari]] (let [rect {:x 400 :y 180 :width 24 :height 1} - result (await (ime-surface-style platform true rect 1 browser))] + result (await (ime-surface-style :linux true rect 1 browser))] ;; vertical-rl places the DOM caret in the rightmost cell of the surface. (t/is (> (- (:right result) (:width rect)) (+ (:x rect) (:width rect)))) (t/is (= (:y rect) (:top result)))