@fuma-content/studio 1.0.0 → 1.0.2

package/src/components/ui/tooltip.tsx

@@ -1,57 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,235 +0,0 @@
-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

@@ -1,42 +0,0 @@
-import { studioHook, type StudioDocument } from "lib";
-import { Core } from "fuma-content";
-import { Collection } 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(collectionId: string): Promise<Collection> {
-  const core = await getCore();
-  const collection = core.getCollection(collectionId);
-  if (!collection) throw new Error(`Missing Collection ${collectionId}`);
-
-  return collection;
-}
-
-export async function requireDocument<Doc extends StudioDocument = StudioDocument>(
-  collectionId: string,
-  documentId: string,
-): Promise<{ collection: Collection; document: Doc }> {
-  const collection = await requireCollection(collectionId);
-  const document = await collection.pluginHook(studioHook).getDocument(documentId);
-  if (!document) throw new Error(`Missing Document ${documentId}`);
-
-  return { collection, document: document as Doc };
-}

package/src/lib/data/actions.ts

@@ -1,46 +0,0 @@
-"use server";
-
-import { studioHook } from "@lib/index";
-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.constructor.name,
-  }));
-}
-
-export async function getDocumentItems(): Promise<DocumentItem[]> {
-  const core = await getCore();
-  const items = await Promise.all(
-    core.getCollections(true).map(async (collection) => {
-      const hook = collection.pluginHook(studioHook);
-      const docs = await hook.getDocuments();
-      const supportDelete = hook.actions?.deleteDocument !== undefined;
-
-      return docs.map<DocumentItem>((doc) => ({
-        name: doc.name,
-        id: doc.id,
-        collectionId: collection.name,
-        permissions: {
-          delete: supportDelete,
-        },
-      }));
-    }),
-  );
-
-  return items.flat();
-}
-
-export async function deleteDocumentAction(documentId: string, collectionId: string) {
-  const { collection, document } = await requireDocument(collectionId, documentId);
-  const { deleteDocument } = collection.pluginHook(studioHook).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

@@ -1,22 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-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

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

package/src/lib/data/store.ts

@@ -1,52 +0,0 @@
-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

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

package/src/lib/uploadthing.ts

@@ -1,19 +0,0 @@
-import type { FileRouter } from "uploadthing/next";
-
-import { createUploadthing } from "uploadthing/next";
-
-const f = createUploadthing();
-
-export const ourFileRouter = {
-  editorUploader: f(["image", "text", "blob", "pdf", "video", "audio"])
-    .middleware(() => ({}))
-    .onUploadComplete(({ file }) => ({
-      key: file.key,
-      name: file.name,
-      size: file.size,
-      type: file.type,
-      url: file.ufsUrl,
-    })),
-} satisfies FileRouter;
-
-export type OurFileRouter = typeof ourFileRouter;