create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/blocks/editors/TextBlockEditor.tsx

@@ -1,19 +1,28 @@
-// app/cms/blocks/editors/TextBlockEditor.tsx
+// app/cms/blocks/editors/TextBlockEditor.tsx
 'use client';
 
-import React, { useId, useState, useRef, useCallback } from 'react';
-import dynamic from 'next/dynamic';
-import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import dynamic from 'next/dynamic';
+import type { Extensions } from '@tiptap/core';
+import MediaPickerDialog from '../../media/components/MediaPickerDialog';
 import { Label } from '@nextblock-cms/ui';
 import { BlockEditorProps } from '../components/BlockEditorModal';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import { useCortexAiActive } from '../../components/CortexAiActiveContext';
+import {
+  createDynamicCustomBlockExtensions,
+  type DynamicCustomBlockEditorDefinition,
+} from '../../../../lib/editor/dynamic-extensions';
 
 // Props expected by NotionEditor
 type NotionEditorProps = {
   content: string;
   onChange: (html: string) => void;
-  openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
-  className?: string;
-};
+  openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
+  className?: string;
+  showAiPrompt?: boolean;
+  dynamicExtensions?: Extensions;
+};
 
 // Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
 const NotionEditor = dynamic<NotionEditorProps>(
@@ -31,29 +40,91 @@ export default function TextBlockEditor({
   className,
 }: BlockEditorProps<Partial<TextBlockContent>>) {
   const labelId = useId();
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const resolverRef = useRef<null | ((v: any) => void)>(null);
-  const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [dynamicDefinitions, setDynamicDefinitions] = useState<DynamicCustomBlockEditorDefinition[]>([]);
+  const [dynamicDefinitionsLoaded, setDynamicDefinitionsLoaded] = useState(false);
+  const isCortexAiActive = useCortexAiActive();
+  const resolverRef = useRef<null | ((v: any) => void)>(null);
   const openImagePicker = useCallback(() => {
     setPickerOpen(true);
     return new Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>((resolve) => {
       resolverRef.current = resolve;
-    });
-  }, []);
-
-  return (
+    });
+  }, []);
+  const dynamicExtensions = useMemo(
+    () => createDynamicCustomBlockExtensions(dynamicDefinitions),
+    [dynamicDefinitions]
+  );
+
+  useEffect(() => {
+    let isActive = true;
+
+    async function loadDynamicDefinitions() {
+      try {
+        const response = await fetch('/api/custom-blocks/editor-definitions', {
+          cache: 'no-store',
+          method: 'GET',
+        });
+        const payload = (await response.json()) as {
+          definitions?: DynamicCustomBlockEditorDefinition[];
+          error?: string;
+        };
+
+        if (!isActive) {
+          return;
+        }
+
+        if (!response.ok) {
+          console.error(
+            '[TextBlockEditor] Failed to load custom block editor definitions:',
+            payload.error
+          );
+          setDynamicDefinitions([]);
+          return;
+        }
+
+        setDynamicDefinitions(payload.definitions ?? []);
+      } catch (error) {
+        if (isActive) {
+          console.error('[TextBlockEditor] Failed to load custom block editor definitions:', error);
+          setDynamicDefinitions([]);
+        }
+      } finally {
+        if (isActive) {
+          setDynamicDefinitionsLoaded(true);
+        }
+      }
+    }
+
+    void loadDynamicDefinitions();
+
+    return () => {
+      isActive = false;
+    };
+  }, []);
+
+  return (
     <div className="h-full flex flex-col">
       <Label htmlFor={labelId} className="sr-only">
         Text Content
       </Label>
 
       <div id={labelId} role="group" aria-labelledby={labelId} className="flex-1 min-h-0 flex flex-col">
-        <NotionEditor
-          content={content?.html_content ?? ''}
-          onChange={(html) => onChange({ html_content: html })}
-          openImagePicker={openImagePicker}
-          className={className}
-        />
+        {dynamicDefinitionsLoaded ? (
+          <NotionEditor
+            key={dynamicDefinitions.map((definition) => definition.id).join('|') || 'static'}
+            content={content?.html_content ?? ''}
+            dynamicExtensions={dynamicExtensions}
+            onChange={(html) => onChange({ html_content: html })}
+            openImagePicker={openImagePicker}
+            className={className}
+            showAiPrompt={isCortexAiActive}
+          />
+        ) : (
+          <div className="flex min-h-[500px] flex-1 items-center justify-center rounded-lg border bg-background text-sm text-muted-foreground">
+            Loading editor...
+          </div>
+        )}
 
         {/* Hidden controlled MediaPickerDialog for image selection */}
         <div className="sr-only" aria-hidden>
@@ -64,7 +135,13 @@ export default function TextBlockEditor({
             title="Select or Upload Image"
             accept={(m) => !!m.file_type?.startsWith('image/')}
             onSelect={(media) => {
-              const src = `${R2_BASE_URL}/${media.object_key}`;
+              const src = resolveMediaUrl(media.file_path || media.object_key);
+              if (!src) {
+                resolverRef.current?.(null);
+                resolverRef.current = null;
+                setPickerOpen(false);
+                return;
+              }
               resolverRef.current?.({
                 src,
                 alt: media.description || media.file_name || undefined,

package/templates/nextblock-template/app/cms/blocks/editors/VideoEmbedBlockEditor.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Label } from "@nextblock-cms/ui";
 import { Input } from "@nextblock-cms/ui";
 import { Checkbox } from "@nextblock-cms/ui";
-import { generateDefaultContent, VideoEmbedBlockContent } from "@/lib/blocks/blockRegistry";
+import { generateDefaultContent, VideoEmbedBlockContent } from '../../../../lib/blocks/blockRegistry';
 import { BlockEditorProps } from '../components/BlockEditorModal';
 
 export default function VideoEmbedBlockEditor({ content, onChange }: BlockEditorProps<Partial<VideoEmbedBlockContent>>) {

package/templates/nextblock-template/app/cms/components/ContentLanguageSwitcher.tsx

@@ -20,9 +20,10 @@ import { cn } from '@nextblock-cms/utils'; // For conditional styling
 type Language = Database['public']['Tables']['languages']['Row'];
 type Page = Database['public']['Tables']['pages']['Row'];
 type Post = Database['public']['Tables']['posts']['Row'];
+type Product = Database['public']['Tables']['products']['Row'];
 interface ContentLanguageSwitcherProps {
-  currentItem: (Page | Post) & { language_code?: string; translation_group_id: string; }; // Must have translation_group_id
-  itemType: 'page' | 'post';
+  currentItem: (Page | Post | Product) & { language_code?: string; translation_group_id: string; }; // Must have translation_group_id
+  itemType: 'page' | 'post' | 'product';
   allSiteLanguages: Language[];
 }
 
@@ -54,7 +55,12 @@ export default function ContentLanguageSwitcher({
 
     async function fetchTranslations() {
       setIsLoading(true);
-      const table = itemType === 'page' ? 'pages' : 'posts';
+      const tableMap = {
+        'page': 'pages',
+        'post': 'posts',
+        'product': 'products'
+      };
+      const table = tableMap[itemType];
       const { data, error } = await supabase
         .from(table)
         .select('id, title, status, language_id, slug') // Fetch slug too
@@ -84,7 +90,9 @@ export default function ContentLanguageSwitcher({
     fetchTranslations();
   }, [currentItem.translation_group_id, itemType, supabase, allSiteLanguages]);
 
-  const currentLanguageName = allSiteLanguages.find(l => l.id === currentItem.language_id)?.name || currentItem.language_code;
+  const currentItemAny = currentItem as any;
+  const currentLanguageName = allSiteLanguages.find(l => l.id === currentItemAny.language_id)?.name || currentItem.language_code;
+
 
   if (allSiteLanguages.length <= 1 && !isLoading) {
     return null; // Don't show switcher if only one language configured
@@ -103,12 +111,22 @@ export default function ContentLanguageSwitcher({
         <DropdownMenuSeparator />
         {allSiteLanguages.map(lang => {
           const version = translations.find(t => t.language_id === lang.id);
-          const isCurrent = lang.id === currentItem.language_id;
+          const currentItemAny = currentItem as any;
+          const isCurrent = lang.id === currentItemAny.language_id;
+
           // Link to create new translation if it doesn't exist
           // This requires a more complex "create translation" flow or pre-created placeholders
-          const editUrl = version
-            ? `/cms/${itemType === 'page' ? 'pages' : 'posts'}/${version.id}/edit`
-            : `/cms/${itemType === 'page' ? 'pages' : 'posts'}/new?from_group=${currentItem.translation_group_id}&target_lang_id=${lang.id}&base_slug=${currentItem.slug}`; // Example URL for creating new translation
+          const tableMap = {
+            'page': 'pages',
+            'post': 'posts',
+            'product': 'products'
+          };
+          const baseUrl = `/cms/${tableMap[itemType]}`;
+          const editUrl = version
+            ? `${baseUrl}/${version.id}/edit`
+            : itemType === 'product'
+              ? `${baseUrl}/${currentItemAny.id}/edit?missing_lang_id=${lang.id}`
+              : `${baseUrl}/new?from_group=${currentItemAny.translation_group_id}&target_lang_id=${lang.id}&base_slug=${currentItemAny.slug}`; // Example URL for creating new translation
 
           if (version) {
             return (
@@ -142,4 +160,4 @@ export default function ContentLanguageSwitcher({
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+}

package/templates/nextblock-template/app/cms/components/CopyContentFromLanguage.tsx

@@ -20,7 +20,7 @@ import {
   SelectValue,
 } from "@nextblock-cms/ui";
 import { Label } from "@nextblock-cms/ui";
-import { copyBlocksFromLanguage } from "@/app/cms/blocks/actions";
+import { copyBlocksFromLanguage } from '../blocks/actions';
 import type { Database } from "@nextblock-cms/db";
 import { useRouter } from "next/navigation";
 

package/templates/nextblock-template/app/cms/components/CortexAiActiveContext.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+const CortexAiActiveContext = createContext<boolean>(false);
+
+export function CortexAiActiveProvider({
+  children,
+  isActive,
+}: {
+  children: React.ReactNode;
+  isActive: boolean;
+}) {
+  return (
+    <CortexAiActiveContext.Provider value={isActive}>
+      {children}
+    </CortexAiActiveContext.Provider>
+  );
+}
+
+export function useCortexAiActive() {
+  return useContext(CortexAiActiveContext);
+}

package/templates/nextblock-template/app/cms/components/CortexAiPageContext.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+export type CortexAiContentType = "page" | "post" | "product";
+
+export type CortexAiPageContext = {
+  contentType: CortexAiContentType;
+  currentEditor?: {
+    blockId?: number | string | null;
+    blockType?: string | null;
+    field?: string | null;
+  };
+  entityId: number | string;
+  languageId?: number | null;
+  slug?: string | null;
+  title?: string | null;
+  translationGroupId?: string | null;
+};
+
+type CortexAiPageContextValue = {
+  pageContext: CortexAiPageContext | null;
+  setPageContext: (context: CortexAiPageContext | null) => void;
+};
+
+const CortexAiPageContextStore = createContext<CortexAiPageContextValue | null>(null);
+
+export function CortexAiPageContextProvider({ children }: { children: React.ReactNode }) {
+  const [pageContext, setPageContext] = useState<CortexAiPageContext | null>(null);
+  const value = useMemo(() => ({ pageContext, setPageContext }), [pageContext]);
+
+  return (
+    <CortexAiPageContextStore.Provider value={value}>
+      {children}
+    </CortexAiPageContextStore.Provider>
+  );
+}
+
+export function useCortexAiPageContext() {
+  return useContext(CortexAiPageContextStore);
+}
+
+export function CortexAiPageContextRegistrar({
+  context,
+}: {
+  context: CortexAiPageContext;
+}) {
+  const store = useCortexAiPageContext();
+  const setPageContext = store?.setPageContext;
+  const serializedContext = JSON.stringify(context);
+
+  useEffect(() => {
+    setPageContext?.(context);
+    return () => setPageContext?.(null);
+  }, [serializedContext, setPageContext]);
+
+  return null;
+}