create-nextblock 0.12.8 → 0.12.11

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

@@ -18,10 +18,10 @@ export type ImageBlockContent = {
     height: number | null;
     blur_data_url: string | null;
 };
-import { ImageIcon, X as XIcon } from 'lucide-react';
-import MediaPickerDialog from "../../media/components/MediaPickerDialog"; // Import the upload form
-import { BlockEditorProps } from '../components/BlockEditorModal';
-import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import { ImageIcon, X as XIcon } from 'lucide-react';
+import MediaPickerDialog from "../../media/components/MediaPickerDialog"; // Import the upload form
+import { BlockEditorProps } from '../components/BlockEditorModal';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
 
 export default function ImageBlockEditor({ content, onChange }: BlockEditorProps<Partial<ImageBlockContent>>) {
   const [selectedMediaObjectKey, setSelectedMediaObjectKey] = useState<string | null | undefined>(content.object_key);
@@ -83,22 +83,22 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
     setSelectedMediaObjectKey(null);
     onChange({ media_id: null, object_key: null, alt_text: "", caption: "", width: null, height: null, blur_data_url: null });
   };
-
-  const displayObjectKey = content.object_key || selectedMediaObjectKey;
-  const displayImageUrl = resolveMediaUrl(displayObjectKey);
-
-  return (
-    <div className="space-y-3 p-3 border-t mt-2">
-      <Label>Image</Label>
-      <div className="mt-1 p-3 border rounded-md bg-muted/30 min-h-[120px] flex flex-col items-center justify-center">
-        {isLoadingMediaDetails && <p>Loading image details...</p>}
-        {!isLoadingMediaDetails && displayImageUrl && typeof content.width === 'number' && typeof content.height === 'number' && content.width > 0 && content.height > 0 ? (
-          <div className="relative group inline-block" style={{ maxWidth: content.width, maxHeight: 200 }}> {/* Max height for editor preview consistency */}
-            <Image
-              src={displayImageUrl}
-              alt={content.alt_text || "Selected image"}
-              width={content.width}
-              height={content.height}
+
+  const displayObjectKey = content.object_key || selectedMediaObjectKey;
+  const displayImageUrl = resolveMediaUrl(displayObjectKey);
+
+  return (
+    <div className="space-y-3 p-3 border-t mt-2">
+      <Label>Image</Label>
+      <div className="mt-1 p-3 border rounded-md bg-muted/30 min-h-[120px] flex flex-col items-center justify-center">
+        {isLoadingMediaDetails && <p>Loading image details...</p>}
+        {!isLoadingMediaDetails && displayImageUrl && typeof content.width === 'number' && typeof content.height === 'number' && content.width > 0 && content.height > 0 ? (
+          <div className="relative group inline-block" style={{ maxWidth: content.width, maxHeight: 200 }}> {/* Max height for editor preview consistency */}
+            <Image
+              src={displayImageUrl}
+              alt={content.alt_text || "Selected image"}
+              width={content.width}
+              height={content.height}
               className="rounded-md object-contain" // Removed max-h-40, relying on width/height and parent max-height
               style={{ maxHeight: '200px' }} // Ensure image does not exceed this height in preview
               placeholder={content.blur_data_url ? "blur" : "empty"}
@@ -108,15 +108,15 @@ export default function ImageBlockEditor({ content, onChange }: BlockEditorProps
               type="button" variant="destructive" size="icon"
               className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6"
               onClick={handleRemoveImage} title="Remove Image"
-            > <XIcon className="h-3 w-3" /> </Button>
-          </div>
-        ) : !isLoadingMediaDetails && displayImageUrl ? ( // Fallback if width/height are missing but key exists
-          <div className="relative group inline-block">
-            <Image
-              src={displayImageUrl}
-              alt={content.alt_text || "Selected image"}
-              width={300}
-              height={200}
+            > <XIcon className="h-3 w-3" /> </Button>
+          </div>
+        ) : !isLoadingMediaDetails && displayImageUrl ? ( // Fallback if width/height are missing but key exists
+          <div className="relative group inline-block">
+            <Image
+              src={displayImageUrl}
+              alt={content.alt_text || "Selected image"}
+              width={300}
+              height={200}
               className="rounded-md object-contain max-h-40 block"
               style={{ maxHeight: '200px' }}
             />

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

@@ -1,28 +1,28 @@
 // app/cms/blocks/editors/TextBlockEditor.tsx
 'use client';
 
-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 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';
+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;
-  showAiPrompt?: boolean;
-  dynamicExtensions?: Extensions;
-};
+  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>(
@@ -40,91 +40,91 @@ export default function TextBlockEditor({
   className,
 }: BlockEditorProps<Partial<TextBlockContent>>) {
   const labelId = useId();
-  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 [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;
-    });
-  }, []);
-  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 (
+    });
+  }, []);
+  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">
-        {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>
-        )}
+        {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>

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

@@ -1,122 +1,122 @@
-'use client';
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Check, ExternalLink, Github, Loader2 } from 'lucide-react';
-import { Button } from '@nextblock-cms/ui';
-import { startGithubConnect, pollGithubConnect } from './github-connect-actions';
-
-type Phase = 'idle' | 'starting' | 'awaiting' | 'installed' | 'error';
-
-/**
- * One-click "Connect GitHub" via the OAuth device flow. On authorization, the server
- * installs the upstream-sync workflow into the repo (the file Vercel's clone strips).
- * No PAT, no env config — the public client id is baked into the app.
- */
-export default function ConnectGitHubButton() {
-  const router = useRouter();
-  const [phase, setPhase] = useState<Phase>('idle');
-  const [userCode, setUserCode] = useState('');
-  const [verificationUri, setVerificationUri] = useState('https://github.com/login/device');
-  const [error, setError] = useState('');
-
-  // Cancel any in-flight polling when the component unmounts.
-  const activeRef = useRef(false);
-  useEffect(() => {
-    activeRef.current = true;
-    return () => {
-      activeRef.current = false;
-    };
-  }, []);
-
-  const poll = useCallback(async (intervalMs: number) => {
-    if (!activeRef.current) return;
-    const result = await pollGithubConnect();
-    if (!activeRef.current) return;
-
-    if (result.status === 'installed') {
-      setPhase('installed');
-      // Re-render the dashboard so the onboarding step picks up the now-active workflow
-      // (the step then flips to done and this control is replaced).
-      router.refresh();
-      return;
-    }
-    if (result.status === 'error') {
-      setError(result.error);
-      setPhase('error');
-      return;
-    }
-    // pending — back off a little on slow_down, then poll again.
-    const next = result.slowDown ? intervalMs + 5000 : intervalMs;
-    setTimeout(() => void poll(next), next);
-  }, [router]);
-
-  const connect = useCallback(async () => {
-    setError('');
-    setPhase('starting');
-    const res = await startGithubConnect();
-    if (!activeRef.current) return;
-    if (!res.ok || !res.userCode) {
-      setError(res.error ?? 'Could not start GitHub connect.');
-      setPhase('error');
-      return;
-    }
-    setUserCode(res.userCode);
-    if (res.verificationUri) setVerificationUri(res.verificationUri);
-    setPhase('awaiting');
-    const intervalMs = Math.max((res.interval ?? 5) + 1, 5) * 1000;
-    setTimeout(() => void poll(intervalMs), intervalMs);
-  }, [poll]);
-
-  if (phase === 'installed') {
-    return (
-      <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
-        <Check className="h-4 w-4" />
-        Connected — workflow installed
-      </div>
-    );
-  }
-
-  if (phase === 'awaiting') {
-    return (
-      <div className="flex flex-col items-end gap-1.5 text-right">
-        <Button asChild size="sm" variant="outline">
-          <a href={verificationUri} target="_blank" rel="noopener noreferrer">
-            Authorize on GitHub
-            <ExternalLink className="ml-1 h-3.5 w-3.5" />
-          </a>
-        </Button>
-        <p className="text-xs text-muted-foreground">
-          Enter code{' '}
-          <span className="font-mono font-semibold tracking-wider text-foreground">{userCode}</span>
-        </p>
-        <p className="flex items-center gap-1 text-xs text-muted-foreground">
-          <Loader2 className="h-3 w-3 animate-spin" />
-          Waiting for authorization…
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col items-end gap-1">
-      <Button
-        size="sm"
-        variant="outline"
-        onClick={() => void connect()}
-        disabled={phase === 'starting'}
-        className="shrink-0"
-      >
-        {phase === 'starting' ? (
-          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-        ) : (
-          <Github className="mr-1 h-3.5 w-3.5" />
-        )}
-        {phase === 'starting' ? 'Starting…' : 'Connect GitHub'}
-      </Button>
-      {phase === 'error' && (
-        <p className="max-w-[16rem] text-right text-xs text-red-600 dark:text-red-400">{error}</p>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Check, ExternalLink, Github, Loader2 } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { startGithubConnect, pollGithubConnect } from './github-connect-actions';
+
+type Phase = 'idle' | 'starting' | 'awaiting' | 'installed' | 'error';
+
+/**
+ * One-click "Connect GitHub" via the OAuth device flow. On authorization, the server
+ * installs the upstream-sync workflow into the repo (the file Vercel's clone strips).
+ * No PAT, no env config — the public client id is baked into the app.
+ */
+export default function ConnectGitHubButton() {
+  const router = useRouter();
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [userCode, setUserCode] = useState('');
+  const [verificationUri, setVerificationUri] = useState('https://github.com/login/device');
+  const [error, setError] = useState('');
+
+  // Cancel any in-flight polling when the component unmounts.
+  const activeRef = useRef(false);
+  useEffect(() => {
+    activeRef.current = true;
+    return () => {
+      activeRef.current = false;
+    };
+  }, []);
+
+  const poll = useCallback(async (intervalMs: number) => {
+    if (!activeRef.current) return;
+    const result = await pollGithubConnect();
+    if (!activeRef.current) return;
+
+    if (result.status === 'installed') {
+      setPhase('installed');
+      // Re-render the dashboard so the onboarding step picks up the now-active workflow
+      // (the step then flips to done and this control is replaced).
+      router.refresh();
+      return;
+    }
+    if (result.status === 'error') {
+      setError(result.error);
+      setPhase('error');
+      return;
+    }
+    // pending — back off a little on slow_down, then poll again.
+    const next = result.slowDown ? intervalMs + 5000 : intervalMs;
+    setTimeout(() => void poll(next), next);
+  }, [router]);
+
+  const connect = useCallback(async () => {
+    setError('');
+    setPhase('starting');
+    const res = await startGithubConnect();
+    if (!activeRef.current) return;
+    if (!res.ok || !res.userCode) {
+      setError(res.error ?? 'Could not start GitHub connect.');
+      setPhase('error');
+      return;
+    }
+    setUserCode(res.userCode);
+    if (res.verificationUri) setVerificationUri(res.verificationUri);
+    setPhase('awaiting');
+    const intervalMs = Math.max((res.interval ?? 5) + 1, 5) * 1000;
+    setTimeout(() => void poll(intervalMs), intervalMs);
+  }, [poll]);
+
+  if (phase === 'installed') {
+    return (
+      <div className="flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
+        <Check className="h-4 w-4" />
+        Connected — workflow installed
+      </div>
+    );
+  }
+
+  if (phase === 'awaiting') {
+    return (
+      <div className="flex flex-col items-end gap-1.5 text-right">
+        <Button asChild size="sm" variant="outline">
+          <a href={verificationUri} target="_blank" rel="noopener noreferrer">
+            Authorize on GitHub
+            <ExternalLink className="ml-1 h-3.5 w-3.5" />
+          </a>
+        </Button>
+        <p className="text-xs text-muted-foreground">
+          Enter code{' '}
+          <span className="font-mono font-semibold tracking-wider text-foreground">{userCode}</span>
+        </p>
+        <p className="flex items-center gap-1 text-xs text-muted-foreground">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          Waiting for authorization…
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-end gap-1">
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={() => void connect()}
+        disabled={phase === 'starting'}
+        className="shrink-0"
+      >
+        {phase === 'starting' ? (
+          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <Github className="mr-1 h-3.5 w-3.5" />
+        )}
+        {phase === 'starting' ? 'Starting…' : 'Connect GitHub'}
+      </Button>
+      {phase === 'error' && (
+        <p className="max-w-[16rem] text-right text-xs text-red-600 dark:text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}

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

@@ -1,58 +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;
-}
+"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;
+}