npm - create-nextblock - Versions diffs - 0.14.6 → 0.15.1 - Mend

create-nextblock 0.14.6 → 0.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/templates/nextblock-template/app/cms/settings/site-scripts/components/SiteScriptManager.tsx ADDED Viewed

@@ -0,0 +1,500 @@
+'use client';
+import React, { useMemo, useState, useTransition } from 'react';
+import { Button, Input, Label } from '@nextblock-cms/ui';
+import { reviewScriptCode, type ScriptReview } from '@nextblock-cms/utils/script-safety';
+import { toast } from 'sonner';
+import {
+  SITE_SCRIPT_LOAD_STRATEGIES,
+  SITE_SCRIPT_PLACEMENTS,
+  type SiteScript,
+} from '../../../../../lib/site-scripts/types';
+import {
+  describeSiteScriptRevision,
+  type SiteScriptRevision,
+} from '../../../../../lib/site-scripts/revisions';
+import {
+  createSiteScript,
+  deleteSiteScript,
+  revertSiteScript,
+  setSiteScriptActive,
+  updateSiteScript,
+  type SiteScriptInput,
+} from '../actions';
+const REVISION_LABELS: Record<string, string> = {
+  create: 'Created',
+  delete: 'Deleted',
+  revert: 'Restored',
+  update: 'Edited',
+};
+const PLACEMENT_LABELS: Record<string, string> = {
+  body_end: 'End of <body> — after the markup (recommended)',
+  body_start: 'Start of <body>',
+  head: '<head> — before first paint (blocking)',
+};
+const EMPTY_DRAFT: SiteScriptInput = {
+  code: '',
+  description: '',
+  is_active: false,
+  load_strategy: 'default',
+  name: '',
+  placement: 'body_end',
+  sort_order: 0,
+  src: '',
+};
+const textareaClass =
+  'w-full flex min-h-[220px] rounded-md border border-input bg-background px-3 py-2 text-sm font-mono ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2';
+const selectClass =
+  'w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
+const LEVEL_STYLES: Record<string, string> = {
+  info: 'bg-muted text-muted-foreground',
+  notice: 'bg-amber-500/10 text-amber-700 dark:text-amber-400',
+  warning: 'bg-destructive/10 text-destructive',
+};
+/**
+ * What the code can actually reach, scanned from the source.
+ *
+ * Shown wherever a script is read or edited so the reviewer judges the code rather
+ * than its description — the description may have been written by an AI agent that
+ * read a hostile page.
+ */
+function SafetyReview({ review }: { review: ScriptReview }) {
+  if (review.clean) {
+    return (
+      <p className="text-xs text-muted-foreground">
+        No notable capabilities detected. {review.disclaimer}
+      </p>
+    );
+  }
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5">
+        {review.capabilities.map((capability) => (
+          <span
+            key={capability.id}
+            title={capability.label}
+            className={`rounded-full px-2 py-0.5 text-xs ${LEVEL_STYLES[capability.level] ?? ''}`}
+          >
+            {capability.id}
+          </span>
+        ))}
+      </div>
+      {review.capabilities
+        .filter((capability) => capability.level === 'warning')
+        .map((capability) => (
+          <p key={capability.id} className="text-xs text-destructive">
+            {capability.label}
+          </p>
+        ))}
+      {review.externalHosts.length > 0 && (
+        <p className="text-xs text-muted-foreground">
+          Contacts: <span className="font-mono">{review.externalHosts.join(', ')}</span>
+        </p>
+      )}
+      <p className="text-xs text-muted-foreground">{review.disclaimer}</p>
+    </div>
+  );
+}
+function ScriptEditor({
+  draft,
+  onCancel,
+  onChange,
+  onSave,
+  saving,
+  title,
+}: {
+  draft: SiteScriptInput;
+  onCancel: () => void;
+  onChange: (next: SiteScriptInput) => void;
+  onSave: () => void;
+  saving: boolean;
+  title: string;
+}) {
+  const set = (patch: Partial<SiteScriptInput>) => onChange({ ...draft, ...patch });
+  // Recomputed as the author types, so the consequences are visible before saving.
+  const review = useMemo(
+    () => reviewScriptCode({ code: draft.code, src: draft.src }),
+    [draft.code, draft.src]
+  );
+  return (
+    <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
+      <h3 className="text-sm font-semibold">{title}</h3>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="script-name">Name</Label>
+          <Input
+            id="script-name"
+            value={draft.name}
+            onChange={(e) => set({ name: e.target.value })}
+            placeholder="Scroll reveal animations"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="script-placement">Placement</Label>
+          <select
+            id="script-placement"
+            className={selectClass}
+            value={draft.placement}
+            onChange={(e) => set({ placement: e.target.value })}
+          >
+            {SITE_SCRIPT_PLACEMENTS.map((placement) => (
+              <option key={placement} value={placement}>
+                {PLACEMENT_LABELS[placement] ?? placement}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="script-description">Description</Label>
+        <Input
+          id="script-description"
+          value={draft.description ?? ''}
+          onChange={(e) => set({ description: e.target.value })}
+          placeholder="What this script does, and which pages rely on it"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="script-code">JavaScript</Label>
+        <textarea
+          id="script-code"
+          className={textareaClass}
+          value={draft.code ?? ''}
+          onChange={(e) => set({ code: e.target.value })}
+          placeholder={"document.querySelectorAll('.nb-reveal').forEach((el) => {\n  // ...\n});"}
+        />
+        <p className="text-xs text-muted-foreground">
+          Written without the surrounding &lt;script&gt; tag — NextBlock adds it, along with the
+          page&apos;s CSP nonce.
+        </p>
+        <p className="text-xs text-muted-foreground">
+          Pages are React-hydrated. Do <strong>not</strong> change the text, classes, or attributes
+          of existing markup — React reconciles afterwards and reverts your change (a counter
+          animates, then snaps back). Waiting for the <code>load</code> event is not enough;
+          hydration can still be running. Animate with the Web Animations API instead, which writes
+          no attributes:
+        </p>
+        <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs">
+          <code>{`el.animate(
+  [{ opacity: 0 }, { opacity: 1 }],
+  { duration: 600, fill: 'both' }
+);`}</code>
+        </pre>
+        <p className="text-xs text-muted-foreground">
+          Appending your own new elements is always safe — React does not own those. So is anything
+          you can express in CSS.
+        </p>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="script-src">External URL (optional)</Label>
+          <Input
+            id="script-src"
+            value={draft.src ?? ''}
+            onChange={(e) => set({ src: e.target.value })}
+            placeholder="https://example.com/widget.js"
+          />
+          <p className="text-xs text-muted-foreground">
+            When set, this file is loaded instead of the JavaScript above. Must be https.
+          </p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="script-strategy">Loading (external only)</Label>
+          <select
+            id="script-strategy"
+            className={selectClass}
+            value={draft.load_strategy}
+            onChange={(e) => set({ load_strategy: e.target.value })}
+          >
+            {SITE_SCRIPT_LOAD_STRATEGIES.map((strategy) => (
+              <option key={strategy} value={strategy}>
+                {strategy}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <label className="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          checked={Boolean(draft.is_active)}
+          onChange={(e) => set({ is_active: e.target.checked })}
+        />
+        Enabled — run this on the public site
+      </label>
+      <div className="rounded-md border bg-background p-3">
+        <p className="mb-2 text-xs font-medium">What this code can reach</p>
+        <SafetyReview review={review} />
+      </div>
+      <div className="flex gap-2">
+        <Button onClick={onSave} disabled={saving}>
+          {saving ? 'Saving…' : 'Save script'}
+        </Button>
+        <Button variant="outline" onClick={onCancel} disabled={saving}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
+function RevisionHistory({
+  onRestore,
+  pending,
+  revisions,
+}: {
+  onRestore: (revisionId: string, label: string) => void;
+  pending: boolean;
+  revisions: SiteScriptRevision[];
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="rounded-lg border">
+      <button
+        type="button"
+        className="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium"
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span>History &amp; audit log</span>
+        <span className="text-xs text-muted-foreground">
+          {revisions.length} {revisions.length === 1 ? 'entry' : 'entries'} {open ? '▲' : '▼'}
+        </span>
+      </button>
+      {open && (
+        <div className="border-t">
+          {revisions.length === 0 ? (
+            <p className="px-4 py-3 text-sm text-muted-foreground">
+              Nothing recorded yet. Every change to a site script is logged here.
+            </p>
+          ) : (
+            <ul className="divide-y">
+              {revisions.map((revision) => (
+                <li key={revision.id} className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
+                  <div className="min-w-0">
+                    <div className="flex flex-wrap items-center gap-2 text-sm">
+                      <span className="font-medium">
+                        {REVISION_LABELS[revision.revision_type] ?? revision.revision_type}
+                      </span>
+                      <span className="truncate">{revision.script_name}</span>
+                      <span
+                        className={`rounded-full px-2 py-0.5 text-xs ${
+                          revision.source === 'mcp'
+                            ? 'bg-primary/10 text-primary'
+                            : 'bg-muted text-muted-foreground'
+                        }`}
+                        title={
+                          revision.source === 'mcp'
+                            ? 'Made by an AI client through an MCP token'
+                            : 'Made in the CMS dashboard'
+                        }
+                      >
+                        {revision.source === 'mcp' ? 'MCP' : 'Dashboard'}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      {new Date(revision.created_at).toLocaleString()}
+                      {' — '}
+                      {describeSiteScriptRevision(revision)}
+                    </p>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={pending}
+                    onClick={() =>
+                      onRestore(
+                        revision.id,
+                        `${revision.script_name} (${new Date(revision.created_at).toLocaleString()})`
+                      )
+                    }
+                  >
+                    Restore this version
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+export default function SiteScriptManager({
+  initialRevisions,
+  initialScripts,
+}: {
+  initialRevisions: SiteScriptRevision[];
+  initialScripts: SiteScript[];
+}) {
+  const [isPending, startTransition] = useTransition();
+  const [creating, setCreating] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draft, setDraft] = useState<SiteScriptInput>(EMPTY_DRAFT);
+  const run = (action: () => Promise<{ ok: boolean; message?: string; error?: string }>) => {
+    startTransition(async () => {
+      const result = await action();
+      if (result.ok) {
+        toast.success(result.message ?? 'Saved.');
+        setCreating(false);
+        setEditingId(null);
+        setDraft(EMPTY_DRAFT);
+      } else {
+        toast.error(result.error ?? 'Something went wrong.');
+      }
+    });
+  };
+  const startEdit = (script: SiteScript) => {
+    setCreating(false);
+    setEditingId(script.id);
+    setDraft({
+      code: script.code,
+      description: script.description ?? '',
+      is_active: script.is_active,
+      load_strategy: script.load_strategy,
+      name: script.name,
+      placement: script.placement,
+      sort_order: script.sort_order,
+      src: script.src ?? '',
+    });
+  };
+  return (
+    <div className="space-y-6">
+      {!creating && !editingId && (
+        <Button
+          onClick={() => {
+            setCreating(true);
+            setDraft(EMPTY_DRAFT);
+          }}
+        >
+          Add script
+        </Button>
+      )}
+      {creating && (
+        <ScriptEditor
+          draft={draft}
+          onCancel={() => setCreating(false)}
+          onChange={setDraft}
+          onSave={() => run(() => createSiteScript(draft))}
+          saving={isPending}
+          title="New script"
+        />
+      )}
+      {initialScripts.length === 0 && !creating && (
+        <p className="text-sm text-muted-foreground">
+          No site scripts yet. Add one to run JavaScript on every page — or ask Cortex AI to create
+          it for you.
+        </p>
+      )}
+      <ul className="space-y-3">
+        {initialScripts.map((script) =>
+          editingId === script.id ? (
+            <li key={script.id}>
+              <ScriptEditor
+                draft={draft}
+                onCancel={() => setEditingId(null)}
+                onChange={setDraft}
+                onSave={() => run(() => updateSiteScript(script.id, draft))}
+                saving={isPending}
+                title={`Editing “${script.name}”`}
+              />
+            </li>
+          ) : (
+            <li
+              key={script.id}
+              className="flex flex-wrap items-start justify-between gap-3 rounded-lg border p-4"
+            >
+              <div className="min-w-0 space-y-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{script.name}</span>
+                  <span
+                    className={`rounded-full px-2 py-0.5 text-xs ${
+                      script.is_active
+                        ? 'bg-primary/10 text-primary'
+                        : 'bg-muted text-muted-foreground'
+                    }`}
+                  >
+                    {script.is_active ? 'Enabled' : 'Disabled'}
+                  </span>
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                    {script.placement}
+                  </span>
+                </div>
+                {script.description && (
+                  <p className="text-sm text-muted-foreground">{script.description}</p>
+                )}
+                <p className="truncate font-mono text-xs text-muted-foreground">
+                  {script.src || `${script.code.slice(0, 90)}${script.code.length > 90 ? '…' : ''}`}
+                </p>
+                <SafetyReview review={reviewScriptCode({ code: script.code, src: script.src })} />
+              </div>
+              <div className="flex shrink-0 gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={isPending}
+                  onClick={() => run(() => setSiteScriptActive(script.id, !script.is_active))}
+                >
+                  {script.is_active ? 'Disable' : 'Enable'}
+                </Button>
+                <Button variant="outline" size="sm" onClick={() => startEdit(script)}>
+                  Edit
+                </Button>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  disabled={isPending}
+                  onClick={() => {
+                    if (!window.confirm(`Delete “${script.name}”? This cannot be undone.`)) return;
+                    run(() => deleteSiteScript(script.id));
+                  }}
+                >
+                  Delete
+                </Button>
+              </div>
+            </li>
+          )
+        )}
+      </ul>
+      <RevisionHistory
+        pending={isPending}
+        revisions={initialRevisions}
+        onRestore={(revisionId, label) => {
+          if (!window.confirm(`Restore “${label}”? The current version is kept in the history.`)) return;
+          run(() => revertSiteScript(revisionId));
+        }}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/site-scripts/page.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+// app/cms/settings/site-scripts/page.tsx
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+import { getSiteScriptRevisions, getSiteScripts } from './actions';
+import SiteScriptManager from './components/SiteScriptManager';
+export default async function SiteScriptsSettingsPage() {
+  const [scripts, revisions] = await Promise.all([getSiteScripts(), getSiteScriptRevisions()]);
+  return (
+    <div className="mx-auto max-w-5xl space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Site Scripts</CardTitle>
+          <CardDescription>
+            JavaScript that runs on every page of the public site — animation helpers, chat widgets,
+            third-party embeds. Each script is injected with the page&apos;s Content-Security-Policy
+            nonce, so it runs without weakening the site&apos;s security headers. Disabled scripts are
+            never sent to visitors. Every change is logged and can be rolled back from the history
+            below.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <SiteScriptManager initialRevisions={revisions} initialScripts={scripts} />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Where else code can live</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>
+            <strong className="text-foreground">One page only?</strong> A rich-text block accepts an
+            inline <code>&lt;style&gt;</code> and <code>&lt;script&gt;</code> directly, so
+            page-specific effects do not need to live here.
+          </p>
+          <p>
+            <strong className="text-foreground">Site-wide styling?</strong> Use Themes &amp; CSS for
+            palettes and global stylesheets.
+          </p>
+          <p>
+            <strong className="text-foreground">Marketing or analytics tags?</strong> Put those under
+            Google Analytics instead — scripts there only fire once a visitor accepts cookies, which
+            is what consent law requires. Scripts on this page run unconditionally.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/nextblock-template/app/layout.tsx CHANGED Viewed

@@ -19,6 +19,8 @@ import {
   defaultThemeSlug,
   type SiteTheme,
 } from '../lib/themes/buildThemeCss';
+import { SITE_SCRIPT_COLUMNS, type SiteScript } from '../lib/site-scripts/types';
+import SiteScripts from '../components/SiteScripts';
 import { DeferredSpeedInsights } from '../components/DeferredSpeedInsights';
 import { DeferredVisualEditing } from '../components/visual-editing/DeferredVisualEditing';
 import {
@@ -194,6 +196,27 @@ const getCachedSiteThemes = unstable_cache(
   { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS, tags: ['public-layout-site-themes'] }
 );
+const getCachedSiteScripts = unstable_cache(
+  async (): Promise<SiteScript[]> => {
+    const supabase = createStaticSupabaseClient();
+    const { data, error } = await supabase
+      .from('site_scripts')
+      .select(SITE_SCRIPT_COLUMNS)
+      .eq('is_active', true)
+      .order('sort_order');
+    if (error || !data) {
+      // A missing table (pre-migration install) must not take the site down — the
+      // site simply renders with no author scripts, exactly as before the feature.
+      return [];
+    }
+    return data as SiteScript[];
+  },
+  ['public-layout-site-scripts'],
+  { revalidate: PUBLIC_LAYOUT_REVALIDATE_SECONDS, tags: ['public-layout-site-scripts'] }
+);
 const getCachedTranslations = unstable_cache(
   async () => {
     const supabase = createStaticSupabaseClient();
@@ -324,6 +347,7 @@ async function loadLayoutData() {
       isEcommerceActive: false,
       globalCss: '',
       siteThemes: [] as SiteTheme[],
+      siteScripts: [] as SiteScript[],
       privacySettings: DEFAULT_PRIVACY_SETTINGS,
       footerAttributionEnabled: true,
       rememberVisitorChoice: DEFAULT_LANGUAGE_DETECTION_SETTINGS.rememberVisitorChoice,
@@ -351,6 +375,7 @@ async function loadLayoutData() {
     copyrightSettingsResult,
     globalCssResult,
     siteThemesResult,
+    siteScriptsResult,
     translationsResult,
     isEcommerceActive,
     privacySettings,
@@ -364,6 +389,7 @@ async function loadLayoutData() {
     })),
     getCachedGlobalCss().catch(() => ''),
     getCachedSiteThemes().catch(() => [] as SiteTheme[]),
+    getCachedSiteScripts().catch(() => [] as SiteScript[]),
     getCachedTranslations().catch(() => []),
     verifyPackageOnline('ecommerce').catch(() => false),
     getPrivacySettings().catch(() => DEFAULT_PRIVACY_SETTINGS),
@@ -398,6 +424,7 @@ async function loadLayoutData() {
   const globalCss = typeof globalCssResult === 'string' ? globalCssResult : '';
   const siteThemes = Array.isArray(siteThemesResult) ? siteThemesResult : [];
+  const siteScripts = Array.isArray(siteScriptsResult) ? siteScriptsResult : [];
   const translations = Array.isArray(translationsResult) ? translationsResult : [];
   const hasSupabaseEnv = isSupabaseConfigured();
@@ -434,6 +461,7 @@ async function loadLayoutData() {
     isEcommerceActive,
     globalCss,
     siteThemes,
+    siteScripts,
     privacySettings,
     footerAttributionEnabled,
     rememberVisitorChoice: languageDetectionSettings.rememberVisitorChoice,
@@ -517,6 +545,7 @@ export default async function RootLayout({
     isEcommerceActive,
     globalCss,
     siteThemes,
+    siteScripts,
     privacySettings,
     footerAttributionEnabled,
     rememberVisitorChoice,
@@ -564,8 +593,10 @@ export default async function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {themeCss && <style id="nb-theme-tokens" dangerouslySetInnerHTML={{ __html: themeCss }} />}
         {globalCss && <style dangerouslySetInnerHTML={{ __html: globalCss }} />}
+        <SiteScripts nonce={nonce} placement="head" scripts={siteScripts} />
       </head>
       <body className="min-h-screen">
+        <SiteScripts nonce={nonce} placement="body_start" scripts={siteScripts} />
         {/* Sets window.__NEXTBLOCK_PUBLIC_ENV__ synchronously during render, before any
             descendant calls the browser Supabase client — the local-dev runtime fallback. */}
         <PublicEnvBootstrap
@@ -628,6 +659,8 @@ export default async function RootLayout({
           customScripts={privacySettings.custom_scripts}
           nonce={nonce}
         />
+        {/* Last in <body> so the DOM these snippets query is already present. */}
+        <SiteScripts nonce={nonce} placement="body_end" scripts={siteScripts} />
       </body>
     </html>
   );

package/templates/nextblock-template/components/BlockRenderer.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import { headers } from "next/headers";
 type Block = Database['public']['Tables']['blocks']['Row'];
 import SectionBlockRenderer from "./blocks/renderers/SectionBlockRenderer"; // Static import for LCP
 import ClientTextBlockRenderer from "./blocks/renderers/ClientTextBlockRenderer"; // Static import for client component
+import { addNonceToInlineScripts } from "../lib/blocks/inlineScriptNonce";
 import { getCachedCustomBlockDefinitionBySlug } from "../lib/custom-block-definitions";
 import { CachedDynamicLayoutEngine } from "./renderers/CachedDynamicLayoutEngine";
 import { resolveBlockRelations } from "../lib/resolve-block-relations";
@@ -144,13 +145,18 @@ async function renderLoadedBlock({
   // Keep common LCP-adjacent text blocks out of the dynamic renderer manifest.
   if (block.block_type === 'text') {
-    // Top-level text blocks bypass the server TextBlockRenderer, so resolve any
-    // merge tags (e.g. {{privacy_email}} on the Privacy/Terms pages) here.
+    // Top-level text blocks bypass the server TextBlockRenderer, so everything it
+    // would have done to the HTML has to happen here too: merge tags (e.g.
+    // {{privacy_email}} on the Privacy/Terms pages) and — because the CSP carries a
+    // nonce, which makes browsers ignore 'unsafe-inline' — the inline-script nonce.
+    // Without the latter, an inline <script> an editor wrote into a rich-text block
+    // is dropped by the browser with nothing failing server-side.
     const textContent = block.content as { html_content?: string } | null;
     const rawHtml = typeof textContent?.html_content === 'string' ? textContent.html_content : '';
-    const html = rawHtml.includes('{{')
+    const merged = rawHtml.includes('{{')
       ? await substitutePrivacyMergeTags(rawHtml)
       : rawHtml;
+    const html = addNonceToInlineScripts(merged, scriptNonce ?? '');
     return (
       <ClientTextBlockRenderer
         content={{ ...(textContent as any), html_content: html }}