@fuma-content/studio 0.1.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-2xl bg-foreground px-3 py-1.5 text-background text-xs data-[state=delayed-open]:animate-in data-closed:animate-out data-open:animate-in **:data-[slot=kbd]:rounded-4xl",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/hooks/editor/use-is-creator.ts

@@ -0,0 +1,21 @@
+import type { TElement } from "platejs";
+import { useMemo } from "react";
+import { useEditor } from "@/components/editor/editor-kit";
+
+/**
+ *  Check if current user is the creator of this element (for Yjs collaboration)
+ */
+export function useIsCreator(element: TElement) {
+  const editor = useEditor();
+
+  return useMemo(() => {
+    const elementUserId =
+      "userId" in element && typeof element.userId === "string" ? element.userId : undefined;
+    const currentUserId = editor.meta.userId;
+
+    // If no userId (backwards compatibility or non-Yjs), allow
+    if (!elementUserId) return true;
+
+    return elementUserId === currentUserId;
+  }, [editor.meta.userId, element]);
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/hooks/use-mounted.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export function useMounted() {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+}

package/src/hooks/use-upload-file.ts

@@ -0,0 +1,121 @@
+import * as React from "react";
+
+import type { OurFileRouter } from "@/lib/uploadthing";
+import type { ClientUploadedFileData, UploadFilesOptions } from "uploadthing/types";
+
+import { generateReactHelpers } from "@uploadthing/react";
+import { toast } from "sonner";
+import { z } from "zod";
+
+export type UploadedFile<T = unknown> = ClientUploadedFileData<T>;
+
+interface UseUploadFileProps extends Pick<
+  UploadFilesOptions<OurFileRouter["editorUploader"]>,
+  "headers" | "onUploadBegin" | "onUploadProgress" | "skipPolling"
+> {
+  onUploadComplete?: (file: UploadedFile) => void;
+  onUploadError?: (error: unknown) => void;
+}
+
+export function useUploadFile({
+  onUploadComplete,
+  onUploadError,
+  ...props
+}: UseUploadFileProps = {}) {
+  const [uploadedFile, setUploadedFile] = React.useState<UploadedFile>();
+  const [uploadingFile, setUploadingFile] = React.useState<File>();
+  const [progress, setProgress] = React.useState<number>(0);
+  const [isUploading, setIsUploading] = React.useState(false);
+
+  async function uploadThing(file: File) {
+    setIsUploading(true);
+    setUploadingFile(file);
+
+    try {
+      const res = await uploadFiles("editorUploader", {
+        ...props,
+        files: [file],
+        onUploadProgress: ({ progress }) => {
+          setProgress(Math.min(progress, 100));
+        },
+      });
+
+      setUploadedFile(res[0]);
+
+      onUploadComplete?.(res[0]);
+
+      return uploadedFile;
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+
+      const message =
+        errorMessage.length > 0 ? errorMessage : "Something went wrong, please try again later.";
+
+      toast.error(message);
+
+      onUploadError?.(error);
+
+      // Mock upload for unauthenticated users
+      // toast.info('User not logged in. Mocking upload process.');
+      const mockUploadedFile = {
+        key: "mock-key-0",
+        appUrl: `https://mock-app-url.com/${file.name}`,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        url: URL.createObjectURL(file),
+      } as UploadedFile;
+
+      // Simulate upload progress
+      let progress = 0;
+
+      const simulateProgress = async () => {
+        while (progress < 100) {
+          await new Promise((resolve) => setTimeout(resolve, 50));
+          progress += 2;
+          setProgress(Math.min(progress, 100));
+        }
+      };
+
+      await simulateProgress();
+
+      setUploadedFile(mockUploadedFile);
+
+      return mockUploadedFile;
+    } finally {
+      setProgress(0);
+      setIsUploading(false);
+      setUploadingFile(undefined);
+    }
+  }
+
+  return {
+    isUploading,
+    progress,
+    uploadedFile,
+    uploadFile: uploadThing,
+    uploadingFile,
+  };
+}
+
+export const { uploadFiles, useUploadThing } = generateReactHelpers<OurFileRouter>();
+
+export function getErrorMessage(err: unknown) {
+  const unknownError = "Something went wrong, please try again later.";
+
+  if (err instanceof z.ZodError) {
+    const errors = err.issues.map((issue) => issue.message);
+
+    return errors.join("\n");
+  }
+  if (err instanceof Error) {
+    return err.message;
+  }
+  return unknownError;
+}
+
+export function showErrorToast(err: unknown) {
+  const errorMessage = getErrorMessage(err);
+
+  return toast.error(errorMessage);
+}

package/src/lib/ai/markdown-joiner-transform.ts

@@ -0,0 +1,235 @@
+import type { TextStreamPart, ToolSet } from "ai";
+
+/**
+ * Transform chunks like [**,bold,**] to [**bold**] make the md deserializer
+ * happy.
+ *
+ * @experimental
+ */
+export const markdownJoinerTransform =
+  <TOOLS extends ToolSet>() =>
+  () => {
+    const joiner = new MarkdownJoiner();
+    let lastTextDeltaId: string | undefined;
+    let textStreamEnded = false;
+
+    return new TransformStream<TextStreamPart<TOOLS>, TextStreamPart<TOOLS>>({
+      async flush(controller) {
+        // Only flush if we haven't seen text-end yet
+        if (!textStreamEnded) {
+          const remaining = joiner.flush();
+          if (remaining && lastTextDeltaId) {
+            controller.enqueue({
+              id: lastTextDeltaId,
+              text: remaining,
+              type: "text-delta",
+            } as TextStreamPart<TOOLS>);
+          }
+        }
+      },
+      async transform(chunk, controller) {
+        if (chunk.type === "text-delta") {
+          lastTextDeltaId = chunk.id;
+          const processedText = joiner.processText(chunk.text);
+          if (processedText) {
+            controller.enqueue({
+              ...chunk,
+              text: processedText,
+            });
+            await delay(joiner.delayInMs);
+          }
+        } else if (chunk.type === "text-end") {
+          // Flush any remaining buffer before text-end
+          const remaining = joiner.flush();
+          if (remaining && lastTextDeltaId) {
+            controller.enqueue({
+              id: lastTextDeltaId,
+              text: remaining,
+              type: "text-delta",
+            } as TextStreamPart<TOOLS>);
+          }
+          textStreamEnded = true;
+          controller.enqueue(chunk);
+        } else {
+          controller.enqueue(chunk);
+        }
+      },
+    });
+  };
+
+const DEFAULT_DELAY_IN_MS = 10;
+const NEST_BLOCK_DELAY_IN_MS = 100;
+
+const BOLD_PATTERN = /\*\*.*?\*\*/;
+const CODE_LINE_PATTERN = /```[^\s]+/;
+const LINK_PATTERN = /^\[.*?\]\(.*?\)$/;
+const UNORDERED_LIST_PATTERN = /^[*-]\s+.+/;
+const TODO_LIST_PATTERN = /^[*-]\s+\[[ xX]\]\s+.+/;
+const ORDERED_LIST_PATTERN = /^\d+\.\s+.+/;
+const MDX_TAG_PATTERN = /<([A-Za-z][A-Za-z0-9\-_]*)>/;
+const DIGIT_PATTERN = /^[0-9]$/;
+
+export class MarkdownJoiner {
+  delayInMs = DEFAULT_DELAY_IN_MS;
+
+  private buffer = "";
+  private documentCharacterCount = 0;
+  private isBuffering = false;
+  private streamingCodeBlock = false;
+  private streamingLargeDocument = false;
+  private streamingTable = false;
+
+  private clearBuffer(): void {
+    this.buffer = "";
+    this.isBuffering = false;
+  }
+  private isCompleteBold(): boolean {
+    return BOLD_PATTERN.test(this.buffer);
+  }
+
+  private isCompleteCodeBlockEnd(): boolean {
+    return this.buffer.trimEnd() === "```";
+  }
+
+  private isCompleteCodeBlockStart(): boolean {
+    return CODE_LINE_PATTERN.test(this.buffer);
+  }
+
+  private isCompleteLink(): boolean {
+    return LINK_PATTERN.test(this.buffer);
+  }
+
+  private isCompleteList(): boolean {
+    if (UNORDERED_LIST_PATTERN.test(this.buffer) && this.buffer.includes("["))
+      return TODO_LIST_PATTERN.test(this.buffer);
+
+    return (
+      UNORDERED_LIST_PATTERN.test(this.buffer) ||
+      ORDERED_LIST_PATTERN.test(this.buffer) ||
+      TODO_LIST_PATTERN.test(this.buffer)
+    );
+  }
+
+  private isCompleteMdxTag(): boolean {
+    return MDX_TAG_PATTERN.test(this.buffer);
+  }
+
+  private isCompleteTableStart(): boolean {
+    return this.buffer.startsWith("|") && this.buffer.endsWith("|");
+  }
+
+  private isFalsePositive(char: string): boolean {
+    // when link is not complete, even if ths buffer is more than 30 characters, it is not a false positive
+    if (this.buffer.startsWith("[") && this.buffer.includes("http")) {
+      return false;
+    }
+
+    return char === "\n" || this.buffer.length > 30;
+  }
+
+  private isLargeDocumentStart(): boolean {
+    return this.documentCharacterCount > 2500;
+  }
+
+  private isListStartChar(char: string): boolean {
+    return char === "-" || char === "*" || DIGIT_PATTERN.test(char);
+  }
+
+  private isTableExisted(): boolean {
+    return this.buffer.length > 10 && !this.buffer.includes("|");
+  }
+
+  flush(): string {
+    const remaining = this.buffer;
+    this.clearBuffer();
+    return remaining;
+  }
+
+  processText(text: string): string {
+    let output = "";
+
+    for (const char of text) {
+      if (this.streamingCodeBlock || this.streamingTable || this.streamingLargeDocument) {
+        this.buffer += char;
+
+        if (char === "\n") {
+          output += this.buffer;
+          this.clearBuffer();
+        }
+
+        if (this.isCompleteCodeBlockEnd() && this.streamingCodeBlock) {
+          this.streamingCodeBlock = false;
+          this.delayInMs = DEFAULT_DELAY_IN_MS;
+
+          output += this.buffer;
+          this.clearBuffer();
+        }
+
+        if (this.isTableExisted() && this.streamingTable) {
+          this.streamingTable = false;
+          this.delayInMs = DEFAULT_DELAY_IN_MS;
+
+          output += this.buffer;
+          this.clearBuffer();
+        }
+      } else if (this.isBuffering) {
+        this.buffer += char;
+
+        if (this.isCompleteCodeBlockStart()) {
+          this.delayInMs = NEST_BLOCK_DELAY_IN_MS;
+          this.streamingCodeBlock = true;
+          continue;
+        }
+
+        if (this.isCompleteTableStart()) {
+          this.delayInMs = NEST_BLOCK_DELAY_IN_MS;
+          this.streamingTable = true;
+          continue;
+        }
+
+        if (this.isLargeDocumentStart()) {
+          this.delayInMs = NEST_BLOCK_DELAY_IN_MS;
+          this.streamingLargeDocument = true;
+          continue;
+        }
+
+        if (
+          this.isCompleteBold() ||
+          this.isCompleteMdxTag() ||
+          this.isCompleteList() ||
+          this.isCompleteLink()
+        ) {
+          output += this.buffer;
+          this.clearBuffer();
+        } else if (this.isFalsePositive(char)) {
+          // False positive - flush buffer as raw text
+          output += this.buffer;
+          this.clearBuffer();
+        }
+        // Check if we should start buffering
+      } else if (
+        char === "*" ||
+        char === "<" ||
+        char === "`" ||
+        char === "|" ||
+        char === "[" ||
+        this.isListStartChar(char)
+      ) {
+        this.buffer = char;
+        this.isBuffering = true;
+      } else {
+        // Pass through character directly
+        output += char;
+      }
+    }
+
+    this.documentCharacterCount += text.length;
+    return output;
+  }
+}
+
+async function delay(delayInMs?: number | null): Promise<void> {
+  return delayInMs == null
+    ? Promise.resolve()
+    : new Promise((resolve) => setTimeout(resolve, delayInMs));
+}

