From cbbf694c38371e6795e5e2d09a4a9a6ae7191a4e Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Tue, 7 Jan 2025 09:27:08 +0300
Subject: [PATCH] feat: Make canvas cursor style compatible across all browsers
 (#4727)

## Description

Safari does not change the cursor based on
`-webkit-user-select: none;`

We need to explicitly set `cursor`

ref #1818

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 apps/builder/app/canvas/shared/styles.ts | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/canvas/shared/styles.ts b/apps/builder/app/canvas/shared/styles.ts
index 5f7bfb77be..6ac01ac403 100644
--- a/apps/builder/app/canvas/shared/styles.ts
+++ b/apps/builder/app/canvas/shared/styles.ts
@@ -156,15 +156,34 @@ const helperStyles = [
   // When double clicking into an element to edit text, it should not select the word.
   `[${idAttribute}] {
     user-select: none;
+    /* Safari */
+    -webkit-user-select: none;
+    cursor: default;
   }`,
+  `
+  [${idAttribute}][contenteditable] {
+    /* Safari */
+    cursor: initial;
+  }
+  `,
+
   ...helperStylesShared,
 ];
 
 // Find all editable elements and set cursor text inside
 const helperStylesContentEdit = [
   `[${idAttribute}] {
-  user-select: none;
-}`,
+    user-select: none;
+    /* Safari */
+    -webkit-user-select: none;
+    cursor: default;
+  }`,
+  `
+  [${idAttribute}][contenteditable] {
+    /* Safari */
+    cursor: initial;
+  }
+  `,
   ...helperStylesShared,
 ];