strapi-plugin-dynamic-zone-tools 1.0.0

package/admin/src/utils/prepareDynamicZoneData.ts

@@ -0,0 +1,625 @@
+import { generateKeyBetween, generateNKeysBetween } from 'fractional-indexing';
+
+export type ComponentSchemas = Record<string, Record<string, any>>;
+
+export interface PrepareZoneDataInsertOptions {
+  /** Fractional key of the last existing block when appending. */
+  previousKey?: string | null;
+  /** Fractional key of the block after the insertion range, if any. */
+  nextKey?: string | null;
+}
+
+const TRANSIENT_ENTRY_KEYS = new Set(['id', 'documentId', '__temp_key__']);
+
+const ENTRY_LABEL_KEYS = ['title', 'heading', 'name', 'label', 'displayName', 'question', 'slug'];
+
+/** Human-readable label for a dynamic zone block (outline, checklists). */
+export function getDynamicZoneEntryLabel(entry: Record<string, any> | null | undefined): string {
+  if (!entry || typeof entry !== 'object') {
+    return '';
+  }
+
+  for (const key of ENTRY_LABEL_KEYS) {
+    const value = entry[key];
+
+    if (typeof value === 'string' && value.trim()) {
+      return value.trim();
+    }
+  }
+
+  const componentUid = entry.__component;
+
+  if (typeof componentUid === 'string') {
+    const shortName = componentUid.split('.').pop() || componentUid;
+    return shortName;
+  }
+
+  return '';
+}
+
+/** Short display name for a component UID (e.g. sections.hero-v3 → hero-v3). */
+export function getComponentDisplayName(componentUid: string): string {
+  return componentUid.split('.').pop() || componentUid;
+}
+
+export interface FilterAllowedResult {
+  allowed: any[];
+  skippedCount: number;
+}
+
+/** Keeps only entries whose __component is allowed in the target dynamic zone. */
+export function filterAllowedDynamicZoneEntries(
+  entries: any[],
+  allowedComponents?: string[] | null
+): FilterAllowedResult {
+  if (!Array.isArray(entries)) {
+    return { allowed: [], skippedCount: 0 };
+  }
+
+  if (!Array.isArray(allowedComponents)) {
+    return { allowed: entries, skippedCount: 0 };
+  }
+
+  const allowed = entries.filter((entry) => allowedComponents.includes(entry?.__component));
+  return { allowed, skippedCount: entries.length - allowed.length };
+}
+
+/**
+ * Loads component attribute maps from the Content Manager init endpoint.
+ */
+export async function loadComponentSchemas(
+  get: (url: string) => Promise<{ data?: any }>
+): Promise<ComponentSchemas> {
+  const response = await get('/content-manager/init');
+  const payload = response?.data?.data ?? response?.data ?? {};
+  const map: ComponentSchemas = {};
+
+  (payload.components ?? []).forEach((component: any) => {
+    map[component.uid] = component.attributes ?? component.schema?.attributes ?? {};
+  });
+
+  return map;
+}
+
+/**
+ * Transforms deep-populated API dynamic zone entries into Content Manager form shape.
+ * Used when copying from another record via the fill-from-record workflow.
+ */
+export function prepareZoneData(
+  entries: any[],
+  schemas: ComponentSchemas,
+  insertOptions?: PrepareZoneDataInsertOptions
+): any[] {
+  const buildConnectItems = (value: any, attribute: any) => {
+    const items = (Array.isArray(value) ? value : [value]).filter(
+      (rel) => rel && typeof rel === 'object' && rel.documentId
+    );
+    const keys = generateNKeysBetween(undefined, undefined, items.length);
+
+    return items.map((rel: any, index: number) => ({
+      id: rel.id,
+      apiData: {
+        id: rel.id,
+        documentId: rel.documentId,
+        locale: rel.locale ?? undefined,
+        isTemporary: true,
+      },
+      status: rel.status ?? (rel.publishedAt ? 'published' : 'draft'),
+      label: rel.title ?? rel.name ?? rel.label ?? rel.documentId,
+      href: `../collection-types/${attribute.target}/${rel.documentId}${
+        rel.locale ? `?plugins[i18n][locale]=${rel.locale}` : ''
+      }`,
+      __temp_key__: keys[index],
+    }));
+  };
+
+  const transformComponent = (data: any, attributes: Record<string, any>): any => {
+    const out: Record<string, any> = {};
+
+    Object.entries(data ?? {}).forEach(([key, value]) => {
+      if (key === 'id') return;
+      if (key === '__component') {
+        out[key] = value;
+        return;
+      }
+
+      const attribute = attributes?.[key];
+      if (!attribute) return;
+
+      if (value === null || value === undefined) {
+        if (attribute.type === 'boolean') out[key] = value;
+        return;
+      }
+
+      switch (attribute.type) {
+        case 'component': {
+          const nestedAttributes = schemas[attribute.component] ?? {};
+          if (attribute.repeatable) {
+            const items = Array.isArray(value) ? value : [];
+            const keys = generateNKeysBetween(undefined, undefined, items.length);
+            out[key] = items.map((item: any, index: number) => ({
+              ...transformComponent(item, nestedAttributes),
+              __temp_key__: keys[index],
+            }));
+          } else {
+            out[key] = transformComponent(value, nestedAttributes);
+          }
+          break;
+        }
+        case 'relation': {
+          if (attribute.target) {
+            out[key] = { connect: buildConnectItems(value, attribute), disconnect: [] };
+          }
+          break;
+        }
+        default:
+          out[key] = value;
+      }
+    });
+
+    return out;
+  };
+
+  const { previousKey = null, nextKey = null } = insertOptions ?? {};
+  const keys =
+    insertOptions !== undefined
+      ? generateNKeysBetween(previousKey ?? null, nextKey ?? null, entries.length)
+      : generateNKeysBetween(undefined, undefined, entries.length);
+
+  return entries.map((entry: any, index: number) => ({
+    ...transformComponent(entry, schemas[entry.__component] ?? {}),
+    __component: entry.__component,
+    __temp_key__: keys[index],
+  }));
+}
+
+/** Transforms entries for append mode with stable keys after existing zone blocks. */
+export function prepareZoneDataForInsert(
+  entries: any[],
+  schemas: ComponentSchemas,
+  insertOptions: PrepareZoneDataInsertOptions
+): any[] {
+  return prepareZoneData(entries, schemas, insertOptions);
+}
+
+/** Prepares a single API-sourced dynamic zone entry for the edit form. */
+export function prepareDynamicZoneEntry(entry: any, schemas: ComponentSchemas): any {
+  return prepareZoneData([entry], schemas)[0];
+}
+
+function clonePlainValue<T>(value: T): T {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(value);
+  }
+
+  return JSON.parse(JSON.stringify(value));
+}
+
+const COLLECTION_TYPES = 'collection-types';
+const SINGLE_TYPES = 'single-types';
+
+const ONE_WAY_RELATIONS = new Set([
+  'oneWay',
+  'oneToOne',
+  'manyToOne',
+  'oneToManyMorph',
+  'oneToOneMorph',
+]);
+
+export type ContentTypeSchema = { uid?: string; kind?: string };
+
+export type FetchRelationItems = (
+  model: string,
+  entityId: string | number,
+  fieldName: string
+) => Promise<any[]>;
+
+export interface CloneFormDynamicZoneEntryOptions {
+  schemas: ComponentSchemas;
+  contentTypes?: ContentTypeSchema[];
+  fetchRelationItems?: FetchRelationItems;
+}
+
+interface RelationSourceContext {
+  model?: string;
+  id?: string | number;
+}
+
+function isPlainObject(value: unknown): value is Record<string, any> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function getRelationIdentity(relation: any): string | null {
+  if (!isPlainObject(relation)) {
+    return null;
+  }
+
+  const documentId = relation.documentId ?? relation.apiData?.documentId;
+  const locale = relation.locale ?? relation.apiData?.locale ?? '';
+  const id = relation.id ?? relation.apiData?.id;
+
+  if (documentId) {
+    return `${documentId}::${locale}`;
+  }
+
+  if (id !== null && id !== undefined) {
+    return `id:${id}`;
+  }
+
+  return null;
+}
+
+function getRelationDisplayValue(relation: Record<string, any>): string {
+  for (const key of ['label', 'title', 'name', 'displayName', 'question', 'heading', 'slug', 'documentId', 'id']) {
+    const value = relation[key];
+
+    if (typeof value === 'string' && value.trim()) {
+      return value;
+    }
+
+    if (typeof value === 'number') {
+      return String(value);
+    }
+  }
+
+  return '';
+}
+
+function getRelationCollectionType(targetModel: string, contentTypes?: ContentTypeSchema[]): string {
+  const targetSchema = contentTypes?.find((schema) => schema?.uid === targetModel);
+
+  return targetSchema?.kind === 'singleType' ? SINGLE_TYPES : COLLECTION_TYPES;
+}
+
+function getRelationHref(
+  targetModel: string | undefined,
+  contentTypes: ContentTypeSchema[] | undefined,
+  documentId: string | undefined,
+  locale?: string | null
+): string | undefined {
+  if (!targetModel || !documentId) {
+    return undefined;
+  }
+
+  const collectionType = getRelationCollectionType(targetModel, contentTypes);
+  const basePath =
+    collectionType === SINGLE_TYPES
+      ? `../${SINGLE_TYPES}/${targetModel}`
+      : `../${COLLECTION_TYPES}/${targetModel}/${documentId}`;
+
+  return locale ? `${basePath}?plugins[i18n][locale]=${locale}` : basePath;
+}
+
+function normalizeFetchedRelations(value: unknown): any[] {
+  if (Array.isArray(value)) {
+    return value.filter(isPlainObject);
+  }
+
+  if (isPlainObject(value) && Array.isArray(value.results)) {
+    return value.results.filter(isPlainObject);
+  }
+
+  if (isPlainObject(value)) {
+    return [value];
+  }
+
+  return [];
+}
+
+function toRelationConnectEntry(
+  relation: Record<string, any>,
+  attribute: Record<string, any>,
+  contentTypes: ContentTypeSchema[] | undefined,
+  tempKey: string
+) {
+  const id = relation.id ?? relation.apiData?.id;
+  const documentId = relation.documentId ?? relation.apiData?.documentId;
+  const locale = relation.locale ?? relation.apiData?.locale ?? null;
+  const label = relation.label ?? getRelationDisplayValue(relation);
+  const href = relation.href ?? getRelationHref(attribute.target, contentTypes, documentId, locale);
+
+  if (id === undefined && !documentId) {
+    return null;
+  }
+
+  const entry: Record<string, any> = {
+    id,
+    documentId,
+    locale,
+    href,
+    label: label || documentId || (id !== undefined && id !== null ? String(id) : ''),
+    __temp_key__: tempKey,
+    apiData: {
+      id,
+      documentId,
+      locale,
+      isTemporary: true,
+    },
+  };
+
+  if (relation.status !== undefined) {
+    entry.status = relation.status;
+  } else if (typeof relation.publishedAt === 'string') {
+    entry.status = 'published';
+  }
+
+  return entry;
+}
+
+async function sanitizeRelationValue(
+  attribute: Record<string, any>,
+  value: any,
+  fieldName: string,
+  sourceContext: RelationSourceContext | undefined,
+  contentTypes: ContentTypeSchema[] | undefined,
+  fetchRelationItems: FetchRelationItems | undefined,
+  createTempKey: () => string
+) {
+  const currentConnect = Array.isArray(value?.connect) ? value.connect : [];
+  const currentDisconnect = Array.isArray(value?.disconnect) ? value.disconnect : [];
+  const fetchedRelations =
+    fetchRelationItems && sourceContext?.model && sourceContext?.id
+      ? await fetchRelationItems(sourceContext.model, sourceContext.id, fieldName)
+      : [];
+
+  const connectedByIdentity = new Map<string, Record<string, any>>();
+
+  for (const relation of currentConnect) {
+    const entry = toRelationConnectEntry(relation, attribute, contentTypes, createTempKey());
+    const identity = getRelationIdentity(entry);
+
+    if (entry && identity) {
+      connectedByIdentity.set(identity, entry);
+    }
+  }
+
+  const disconnectedIdentities = new Set(
+    currentDisconnect.map(getRelationIdentity).filter(Boolean) as string[]
+  );
+
+  const effectiveRelations: Record<string, any>[] = [];
+
+  for (const relation of fetchedRelations) {
+    const entry = toRelationConnectEntry(relation, attribute, contentTypes, createTempKey());
+    const identity = getRelationIdentity(entry);
+
+    if (!entry || !identity || disconnectedIdentities.has(identity)) {
+      continue;
+    }
+
+    if (connectedByIdentity.has(identity)) {
+      effectiveRelations.push(connectedByIdentity.get(identity)!);
+      connectedByIdentity.delete(identity);
+      continue;
+    }
+
+    effectiveRelations.push(entry);
+  }
+
+  for (const relation of connectedByIdentity.values()) {
+    effectiveRelations.push(relation);
+  }
+
+  const connect = ONE_WAY_RELATIONS.has(attribute.relation)
+    ? effectiveRelations.slice(-1)
+    : effectiveRelations;
+
+  return {
+    connect,
+    disconnect: [],
+  };
+}
+
+async function cloneComponentFields(
+  data: any,
+  componentUid: string,
+  options: CloneFormDynamicZoneEntryOptions,
+  sourceContext?: RelationSourceContext
+): Promise<Record<string, any>> {
+  const { schemas, contentTypes, fetchRelationItems } = options;
+  const attributes = schemas[componentUid] ?? {};
+  const out: Record<string, any> = { __component: data.__component };
+  const tempKeys = generateNKeysBetween(undefined, undefined, Object.keys(data).length + 10);
+  let tempKeyIndex = 0;
+  const createTempKey = () => tempKeys[tempKeyIndex++] ?? generateKeyBetween(null, null);
+
+  const context: RelationSourceContext = {
+    model: componentUid,
+    id: sourceContext?.id ?? data.id,
+  };
+
+  for (const [key, rawValue] of Object.entries(data)) {
+    const value = rawValue as any;
+    if (TRANSIENT_ENTRY_KEYS.has(key) || key === '__component') {
+      continue;
+    }
+
+    const attribute = attributes[key];
+
+    if (!attribute) {
+      if (value !== undefined) {
+        out[key] = clonePlainValue(value);
+      }
+      continue;
+    }
+
+    if (value === null || value === undefined) {
+      if (attribute.type === 'boolean') {
+        out[key] = value;
+      }
+      continue;
+    }
+
+    switch (attribute.type) {
+      case 'component': {
+        if (attribute.repeatable) {
+          const items = Array.isArray(value) ? value : [];
+          const keys = generateNKeysBetween(undefined, undefined, items.length);
+          out[key] = await Promise.all(
+            items.map(async (item: any, index: number) => ({
+              ...(await cloneComponentFields(item, attribute.component, options, {
+                model: attribute.component,
+                id: item?.id,
+              })),
+              __temp_key__: keys[index],
+            }))
+          );
+        } else {
+          out[key] = await cloneComponentFields(value, attribute.component, options, {
+            model: attribute.component,
+            id: value?.id,
+          });
+        }
+        break;
+      }
+      case 'dynamiczone': {
+        if (!Array.isArray(value)) {
+          out[key] = [];
+          break;
+        }
+
+        const keys = generateNKeysBetween(undefined, undefined, value.length);
+        out[key] = await Promise.all(
+          value.map(async (item: any, index: number) => ({
+            ...(await cloneFormDynamicZoneEntry(item, options)),
+            __temp_key__: keys[index],
+          }))
+        );
+        break;
+      }
+      case 'relation':
+        if (!attribute.target) {
+          out[key] = { connect: [], disconnect: [] };
+          break;
+        }
+
+        out[key] = await sanitizeRelationValue(
+          attribute,
+          value,
+          key,
+          context,
+          contentTypes,
+          fetchRelationItems,
+          createTempKey
+        );
+        break;
+      default:
+        out[key] = clonePlainValue(value);
+    }
+  }
+
+  return out;
+}
+
+/**
+ * Clones an in-form dynamic zone entry for in-place duplication.
+ * Strips persisted ids/temp keys, assigns fresh ordering keys, and
+ * fetches persisted relations from the content-manager relations API.
+ */
+export async function cloneFormDynamicZoneEntry(
+  entry: any,
+  options: CloneFormDynamicZoneEntryOptions
+): Promise<any> {
+  if (!entry || typeof entry.__component !== 'string') {
+    return entry;
+  }
+
+  const cloned = await cloneComponentFields(entry, entry.__component, options, {
+    model: entry.__component,
+    id: entry.id,
+  });
+
+  return cloned;
+}
+
+/** Creates a cached fetcher for component relation fields. */
+export function createFetchRelationItems(
+  get: (url: string, config?: { params?: Record<string, unknown> }) => Promise<{ data?: any }>,
+  relationQueryParams: Record<string, unknown> = {}
+): FetchRelationItems {
+  const cache = new Map<string, Promise<any[]>>();
+
+  return async (relationModel, relationId, fieldName) => {
+    if (!relationModel || relationId === undefined || relationId === null || !fieldName) {
+      return [];
+    }
+
+    const cacheKey = JSON.stringify({ relationModel, relationId, fieldName, relationQueryParams });
+    const cached = cache.get(cacheKey);
+
+    if (cached) {
+      return cached;
+    }
+
+    const request = (async () => {
+      let page = 1;
+      let totalPages = 1;
+      const relations: any[] = [];
+
+      while (page <= totalPages) {
+        const response = await get(
+          `/content-manager/relations/${relationModel}/${relationId}/${fieldName}`,
+          {
+            params: {
+              ...relationQueryParams,
+              page,
+              pageSize: 100,
+            },
+          }
+        );
+        const payload = response?.data ?? {};
+        const pageResults = normalizeFetchedRelations(payload.results).reverse();
+
+        relations.push(...pageResults);
+
+        const pagination = payload?.pagination;
+        const pageCount =
+          typeof pagination?.pageCount === 'number'
+            ? pagination.pageCount
+            : Math.max(1, Math.ceil((pagination?.total ?? pageResults.length) / 100));
+
+        totalPages = pageCount;
+        page += 1;
+      }
+
+      return relations;
+    })();
+
+    cache.set(cacheKey, request);
+
+    try {
+      return await request;
+    } catch {
+      cache.delete(cacheKey);
+      throw new Error('Failed to fetch relations');
+    }
+  };
+}
+
+/** Inserts a cloned entry immediately after `sourceIndex` with a stable temp key. */
+export function insertDynamicZoneClone(
+  zone: any[],
+  sourceIndex: number,
+  clonedEntry: any
+): any[] {
+  const prevKey = zone[sourceIndex]?.__temp_key__ ?? null;
+  const nextKey = zone[sourceIndex + 1]?.__temp_key__ ?? null;
+
+  return [
+    ...zone.slice(0, sourceIndex + 1),
+    { ...clonedEntry, __temp_key__: generateKeyBetween(prevKey, nextKey) },
+    ...zone.slice(sourceIndex + 1),
+  ];
+}
+
+/** Prepare a copied block for insertion at a target index with a fresh temp key. */
+export function prepareEntryForZoneInsert(zone: any[], targetIndex: number, entry: any): any {
+  const prevKey = targetIndex > 0 ? zone[targetIndex - 1]?.__temp_key__ ?? null : null;
+  const nextKey = targetIndex < zone.length ? zone[targetIndex]?.__temp_key__ ?? null : null;
+  const { id, documentId, __temp_key__, ...rest } = entry;
+
+  return {
+    ...rest,
+    __temp_key__: generateKeyBetween(prevKey, nextKey),
+  };
+}

package/admin/src/utils/relationQueryParams.ts

@@ -0,0 +1,19 @@
+/** Extract locale/status for content-manager relation requests from URL query params. */
+export function getRelationQueryParams(query: Record<string, unknown> | undefined) {
+  if (!query) {
+    return {};
+  }
+
+  const { plugins, ...rest } = query as Record<string, any>;
+  const pluginParams = Object.values(plugins ?? {}).reduce<Record<string, unknown>>(
+    (acc, current) => Object.assign(acc, current as Record<string, unknown>),
+    {}
+  );
+
+  const params = { ...rest, ...pluginParams };
+
+  return {
+    locale: params.locale,
+    status: params.status,
+  };
+}

package/admin/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig",
+  "include": ["./src", "./custom.d.ts"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"],
+  "compilerOptions": {
+    "rootDir": "../",
+    "baseUrl": ".",
+    "outDir": "./dist"
+  }
+}

package/admin/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@strapi/typescript-utils/tsconfigs/admin",
+  "include": [
+    "./src",
+    "./custom.d.ts"
+  ],
+  "compilerOptions": {
+    "rootDir": "../",
+    "baseUrl": ".",
+    "tsBuildInfoFile": "./.tsbuildinfo"
+  }
+}