471 lines
21 KiB
TypeScript
471 lines
21 KiB
TypeScript
import { type Component, createEffect, untrack, createSignal, Show } from "solid-js";
|
|
import { createTiptapEditor } from "solid-tiptap";
|
|
import StarterKit from "@tiptap/starter-kit";
|
|
import Placeholder from "@tiptap/extension-placeholder";
|
|
import TaskList from "@tiptap/extension-task-list";
|
|
import { CustomTaskItem } from "./CustomTaskItem";
|
|
import { CustomImage as Image } from "@/lib/extensions/image";
|
|
import Underline from "@tiptap/extension-underline";
|
|
import { X } from "lucide-solid";
|
|
import { cn } from "@/lib/utils";
|
|
import { store, activeTaskId, activeNoteId, uploadTaskAttachment, uploadNoteAttachment } from "@/store";
|
|
import { convertImageToWebpFile } from "@/lib/utils";
|
|
import { toast } from "solid-sonner";
|
|
import type { Editor } from "@tiptap/core";
|
|
|
|
import { SlashCommands } from "@/lib/slash-command";
|
|
import { suggestion } from "@/lib/slash-renderer";
|
|
import { MobileIndent } from "@/lib/mobile-indent";
|
|
|
|
// New Extensions
|
|
import { Link } from "@tiptap/extension-link";
|
|
import { Highlight } from "@tiptap/extension-highlight";
|
|
import { TextAlign } from "@tiptap/extension-text-align";
|
|
import { Table } from "@tiptap/extension-table";
|
|
import { TableRow } from "@tiptap/extension-table-row";
|
|
import { TableCell } from "@tiptap/extension-table-cell";
|
|
import { TableHeader } from "@tiptap/extension-table-header";
|
|
import { Typography } from "@tiptap/extension-typography";
|
|
import { Dropcursor } from "@tiptap/extension-dropcursor";
|
|
import { Mention } from "@tiptap/extension-mention";
|
|
import { userSuggestion, noteSuggestion } from "@/lib/mention-suggestion";
|
|
import { FileViewer } from "@/lib/extensions/file-viewer";
|
|
import { Video } from "@/lib/extensions/video";
|
|
import { FileAttachment } from "@/lib/extensions/file-attachment";
|
|
import { MediaUpload } from "@/lib/extensions/media-upload";
|
|
|
|
interface TaskEditorProps {
|
|
content?: string;
|
|
onUpdate: (html: string) => void;
|
|
onEditorReady?: (editor: any) => void;
|
|
editable?: boolean;
|
|
onUserMention?: (userName: string) => void;
|
|
onNoteOpen?: (noteId: string) => void;
|
|
class?: string;
|
|
}
|
|
|
|
export const TaskEditor: Component<TaskEditorProps> = (props) => {
|
|
let editorRef: HTMLDivElement | undefined;
|
|
const [fullscreenImage, setFullscreenImage] = createSignal<string | null>(null);
|
|
const [zoomScale, setZoomScale] = createSignal(1);
|
|
const [zoomOffset, setZoomOffset] = createSignal({ x: 0, y: 0 });
|
|
const [isDragging, setIsDragging] = createSignal(false);
|
|
const [dragStart, setDragStart] = createSignal({ x: 0, y: 0 });
|
|
const [previewNote, setPreviewNote] = createSignal<{ noteId: string, x: number, y: number } | null>(null);
|
|
|
|
const resetZoom = () => {
|
|
setZoomScale(1);
|
|
setZoomOffset({ x: 0, y: 0 });
|
|
};
|
|
|
|
const handleFileUploads = async (editor: Editor, files: File[]) => {
|
|
const taskId = activeTaskId();
|
|
const noteId = activeNoteId();
|
|
|
|
if (!taskId && !noteId) {
|
|
toast.error("Cannot upload files outside of a task or note.");
|
|
return;
|
|
}
|
|
|
|
for (const file of files) {
|
|
const isImage = file.type.startsWith('image/');
|
|
const isVideo = file.type.startsWith('video/');
|
|
|
|
toast.promise(
|
|
(async () => {
|
|
let fileToUpload = file;
|
|
if (isImage) {
|
|
fileToUpload = await convertImageToWebpFile(file);
|
|
}
|
|
|
|
if (taskId) {
|
|
return uploadTaskAttachment(taskId, fileToUpload);
|
|
} else {
|
|
return uploadNoteAttachment(noteId!, fileToUpload);
|
|
}
|
|
})(),
|
|
{
|
|
loading: `Uploading ${file.name}...`,
|
|
success: ({ url, filename }) => {
|
|
if (isImage) {
|
|
// @ts-ignore
|
|
editor.chain().focus().setImage({ src: url, filename }).run();
|
|
} else if (isVideo) {
|
|
editor.chain().focus().setVideo({ src: url, filename }).run();
|
|
} else {
|
|
editor.chain().focus().insertFileAttachment({ src: url, filename, filesize: file.size.toString() }).run();
|
|
}
|
|
return `${file.name} uploaded.`;
|
|
},
|
|
error: `Failed to upload ${file.name}.`
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
const editor = createTiptapEditor(() => ({
|
|
element: editorRef!,
|
|
extensions: [
|
|
StarterKit.configure({
|
|
heading: {
|
|
levels: [1, 2, 3],
|
|
},
|
|
}),
|
|
Placeholder.configure({
|
|
placeholder: ({ editor }) => {
|
|
// Only show placeholder if first node is a paragraph and doc is empty/short
|
|
if (editor.state.doc.childCount > 1 || (editor.state.doc.firstChild && editor.state.doc.firstChild.type.name !== 'paragraph')) {
|
|
return "";
|
|
}
|
|
return "Type '/' for commands or start writing...";
|
|
},
|
|
emptyEditorClass: "is-editor-empty before:content-[attr(data-placeholder)] before:text-muted-foreground before:float-left before:pointer-events-none before:h-0",
|
|
}),
|
|
TaskList.configure({
|
|
HTMLAttributes: {
|
|
class: "not-prose pl-2",
|
|
},
|
|
}),
|
|
CustomTaskItem.configure({
|
|
nested: true,
|
|
HTMLAttributes: {
|
|
class: "flex gap-2 items-start my-1",
|
|
},
|
|
}),
|
|
SlashCommands.configure({
|
|
suggestion,
|
|
}),
|
|
Image.configure({
|
|
HTMLAttributes: {
|
|
class: "rounded-lg border border-border max-w-full h-auto",
|
|
},
|
|
}),
|
|
Underline.configure({}),
|
|
MobileIndent.configure({}),
|
|
Link.configure({
|
|
autolink: true,
|
|
openOnClick: false,
|
|
HTMLAttributes: {
|
|
class: "text-primary underline underline-offset-4 cursor-pointer hover:text-primary/80 transition-colors",
|
|
},
|
|
}),
|
|
Highlight.configure({
|
|
multicolor: true,
|
|
}),
|
|
TextAlign.configure({
|
|
types: ["heading", "paragraph"],
|
|
}),
|
|
Table.configure({
|
|
resizable: true,
|
|
allowTableNodeSelection: true,
|
|
}),
|
|
TableRow,
|
|
TableHeader,
|
|
TableCell,
|
|
Typography.configure({
|
|
openDoubleQuote: false,
|
|
closeDoubleQuote: false,
|
|
openSingleQuote: false,
|
|
closeSingleQuote: false,
|
|
}),
|
|
Mention.configure({
|
|
HTMLAttributes: {
|
|
class: "mention bg-primary/10 text-primary font-medium py-0.5 px-1 rounded-md border border-primary/20",
|
|
},
|
|
suggestion: {
|
|
...userSuggestion,
|
|
command: ({ editor, range, props: mentionProps }: any) => {
|
|
editor
|
|
.chain()
|
|
.focus()
|
|
.insertContentAt(range, [
|
|
{
|
|
type: "mention",
|
|
attrs: mentionProps,
|
|
},
|
|
{
|
|
type: "text",
|
|
text: " ",
|
|
},
|
|
])
|
|
.run();
|
|
|
|
if (mentionProps.label) {
|
|
props.onUserMention?.(mentionProps.label);
|
|
}
|
|
}
|
|
},
|
|
}),
|
|
Mention.extend({
|
|
name: "noteMention",
|
|
}).configure({
|
|
suggestion: {
|
|
...noteSuggestion,
|
|
char: "#",
|
|
},
|
|
HTMLAttributes: {
|
|
class: "note-mention bg-muted text-muted-foreground font-medium py-0.5 px-1 rounded-md border border-border italic cursor-pointer hover:bg-muted/80",
|
|
},
|
|
}),
|
|
Dropcursor.configure({
|
|
color: "var(--primary)",
|
|
width: 2,
|
|
}),
|
|
FileViewer,
|
|
Video,
|
|
FileAttachment,
|
|
MediaUpload,
|
|
],
|
|
// Use untrack so the editor doesn't re-initialize when props.content changes
|
|
content: untrack(() => props.content) || "",
|
|
editable: props.editable ?? true,
|
|
onUpdate: ({ editor }) => {
|
|
props.onUpdate(editor.getHTML());
|
|
},
|
|
editorProps: {
|
|
handlePaste: (_view, event) => {
|
|
const items = Array.from(event.clipboardData?.items || []);
|
|
const files = items
|
|
.map(item => item.getAsFile())
|
|
.filter((file): file is File => file !== null);
|
|
|
|
if (files.length > 0) {
|
|
event.preventDefault();
|
|
handleFileUploads(editor()!, files);
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
handleDrop: (_view, event, _slice, moved) => {
|
|
if (!moved && event.dataTransfer?.files?.length) {
|
|
event.preventDefault();
|
|
handleFileUploads(editor()!, Array.from(event.dataTransfer.files));
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
attributes: {
|
|
class: cn(
|
|
"prose prose-sm dark:prose-invert max-w-none focus:outline-none min-h-[150px]",
|
|
"prose-headings:font-semibold prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg",
|
|
"prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1",
|
|
"prose-pre:bg-muted prose-pre:rounded-lg prose-pre:p-4",
|
|
"prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:cursor-zoom-in",
|
|
// New Extension styles
|
|
"prose-a:text-primary prose-a:underline prose-a:underline-offset-4",
|
|
"prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic",
|
|
"[&_table]:border-collapse [&_table]:w-full [&_table]:my-4",
|
|
"[&_th]:border [&_th]:border-border [&_th]:bg-muted/50 [&_th]:p-2 [&_th]:text-left [&_th]:font-bold",
|
|
"[&_td]:border [&_td]:border-border [&_td]:p-2 [&_td]:align-top",
|
|
"[&_mark]:bg-primary/20 dark:[&_mark]:bg-primary/40 [&_mark]:text-foreground dark:[&_mark]:text-primary-foreground [&_mark]:px-0.5 [&_mark]:rounded-sm",
|
|
"[&_.mention]:mx-0.5 [&_.note-mention]:mx-0.5",
|
|
// Custom Task List Styling
|
|
"[&_ul[data-type='taskList']]:list-none [&_ul[data-type='taskList']]:p-0",
|
|
"[&_li[data-type='taskItem']]:flex [&_li[data-type='taskItem']]:items-start",
|
|
"[&_.tiptap-task-content]:flex-1 [&_.tiptap-task-content]:min-w-0 [&_.tiptap-task-content]:min-h-[1.5rem]",
|
|
"[&_.tiptap-task-content>p]:min-h-[1.5rem] [&_.tiptap-task-content>p]:m-0 [&_.tiptap-task-content>p]:w-full",
|
|
"[&_.tiptap-task-content>p:empty]:after:content-['\\200B'] [&_.tiptap-task-content>p:empty]:after:inline-block",
|
|
"[&_.tiptap-task-content>p>br]:after:content-['\\200B'] [&_.tiptap-task-content>p>br]:after:inline-block", // if tiptap adds br
|
|
"[&>.file-viewer-wrapper:first-child]:mt-0 [&>.file-viewer-wrapper:first-child]:border-t-0 [&>.file-viewer-wrapper:first-child]:border-x-0 [&>.file-viewer-wrapper:first-child]:rounded-none [&>.file-viewer-wrapper:first-child]:bg-transparent [&>.file-viewer-wrapper:first-child]:h-[80vh]",
|
|
props.class
|
|
),
|
|
},
|
|
},
|
|
}));
|
|
|
|
// Expose editor to parent
|
|
createEffect(() => {
|
|
const e = editor();
|
|
if (e && props.onEditorReady) {
|
|
props.onEditorReady(e);
|
|
}
|
|
});
|
|
|
|
// Sync content updates from outside if needed (but only if NOT focused to avoid jumps)
|
|
createEffect(() => {
|
|
const content = props.content;
|
|
const e = editor();
|
|
if (e && content !== undefined && !e.isFocused && content !== e.getHTML()) {
|
|
e.commands.setContent(content, { emitUpdate: false });
|
|
}
|
|
});
|
|
|
|
// Handle note mention clicks
|
|
createEffect(() => {
|
|
const e = editor();
|
|
if (!e) return;
|
|
|
|
const handleClick = (event: MouseEvent) => {
|
|
const target = event.target as HTMLElement;
|
|
if (target.classList.contains('note-mention')) {
|
|
const noteId = target.getAttribute('data-id');
|
|
if (noteId) {
|
|
const rect = target.getBoundingClientRect();
|
|
setPreviewNote({ noteId, x: rect.left, y: rect.bottom + window.scrollY });
|
|
return;
|
|
}
|
|
}
|
|
// Close preview if clicking elsewhere
|
|
setPreviewNote(null);
|
|
};
|
|
|
|
const element = e.view.dom;
|
|
if (element) {
|
|
element.addEventListener('click', handleClick);
|
|
}
|
|
});
|
|
|
|
// Handle full screen images as before
|
|
return (
|
|
<div class="w-full h-full flex flex-col">
|
|
<div class="w-full flex-1 flex flex-col">
|
|
<div
|
|
class="w-full h-8 cursor-pointer group flex items-center justify-center shrink-0 transition-all"
|
|
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">
|
|
Click to insert newline above
|
|
</span>
|
|
</div>
|
|
<div
|
|
ref={editorRef}
|
|
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 if (e.target === editorRef) {
|
|
// Focus end if clicking on padding below content
|
|
editor()?.chain().focus().run();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Note Preview Popover */}
|
|
<Show when={previewNote() && store.notes.find(n => n.id === previewNote()!.noteId)}>
|
|
{(note) => {
|
|
const pos = previewNote()!;
|
|
return (
|
|
<div
|
|
class="fixed z-[250] max-w-[280px] w-full bg-popover border border-border shadow-xl rounded-lg p-3 animate-in fade-in zoom-in-95 duration-200 pointer-events-auto"
|
|
style={{ left: `${Math.min(pos.x, window.innerWidth - 300)}px`, top: `${pos.y + 4}px` }}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<h4 class="font-bold text-sm mb-1 truncate text-foreground">{note().title}</h4>
|
|
<p class="text-xs text-muted-foreground line-clamp-3 mb-3 break-words whitespace-pre-wrap">
|
|
{note().content?.replace(/<[^>]*>?/gm, '') || "Empty note"}
|
|
</p>
|
|
<div class="flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
class="text-xs px-2.5 py-1.5 rounded bg-muted hover:bg-muted/80 text-foreground font-medium transition-colors"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
setPreviewNote(null);
|
|
}}
|
|
>
|
|
Close
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="text-xs px-2.5 py-1.5 rounded bg-primary hover:bg-primary/90 text-primary-foreground font-medium transition-colors shadow-sm"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
if (props.onNoteOpen) {
|
|
props.onNoteOpen(note().id);
|
|
}
|
|
setPreviewNote(null);
|
|
}}
|
|
>
|
|
Open Note
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}}
|
|
</Show>
|
|
|
|
<Show when={fullscreenImage()}>
|
|
<div
|
|
class="fixed inset-0 z-[9999] p-4 bg-background/90 backdrop-blur-sm flex items-center justify-center animate-in fade-in duration-200 overflow-hidden"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) {
|
|
setFullscreenImage(null);
|
|
resetZoom();
|
|
}
|
|
}}
|
|
onWheel={(e) => {
|
|
e.preventDefault();
|
|
const scaleSpeed = 0.05;
|
|
const delta = e.deltaY < 0 ? 1 : -1;
|
|
setZoomScale(s => Math.min(Math.max(1, s + delta * scaleSpeed), 5));
|
|
}}
|
|
onPointerDown={(e) => {
|
|
if (zoomScale() > 1 && e.target.tagName.toLowerCase() === 'img') {
|
|
setIsDragging(true);
|
|
setDragStart({ x: e.clientX - zoomOffset().x, y: e.clientY - zoomOffset().y });
|
|
(e.target as HTMLElement).setPointerCapture(e.pointerId);
|
|
}
|
|
}}
|
|
onPointerMove={(e) => {
|
|
if (isDragging()) {
|
|
setZoomOffset({
|
|
x: e.clientX - dragStart().x,
|
|
y: e.clientY - dragStart().y
|
|
});
|
|
}
|
|
}}
|
|
onPointerUp={(e) => {
|
|
setIsDragging(false);
|
|
(e.target as HTMLElement).releasePointerCapture(e.pointerId);
|
|
}}
|
|
onPointerCancel={(e) => {
|
|
setIsDragging(false);
|
|
(e.target as HTMLElement).releasePointerCapture(e.pointerId);
|
|
}}
|
|
>
|
|
<button
|
|
class="absolute top-4 right-4 p-2 bg-background/50 hover:bg-background/80 rounded-full transition-colors z-[10000]"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setFullscreenImage(null);
|
|
resetZoom();
|
|
}}
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
<div
|
|
class="relative flex items-center justify-center w-full h-full pointer-events-none"
|
|
>
|
|
<img
|
|
src={fullscreenImage()!}
|
|
class={cn(
|
|
"max-w-full max-h-[90vh] object-contain rounded-md shadow-2xl pointer-events-auto transition-transform duration-75",
|
|
isDragging() ? "cursor-grabbing" : (zoomScale() > 1 ? "cursor-grab" : "cursor-zoom-in")
|
|
)}
|
|
style={{
|
|
transform: `translate(${zoomOffset().x}px, ${zoomOffset().y}px) scale(${zoomScale()})`,
|
|
}}
|
|
draggable={false}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (zoomScale() === 1) {
|
|
setZoomScale(2);
|
|
} else if (!isDragging()) {
|
|
// Optional: Click to single-zoom-out or do nothing during pan
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
);
|
|
};
|