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.

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>
   );
 }

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>
   );
 }

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,11 +260,21 @@ export default function ImageNode({
   const showFilename = Boolean(data.filename && data.url);
 
   return (
-    <BaseNodeWrapper
+    <>
-      nodeType="image"
+      <BaseNodeWrapper
-      selected={selected}
+        nodeType="image"
-      status={data._status}
+        selected={selected}
-    >
+        status={data._status}
+        toolbarActions={[
+          {
+            id: "fullscreen",
+            label: "Fullscreen",
+            icon: <Maximize2 size={14} />,
+            onClick: () => setIsFullscreenOpen(true),
+            disabled: !data.url,
+          },
+        ]}
+      >
       <Handle
         type="target"
         position={Position.Left}
@@ -335,11 +352,44 @@ export default function ImageNode({
         className="hidden"
       />
 
-      <Handle
+        <Handle
-        type="source"
+          type="source"
-        position={Position.Right}
+          position={Position.Right}
-        className="h-3! w-3! bg-primary! border-2! border-background!"
+          className="h-3! w-3! bg-primary! border-2! border-background!"
-      />
+        />
-    </BaseNodeWrapper>
+      </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>
+    </>
   );
 }

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(
+  const updateContent = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    (newContent: string) => {
-      const newContent = e.target.value;
       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"
+      <BaseNodeWrapper
-      selected={selected}
+        nodeType="text"
-      status={data._status}
+        selected={selected}
-      className="relative"
+        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
+        <Handle
-        type="source"
+          type="source"
-        position={Position.Right}
+          position={Position.Right}
-        className="!h-3 !w-3 !bg-primary !border-2 !border-background"
+          className="!h-3 !w-3 !bg-primary !border-2 !border-background"
-      />
+        />
-    </BaseNodeWrapper>
+      </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>
+    </>
   );
 }