Diagram Sharing & Encryption

<SketchEditor
  controllerRef={controllerRef}
  onShare={handleShare} // Automatically mounts the Share button in the top bar
/>

"use client";

import React, { useRef, useEffect } from "react";
import dynamic from "next/dynamic";
import type { SketchController, SketchBoardElement } from "@filekit-studio/sketch";

const SketchEditor = dynamic(
  () => import("@filekit-studio/sketch").then((mod) => mod.SketchEditor),
  { ssr: false }
);

// 1. Native browser Deflate-Raw compression to URL-safe Base64
async function compressToHash(elements: SketchBoardElement[]): Promise<string> {
  const json = JSON.stringify(elements);
  const stream = new Blob([new TextEncoder().encode(json)])
    .stream()
    .pipeThrough(new CompressionStream("deflate-raw"));
  const buffer = await new Response(stream).arrayBuffer();
  const bytes = new Uint8Array(buffer);
  
  let binary = "";
  for (let i = 0; i < bytes.length; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return btoa(binary)
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
}

// 2. Native browser DecompressionStream from URL-safe Base64
async function decompressFromHash(base64Url: string): Promise<SketchBoardElement[]> {
  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const padLen = (4 - (base64.length % 4)) % 4;
  const padded = base64 + "=".repeat(padLen);
  const binary = atob(padded);
  
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  
  const stream = new Blob([bytes])
    .stream()
    .pipeThrough(new DecompressionStream("deflate-raw"));
  const json = await new Response(stream).text();
  return JSON.parse(json) as SketchBoardElement[];
}

export function WhiteboardWithShare() {
  const controllerRef = useRef<SketchController | null>(null);

  // 3. User clicks the top-bar Share button
  const handleShare = async () => {
    if (!controllerRef.current) return;
    const elements = controllerRef.current.getElements();
    if (!elements || elements.length === 0) {
      controllerRef.current.showToast?.("Canvas is empty. Draw something before sharing!");
      return;
    }

    try {
      const hash = await compressToHash(elements);
      const shareUrl = `${window.location.origin}${window.location.pathname}#s=${hash}`;
      await navigator.clipboard.writeText(shareUrl);
      controllerRef.current.showToast?.("Share link copied to clipboard!");
    } catch (err) {
      console.error("Failed to generate share link:", err);
    }
  };

  // 4. Automatically detect and load shared diagrams when visiting the link
  useEffect(() => {
    const hash = window.location.hash;
    if (!hash.startsWith("#s=")) return;

    const payload = hash.slice(3);
    if (!payload) return;

    decompressFromHash(payload)
      .then((elements) => {
        // Automatically triggers the smart confirmation modal ("Replace" vs "Insert Below")
        controllerRef.current?.importElements?.(elements, { sourceType: "share" });
      })
      .catch((err) => {
        console.error("Failed to decompress shared diagram:", err);
      });
  }, []);

  return (
    <div className="w-full h-screen">
      <SketchEditor
        controllerRef={controllerRef}
        onShare={handleShare}
        uiConfig={{ showShareButton: true }}
      />
    </div>
  );
}

import { NextRequest, NextResponse } from "next/server";
// Replace with your ORM / client: Prisma, Drizzle, Supabase, or Redis
import { redis } from "@/lib/redis";
import { nanoid } from "nanoid";

// POST /api/share - Save snapshot
export async function POST(req: NextRequest) {
  try {
    const { elements } = await req.json();
    if (!elements || !Array.isArray(elements)) {
      return NextResponse.json({ error: "Invalid diagram payload" }, { status: 400 });
    }

    const id = nanoid(10);
    // Persist with a 30-day expiration (or permanent)
    await redis.set(`share:${id}`, JSON.stringify(elements), { ex: 60 * 60 * 24 * 30 });

    return NextResponse.json({ id });
  } catch (err) {
    return NextResponse.json({ error: "Failed to store snapshot" }, { status: 500 });
  }
}

// GET /api/share?id=abc123xyz - Retrieve snapshot
export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const id = searchParams.get("id");
  if (!id) {
    return NextResponse.json({ error: "Missing snapshot ID" }, { status: 400 });
  }

  const data = await redis.get(`share:${id}`);
  if (!data) {
    return NextResponse.json({ error: "Diagram not found or expired" }, { status: 404 });
  }

  const elements = typeof data === "string" ? JSON.parse(data) : data;
  return NextResponse.json({ elements });
}

"use client";

import React, { useRef, useEffect } from "react";
import dynamic from "next/dynamic";
import type { SketchController } from "@filekit-studio/sketch";

const SketchEditor = dynamic(
  () => import("@filekit-studio/sketch").then((mod) => mod.SketchEditor),
  { ssr: false }
);

interface CloudWhiteboardProps {
  shareId?: string; // Optional route param, e.g. /board/[id]
}

export function CloudWhiteboard({ shareId }: CloudWhiteboardProps) {
  const controllerRef = useRef<SketchController | null>(null);

  // 1. Share button handler: post to your API
  const handleShare = async () => {
    if (!controllerRef.current) return;
    const elements = controllerRef.current.getElements();

    try {
      const res = await fetch("/api/share", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ elements }),
      });

      if (!res.ok) throw new Error("Share request failed");
      const { id } = (await res.json()) as { id: string };

      const shareUrl = `${window.location.origin}/board/${id}`;
      await navigator.clipboard.writeText(shareUrl);
      controllerRef.current.showToast?.("Cloud share link copied to clipboard!");
    } catch (err) {
      console.error("Failed to share diagram:", err);
    }
  };

  // 2. Load snapshot if opened via /board/[id]
  useEffect(() => {
    if (!shareId) return;

    fetch(`/api/share?id=${encodeURIComponent(shareId)}`)
      .then((res) => {
        if (!res.ok) throw new Error("Snapshot not found");
        return res.json();
      })
      .then((data: { elements: unknown }) => {
        if (Array.isArray(data.elements)) {
          controllerRef.current?.importElements?.(data.elements, { sourceType: "share" });
        }
      })
      .catch((err) => console.error("Error loading snapshot:", err));
  }, [shareId]);

  return (
    <div className="w-full h-screen">
      <SketchEditor
        controllerRef={controllerRef}
        onShare={handleShare}
        uiConfig={{ showShareButton: true }}
      />
    </div>
  );
}