Add fullscreen image preview and rich text editing capabilities
- Implemented fullscreen output functionality for AI image and image nodes, allowing users to view images in a larger format. - Added a dialog component for displaying images in fullscreen mode, including a close button. - Enhanced text nodes with a rich text editor, enabling quick formatting options such as bold, italic, headings, lists, and links. - Updated base node wrapper to support toolbar actions for both image and text nodes, improving user interaction.
This commit is contained in:
Matthias
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { useState, useCallback, useEffect, useRef } from "react";
|
||||
import {
|
||||
Handle,
|
||||
Position,
|
||||
@@ -8,10 +8,18 @@ import {
|
||||
type NodeProps,
|
||||
type Node,
|
||||
} from "@xyflow/react";
|
||||
import { Bold, Heading2, Italic, Link2, List, FilePenLine } from "lucide-react";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
type TextNodeData = {
|
||||
content?: string;
|
||||
@@ -26,6 +34,8 @@ export default function TextNode({ id, data, selected }: NodeProps<TextNode>) {
|
||||
const { queueNodeDataUpdate } = useCanvasSync();
|
||||
const [content, setContent] = useState(data.content ?? "");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isRichTextOpen, setIsRichTextOpen] = useState(false);
|
||||
const richEditorRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Sync von außen (Convex-Update) wenn nicht gerade editiert wird
|
||||
useEffect(() => {
|
||||
@@ -51,9 +61,8 @@ export default function TextNode({ id, data, selected }: NodeProps<TextNode>) {
|
||||
500,
|
||||
);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newContent = e.target.value;
|
||||
const updateContent = useCallback(
|
||||
(newContent: string) => {
|
||||
setContent(newContent);
|
||||
setNodes((nodes) =>
|
||||
nodes.map((node) =>
|
||||
@@ -73,13 +82,79 @@ export default function TextNode({ id, data, selected }: NodeProps<TextNode>) {
|
||||
[id, saveContent, setNodes],
|
||||
);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
updateContent(e.target.value);
|
||||
},
|
||||
[updateContent],
|
||||
);
|
||||
|
||||
const wrapSelection = useCallback(
|
||||
(prefix: string, suffix = prefix, placeholder = "Text") => {
|
||||
const editor = richEditorRef.current;
|
||||
if (!editor) return;
|
||||
|
||||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
const selectedText = content.slice(start, end);
|
||||
const injectedText = selectedText || placeholder;
|
||||
const nextContent = `${content.slice(0, start)}${prefix}${injectedText}${suffix}${content.slice(end)}`;
|
||||
|
||||
updateContent(nextContent);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
editor.focus();
|
||||
const nextStart = start + prefix.length;
|
||||
const nextEnd = nextStart + injectedText.length;
|
||||
editor.setSelectionRange(nextStart, nextEnd);
|
||||
});
|
||||
},
|
||||
[content, updateContent],
|
||||
);
|
||||
|
||||
const prefixSelectedLines = useCallback(
|
||||
(prefix: string) => {
|
||||
const editor = richEditorRef.current;
|
||||
if (!editor) return;
|
||||
|
||||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
const lineStart = content.lastIndexOf("\n", Math.max(0, start - 1)) + 1;
|
||||
const lineEndSearch = content.indexOf("\n", end);
|
||||
const lineEnd = lineEndSearch === -1 ? content.length : lineEndSearch;
|
||||
const selectedBlock = content.slice(lineStart, lineEnd);
|
||||
const nextBlock = selectedBlock
|
||||
.split("\n")
|
||||
.map((line) => (line.startsWith(prefix) ? line : `${prefix}${line}`))
|
||||
.join("\n");
|
||||
const nextContent = `${content.slice(0, lineStart)}${nextBlock}${content.slice(lineEnd)}`;
|
||||
|
||||
updateContent(nextContent);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
editor.focus();
|
||||
editor.setSelectionRange(lineStart, lineStart + nextBlock.length);
|
||||
});
|
||||
},
|
||||
[content, updateContent],
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper
|
||||
nodeType="text"
|
||||
selected={selected}
|
||||
status={data._status}
|
||||
className="relative"
|
||||
>
|
||||
<>
|
||||
<BaseNodeWrapper
|
||||
nodeType="text"
|
||||
selected={selected}
|
||||
status={data._status}
|
||||
toolbarActions={[
|
||||
{
|
||||
id: "rich-text",
|
||||
label: "RichText",
|
||||
icon: <FilePenLine size={14} />,
|
||||
onClick: () => setIsRichTextOpen(true),
|
||||
},
|
||||
]}
|
||||
className="relative"
|
||||
>
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
@@ -115,11 +190,76 @@ export default function TextNode({ id, data, selected }: NodeProps<TextNode>) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!h-3 !w-3 !bg-primary !border-2 !border-background"
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!h-3 !w-3 !bg-primary !border-2 !border-background"
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
|
||||
<Dialog open={isRichTextOpen} onOpenChange={setIsRichTextOpen}>
|
||||
<DialogContent className="h-[80vh] max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>RichText Editor</DialogTitle>
|
||||
<DialogDescription>
|
||||
Schnelle Formatierung mit Markdown-Syntax.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex min-h-0 flex-1 flex-col gap-3">
|
||||
<div className="flex flex-wrap items-center gap-1 rounded-md border bg-muted/30 p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => wrapSelection("**")}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
title="Fett"
|
||||
>
|
||||
<Bold className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => wrapSelection("*")}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
title="Kursiv"
|
||||
>
|
||||
<Italic className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => wrapSelection("## ", "", "Überschrift")}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
title="Überschrift"
|
||||
>
|
||||
<Heading2 className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => prefixSelectedLines("- ")}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
title="Liste"
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => wrapSelection("[", "](https://)", "Linktext")}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
||||
title="Link"
|
||||
>
|
||||
<Link2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
ref={richEditorRef}
|
||||
value={content}
|
||||
onChange={handleChange}
|
||||
className="nodrag nowheel min-h-0 w-full flex-1 resize-none rounded-md border border-border bg-background px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-primary/20"
|
||||
placeholder="Text eingeben…"
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user