create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/lib/editor/dynamic-extension-core.ts

@@ -0,0 +1,213 @@
+import { mergeAttributes, Node, type Extensions, type JSONContent, type NodeViewRenderer } from '@tiptap/core';
+import type { CustomBlockDefinition, CustomBlockField } from '@nextblock-cms/utils';
+
+export type DynamicCustomBlockEditorDefinition = Pick<
+  CustomBlockDefinition,
+  'fields' | 'id' | 'layout_schema' | 'name' | 'slug'
+>;
+
+export type DynamicCustomBlockNodeViewRenderer = (
+  definition: DynamicCustomBlockEditorDefinition
+) => NodeViewRenderer;
+
+export type CreateDynamicCustomBlockExtensionOptions = {
+  contentExpression?: string;
+  nodeViewRenderer?: DynamicCustomBlockNodeViewRenderer;
+};
+
+const CUSTOM_BLOCK_NODE_PREFIX = 'customBlock';
+
+function toNodeNameSegment(slug: string) {
+  return slug
+    .replace(/[^a-zA-Z0-9]+/g, '_')
+    .replace(/^_+|_+$/g, '')
+    .replace(/_{2,}/g, '_');
+}
+
+export function getDynamicCustomBlockNodeName(slug: string) {
+  const segment = toNodeNameSegment(slug) || 'unnamed';
+  return `${CUSTOM_BLOCK_NODE_PREFIX}_${segment}`;
+}
+
+function getFieldDefaultValue(field: CustomBlockField) {
+  if ('default_value' in field && field.default_value !== undefined) {
+    return field.default_value;
+  }
+
+  if (field.type === 'db_relation') {
+    return field.multiple ? [] : null;
+  }
+
+  if (field.type === 'image_r2') {
+    return null;
+  }
+
+  return '';
+}
+
+function parseSerializedAttribute(value: string | null, fallback: unknown) {
+  if (value === null) {
+    return fallback;
+  }
+
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+function serializeAttribute(value: unknown) {
+  if (value === null || value === undefined) {
+    return undefined;
+  }
+
+  return typeof value === 'string' ? value : JSON.stringify(value);
+}
+
+function renderDataAttribute(name: string, value: unknown) {
+  const serialized = serializeAttribute(value);
+  return serialized === undefined ? {} : { [name]: serialized };
+}
+
+export function buildDynamicCustomBlockInsertContent(
+  definition: DynamicCustomBlockEditorDefinition,
+  attrs: Record<string, unknown> = {},
+  content: JSONContent[] = []
+) {
+  const fieldAttrs = Object.fromEntries(
+    definition.fields.map((field) => [field.key, getFieldDefaultValue(field)])
+  );
+
+  return {
+    attrs: {
+      ...fieldAttrs,
+      customBlockId: definition.id,
+      customBlockLayoutSchema: definition.layout_schema,
+      customBlockName: definition.name,
+      customBlockSlug: definition.slug,
+      ...attrs,
+    },
+    content,
+    type: getDynamicCustomBlockNodeName(definition.slug),
+  } satisfies JSONContent;
+}
+
+export function getDynamicCustomBlockAttributeNames(
+  definition: DynamicCustomBlockEditorDefinition
+) {
+  return [
+    'customBlockId',
+    'customBlockSlug',
+    'customBlockName',
+    'customBlockLayoutSchema',
+    ...definition.fields.map((field) => field.key),
+  ];
+}
+
+export function createDynamicCustomBlockExtension(
+  definition: DynamicCustomBlockEditorDefinition,
+  options: CreateDynamicCustomBlockExtensionOptions = {}
+) {
+  const nodeName = getDynamicCustomBlockNodeName(definition.slug);
+  const contentExpression = options.contentExpression ?? 'block*';
+
+  const config: Parameters<typeof Node.create>[0] = {
+    name: nodeName,
+    group: 'block',
+    content: contentExpression,
+    defining: true,
+    draggable: true,
+    isolating: true,
+    selectable: true,
+
+    addAttributes() {
+      const attributes: Record<string, unknown> = {
+        customBlockId: {
+          default: definition.id,
+          parseHTML: (element: HTMLElement) =>
+            element.getAttribute('data-custom-block-id') ?? definition.id,
+          renderHTML: (attrs: Record<string, unknown>) =>
+            renderDataAttribute('data-custom-block-id', attrs.customBlockId),
+        },
+        customBlockLayoutSchema: {
+          default: definition.layout_schema,
+          parseHTML: (element: HTMLElement) =>
+            parseSerializedAttribute(
+              element.getAttribute('data-custom-block-layout-schema'),
+              definition.layout_schema
+            ),
+          renderHTML: (attrs: Record<string, unknown>) =>
+            renderDataAttribute(
+              'data-custom-block-layout-schema',
+              attrs.customBlockLayoutSchema
+            ),
+        },
+        customBlockName: {
+          default: definition.name,
+          parseHTML: (element: HTMLElement) =>
+            element.getAttribute('data-custom-block-name') ?? definition.name,
+          renderHTML: (attrs: Record<string, unknown>) =>
+            renderDataAttribute('data-custom-block-name', attrs.customBlockName),
+        },
+        customBlockSlug: {
+          default: definition.slug,
+          parseHTML: (element: HTMLElement) =>
+            element.getAttribute('data-custom-block-slug') ?? definition.slug,
+          renderHTML: (attrs: Record<string, unknown>) =>
+            renderDataAttribute('data-custom-block-slug', attrs.customBlockSlug),
+        },
+      };
+
+      for (const field of definition.fields) {
+        const dataAttributeName = `data-field-${field.key}`;
+        const fallback = getFieldDefaultValue(field);
+
+        attributes[field.key] = {
+          default: fallback,
+          parseHTML: (element: HTMLElement) =>
+            parseSerializedAttribute(element.getAttribute(dataAttributeName), fallback),
+          renderHTML: (attrs: Record<string, unknown>) =>
+            renderDataAttribute(dataAttributeName, attrs[field.key]),
+        };
+      }
+
+      return attributes;
+    },
+
+    parseHTML() {
+      return [
+        {
+          contentElement: '[data-nextblock-custom-block-content]',
+          priority: 75,
+          tag: `div[data-nextblock-custom-block][data-custom-block-slug="${definition.slug}"]`,
+        },
+      ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return [
+        'div',
+        mergeAttributes(HTMLAttributes, {
+          'data-custom-block-node': nodeName,
+          'data-nextblock-custom-block': '',
+        }),
+        ['div', { 'data-nextblock-custom-block-content': '' }, 0],
+      ];
+    },
+  };
+
+  const nodeViewRenderer = options.nodeViewRenderer;
+  if (nodeViewRenderer) {
+    config.addNodeView = () => nodeViewRenderer(definition);
+  }
+
+  return Node.create(config);
+}
+
+export function createDynamicCustomBlockExtensions(
+  definitions: DynamicCustomBlockEditorDefinition[],
+  options: CreateDynamicCustomBlockExtensionOptions = {}
+): Extensions {
+  return definitions.map((definition) => createDynamicCustomBlockExtension(definition, options));
+}

package/templates/nextblock-template/lib/editor/dynamic-extension-loader.ts

@@ -0,0 +1,22 @@
+import 'server-only';
+
+import { orderCustomBlockFieldsByLayout } from '@nextblock-cms/utils';
+
+import { getCachedCustomBlockDefinitions } from '../custom-block-definitions';
+import type { DynamicCustomBlockEditorDefinition } from './dynamic-extension-core';
+
+export async function loadDynamicCustomBlockExtensionDefinitions(): Promise<
+  DynamicCustomBlockEditorDefinition[]
+> {
+  const definitions = await getCachedCustomBlockDefinitions();
+
+  return definitions.map(({ fields, id, layout_schema, name, slug }) => ({
+    // Fields are surfaced in the same order as the layout blueprint so every
+    // editor (CMS block editor, front-end draft editor) lists them consistently.
+    fields: orderCustomBlockFieldsByLayout(fields, layout_schema),
+    id,
+    layout_schema,
+    name,
+    slug,
+  }));
+}

package/templates/nextblock-template/lib/editor/dynamic-extensions.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { ReactNodeViewRenderer, NodeViewContent, NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
+import { Textarea } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import type { CustomBlockField } from '@nextblock-cms/utils';
+
+import {
+  createDynamicCustomBlockExtension,
+  createDynamicCustomBlockExtensions as createDynamicCustomBlockCoreExtensions,
+  type DynamicCustomBlockEditorDefinition,
+} from './dynamic-extension-core';
+import {
+  DBRelationSelect,
+  type DBRelationValue,
+} from '../../app/cms/custom-blocks/components/DBRelationSelect';
+import {
+  ImageR2Picker,
+  type ImageR2Value,
+} from '../../app/cms/custom-blocks/components/ImageR2Picker';
+
+export type { DynamicCustomBlockEditorDefinition } from './dynamic-extension-core';
+export {
+  buildDynamicCustomBlockInsertContent,
+  getDynamicCustomBlockAttributeNames,
+  getDynamicCustomBlockNodeName,
+} from './dynamic-extension-core';
+
+function isImageR2Value(value: unknown): ImageR2Value | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+
+  const candidate = value as Partial<ImageR2Value>;
+  return typeof candidate.url === 'string' && typeof candidate.object_key === 'string'
+    ? (candidate as ImageR2Value)
+    : null;
+}
+
+function getStringValue(value: unknown) {
+  return typeof value === 'string' ? value : '';
+}
+
+function getRelationValue(value: unknown, multiple?: boolean): DBRelationValue {
+  if (multiple) {
+    return Array.isArray(value) ? value.map((entry) => String(entry)) : [];
+  }
+
+  return value === null || value === undefined || value === '' ? null : String(value);
+}
+
+function FieldControl({
+  field,
+  node,
+  updateAttributes,
+}: {
+  field: CustomBlockField;
+  node: NodeViewProps['node'];
+  updateAttributes: NodeViewProps['updateAttributes'];
+}) {
+  const fieldValue = node.attrs[field.key];
+  const fieldId = `dynamic-custom-block-${node.attrs.customBlockSlug}-${field.key}`;
+
+  if (field.type === 'rich-text') {
+    return (
+      <div className="space-y-1">
+        <Label htmlFor={fieldId} className="text-xs font-medium">
+          {field.label}
+        </Label>
+        <Textarea
+          id={fieldId}
+          value={getStringValue(fieldValue)}
+          onChange={(event) => updateAttributes({ [field.key]: event.target.value })}
+          placeholder={field.placeholder}
+          className="min-h-24 text-sm"
+        />
+      </div>
+    );
+  }
+
+  if (field.type === 'image_r2') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-xs font-medium">{field.label}</Label>
+        <ImageR2Picker
+          accept={field.accept}
+          maxBytes={field.max_bytes}
+          value={isImageR2Value(fieldValue)}
+          onChange={(value) => updateAttributes({ [field.key]: value })}
+        />
+      </div>
+    );
+  }
+
+  if (field.type === 'db_relation') {
+    return (
+      <div className="space-y-1">
+        <Label className="text-xs font-medium">{field.label}</Label>
+        <DBRelationSelect
+          displayColumn={field.display_column}
+          filters={field.filters}
+          multiple={field.multiple}
+          onChange={(value) => updateAttributes({ [field.key]: value })}
+          table={field.table}
+          value={getRelationValue(fieldValue, field.multiple)}
+          valueColumn={field.value_column}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <Label htmlFor={fieldId} className="text-xs font-medium">
+        {field.label}
+      </Label>
+      <Input
+        id={fieldId}
+        value={getStringValue(fieldValue)}
+        onChange={(event) => updateAttributes({ [field.key]: event.target.value })}
+        placeholder={field.placeholder}
+        className="h-9"
+      />
+    </div>
+  );
+}
+
+function DynamicCustomBlockNodeView({
+  definition,
+  node,
+  selected,
+  updateAttributes,
+}: NodeViewProps & { definition: DynamicCustomBlockEditorDefinition }) {
+  return (
+    <NodeViewWrapper
+      data-drag-handle
+      className={[
+        'my-4 rounded-md border bg-background text-foreground shadow-sm',
+        selected ? 'ring-2 ring-primary ring-offset-2' : '',
+      ].join(' ')}
+    >
+      <div contentEditable={false} className="border-b bg-muted/40 px-3 py-2">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <div className="min-w-0">
+            <p className="truncate text-sm font-semibold">{definition.name}</p>
+            <p className="truncate font-mono text-[11px] text-muted-foreground">
+              {node.attrs.customBlockSlug}
+            </p>
+          </div>
+          <span className="rounded border bg-background px-2 py-1 text-[11px] uppercase text-muted-foreground">
+            Custom block
+          </span>
+        </div>
+      </div>
+
+      <div contentEditable={false} className="grid gap-3 p-3 md:grid-cols-2">
+        {definition.fields.map((field) => (
+          <FieldControl
+            key={field.key}
+            field={field}
+            node={node}
+            updateAttributes={updateAttributes}
+          />
+        ))}
+      </div>
+
+      <NodeViewContent className="min-h-12 border-t px-3 py-3 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0" />
+    </NodeViewWrapper>
+  );
+}
+
+export function createDynamicCustomBlockExtensions(
+  definitions: DynamicCustomBlockEditorDefinition[]
+) {
+  return createDynamicCustomBlockCoreExtensions(definitions, {
+    nodeViewRenderer: (definition) =>
+      ReactNodeViewRenderer((props) => (
+        <DynamicCustomBlockNodeView {...props} definition={definition} />
+      )),
+  });
+}
+
+export function createDynamicCustomBlockExtensionWithNodeView(
+  definition: DynamicCustomBlockEditorDefinition
+) {
+  return createDynamicCustomBlockExtension(definition, {
+    nodeViewRenderer: () =>
+      ReactNodeViewRenderer((props) => (
+        <DynamicCustomBlockNodeView {...props} definition={definition} />
+      )),
+  });
+}

package/templates/nextblock-template/lib/full-backup/manifest.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  FULL_BACKUP_ARCHIVE_TYPE,
+  FULL_BACKUP_CONFIRMATION,
+  FULL_BACKUP_CONTENT_PATH,
+  FULL_BACKUP_DATABASE_PATH,
+  FULL_BACKUP_STORAGE_PREFIX,
+  archivePathForObjectKey,
+  isValidFullBackupConfirmation,
+  objectKeyFromArchivePath,
+  parseFullBackupManifest,
+  replaceMediaBaseUrlInJson,
+  replaceMediaBaseUrlInString,
+} from "./manifest";
+
+function buildManifest(overrides: Record<string, unknown> = {}) {
+  return JSON.stringify({
+    type: FULL_BACKUP_ARCHIVE_TYPE,
+    version: 1,
+    exported_at: "2026-05-27T00:00:00.000Z",
+    app: {
+      name: "nextblock",
+      version: "0.3.0",
+    },
+    database: {
+      path: FULL_BACKUP_DATABASE_PATH,
+      created_with: "pg_dump",
+    },
+    content: {
+      path: FULL_BACKUP_CONTENT_PATH,
+      type: "nextblock-content-backup-v1",
+    },
+    storage: {
+      bucket: "old-bucket",
+      source_base_url: "https://old-assets.example.com",
+      public_url: null,
+      objects: [
+        {
+          key: "uploads/products/shirt.webp",
+          archive_path: archivePathForObjectKey("uploads/products/shirt.webp"),
+          size: 123,
+          etag: "\"abc\"",
+          content_type: "image/webp",
+          last_modified: "2026-05-27T00:00:00.000Z",
+        },
+      ],
+    },
+    ...overrides,
+  });
+}
+
+describe("full backup manifest helpers", () => {
+  it("encodes and decodes R2 object keys without changing addresses", () => {
+    const objectKey = "uploads/products/shirt.webp";
+    const archivePath = archivePathForObjectKey(objectKey);
+
+    expect(archivePath.startsWith(FULL_BACKUP_STORAGE_PREFIX)).toBe(true);
+    expect(objectKeyFromArchivePath(archivePath)).toBe(objectKey);
+  });
+
+  it("rejects archive object paths that escape the storage prefix", () => {
+    expect(() => objectKeyFromArchivePath("../database/dump.sql")).toThrow(
+      "Archive object path must be inside storage/objects."
+    );
+  });
+
+  it("validates manifest object path and key pairs", () => {
+    const manifest = parseFullBackupManifest(buildManifest());
+
+    expect(manifest.storage.objects).toHaveLength(1);
+    expect(manifest.storage.objects[0].key).toBe("uploads/products/shirt.webp");
+  });
+
+  it("rejects mismatched manifest object paths", () => {
+    const manifest = JSON.parse(buildManifest());
+    manifest.storage.objects[0].archive_path = archivePathForObjectKey("uploads/other.webp");
+
+    expect(() => parseFullBackupManifest(JSON.stringify(manifest))).toThrow(
+      "has a mismatched archive path"
+    );
+  });
+
+  it("rewrites old media base URLs inside strings and JSON content", () => {
+    const html =
+      '<img src="https://old-assets.example.com/uploads/products/shirt.webp" alt="Shirt">';
+    expect(
+      replaceMediaBaseUrlInString(
+        html,
+        "https://old-assets.example.com/",
+        "https://new-assets.example.com/"
+      )
+    ).toContain("https://new-assets.example.com/uploads/products/shirt.webp");
+
+    expect(
+      replaceMediaBaseUrlInJson(
+        {
+          html_content: html,
+          nested: ["https://old-assets.example.com/uploads/hero.webp"],
+        },
+        "https://old-assets.example.com",
+        "https://new-assets.example.com"
+      )
+    ).toEqual({
+      html_content:
+        '<img src="https://new-assets.example.com/uploads/products/shirt.webp" alt="Shirt">',
+      nested: ["https://new-assets.example.com/uploads/hero.webp"],
+    });
+  });
+
+  it("keeps exact URLs when no destination rewrite is requested", () => {
+    const value = "https://old-assets.example.com/uploads/hero.webp";
+
+    expect(replaceMediaBaseUrlInString(value, "", "https://new-assets.example.com")).toBe(value);
+  });
+
+  it("requires the typed destructive restore confirmation", () => {
+    expect(isValidFullBackupConfirmation(FULL_BACKUP_CONFIRMATION)).toBe(true);
+    expect(isValidFullBackupConfirmation("restore full backup")).toBe(false);
+  });
+});