@carlonicora/nextjs-jsonapi 0.0.1 → 1.0.4

package/src/components/editors/BlockNoteEditor.tsx

@@ -0,0 +1,404 @@
+"use client";
+
+import { BlockNoteSchema, defaultInlineContentSpecs, PartialBlock } from "@blocknote/core";
+import { createReactInlineContentSpec, useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/shadcn";
+import "@blocknote/shadcn/style.css";
+import { CheckIcon, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCurrentUserContext } from "../../contexts";
+import { S3Interface, S3Service, UserInterface } from "../../features";
+import { Button } from "../../shadcnui";
+import { BlockNoteDiffUtil, BlockNoteWordDiffRendererUtil, cn } from "../../utils";
+import { errorToast } from "../errors";
+import { BlockNoteEditorFormattingToolbar } from "./BlockNoteEditorFormattingToolbar";
+
+export type BlockNoteEditorProps = {
+  id: string;
+  type: string;
+  initialContent?: PartialBlock[];
+  onChange?: (content: any, isEmpty: boolean, hasUnresolvedDiff: boolean) => void;
+  size?: "sm" | "md";
+  className?: string;
+  markdownContent?: string;
+  diffContent?: PartialBlock[];
+  placeholder?: string;
+  bordered?: boolean;
+};
+
+const createDiffActionsInlineContentSpec = (
+  handleAcceptChange: (diffId: string) => void,
+  handleRejectChange: (diffId: string) => void,
+) => {
+  return createReactInlineContentSpec(
+    {
+      type: "diffActions",
+      propSchema: {
+        diffIds: {
+          default: "",
+        },
+      },
+      content: "none",
+    },
+    {
+      render: (props) => {
+        const diffIds = props.inlineContent.props.diffIds;
+
+        return (
+          <span className="diff-actions-container mx-2 inline-flex items-center gap-1 align-middle">
+            <Button
+              title="Accept change"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                diffIds.split(",").forEach((id: string) => handleAcceptChange(id.trim()));
+              }}
+            >
+              <CheckIcon className="h-3 w-3 text-green-600" />
+            </Button>
+            <Button
+              title="Reject change"
+              className="mx-2 p-0"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                diffIds.split(",").forEach((id: string) => handleRejectChange(id.trim()));
+              }}
+            >
+              <XIcon className="h-3 w-3 text-red-600" />
+            </Button>
+          </span>
+        );
+      },
+    },
+  );
+};
+
+export default function BlockNoteEditor({
+  id,
+  type,
+  initialContent,
+  onChange,
+  size,
+  className,
+  markdownContent,
+  diffContent,
+  placeholder,
+  bordered,
+}: BlockNoteEditorProps): React.JSX.Element {
+  const t = useTranslations();
+  const { company } = useCurrentUserContext<UserInterface>();
+
+  const [acceptedChanges, setAcceptedChanges] = useState<Set<string>>(new Set());
+  const [rejectedChanges, setRejectedChanges] = useState<Set<string>>(new Set());
+
+  const editorRef = useRef<HTMLDivElement>(null);
+
+  const handleAcceptChange = useCallback((diffId: string) => {
+    setAcceptedChanges((prev) => new Set([...prev, diffId]));
+    setRejectedChanges((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(diffId);
+      return newSet;
+    });
+  }, []);
+
+  const handleRejectChange = useCallback((diffId: string) => {
+    setRejectedChanges((prev) => new Set([...prev, diffId]));
+    setAcceptedChanges((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(diffId);
+      return newSet;
+    });
+  }, []);
+
+  const DiffActionsInlineContent = useMemo(
+    () => createDiffActionsInlineContentSpec(handleAcceptChange, handleRejectChange),
+    [handleAcceptChange, handleRejectChange],
+  );
+
+  const schema = useMemo(
+    () =>
+      BlockNoteSchema.create({
+        inlineContentSpecs: {
+          ...defaultInlineContentSpecs,
+          diffActions: DiffActionsInlineContent,
+        },
+      } as any),
+    [DiffActionsInlineContent],
+  );
+
+  const uploadImage = useCallback(
+    async (file: File): Promise<string> => {
+      if (!company) {
+        errorToast({
+          title: t(`generic.errors.upload`),
+          error: t(`generic.errors.upload_description`),
+        });
+        throw new Error(t(`generic.errors.upload`));
+      }
+
+      const fileType = file.type;
+      const key = `companies/${company.id}/${type}/${id}/${file.name}`;
+
+      const s3: S3Interface = await S3Service.getPreSignedUrl({
+        key: key,
+        contentType: fileType,
+        isPublic: true,
+      });
+
+      await fetch(s3.url, {
+        method: "PUT",
+        headers: s3.headers,
+        body: file,
+      });
+
+      const signedImage: S3Interface = await S3Service.getSignedUrl({
+        key: key,
+        isPublic: true,
+      });
+
+      return signedImage.url;
+    },
+    [company, id, t],
+  );
+
+  // Utility: Remove trailing empty blocks for read-only display
+  const removeTrailingEmptyBlocks = useCallback(
+    (blocks: PartialBlock[]): PartialBlock[] => {
+      if (!blocks || blocks.length === 0) return blocks;
+
+      // Only remove trailing empty blocks in read-only mode
+      if (onChange !== undefined) return blocks;
+
+      const result = [...blocks];
+
+      // Remove trailing empty paragraph blocks, but keep at least one block
+      while (result.length > 1) {
+        const lastBlock = result[result.length - 1];
+
+        // Check if it's an empty paragraph
+        const isEmptyParagraph =
+          lastBlock.type === "paragraph" &&
+          (!lastBlock.content ||
+            lastBlock.content.length === 0 ||
+            (Array.isArray(lastBlock.content) && lastBlock.content.every((c: any) => !c.text || c.text.trim() === "")));
+
+        if (isEmptyParagraph) {
+          result.pop();
+        } else {
+          break;
+        }
+      }
+
+      return result;
+    },
+    [onChange],
+  );
+
+  const processedContent = useMemo(() => {
+    if (diffContent && initialContent) {
+      try {
+        const diffResult = BlockNoteDiffUtil.diff(initialContent, diffContent);
+        const renderedDiff = BlockNoteWordDiffRendererUtil.renderWordDiffs(
+          diffResult.blocks,
+          handleAcceptChange,
+          handleRejectChange,
+          acceptedChanges,
+          rejectedChanges,
+        );
+        return removeTrailingEmptyBlocks(renderedDiff);
+      } catch (error) {
+        return initialContent && Array.isArray(initialContent) && initialContent.length > 0
+          ? removeTrailingEmptyBlocks(initialContent)
+          : [];
+      }
+    }
+
+    if (!initialContent) {
+      return [];
+    }
+
+    if (!Array.isArray(initialContent)) {
+      return [];
+    }
+
+    return initialContent.length > 0 ? removeTrailingEmptyBlocks(initialContent) : [];
+  }, [
+    initialContent,
+    diffContent,
+    handleAcceptChange,
+    handleRejectChange,
+    acceptedChanges,
+    rejectedChanges,
+    removeTrailingEmptyBlocks,
+  ]);
+
+  const validatedInitialContent = useMemo(() => {
+    if (processedContent && Array.isArray(processedContent) && processedContent.length > 0) {
+      const validatedContent = processedContent.filter((block) => {
+        if (!block || typeof block !== "object") return false;
+        if (!(block as any).type) return false;
+        return true;
+      });
+      return validatedContent.length > 0 ? (validatedContent as PartialBlock[]) : undefined;
+    }
+    return undefined;
+  }, [processedContent]);
+
+  const editor = useCreateBlockNote(
+    useMemo(
+      () => ({
+        placeholders: {
+          emptyDocument: placeholder || t(`generic.blocknote.placeholder`),
+        },
+        schema,
+        initialContent: validatedInitialContent,
+        uploadFile: uploadImage,
+      }),
+      [placeholder, t, schema, validatedInitialContent, uploadImage],
+    ),
+  );
+
+  const handleChange = useCallback(async () => {
+    if (!onChange) return;
+    const newBlocks = editor.document;
+
+    const markdownFromBlocks = (await editor.blocksToMarkdownLossy(editor.document)).trim();
+
+    function hasUnresolvedDiffsRecursive(block: any): boolean {
+      if (!block || typeof block !== "object") return false;
+      let diffId = undefined;
+      if (block.props && block.props.diffId) diffId = block.props.diffId;
+      if (!diffId && block.attrs && block.attrs.diffId) diffId = block.attrs.diffId;
+      if (diffId && !acceptedChanges.has(diffId) && !rejectedChanges.has(diffId)) {
+        return true;
+      }
+
+      if (block.content) {
+        const contentArr = Array.isArray(block.content) ? block.content : [block.content];
+        for (const inline of contentArr) {
+          if (inline && typeof inline === "object") {
+            if (inline.type === "diffActions" && inline.props && inline.props.diffIds) {
+              const ids =
+                typeof inline.props.diffIds === "string" ? inline.props.diffIds.split(",") : inline.props.diffIds;
+              for (const id of ids) {
+                const trimmed = (id || "").toString().trim();
+                if (trimmed && !acceptedChanges.has(trimmed) && !rejectedChanges.has(trimmed)) {
+                  return true;
+                }
+              }
+            }
+            if (inline.props && inline.props.diffId) {
+              const diffIdInline = inline.props.diffId;
+              if (diffIdInline && !acceptedChanges.has(diffIdInline) && !rejectedChanges.has(diffIdInline)) {
+                return true;
+              }
+            }
+            if (inline.children && Array.isArray(inline.children)) {
+              for (const child of inline.children) {
+                if (hasUnresolvedDiffsRecursive(child)) return true;
+              }
+            }
+          }
+        }
+      }
+      if (Array.isArray(block.children)) {
+        for (const child of block.children) {
+          if (hasUnresolvedDiffsRecursive(child)) return true;
+        }
+      }
+      return false;
+    }
+
+    let hasUnresolvedDiff = false;
+    if (Array.isArray(newBlocks)) {
+      hasUnresolvedDiff = newBlocks.some((block: any) => hasUnresolvedDiffsRecursive(block));
+    }
+
+    onChange(newBlocks, !markdownFromBlocks.length, hasUnresolvedDiff);
+  }, [editor, onChange, id, acceptedChanges, rejectedChanges]);
+
+  // Utility: deep equality for arrays of blocks
+  const areBlocksEqual = (a: any[], b: any[]): boolean => {
+    return JSON.stringify(a) === JSON.stringify(b);
+  };
+
+  // Only initialize from markdownContent once per value, and only if different
+  const hasInitializedFromMarkdown = useRef<string | null>(null);
+  useEffect(() => {
+    const updateContent = async (markdown: string) => {
+      const blocks = await editor.tryParseMarkdownToBlocks(markdown);
+      if (!areBlocksEqual(blocks, editor.document)) {
+        editor.replaceBlocks(editor.document, blocks);
+      }
+    };
+
+    if (markdownContent && hasInitializedFromMarkdown.current !== markdownContent) {
+      hasInitializedFromMarkdown.current = markdownContent;
+      updateContent(markdownContent).then(() => handleChange());
+    }
+  }, [markdownContent, editor]);
+
+  // Update editor content when diff content changes, but only if different
+  // Prevent unnecessary replaceBlocks calls that reset scroll/cursor.
+  const previousContentHashRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!processedContent || !editor) return;
+    const hash = JSON.stringify(processedContent);
+    if (previousContentHashRef.current === hash) return; // no changes
+    const currentHash = JSON.stringify(editor.document);
+    if (currentHash === hash) {
+      previousContentHashRef.current = hash;
+      return; // already in sync
+    }
+    editor.replaceBlocks(editor.document, processedContent as PartialBlock[]);
+    previousContentHashRef.current = hash;
+  }, [processedContent, editor]);
+
+  // Handle audio received from whisper transcription
+  const handleAudioReceived = useCallback(
+    (message: string) => {
+      try {
+        // Ensure the editor has focus
+        const editorElement = editorRef.current?.querySelector('[contenteditable="true"]') as HTMLElement;
+        if (editorElement && document.activeElement !== editorElement) {
+          editorElement.focus();
+        }
+
+        // Insert the transcribed text at the current cursor position
+        editor.insertInlineContent(message);
+      } catch (error) {
+        console.error("Error inserting transcribed text:", error);
+        // Fallback: try to insert at the end of the document
+        try {
+          const blocks = editor.document;
+          if (blocks.length > 0) {
+            const lastBlock = blocks[blocks.length - 1];
+            editor.setTextCursorPosition(lastBlock.id, "end");
+            editor.insertInlineContent(message);
+          }
+        } catch (fallbackError) {
+          console.error("Fallback insertion also failed:", fallbackError);
+        }
+      }
+    },
+    [editor],
+  );
+
+  return (
+    <div ref={editorRef} className={cn(bordered ? "rounded-md border" : "", "w-full")}>
+      <BlockNoteView
+        editor={editor}
+        onChange={handleChange}
+        editable={onChange !== undefined}
+        formattingToolbar={false}
+        theme="light"
+        className={cn(`BlockNoteView ${onChange ? "min-h-96 p-4" : ""}`, className, size === "sm" && "small")}
+      >
+        <BlockNoteEditorFormattingToolbar />
+      </BlockNoteView>
+    </div>
+  );
+}