package/src/lib/config.ts

@@ -0,0 +1,60 @@
+import type { StudioDocument } from "lib/types";
+import { type CollectionWithHandler, Core } from "fuma-content";
+import { Collection, CollectionHandlers } from "fuma-content/collections";
+
+let core: Promise<Core>;
+
+export async function getCore(): Promise<Core> {
+  core ??= (async () => {
+    const core = new Core({
+      outDir: ".content",
+      configPath: process.env.STUDIO_CONFIG,
+      cwd: process.env.STUDIO_PARENT_DIR,
+    });
+
+    await core.init({
+      config: await import("virtual:content.config"),
+    });
+
+    return core;
+  })();
+
+  return core;
+}
+
+export async function requireCollection<Handler extends keyof CollectionHandlers = never>(
+  collectionId: string,
+  handlers: Handler[],
+): Promise<CollectionWithHandler<Handler>> {
+  const core = await getCore();
+  const collection = core.getCollection(collectionId);
+  if (!collection) throw new Error(`Missing Collection ${collectionId}`);
+
+  if (hasHandler(collection, handlers)) {
+    return collection;
+  }
+
+  throw new Error(`Missing ${handlers.join(", ")} handlers for ${collectionId}`);
+}
+
+export async function requireDocument<Doc extends StudioDocument = StudioDocument>(
+  collectionId: string,
+  documentId: string,
+): Promise<{ collection: CollectionWithHandler<"studio">; document: Doc }> {
+  const collection = await requireCollection(collectionId, ["studio"]);
+  const document: Doc | undefined = await collection.handlers.studio.getDocument(documentId);
+  if (!document) throw new Error(`Missing Document ${documentId}`);
+
+  return { collection: collection as CollectionWithHandler<"studio">, document };
+}
+
+export function hasHandler<Handler extends keyof CollectionHandlers = never>(
+  collection: Collection,
+  handlers: Handler[],
+): collection is CollectionWithHandler<Handler> {
+  for (const handler of handlers) {
+    if (collection.handlers[handler] === undefined) return false;
+  }
+
+  return true;
+}

