From ad02c5813b4762c14f8fd7d30c003439ee182869 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Tue, 9 Aug 2022 15:35:04 -0700
Subject: [PATCH] Allow focus on all parts of editor

---
 web/components/editor.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index 3bee8298..635a8c01 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -64,7 +64,7 @@ export function useTextEditor(props: {
         Placeholder.configure({
           placeholder,
           emptyEditorClass:
-            'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0',
+            'before:content-[attr(data-placeholder)] before:text-slate-500 before:float-left before:h-0 cursor-text',
         }),
         CharacterCount.configure({ limit: max }),
         Image,
@@ -168,7 +168,14 @@ export function TextEditor(props: {
                 <span className="sr-only">Embed an iframe</span>
               </button>
             </div>
-            <div className="ml-auto" />
+            {/* Spacer that also focuses editor on click */}
+            <div
+              className="grow cursor-text self-stretch"
+              onMouseDown={() =>
+                editor?.chain().focus('end').createParagraphNear().run()
+              }
+              aria-hidden
+            />
             {children}
           </div>
         </div>