feat: Add cursor style user preference (#4199)

* feat: Add cursor style user preference

* Remove headings for now

shared/editor/components/Styles.ts

@@ -347,7 +347,7 @@ h6:not(.placeholder):before {
   display: inline-block;
   color: ${props.theme.text};
   opacity: .75;
-  cursor: pointer;
+  cursor: var(--pointer);
   background: none;
   outline: none;
   border: 0;
@@ -673,7 +673,7 @@ ul.checkbox_list li::before {
 
 ul.checkbox_list li .checkbox {
   display: inline-block;
-  cursor: pointer;
+  cursor: var(--pointer);
   pointer-events: ${
     props.readOnly && !props.readOnlyWriteCheckboxes ? "none" : "initial"
   };
@@ -797,7 +797,7 @@ mark {
     font-weight: 500;
     text-decoration: none;
     flex-shrink: 0;
-    cursor: pointer;
+    cursor: var(--pointer);
     user-select: none;
     appearance: none !important;
     padding: 6px 8px;
@@ -1230,7 +1230,7 @@ table {
 
   &:hover,
   &:focus {
-    cursor: pointer;
+    cursor: var(--pointer);
     color: ${props.theme.text};
     background: ${props.theme.secondaryBackground};
   }

shared/editor/nodes/Image.tsx

@@ -551,7 +551,7 @@ const Button = styled.button`
   width: 24px;
   height: 24px;
   display: inline-block;
-  cursor: pointer;
+  cursor: var(--pointer);
   opacity: 0;
   transition: opacity 100ms ease-in-out;
 

shared/i18n/locales/en_US/translation.json

@@ -696,6 +696,8 @@
   "Delete account": "Delete account",
   "Language": "Language",
   "Choose the interface language. Community translations are accepted though our <2>translation portal</2>.": "Choose the interface language. Community translations are accepted though our <2>translation portal</2>.",
+  "Use pointer cursor": "Use pointer cursor",
+  "Show a hand cursor when hovering over interactive elements.": "Show a hand cursor when hovering over interactive elements.",
   "Remember previous location": "Remember previous location",
   "Automatically return to the document you were last viewing when the app is re-opened.": "Automatically return to the document you were last viewing when the app is re-opened.",
   "You may delete your account at any time, note that this is unrecoverable": "You may delete your account at any time, note that this is unrecoverable",

shared/styles/globals.ts

@@ -2,7 +2,9 @@ import { createGlobalStyle } from "styled-components";
 import styledNormalize from "styled-normalize";
 import { breakpoints, depths } from ".";
 
-export default createGlobalStyle`
+type Props = { useCursorPointer?: boolean };
+
+export default createGlobalStyle<Props>`
   ${styledNormalize}
 
   * {
@@ -17,6 +19,7 @@ export default createGlobalStyle`
     padding: 0;
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
+    --pointer: ${(props) => (props.useCursorPointer ? "pointer" : "default")};
   }
 
   body,

shared/types.ts

@@ -46,6 +46,7 @@ export type IntegrationSettings<T> = T extends IntegrationType.Embed
 
 export enum UserPreference {
   RememberLastPath = "rememberLastPath",
+  UseCursorPointer = "useCursorPointer",
 }
 
 export type UserPreferences = { [key in UserPreference]?: boolean };