newline at top funtun added

This commit is contained in:
2026-02-28 14:57:43 -06:00
parent 870ecd9052
commit 14ebb21049
+22 -5
View File
@@ -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>
);
};