From 37a29934ec88cb50db4f1497aa7d5f046f4a2888 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 22 Jan 2022 18:25:06 -0800
Subject: [PATCH] fix: Reduce clickable area on star in document header, make
 entire line clickable to focus title

closes #2966
---
 app/components/ContentEditable.tsx               |  4 +++-
 app/scenes/Document/components/EditableTitle.tsx | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/components/ContentEditable.tsx b/app/components/ContentEditable.tsx
index 1ec8e4d58..86729413a 100644
--- a/app/components/ContentEditable.tsx
+++ b/app/components/ContentEditable.tsx
@@ -5,6 +5,7 @@ import styled from "styled-components";
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
   disabled?: boolean;
   readOnly?: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
   onChange?: (text: string) => void;
   onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
@@ -36,6 +37,7 @@ const ContentEditable = React.forwardRef(
       placeholder,
       readOnly,
       dir,
+      onClick,
       ...rest
     }: Props,
     forwardedRef: React.RefObject<HTMLSpanElement>
@@ -80,7 +82,7 @@ const ContentEditable = React.forwardRef(
     }, [value, ref]);
 
     return (
-      <div className={className} dir={dir}>
+      <div className={className} dir={dir} onClick={onClick}>
         <Content
           ref={ref}
           contentEditable={!disabled && !readOnly}
diff --git a/app/scenes/Document/components/EditableTitle.tsx b/app/scenes/Document/components/EditableTitle.tsx
index 5ca621924..e3b162423 100644
--- a/app/scenes/Document/components/EditableTitle.tsx
+++ b/app/scenes/Document/components/EditableTitle.tsx
@@ -48,6 +48,10 @@ const EditableTitle = React.forwardRef(
     const normalizedTitle =
       !value && readOnly ? document.titleWithDefault : value;
 
+    const handleClick = React.useCallback(() => {
+      ref.current?.focus();
+    }, [ref]);
+
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent) => {
         if (event.key === "Enter") {
@@ -112,6 +116,7 @@ const EditableTitle = React.forwardRef(
 
     return (
       <Title
+        onClick={handleClick}
         onChange={onChange}
         onKeyDown={handleKeyDown}
         placeholder={
@@ -139,7 +144,14 @@ const EditableTitle = React.forwardRef(
 const StarButton = styled(Star)`
   position: relative;
   top: 4px;
-  left: 4px;
+  left: 10px;
+  overflow: hidden;
+  width: 24px;
+
+  svg {
+    position: relative;
+    left: -4px;
+  }
 `;
 
 type TitleProps = {
@@ -161,6 +173,7 @@ const Title = styled(ContentEditable)<TitleProps>`
   border: 0;
   padding: 0;
   resize: none;
+  cursor: text;
 
   > span {
     outline: none;