strapi-plugin-dynamic-zone-tools 1.0.0

package/admin/src/utils/dynamicZonePaths.ts

@@ -0,0 +1,236 @@
+const INDEX_SEGMENT = /^\d+$/;
+
+export interface DynamicZoneField {
+  fieldName: string;
+  displayName: string;
+}
+
+export interface DynamicZoneBlockRef {
+  zonePath: string;
+  index: number;
+}
+
+export function getDynamicZoneFields(attributes?: Record<string, any> | null): DynamicZoneField[] {
+  if (!attributes) {
+    return [];
+  }
+
+  return Object.entries(attributes)
+    .filter(([, attribute]) => attribute?.type === 'dynamiczone')
+    .map(([fieldName, attribute]) => ({
+      fieldName,
+      displayName: attribute?.displayName || fieldName,
+    }));
+}
+
+/** Infer dynamic zone field names from loaded form values. */
+export function getDynamicZonePathsFromValues(values: Record<string, unknown>): string[] {
+  return Object.entries(values)
+    .filter(([, zone]) => Array.isArray(zone) && zone.some(isDynamicZoneEntry))
+    .map(([fieldName]) => fieldName);
+}
+
+export function isDynamicZoneEntry(value: unknown): value is Record<string, any> {
+  return Boolean(value && typeof value === 'object' && typeof (value as any).__component === 'string');
+}
+
+export function getValueAtPath(source: unknown, path: string): unknown {
+  if (!path) {
+    return source;
+  }
+
+  let current: unknown = source;
+
+  for (const segment of path.split('.')) {
+    if (current === null || current === undefined) {
+      return undefined;
+    }
+
+    if (INDEX_SEGMENT.test(segment)) {
+      if (!Array.isArray(current)) {
+        return undefined;
+      }
+
+      current = current[Number(segment)];
+      continue;
+    }
+
+    current = (current as Record<string, unknown>)[segment];
+  }
+
+  return current;
+}
+
+/** Strapi renders dynamic zone blocks inside an accessible ordered list. */
+export function findDynamicZoneLists(root: ParentNode = document): HTMLOListElement[] {
+  return Array.from(root.querySelectorAll('ol[aria-describedby]'));
+}
+
+export function getDynamicZoneListItems(list: Element): HTMLLIElement[] {
+  return Array.from(list.children).filter(
+    (child): child is HTMLLIElement => child instanceof HTMLLIElement
+  );
+}
+
+/** Row action bar in the accordion header (Delete, Move/Drag, More). */
+export function findRowActionContainer(rowElement: Element): HTMLElement | null {
+  const header = rowElement.querySelector('h3');
+
+  if (!header) {
+    return null;
+  }
+
+  for (const span of header.querySelectorAll('span')) {
+    const buttons = span.querySelectorAll(':scope > button');
+
+    if (buttons.length >= 2) {
+      return span as HTMLElement;
+    }
+  }
+
+  return null;
+}
+
+/** Insert duplicate after Delete, before Move/Drag controls. */
+export function getRowActionInsertPoint(actionContainer: HTMLElement): Element | null {
+  const buttons = Array.from(actionContainer.querySelectorAll(':scope > button'));
+
+  if (buttons.length === 0) {
+    return null;
+  }
+
+  const reorderButton = buttons.find((button) => {
+    if (!(button instanceof HTMLButtonElement)) {
+      return false;
+    }
+
+    const label = button.querySelector('span')?.textContent?.trim().toLowerCase() ?? '';
+    return (
+      label === 'drag' ||
+      label === 'move up' ||
+      label === 'move down' ||
+      button.hasAttribute('data-handler-id')
+    );
+  });
+
+  return reorderButton ?? buttons[1] ?? null;
+}
+
+function disambiguateZonePathByRowLabel(
+  rowElement: Element,
+  candidates: string[],
+  values: Record<string, unknown>,
+  index: number
+): string | null {
+  const rowText = (rowElement.textContent || '').toLowerCase();
+
+  const matches = candidates.filter((fieldName) => {
+    const entry = getValueAtPath(values, `${fieldName}.${index}`);
+
+    if (!isDynamicZoneEntry(entry)) {
+      return false;
+    }
+
+    const componentUid = entry.__component.split('.').pop() || entry.__component;
+    return rowText.includes(componentUid.toLowerCase()) || rowText.includes(fieldName.toLowerCase());
+  });
+
+  return matches.length === 1 ? matches[0] : null;
+}
+
+export function resolveBlockFromListItemIndex(
+  listElement: Element,
+  index: number,
+  values: Record<string, unknown>,
+  zonePaths: string[]
+): DynamicZoneBlockRef | null {
+  const rowCount = getDynamicZoneListItems(listElement).length;
+  const candidates = zonePaths.filter((fieldName) => {
+    const zone = values[fieldName];
+    return Array.isArray(zone) && zone.length === rowCount;
+  });
+
+  if (candidates.length === 1) {
+    return { zonePath: candidates[0], index };
+  }
+
+  if (candidates.length > 1) {
+    const rowElement = getDynamicZoneListItems(listElement)[index];
+    const zonePath = rowElement
+      ? disambiguateZonePathByRowLabel(rowElement, candidates, values, index)
+      : null;
+
+    if (zonePath) {
+      return { zonePath, index };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Resolves which dynamic zone block a rendered list item represents by inspecting
+ * named fields inside the row and matching them against current form values.
+ */
+export function resolveBlockFromListItem(
+  listItem: Element,
+  values: Record<string, unknown>
+): DynamicZoneBlockRef | null {
+  const fieldNames = Array.from(listItem.querySelectorAll('[name]'))
+    .map((element) => element.getAttribute('name') || '')
+    .filter(Boolean)
+    .sort((a, b) => a.length - b.length);
+
+  for (const fieldName of fieldNames) {
+    const segments = fieldName.split('.');
+
+    for (let indexPosition = segments.length - 2; indexPosition >= 0; indexPosition -= 1) {
+      const segment = segments[indexPosition];
+
+      if (!INDEX_SEGMENT.test(segment)) {
+        continue;
+      }
+
+      const itemPath = segments.slice(0, indexPosition + 1).join('.');
+      const zonePath = segments.slice(0, indexPosition).join('.');
+      const index = Number(segment);
+      const itemValue = getValueAtPath(values, itemPath);
+
+      if (isDynamicZoneEntry(itemValue) && Array.isArray(getValueAtPath(values, zonePath))) {
+        return { zonePath, index };
+      }
+    }
+  }
+
+  const list = listItem.closest('ol[aria-describedby]');
+  const zonePaths = getDynamicZonePathsFromValues(values);
+
+  if (list && zonePaths.length > 0) {
+    const index = getDynamicZoneListItems(list).indexOf(listItem as HTMLLIElement);
+
+    if (index >= 0) {
+      return resolveBlockFromListItemIndex(list, index, values, zonePaths);
+    }
+  }
+
+  return null;
+}
+
+function getButtonLabel(button: HTMLButtonElement): string {
+  return button.querySelector('span')?.textContent?.trim().toLowerCase() ?? '';
+}
+
+/** Desktop edit view uses a drag handle; mobile uses move up/down buttons. */
+export function findDynamicZoneDragHandles(root: ParentNode = document): HTMLButtonElement[] {
+  return Array.from(root.querySelectorAll<HTMLButtonElement>('button[data-handler-id], button')).filter(
+    (button) => {
+      const label = getButtonLabel(button);
+      return label === 'drag' || button.hasAttribute('data-handler-id');
+    }
+  );
+}
+
+export function findRowElementForDragHandle(dragHandle: Element): HTMLLIElement | null {
+  return dragHandle.closest('li');
+}
+

package/admin/src/utils/getTranslation.ts

@@ -0,0 +1,5 @@
+import { PLUGIN_ID } from '../pluginId';
+
+const getTranslation = (id: string) => `${PLUGIN_ID}.${id}`;
+
+export { getTranslation };