package/src/lib/data/actions.ts

@@ -0,0 +1,51 @@
+"use server";
+
+import { getCore, requireDocument } from "../config";
+import type { CollectionItem, DocumentItem } from "./store";
+
+export async function getCollectionItems(): Promise<CollectionItem[]> {
+  const core = await getCore();
+  return core.getCollections(true).map<CollectionItem>((collection) => ({
+    id: collection.name,
+    name: collection.name,
+    badge: collection.typeInfo.id,
+    handlers: Object.fromEntries(Object.keys(collection.handlers).map((k) => [k, null])),
+  }));
+}
+
+export async function getDocumentItems(): Promise<DocumentItem[]> {
+  const core = await getCore();
+  const items = await Promise.all(
+    core.getCollections(true).map(async (collection) => {
+      const handler = collection.handlers.studio;
+
+      if (handler) {
+        const docs = await handler.getDocuments();
+        const supportDelete = handler.actions?.deleteDocument !== undefined;
+
+        return docs.map<DocumentItem>((doc) => ({
+          name: doc.name,
+          id: doc.id,
+          collectionId: collection.name,
+          permissions: {
+            delete: supportDelete,
+          },
+        }));
+      }
+
+      return [];
+    }),
+  );
+
+  return items.flat();
+}
+
+export async function deleteDocumentAction(documentId: string, collectionId: string) {
+  const { collection, document } = await requireDocument(collectionId, documentId);
+  const { deleteDocument } = collection.handlers.studio.actions ?? {};
+  if (deleteDocument) {
+    await deleteDocument({ collection, document });
+  } else {
+    throw new Error(`collection ${collectionId} does not support the delete operation.`);
+  }
+}

