newline at top funtun added

src/components/TaskEditor.tsx

@@ -93,7 +93,10 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
                     "[&_li[data-type='taskItem']]:flex [&_li[data-type='taskItem']]:items-start",
                     "[&_li[data-type='taskItem']>label]:mr-3 [&_li[data-type='taskItem']>label]:mt-1 [&_li[data-type='taskItem']>label]:select-none",
                     "[&_li[data-type='taskItem']>label>input]:w-5 [&_li[data-type='taskItem']>label>input]:h-5 [&_li[data-type='taskItem']>label>input]:cursor-pointer",
-                    "[&_li[data-type='taskItem']>div]:flex-1 [&_li[data-type='taskItem']>div]:min-h-[1.5rem]",
+                    "[&_li[data-type='taskItem']>div]:flex-1 [&_li[data-type='taskItem']>div]:min-w-0 [&_li[data-type='taskItem']>div]:min-h-[1.5rem]",
+                    "[&_li[data-type='taskItem']>div>p]:min-h-[1.5rem] [&_li[data-type='taskItem']>div>p]:m-0 [&_li[data-type='taskItem']>div>p]:w-full",
+                    "[&_li[data-type='taskItem']>div>p:empty]:after:content-['\\200B'] [&_li[data-type='taskItem']>div>p:empty]:after:inline-block",
+                    "[&_li[data-type='taskItem']>div>p>br]:after:content-['\\200B'] [&_li[data-type='taskItem']>div>p>br]:after:inline-block", // if tiptap adds br
                     props.class
                 ),
             },
@@ -118,15 +121,29 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
     });
 
     return (
-        <>
+        <div class="relative w-full h-full flex flex-col">
+            <div
+                class="absolute -top-4 -left-4 -right-4 h-8 cursor-pointer group flex items-center justify-center z-10"
+                onClick={() => {
+                    const e = editor();
+                    if (!e) return;
+                    e.chain().insertContentAt(0, '<p></p>').focus('start').run();
+                }}
+                title="Add empty line at the top"
+            >
+                <span class="opacity-0 group-hover:opacity-100 text-[10px] uppercase font-bold text-muted-foreground tracking-widest transition-opacity mt-2">
+                    Click to insert newline above
+                </span>
+            </div>
             <div
                 ref={editorRef}
-                class="w-full cursor-text"
+                class="w-full flex-1 cursor-text"
                 onClick={(e) => {
                     const target = e.target as HTMLElement;
                     if (target.tagName.toLowerCase() === 'img') {
                         setFullscreenImage((target as HTMLImageElement).src);
-                    } else {
+                    } else if (e.target === editorRef) {
+                        // Focus end if clicking on padding below content
                         editor()?.chain().focus().run();
                     }
                 }}
@@ -205,6 +222,6 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
                     </div>
                 </div>
             </Show>
-        </>
+        </div>
     );
 };