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.
2026-04-01 20:03:53 +02:00
parent 43e3e0544a
commit 8988428fc9
4 changed files with 302 additions and 29 deletions
--- a/components/canvas/nodes/ai-image-node.tsx
+++ b/components/canvas/nodes/ai-image-node.tsx
@@ -22,7 +22,14 @@ import {
  Clock3,
  ShieldAlert,
  WifiOff,
+  Maximize2,
+  X,
 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";

 type AiImageNodeData = {
  storageId?: string;
@@ -67,6 +74,7 @@ export default function AiImageNode({

  const [isGenerating, setIsGenerating] = useState(false);
  const [localError, setLocalError] = useState<string | null>(null);
+  const [isOutputFullscreenOpen, setIsOutputFullscreenOpen] = useState(false);

  const generateImage = useAction(api.ai.generateImage);

@@ -175,6 +183,15 @@ export default function AiImageNode({
    <BaseNodeWrapper
      nodeType="ai-image"
      selected={selected}
+      toolbarActions={[
+        {
+          id: "fullscreen-output",
+          label: "Fullscreen",
+          icon: <Maximize2 size={14} />,
+          onClick: () => setIsOutputFullscreenOpen(true),
+          disabled: !nodeData.url,
+        },
+      ]}
      className="flex h-full w-full min-h-0 min-w-0 flex-col"
    >
      <Handle
@@ -320,6 +337,41 @@ export default function AiImageNode({
        id="image-out"
        className="!h-3 !w-3 !bg-violet-500 !border-2 !border-background"
      />
+
+      <Dialog
+        open={isOutputFullscreenOpen}
+        onOpenChange={setIsOutputFullscreenOpen}
+      >
+        <DialogContent
+          className="inset-0 left-0 top-0 h-screen w-screen max-w-none -translate-x-0 -translate-y-0 place-items-center gap-0 rounded-none border-none bg-transparent p-0 ring-0 shadow-none sm:max-w-none"
+          showCloseButton={false}
+        >
+          <DialogTitle className="sr-only">KI-Bildausgabe</DialogTitle>
+          <button
+            type="button"
+            onClick={() => setIsOutputFullscreenOpen(false)}
+            aria-label="Close image preview"
+            className="absolute right-6 top-6 z-50 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/20 text-white/90 transition-colors hover:bg-black/30"
+          >
+            <X className="h-5 w-5" />
+          </button>
+          <div className="flex h-full w-full items-center justify-center">
+            {nodeData.url ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={nodeData.url}
+                alt={nodeData.prompt ?? "AI generated image"}
+                className="h-auto max-h-[80vh] w-auto max-w-[80vw] rounded-xl object-contain shadow-2xl"
+                draggable={false}
+              />
+            ) : (
+              <div className="rounded-lg bg-popover/95 px-4 py-3 text-sm text-muted-foreground shadow-lg">
+                Keine Bildausgabe verfügbar
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
    </BaseNodeWrapper>
  );
 }
--- a/components/canvas/nodes/base-node-wrapper.tsx
+++ b/components/canvas/nodes/base-node-wrapper.tsx
@@ -19,6 +19,15 @@ interface ResizeConfig {
  keepAspectRatio?: boolean;
 }

+export interface NodeToolbarAction {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
 const RESIZE_CONFIGS: Record<string, ResizeConfig> = {
  frame: { minWidth: 200, minHeight: 150 },
  group: { minWidth: 150, minHeight: 100 },
@@ -51,7 +60,11 @@ const INTERNAL_FIELDS = new Set([
  "canvasId",
 ]);

-function NodeToolbarActions() {
+function NodeToolbarActions({
+  actions = [],
+}: {
+  actions?: NodeToolbarAction[];
+}) {
  const nodeId = useNodeId();
  const { deleteElements, getNode, getNodes, getEdges, setNodes } = useReactFlow();
  const { createNodeWithIntersection } = useCanvasPlacement();
@@ -135,6 +148,22 @@ function NodeToolbarActions() {
  return (
    <NodeToolbar position={Position.Top} offset={8}>
      <div className="flex items-center gap-1 rounded-lg border bg-card p-1 shadow-md">
+        {actions.map((action) => (
+          <button
+            key={action.id}
+            type="button"
+            onClick={(e) => {
+              stopPropagation(e);
+              action.onClick();
+            }}
+            onPointerDown={stopPropagation}
+            title={action.label}
+            disabled={action.disabled}
+            className={`flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40 ${action.className ?? ""}`}
+          >
+            {action.icon}
+          </button>
+        ))}
        <button
          type="button"
          onClick={(e) => { stopPropagation(e); handleDuplicate(); }}
@@ -163,6 +192,7 @@ interface BaseNodeWrapperProps {
  selected?: boolean;
  status?: string;
  statusMessage?: string;
+  toolbarActions?: NodeToolbarAction[];
  children: ReactNode;
  className?: string;
 }
@@ -172,6 +202,7 @@ export default function BaseNodeWrapper({
  selected,
  status = "idle",
  statusMessage,
+  toolbarActions,
  children,
  className = "",
 }: BaseNodeWrapperProps) {
@@ -255,7 +286,7 @@ export default function BaseNodeWrapper({
          {statusMessage}
        </div>
      )}
-      <NodeToolbarActions />
+      <NodeToolbarActions actions={toolbarActions} />
    </div>
  );
 }
--- a/components/canvas/nodes/image-node.tsx
+++ b/components/canvas/nodes/image-node.tsx
@@ -9,10 +9,16 @@ import {
  type DragEvent,
 } from "react";
 import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
+import { Maximize2, X } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import BaseNodeWrapper from "./base-node-wrapper";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { toast } from "@/lib/toast";
 import { computeMediaNodeSize } from "@/lib/canvas-utils";
 import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
@@ -79,6 +85,7 @@ export default function ImageNode({
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [isDragOver, setIsDragOver] = useState(false);
+  const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);
  const hasAutoSizedRef = useRef(false);

  useEffect(() => {
@@ -253,10 +260,20 @@ export default function ImageNode({
  const showFilename = Boolean(data.filename && data.url);

  return (
+    <>
      <BaseNodeWrapper
        nodeType="image"
        selected={selected}
        status={data._status}
+        toolbarActions={[
+          {
+            id: "fullscreen",
+            label: "Fullscreen",
+            icon: <Maximize2 size={14} />,
+            onClick: () => setIsFullscreenOpen(true),
+            disabled: !data.url,
+          },
+        ]}
      >
      <Handle
        type="target"
@@ -341,5 +358,38 @@ export default function ImageNode({
          className="h-3! w-3! bg-primary! border-2! border-background!"
        />
      </BaseNodeWrapper>
+
+      <Dialog open={isFullscreenOpen} onOpenChange={setIsFullscreenOpen}>
+        <DialogContent
+          className="inset-0 left-0 top-0 h-screen w-screen max-w-none -translate-x-0 -translate-y-0 place-items-center gap-0 rounded-none border-none bg-transparent p-0 ring-0 shadow-none sm:max-w-none"
+          showCloseButton={false}
+        >
+          <DialogTitle className="sr-only">{data.filename ?? "Bild"}</DialogTitle>
+          <button
+            type="button"
+            onClick={() => setIsFullscreenOpen(false)}
+            aria-label="Close image preview"
+            className="absolute right-6 top-6 z-50 inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/20 text-white/90 transition-colors hover:bg-black/30"
+          >
+            <X className="h-5 w-5" />
+          </button>
+          <div className="flex h-full w-full items-center justify-center">
+            {data.url ? (
+              // eslint-disable-next-line @next/next/no-img-element -- Convex storage URL, volle Auflösung wie Asset-Node
+              <img
+                src={data.url}
+                alt={data.filename ?? "Bild"}
+                className="h-auto max-h-[80vh] w-auto max-w-[80vw] rounded-xl object-contain shadow-2xl"
+                draggable={false}
+              />
+            ) : (
+              <div className="rounded-lg bg-popover/95 px-4 py-3 text-sm text-muted-foreground shadow-lg">
+                Kein Bild verfügbar
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
  );
 }
--- a/components/canvas/nodes/text-node.tsx
+++ b/components/canvas/nodes/text-node.tsx
@@ -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,11 +82,77 @@ 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}
+        toolbarActions={[
+          {
+            id: "rich-text",
+            label: "RichText",
+            icon: <FilePenLine size={14} />,
+            onClick: () => setIsRichTextOpen(true),
+          },
+        ]}
        className="relative"
      >
      <Handle
@@ -121,5 +196,70 @@ export default function TextNode({ id, data, selected }: NodeProps<TextNode>) {
          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>
+    </>
  );
 }