package/src/components/editors/BlockNoteEditorContainer.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import React from "react";
+import { BlockNoteEditorProps } from "./BlockNoteEditor";
+
+const BlockNoteEditor = dynamic(() => import("./BlockNoteEditor"), {
+  ssr: false,
+});
+
+export const BlockNoteEditorContainer = React.memo(function EditorContainer(props: BlockNoteEditorProps) {
+  return <BlockNoteEditor {...props} />;
+});

package/src/components/editors/BlockNoteEditorFormattingToolbar.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import {
+  BasicTextStyleButton,
+  BlockTypeSelect,
+  CreateLinkButton,
+  FileCaptionButton,
+  FileReplaceButton,
+  FormattingToolbar,
+  FormattingToolbarController,
+  TextAlignButton,
+} from "@blocknote/react";
+
+export function BlockNoteEditorFormattingToolbar() {
+  return (
+    <FormattingToolbarController
+      formattingToolbar={() => (
+        <FormattingToolbar>
+          <BlockTypeSelect key={"blockTypeSelect"} />
+
+          <FileCaptionButton key={"fileCaptionButton"} />
+          <FileReplaceButton key={"replaceFileButton"} />
+
+          <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />
+          <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />
+          <BasicTextStyleButton basicTextStyle={"underline"} key={"underlineStyleButton"} />
+          <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />
+
+          <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />
+          <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />
+          <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />
+
+          <CreateLinkButton key={"createLinkButton"} />
+        </FormattingToolbar>
+      )}
+    />
+  );
+}

