From cef048572a14337f16582f073382c4a157375f43 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 19 Jun 2023 17:27:34 -0400
Subject: [PATCH] fix: Unable to click block action button on full width editor

closes #5444
---
 app/components/Sidebar/components/Toggle.tsx | 36 +++++++++++++++++---
 shared/editor/components/Styles.ts           |  2 --
 shared/styles/depths.ts                      |  1 -
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/app/components/Sidebar/components/Toggle.tsx b/app/components/Sidebar/components/Toggle.tsx
index 24a4c40e0..1d2e24ce0 100644
--- a/app/components/Sidebar/components/Toggle.tsx
+++ b/app/components/Sidebar/components/Toggle.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Arrow from "~/components/Arrow";
+import useEventListener from "~/hooks/useEventListener";
 
 type Props = {
   direction: "left" | "right";
@@ -14,8 +15,26 @@ type Props = {
 const Toggle = React.forwardRef<HTMLButtonElement, Props>(
   ({ direction = "left", onClick, style }: Props, ref) => {
     const { t } = useTranslation();
+    const [hovering, setHovering] = React.useState(false);
+    const positionRef = React.useRef<HTMLDivElement>(null);
+
+    // Not using CSS hover here so that we can disable pointer events on this
+    // div and allow click through to the editor elements behind.
+    useEventListener("mousemove", (event: MouseEvent) => {
+      if (!positionRef.current) {
+        return;
+      }
+
+      const bound = positionRef.current.getBoundingClientRect();
+      const withinBounds =
+        event.clientX >= bound.left && event.clientX <= bound.right;
+      if (withinBounds !== hovering) {
+        setHovering(withinBounds);
+      }
+    });
+
     return (
-      <Positioner style={style}>
+      <Positioner style={style} ref={positionRef} $hovering={hovering}>
         <ToggleButton
           ref={ref}
           $direction={direction}
@@ -56,7 +75,7 @@ export const ToggleButton = styled.button<{ $direction?: "left" | "right" }>`
   }
 `;
 
-export const Positioner = styled.div`
+export const Positioner = styled.div<{ $hovering: boolean }>`
   display: none;
   z-index: 2;
   position: absolute;
@@ -64,11 +83,20 @@ export const Positioner = styled.div`
   bottom: 0;
   right: -30px;
   width: 30px;
+  pointer-events: none;
 
-  &:hover ${ToggleButton}, &:focus-within ${ToggleButton} {
+  &:focus-within ${ToggleButton} {
     opacity: 1;
   }
 
+  ${(props) =>
+    props.$hovering &&
+    css`
+      ${ToggleButton} {
+        opacity: 1;
+      }
+    `}
+
   ${breakpoint("tablet")`
     display: block;
   `}
diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index 167404115..c553d3d27 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -1,7 +1,6 @@
 /* eslint-disable no-irregular-whitespace */
 import { darken, lighten, transparentize } from "polished";
 import styled, { DefaultTheme } from "styled-components";
-import depths from "../../styles/depths";
 
 export type Props = {
   rtl: boolean;
@@ -501,7 +500,6 @@ h6:not(.placeholder):before {
 
 .heading-actions {
   opacity: 0;
-  z-index: ${depths.editorHeadingActions};
   background: ${props.theme.background};
   margin-${props.rtl ? "right" : "left"}: -26px;
   flex-direction: ${props.rtl ? "row-reverse" : "row"};
diff --git a/shared/styles/depths.ts b/shared/styles/depths.ts
index 57393224b..d87360013 100644
--- a/shared/styles/depths.ts
+++ b/shared/styles/depths.ts
@@ -1,7 +1,6 @@
 const depths = {
   header: 800,
   sidebar: 900,
-  editorHeadingActions: 920,
   editorToolbar: 925,
   hoverPreview: 950,
   // Note: editor lightbox is z-index 999