strapi-plugin-dynamic-zone-tools 1.0.0

package/admin/src/components/FillFromRecord.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box, Typography, Alert } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { PLUGIN_ID } from '../pluginId';
+
+export const FillFromRecord: React.FC = () => {
+  const { formatMessage } = useIntl();
+
+  // Check if we're in the right context (edit view)
+  const isInEditView =
+    window.location.pathname.includes('/content-manager/collection-types') &&
+    window.location.pathname.split('/').length >= 6;
+
+  if (!isInEditView) {
+    return null;
+  }
+
+  return (
+    <Box padding={4} background="neutral0" hasRadius shadow="filterShadow">
+      <Typography variant="sigma" textColor="neutral600" textTransform="uppercase">
+        {formatMessage({
+          id: `${PLUGIN_ID}.legacy.title`,
+          defaultMessage: 'Dynamic Zone Tools',
+        })}
+      </Typography>
+      <Alert variant="default" title="New Version Available">
+        <Typography>
+          {formatMessage({
+            id: `${PLUGIN_ID}.legacy.message`,
+            defaultMessage: 'This is a legacy fallback version. Please update to Strapi 5+ for the full sidebar experience.',
+          })}
+        </Typography>
+      </Alert>
+    </Box>
+  );
+};

package/admin/src/components/Initializer.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+
+import { PLUGIN_ID } from '../pluginId';
+
+type InitializerProps = {
+  setPlugin: (id: string) => void;
+};
+
+const Initializer = ({ setPlugin }: InitializerProps) => {
+  const ref = useRef(setPlugin);
+
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+
+  return null;
+};
+
+export { Initializer };

package/admin/src/components/PluginIcon.tsx

@@ -0,0 +1,5 @@
+import { PuzzlePiece } from '@strapi/icons';
+
+const PluginIcon = () => <PuzzlePiece />;
+
+export { PluginIcon };

package/admin/src/index.ts