package/src/lib/data/boundary.client.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Spinner } from "@/components/ui/spinner";
+import { useMounted } from "@/hooks/use-mounted";
+import { Suspense, type ReactNode } from "react";
+
+export function BoundaryClient({ children }: { children: ReactNode }) {
+  const mounted = useMounted();
+  const fallback = (
+    <div className="fixed flex items-center justify-center inset-0 bg-background z-50 text-sm text-muted-foreground gap-1">
+      <Spinner />
+      Loading
+    </div>
+  );
+
+  if (!mounted) return fallback;
+
+  return (
+    <Suspense fallback={fallback} defer>
+      {children}
+    </Suspense>
+  );
+}

package/src/lib/data/boundary.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { getCollectionItems, getDocumentItems } from "./actions";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { queryClient } from "./query";
+import { BoundaryClient } from "./boundary.client";
+
+export async function DataBoundary({ children }: { children: ReactNode }) {
+  await queryClient.prefetchQuery({
+    queryKey: ["collections"],
+    queryFn: () => getCollectionItems(),
+  });
+  await queryClient.prefetchQuery({
+    queryKey: ["documents"],
+    queryFn: () => getDocumentItems(),
+  });
+
+  return (
+    <BoundaryClient>
+      <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>
+    </BoundaryClient>
+  );
+}

package/src/lib/data/query.ts

@@ -0,0 +1,9 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 1000,
+    },
+  },
+});

package/src/lib/data/store.ts

@@ -0,0 +1,52 @@
+import { createCollection } from "@tanstack/react-db";
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import { queryClient } from "./query";
+import { deleteDocumentAction, getCollectionItems, getDocumentItems } from "./actions";
+
+export interface CollectionItem {
+  id: string;
+  name: string;
+  badge?: string;
+  handlers?: Record<string, null>;
+}
+
+export interface DocumentItem {
+  id: string;
+  collectionId: string;
+  name: string;
+
+  permissions: {
+    delete: boolean;
+  };
+}
+
+export const collection = createCollection(
+  queryCollectionOptions({
+    queryClient,
+    queryKey: ["collections"],
+    queryFn: () => getCollectionItems(),
+    getKey: (item) => item.id,
+  }),
+);
+
+export const documentCollection = createCollection(
+  queryCollectionOptions({
+    queryClient,
+    queryKey: ["documents"],
+    queryFn: () => getDocumentItems(),
+    getKey: (item) => `${item.collectionId}-${item.id}`,
+    onDelete: async ({ transaction }) => {
+      const mutation = transaction.mutations[0];
+      const original = mutation.original;
+      // ignore if not supported
+      if (!original.permissions.delete) return;
+
+      try {
+        await deleteDocumentAction(original.id, original.collectionId);
+      } catch (error) {
+        console.error("Delete failed, rolling back:", error);
+        throw error;
+      }
+    },
+  }),
+);

package/src/lib/lowlight.ts

@@ -0,0 +1,3 @@
+import { all, createLowlight } from "lowlight";
+
+export const lowlight = createLowlight(all);