package/src/components/editors/index.ts

@@ -0,0 +1 @@
+export * from "./BlockNoteEditorContainer";

package/src/components/errors/ErrorDetails.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Image from "next/image";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../shadcnui";
+
+export function ErrorDetails({ title, message, code }: { title?: string; message: string; code: number }) {
+  if (code === 403)
+    return (
+      <div className="w-xl max-w-xl">
+        <Card className="w-full">
+          <CardHeader>
+            <CardTitle className="text-foreground flex flex-col items-center gap-y-4 pb-10 text-4xl">
+              <Image src="/phlow-logo.webp" alt="Phlow" width={100} height={100} priority />
+              {/* <div>{code}</div> */}
+              <div>Unauthorised</div>
+            </CardTitle>
+            <CardDescription className="text-center text-lg">
+              We are sorry, but you are not allowed to access this content.
+            </CardDescription>
+          </CardHeader>
+          <CardContent></CardContent>
+        </Card>
+      </div>
+    );
+
+  return (
+    <div className="w-xl max-w-xl">
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="text-foreground flex flex-col items-center gap-y-4 pb-10 text-center text-4xl">
+            <Image src="/phlow-logo.webp" alt="Phlow" width={100} height={100} priority />
+            <div>{code}</div>
+            <div>{title}</div>
+          </CardTitle>
+          <CardDescription className="text-center text-lg">{message}</CardDescription>
+        </CardHeader>
+        <CardContent></CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/errors/errorToast.ts

@@ -0,0 +1,9 @@
+// import { toast } from "@/hooks/use-toast";
+
+import { toast } from "sonner";
+
+export function errorToast(params: { title?: string; error: any }) {
+  toast.error(params?.title ?? "Error", {
+    description: params.error instanceof Error ? params.error.message : String(params.error),
+  });
+}

package/src/components/errors/index.ts

@@ -0,0 +1,2 @@
+export * from "./ErrorDetails";
+export * from "./errorToast";

package/src/components/forms/CommonAssociationForm.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { DataListRetriever, useDebounce } from "../../hooks";
+import {
+  Button,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandInput,
+  CommandList,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../shadcnui";
+
+type CommonAssociationTriggerProps = {
+  sourceType: string;
+  destinationType: string;
+  hasDestination?: boolean;
+  onTrigger: () => void;
+};
+
+export function CommonAssociationTrigger({
+  sourceType,
+  destinationType,
+  hasDestination,
+  onTrigger,
+}: CommonAssociationTriggerProps) {
+  const t = useTranslations();
+
+  if (hasDestination)
+    return (
+      <div className="hover:text-accent cursor-pointer" onClick={onTrigger}>
+        Join
+      </div>
+    );
+
+  return (
+    <Button variant={`outline`} size={`sm`} onClick={onTrigger}>
+      {t(`generic.association.label`, {
+        source: sourceType,
+        destination: destinationType,
+      })}
+    </Button>
+  );
+}
+
+type CommonAssociationCommandDialogProps = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  data: DataListRetriever<any>;
+  source: string;
+  destination: string;
+  destinationName: string;
+  children: ReactNode;
+};
+
+export function CommonAssociationCommandDialog({
+  show,
+  setShow,
+  data,
+  source,
+  destination,
+  destinationName,
+  children,
+}: CommonAssociationCommandDialogProps) {
+  const t = useTranslations();
+
+  const searchTermRef = useRef<string>("");
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  const refreshList = useCallback(
+    async (searchedTerm: string) => {
+      if (searchedTerm === searchTermRef.current) return;
+      searchTermRef.current = searchedTerm;
+      await data.search(searchedTerm);
+    },
+    [searchTerm, data],
+  );
+
+  const updateSearchTerm = useDebounce(refreshList, 500);
+
+  useEffect(() => {
+    if (show) updateSearchTerm(searchTerm);
+  }, [show, searchTerm]);
+
+  return (
+    <CommandDialog open={show} onOpenChange={setShow}>
+      <DialogHeader className="flex flex-col items-start p-4 pb-0">
+        <DialogTitle>
+          {t(`generic.association.label`, {
+            source: source,
+            destination: destination,
+          })}
+        </DialogTitle>
+        <DialogDescription>
+          {t(`generic.association.description`, {
+            source: source,
+            destination: destination,
+            destination_name: destinationName,
+          })}
+        </DialogDescription>
+      </DialogHeader>
+      <Command shouldFilter={false} className="p-4">
+        <CommandInput
+          placeholder={t(`generic.search.placeholder`, { type: source })}
+          value={searchTerm}
+          onValueChange={setSearchTerm}
+        />
+        <CommandList className="mt-3 h-auto max-h-96 min-h-96 max-w-full overflow-y-auto overflow-x-hidden">
+          <CommandEmpty>{t(`generic.search.no_results`, { type: source })}</CommandEmpty>
+          {children}
+        </CommandList>
+      </Command>
+    </CommandDialog>
+  );
+}
+
+export const triggerAssociationToast = (params: {
+  t: any;
+  source: string;
+  destination: string;
+  source_name: string;
+  destination_name: string;
+  level?: string;
+}) => {
+  if (params.level) {
+    toast.message(
+      params.t(`generic.association.label`, {
+        source: params.source,
+        destination: params.destination,
+      }),
+      {
+        description: params.t(`generic.association.success_level`, {
+          source: params.source,
+          destination: params.destination,
+          source_name: params.source_name,
+          destination_name: params.destination_name,
+          level: params.level,
+        }),
+      },
+    );
+  } else {
+    toast.message(
+      params.t(`generic.association.label`, {
+        source: params.source,
+        destination: params.destination,
+      }),
+      {
+        description: params.t(`generic.association.success`, {
+          source: params.source,
+          destination: params.destination,
+          source_name: params.source_name,
+          destination_name: params.destination_name,
+        }),
+      },
+    );
+  }
+};