@@ -0,0 +1,61 @@
+import { getTranslation } from './utils/getTranslation';
+import { PLUGIN_ID } from './pluginId';
+import { Initializer } from './components/Initializer';
+import { DynamicZoneToolsHeaderAction } from './components/DynamicZoneToolsPanel';
+import { DynamicZoneEditViewExtensions } from './components/DynamicZoneEditViewExtensions';
+
+export default {
+  register(app: any) {
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID,
+    });
+  },
+
+  async bootstrap(app: any) {
+    try {
+      const contentManager = app.getPlugin('content-manager');
+
+      contentManager.apis.addDocumentHeaderAction([DynamicZoneToolsHeaderAction]);
+
+      const injector = {
+        name: `${PLUGIN_ID}-edit-view-extensions`,
+        Component: DynamicZoneEditViewExtensions,
+      };
+
+      if (typeof contentManager?.injectComponent === 'function') {
+        contentManager.injectComponent('editView', 'right-links', injector);
+      } else if (typeof app?.injectComponent === 'function') {
+        app.injectComponent('editView', 'right-links', injector);
+      }
+    } catch (error) {
+      console.warn('Failed to register dynamic zone tools admin extensions:', error);
+    }
+  },
+
+  async registerTrads(app: any) {
+    const { locales } = app;
+
+    const importedTranslations = await Promise.all(
+      (locales as string[]).map((locale) => {
+        return import(`./translations/${locale}.json`)
+          .then(({ default: data }) => {
+            return {
+              data: getTranslation(data),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+
+    return importedTranslations;
+  },
+};

package/admin/src/pages/App.tsx

@@ -0,0 +1,15 @@
+import { Page } from '@strapi/strapi/admin';
+import { Routes, Route } from 'react-router-dom';
+
+import { HomePage } from './HomePage';
+
+const App = () => {
+  return (
+    <Routes>
+      <Route index element={<HomePage />} />
+      <Route path="*" element={<Page.Error />} />
+    </Routes>
+  );
+};
+
+export { App };

package/admin/src/pages/HomePage.tsx

@@ -0,0 +1,16 @@
+import { Main } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+
+import { getTranslation } from '../utils/getTranslation';
+
+const HomePage = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Main>
+      <h1>Welcome to {formatMessage({ id: getTranslation('plugin.name') })}</h1>
+    </Main>
+  );
+};
+
+export { HomePage };

package/admin/src/pluginId.ts

@@ -0,0 +1 @@
+export const PLUGIN_ID = 'dynamic-zone-tools';

package/admin/src/translations/en.json

@@ -0,0 +1,51 @@
+{
+  "dynamic-zone-tools.fill-from-record.title": "Fill From Record",
+  "dynamic-zone-tools.fill-from-record.description": "Fill this dynamic zone with content from another record.",
+  "dynamic-zone-tools.fill-from-record.content-type": "Content Type",
+  "dynamic-zone-tools.fill-from-record.source-zone": "Source Dynamic Zone",
+  "dynamic-zone-tools.fill-from-record.source-record": "Source Record",
+  "dynamic-zone-tools.fill-from-record.button": "Fill In",
+  "dynamic-zone-tools.panel.title": "Dynamic Zone Tools",
+  "dynamic-zone-tools.panel.description": "Copy content from another dynamic zone into this entry.",
+  "dynamic-zone-tools.button.open": "Open tools",
+  "dynamic-zone-tools.modal.title": "Dynamic Zone Tools",
+  "dynamic-zone-tools.modal.warning": "Your current content will be erased and filled by the content of the selected dynamic zone:",
+  "dynamic-zone-tools.modal.cancel": "No, cancel",
+  "dynamic-zone-tools.modal.confirm": "Yes, fill in",
+  "dynamic-zone-tools.target-zone.label": "Target Dynamic Zone",
+  "dynamic-zone-tools.target-zone.placeholder": "Select zone to fill",
+  "dynamic-zone-tools.source-collection.label": "Source Collection",
+  "dynamic-zone-tools.source-collection.placeholder": "Select source collection",
+  "dynamic-zone-tools.source-zone.label": "Source Dynamic Zone",
+  "dynamic-zone-tools.source-zone.placeholder": "Select zone to copy from",
+  "dynamic-zone-tools.source-record.label": "Source Record",
+  "dynamic-zone-tools.source-record.placeholder": "Select record to copy from",
+  "dynamic-zone-tools.permission.denied": "You do not have permission to use the dynamic zone tools.",
+  "dynamic-zone-tools.success.message": "Dynamic zone content copied successfully!",
+  "dynamic-zone-tools.error.fetch-source": "Failed to fetch source content",
+  "dynamic-zone-tools.error.update-target": "Failed to update target content",
+  "dynamic-zone-tools.component-duplicate.action": "Duplicate component",
+  "dynamic-zone-tools.component-duplicate.success": "Component duplicated. Save the document to keep it.",
+  "dynamic-zone-tools.component-duplicate.error": "Could not duplicate this component.",
+  "dynamic-zone-tools.component-copy.action": "Copy block",
+  "dynamic-zone-tools.component-copy.success": "Block copied.",
+  "dynamic-zone-tools.component-copy.error": "Could not copy this block.",
+  "dynamic-zone-tools.component-insert.menu": "Insert",
+  "dynamic-zone-tools.component-paste.above": "Paste above",
+  "dynamic-zone-tools.component-paste.below": "Paste below",
+  "dynamic-zone-tools.component-paste.unavailable": "No compatible copied block found. Copy a block first.",
+  "dynamic-zone-tools.component-paste.success.above": "Block pasted above. Save the document to keep it.",
+  "dynamic-zone-tools.component-paste.success.below": "Block pasted below. Save the document to keep it.",
+  "dynamic-zone-tools.component-paste.error": "Could not paste the copied block.",
+  "dynamic-zone-tools.fill-mode.label": "Copy mode",
+  "dynamic-zone-tools.fill-mode.replace": "Replace current zone",
+  "dynamic-zone-tools.fill-mode.append": "Append to current zone",
+  "dynamic-zone-tools.modal.append-info": "Selected blocks will be appended to the end of the target dynamic zone.",
+  "dynamic-zone-tools.notification.append-success": "Selected blocks appended successfully!",
+  "dynamic-zone-tools.source-blocks.label": "Blocks to copy",
+  "dynamic-zone-tools.source-blocks.select-all": "Select all",
+  "dynamic-zone-tools.source-blocks.clear-all": "Clear all",
+  "dynamic-zone-tools.source-blocks.loading": "Loading source blocks...",
+  "dynamic-zone-tools.source-blocks.empty": "No blocks found in the selected source zone.",
+  "dynamic-zone-tools.source-blocks.not-allowed": "not allowed in target zone"
+}

package/admin/src/utils/createRowActionButton.ts

@@ -0,0 +1,57 @@
+/** SVG path from @strapi/icons Duplicate (viewBox 0 0 32 32). */
+export const DUPLICATE_ICON_PATH =
+  'M27 4H11a1 1 0 0 0-1 1v5H5a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-5h5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1m-1 16h-4v-9a1 1 0 0 0-1-1h-9V6h14z';
+
+/** SVG path from @strapi/icons Stack (viewBox 0 0 32 32). */
+export const COPY_BLOCK_ICON_PATH =
+  'M27.5 21.136 16 27.843 4.5 21.136a1 1 0 0 0-1 1.728l12 7a1 1 0 0 0 1.008 0l12-7a1 1 0 1 0-1.008-1.728M27.5 15.136 16 21.843 4.5 15.136a1 1 0 0 0-1 1.728l12 7a1 1 0 0 0 1.008 0l12-7a1 1 0 1 0-1.008-1.728m-24-4.272 12 7a1 1 0 0 0 1.008 0l12-7a1 1 0 0 0 0-1.728l-12-7a1 1 0 0 0-1.008 0l-12 7a1 1 0 0 0 0 1.728';
+
+/** SVG path from @strapi/icons CaretDown (viewBox 0 0 32 32). */
+export const CARET_DOWN_ICON_PATH =
+  'm26.708 12.708-10 10a1 1 0 0 1-1.415 0l-10-10A1 1 0 0 1 6 11h20a1 1 0 0 1 .707 1.707';
+
+export function createRowActionButton(
+  templateButton: HTMLButtonElement,
+  label: string,
+  iconPath: string,
+  onClick: () => void,
+  signal: AbortSignal
+): HTMLButtonElement {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.className = templateButton.className;
+  button.setAttribute('aria-label', label);
+  button.setAttribute('title', label);
+  button.setAttribute('data-state', 'closed');
+
+  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  icon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  icon.setAttribute('viewBox', '0 0 32 32');
+  icon.setAttribute('width', '16');
+  icon.setAttribute('height', '16');
+  icon.setAttribute('fill', 'currentColor');
+  icon.setAttribute('aria-hidden', 'true');
+  icon.setAttribute('focusable', 'false');
+
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', iconPath);
+  icon.appendChild(path);
+
+  const text = document.createElement('span');
+  const templateLabel = templateButton.querySelector('span');
+  text.className = templateLabel?.className ?? 'sc-kkmxCq hTCBro';
+  text.textContent = label;
+
+  button.append(icon, text);
+  button.addEventListener(
+    'click',
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick();
+    },
+    { signal }
+  );
+
+  return button;
+}

package/admin/src/utils/createRowActionMenu.ts

@@ -0,0 +1,276 @@
+import { CARET_DOWN_ICON_PATH } from './createRowActionButton';
+
+export interface RowActionMenuItem {
+  label: string;
+  onSelect: () => void;
+  disabled?: boolean;
+}
+
+function createSvgIcon(iconPath: string, viewBox = '0 0 32 32'): SVGSVGElement {
+  const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  icon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  icon.setAttribute('viewBox', viewBox);
+  icon.setAttribute('width', '16');
+  icon.setAttribute('height', '16');
+  icon.setAttribute('fill', 'currentColor');
+  icon.setAttribute('aria-hidden', 'true');
+  icon.setAttribute('focusable', 'false');
+
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  path.setAttribute('d', iconPath);
+  icon.appendChild(path);
+
+  return icon;
+}
+
+function positionMenu(trigger: HTMLButtonElement, menu: HTMLElement) {
+  const rect = trigger.getBoundingClientRect();
+  menu.style.position = 'fixed';
+  menu.style.top = `${rect.bottom + 4}px`;
+  menu.style.left = `${Math.max(8, rect.right - menu.offsetWidth)}px`;
+}
+
+function closeOpenMenus(exceptMenuId?: string) {
+  for (const menu of document.querySelectorAll('[data-dz-tools-row-menu="true"]')) {
+    if (!(menu instanceof HTMLElement)) {
+      continue;
+    }
+
+    const menuId = menu.getAttribute('data-dz-tools-row-menu-id');
+
+    if (menuId && menuId === exceptMenuId) {
+      continue;
+    }
+
+    menu.hidden = true;
+
+    const triggerId = menu.getAttribute('data-dz-tools-row-menu-trigger-id');
+    const trigger = triggerId
+      ? document.querySelector(`[data-dz-tools-row-menu-trigger-id="${triggerId}"]`)
+      : null;
+
+    if (trigger instanceof HTMLButtonElement) {
+      trigger.setAttribute('aria-expanded', 'false');
+    }
+  }
+}
+
+export interface RowActionMenuHandle {
+  wrapper: HTMLSpanElement;
+  menu: HTMLDivElement;
+}
+
+let openInsertMenuCount = 0;
+
+export function getOpenInsertMenuCount(): number {
+  return openInsertMenuCount;
+}
+
+export interface RowActionMenuOptions {
+  onBeforeOpen?: () => Promise<boolean>;
+}
+
+/** Insert menu with caret icon — portaled to body so accordion overflow does not clip it. */
+export function createRowActionMenu(
+  templateButton: HTMLButtonElement,
+  label: string,
+  items: RowActionMenuItem[],
+  signal: AbortSignal,
+  options: RowActionMenuOptions = {}
+): RowActionMenuHandle {
+  const menuId = `dz-tools-menu-${Math.random().toString(36).slice(2)}`;
+  const triggerId = `dz-tools-trigger-${Math.random().toString(36).slice(2)}`;
+
+  const wrapper = document.createElement('span');
+  wrapper.style.display = 'inline-flex';
+
+  const trigger = document.createElement('button');
+  trigger.type = 'button';
+  trigger.className = templateButton.className;
+  trigger.setAttribute('aria-label', label);
+  trigger.setAttribute('title', label);
+  trigger.setAttribute('aria-haspopup', 'menu');
+  trigger.setAttribute('aria-expanded', 'false');
+  trigger.setAttribute('data-state', 'closed');
+  trigger.setAttribute('data-dz-tools-row-menu-trigger-id', triggerId);
+
+  const text = document.createElement('span');
+  const templateLabel = templateButton.querySelector('span');
+  text.className = templateLabel?.className ?? 'sc-kkmxCq hTCBro';
+  text.textContent = label;
+
+  trigger.append(createSvgIcon(CARET_DOWN_ICON_PATH), text);
+
+  const menu = document.createElement('div');
+  menu.setAttribute('data-dz-tools-row-menu', 'true');
+  menu.setAttribute('data-dz-tools-row-menu-id', menuId);
+  menu.setAttribute('data-dz-tools-row-menu-trigger-id', triggerId);
+  menu.setAttribute('role', 'menu');
+  menu.hidden = true;
+  menu.style.zIndex = '10000';
+  menu.style.minWidth = '180px';
+  menu.style.padding = '4px';
+  menu.style.borderRadius = '4px';
+  menu.style.background = 'var(--strapi-neutral-0, #ffffff)';
+  menu.style.border = '1px solid var(--strapi-neutral-200, #dcdce4)';
+  menu.style.boxShadow = '0 2px 15px rgba(33, 33, 52, 0.15)';
+
+  for (const item of items) {
+    const menuItem = document.createElement('button');
+    menuItem.type = 'button';
+    menuItem.setAttribute('role', 'menuitem');
+    menuItem.textContent = item.label;
+    menuItem.disabled = Boolean(item.disabled);
+    menuItem.style.display = 'block';
+    menuItem.style.width = '100%';
+    menuItem.style.padding = '8px 12px';
+    menuItem.style.border = 'none';
+    menuItem.style.background = 'transparent';
+    menuItem.style.textAlign = 'left';
+    menuItem.style.font = 'inherit';
+    menuItem.style.fontSize = '1.2rem';
+    menuItem.style.lineHeight = '1.33';
+    menuItem.style.color = item.disabled
+      ? 'var(--strapi-neutral-400, #a5a5ba)'
+      : 'var(--strapi-neutral-800, #32324d)';
+    menuItem.style.cursor = item.disabled ? 'not-allowed' : 'pointer';
+    menuItem.style.borderRadius = '4px';
+
+    if (!item.disabled) {
+      menuItem.addEventListener('mouseenter', () => {
+        menuItem.style.background = 'var(--strapi-neutral-100, #f6f6f9)';
+      });
+      menuItem.addEventListener('mouseleave', () => {
+        menuItem.style.background = 'transparent';
+      });
+    }
+
+    menuItem.addEventListener(
+      'click',
+      (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (item.disabled) {
+          return;
+        }
+
+        menu.hidden = true;
+        trigger.setAttribute('aria-expanded', 'false');
+        item.onSelect();
+      },
+      { signal }
+    );
+
+    menu.appendChild(menuItem);
+  }
+
+  const openMenu = () => {
+    if (!document.body.contains(menu)) {
+      document.body.appendChild(menu);
+    }
+
+    menu.hidden = false;
+    openInsertMenuCount += 1;
+    requestAnimationFrame(() => {
+      positionMenu(trigger, menu);
+    });
+    trigger.setAttribute('aria-expanded', 'true');
+  };
+
+  const closeMenu = () => {
+    if (menu.hidden) {
+      return;
+    }
+
+    menu.hidden = true;
+    openInsertMenuCount = Math.max(0, openInsertMenuCount - 1);
+    trigger.setAttribute('aria-expanded', 'false');
+  };
+
+  trigger.addEventListener(
+    'click',
+    (event) => {
+      void (async () => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const willOpen = menu.hidden;
+        closeOpenMenus(willOpen ? menuId : undefined);
+
+        if (!willOpen) {
+          closeMenu();
+          return;
+        }
+
+        if (options.onBeforeOpen) {
+          const canOpen = await options.onBeforeOpen();
+
+          if (!canOpen) {
+            return;
+          }
+        }
+
+        ignoreNextDocumentClick = true;
+        openMenu();
+        window.setTimeout(() => {
+          ignoreNextDocumentClick = false;
+        }, 0);
+      })();
+    },
+    { signal }
+  );
+
+  let ignoreNextDocumentClick = false;
+
+  const onDocumentClick = (event: MouseEvent) => {
+    if (ignoreNextDocumentClick) {
+      return;
+    }
+
+    if (!wrapper.contains(event.target as Node) && !menu.contains(event.target as Node)) {
+      closeMenu();
+    }
+  };
+
+  const onReposition = () => {
+    if (!menu.hidden) {
+      positionMenu(trigger, menu);
+    }
+  };
+
+  document.addEventListener(
+    'click',
+    (event) => {
+      if (menu.hidden) {
+        return;
+      }
+
+      onDocumentClick(event);
+    },
+    { signal }
+  );
+  document.addEventListener('scroll', onReposition, { capture: true, signal });
+  window.addEventListener('resize', onReposition, { signal });
+  document.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.key === 'Escape' && !menu.hidden) {
+        closeMenu();
+      }
+    },
+    { signal }
+  );
+
+  signal.addEventListener('abort', () => {
+    if (!menu.hidden) {
+      openInsertMenuCount = Math.max(0, openInsertMenuCount - 1);
+    }
+
+    menu.remove();
+  });
+
+  wrapper.append(trigger);
+
+  return { wrapper, menu };
+}

package/admin/src/utils/dynamicZoneClipboard.ts

@@ -0,0 +1,134 @@
+import { PLUGIN_ID } from '../pluginId';
+
+export const CLIPBOARD_PLUGIN_ID = PLUGIN_ID;
+export const CLIPBOARD_VERSION = 1;
+
+export interface DynamicZoneClipboardPayload {
+  plugin: typeof PLUGIN_ID;
+  version: typeof CLIPBOARD_VERSION;
+  entries: any[];
+  source: {
+    copiedAt: string;
+    components: string[];
+  };
+}
+
+let memoryFallback: DynamicZoneClipboardPayload | null = null;
+const listeners = new Set<() => void>();
+
+function notifyListeners() {
+  listeners.forEach((listener) => listener());
+}
+
+export function subscribeClipboard(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function getMemoryClipboardPayload(): DynamicZoneClipboardPayload | null {
+  return memoryFallback;
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function parseClipboardPayload(text: string): DynamicZoneClipboardPayload | null {
+  try {
+    const parsed = JSON.parse(text);
+
+    if (!isPlainObject(parsed)) {
+      return null;
+    }
+
+    if (parsed.plugin !== CLIPBOARD_PLUGIN_ID || parsed.version !== CLIPBOARD_VERSION) {
+      return null;
+    }
+
+    if (!Array.isArray(parsed.entries) || parsed.entries.length === 0) {
+      return null;
+    }
+
+    const validEntries = parsed.entries.every(
+      (entry) => isPlainObject(entry) && typeof entry.__component === 'string'
+    );
+
+    if (!validEntries) {
+      return null;
+    }
+
+    return parsed as unknown as DynamicZoneClipboardPayload;
+  } catch {
+    return null;
+  }
+}
+
+export function buildClipboardPayload(entries: any[]): DynamicZoneClipboardPayload {
+  return {
+    plugin: CLIPBOARD_PLUGIN_ID,
+    version: CLIPBOARD_VERSION,
+    entries,
+    source: {
+      copiedAt: new Date().toISOString(),
+      components: entries.map((entry) => entry.__component).filter(Boolean),
+    },
+  };
+}
+
+export async function writeClipboardPayload(payload: DynamicZoneClipboardPayload): Promise<void> {
+  memoryFallback = payload;
+  notifyListeners();
+
+  const serialized = JSON.stringify(payload);
+
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(serialized);
+    } catch {
+      // Memory fallback remains available in the same tab.
+    }
+  }
+}
+
+export async function resolveClipboardPayload(): Promise<DynamicZoneClipboardPayload | null> {
+  return getMemoryClipboardPayload() ?? (await readClipboardPayload());
+}
+
+export async function readClipboardPayload(): Promise<DynamicZoneClipboardPayload | null> {
+  if (memoryFallback) {
+    return memoryFallback;
+  }
+
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.readText) {
+    try {
+      const text = await navigator.clipboard.readText();
+      const parsed = parseClipboardPayload(text);
+
+      if (parsed) {
+        memoryFallback = parsed;
+        notifyListeners();
+      }
+
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+
+  return null;
+}
+
+export function isClipboardCompatibleWithZone(
+  payload: DynamicZoneClipboardPayload | null | undefined,
+  allowedComponents?: string[] | null
+): boolean {
+  if (!payload || payload.entries.length === 0) {
+    return false;
+  }
+
+  if (!Array.isArray(allowedComponents)) {
+    return true;
+  }
+
+  return payload.entries.every((entry) => allowedComponents.includes(entry.__component));
+}