strapi-plugin-dynamic-zone-tools 1.0.0

package/admin/src/components/DynamicZoneComponentDuplicateInjector.tsx

@@ -0,0 +1,604 @@
+import React from 'react';
+import {
+  useFetchClient,
+  useNotification,
+  useQueryParams,
+  unstable_useContentManagerContext as useContentManagerContext,
+} from '@strapi/strapi/admin';
+import { useIntl } from 'react-intl';
+import { PLUGIN_ID } from '../pluginId';
+import {
+  COPY_BLOCK_ICON_PATH,
+  createRowActionButton,
+  DUPLICATE_ICON_PATH,
+} from '../utils/createRowActionButton';
+import { createRowActionMenu, getOpenInsertMenuCount } from '../utils/createRowActionMenu';
+import {
+  buildClipboardPayload,
+  getMemoryClipboardPayload,
+  isClipboardCompatibleWithZone,
+  resolveClipboardPayload,
+  subscribeClipboard,
+  writeClipboardPayload,
+} from '../utils/dynamicZoneClipboard';
+import {
+  findDynamicZoneDragHandles,
+  findDynamicZoneLists,
+  findRowActionContainer,
+  findRowElementForDragHandle,
+  getDynamicZoneListItems,
+  getDynamicZonePathsFromValues,
+  getRowActionInsertPoint,
+  resolveBlockFromListItem,
+  resolveBlockFromListItemIndex,
+} from '../utils/dynamicZonePaths';
+import {
+  cloneFormDynamicZoneEntry,
+  createFetchRelationItems,
+  loadComponentSchemas,
+  prepareEntryForZoneInsert,
+  type ComponentSchemas,
+  type FetchRelationItems,
+} from '../utils/prepareDynamicZoneData';
+import { getRelationQueryParams } from '../utils/relationQueryParams';
+
+const ROW_ACTIONS_ATTR = 'data-dz-tools-row-actions';
+
+type PastePosition = 'above' | 'below';
+
+interface MountedButton {
+  host: HTMLSpanElement;
+  menu?: HTMLDivElement;
+  abort: AbortController;
+}
+
+interface ContentManagerForm {
+  addFieldRow?: (path: string, value: unknown, position?: number) => void;
+  moveFieldRow?: (path: string, fromIndex: number, toIndex: number) => void;
+  values?: Record<string, unknown>;
+}
+
+const DynamicZoneComponentDuplicateInjector = () => {
+  const { formatMessage } = useIntl();
+  const { get } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const [{ query }] = useQueryParams();
+  const { form, contentTypes, contentType } = useContentManagerContext();
+  const contentManagerForm = form as ContentManagerForm | undefined;
+
+  const addFieldRow = contentManagerForm?.addFieldRow;
+  const moveFieldRow = contentManagerForm?.moveFieldRow;
+  const formValues = (contentManagerForm?.values ?? {}) as Record<string, unknown>;
+
+  const valuesRef = React.useRef(formValues);
+  const schemasRef = React.useRef<ComponentSchemas | null>(null);
+  const fetchRelationItemsRef = React.useRef<FetchRelationItems | null>(null);
+  const mountedButtonsRef = React.useRef<MountedButton[]>([]);
+  const frameRef = React.useRef(0);
+  const observerRef = React.useRef<MutationObserver | null>(null);
+  const clipboardReadyRef = React.useRef(Boolean(getMemoryClipboardPayload()));
+
+  const [schemasReady, setSchemasReady] = React.useState(false);
+  const [clipboardTick, setClipboardTick] = React.useState(0);
+
+  valuesRef.current = formValues;
+
+  const relationQueryParams = React.useMemo(
+    () => getRelationQueryParams(query as Record<string, unknown> | undefined),
+    [query]
+  );
+
+  React.useEffect(() => {
+    fetchRelationItemsRef.current = createFetchRelationItems(get, relationQueryParams);
+  }, [get, relationQueryParams]);
+
+  React.useEffect(() => {
+    return subscribeClipboard(() => {
+      clipboardReadyRef.current = Boolean(getMemoryClipboardPayload());
+      setClipboardTick((value) => value + 1);
+    });
+  }, []);
+
+  React.useEffect(() => {
+    const syncClipboardFromSystem = () => {
+      void resolveClipboardPayload().then((payload) => {
+        if (payload) {
+          setClipboardTick((value) => value + 1);
+        }
+      });
+    };
+
+    window.addEventListener('focus', syncClipboardFromSystem);
+
+    return () => {
+      window.removeEventListener('focus', syncClipboardFromSystem);
+    };
+  }, []);
+
+  const duplicateLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-duplicate.action`,
+    defaultMessage: 'Duplicate component',
+  });
+
+  const copyLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-copy.action`,
+    defaultMessage: 'Copy block',
+  });
+
+  const insertLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-insert.menu`,
+    defaultMessage: 'Insert',
+  });
+
+  const pasteAboveLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-paste.above`,
+    defaultMessage: 'Paste above',
+  });
+
+  const pasteBelowLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-paste.below`,
+    defaultMessage: 'Paste below',
+  });
+
+  const pasteUnavailableLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-paste.unavailable`,
+    defaultMessage: 'No compatible copied block found. Copy a block first.',
+  });
+
+  const duplicateSuccessLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-duplicate.success`,
+    defaultMessage: 'Component duplicated. Save the document to keep it.',
+  });
+
+  const copySuccessLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-copy.success`,
+    defaultMessage: 'Block copied.',
+  });
+
+  const pasteSuccessLabels = React.useMemo(
+    () => ({
+      above: formatMessage({
+        id: `${PLUGIN_ID}.component-paste.success.above`,
+        defaultMessage: 'Block pasted above. Save the document to keep it.',
+      }),
+      below: formatMessage({
+        id: `${PLUGIN_ID}.component-paste.success.below`,
+        defaultMessage: 'Block pasted below. Save the document to keep it.',
+      }),
+    }),
+    [formatMessage]
+  );
+
+  const pasteErrorLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-paste.error`,
+    defaultMessage: 'Could not paste the copied block.',
+  });
+
+  const duplicateErrorLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-duplicate.error`,
+    defaultMessage: 'Could not duplicate this component.',
+  });
+
+  const copyErrorLabel = formatMessage({
+    id: `${PLUGIN_ID}.component-copy.error`,
+    defaultMessage: 'Could not copy this block.',
+  });
+
+  React.useEffect(() => {
+    let active = true;
+
+    const fetchSchemas = async () => {
+      try {
+        schemasRef.current = await loadComponentSchemas(get);
+        if (active) {
+          setSchemasReady(true);
+        }
+      } catch {
+        if (active) {
+          setSchemasReady(false);
+        }
+      }
+    };
+
+    void fetchSchemas();
+
+    return () => {
+      active = false;
+    };
+  }, [get]);
+
+  const cleanupMountedButtons = React.useCallback(() => {
+    for (const mounted of mountedButtonsRef.current) {
+      mounted.abort.abort();
+      mounted.menu?.remove();
+      mounted.host.remove();
+    }
+
+    mountedButtonsRef.current = [];
+  }, []);
+
+  const getAllowedComponents = React.useCallback(
+    (zonePath: string): string[] | undefined => {
+      const schema = contentType as { attributes?: Record<string, any> } | undefined;
+      return schema?.attributes?.[zonePath]?.components;
+    },
+    [contentType]
+  );
+
+  const insertEntryAt = React.useCallback(
+    (zonePath: string, targetIndex: number, entry: unknown) => {
+      const zone = valuesRef.current[zonePath];
+
+      if (!Array.isArray(zone) || typeof addFieldRow !== 'function') {
+        return false;
+      }
+
+      const appendedIndex = zone.length;
+      addFieldRow(zonePath, entry);
+
+      if (appendedIndex !== targetIndex && typeof moveFieldRow === 'function') {
+        moveFieldRow(zonePath, appendedIndex, targetIndex);
+      }
+
+      return true;
+    },
+    [addFieldRow, moveFieldRow]
+  );
+
+  const insertEntryBelow = React.useCallback(
+    (zonePath: string, sourceIndex: number, entry: unknown) =>
+      insertEntryAt(zonePath, sourceIndex + 1, entry),
+    [insertEntryAt]
+  );
+
+  const ensurePasteAvailable = React.useCallback(
+    async (zonePath: string) => {
+      const payload = await resolveClipboardPayload();
+      const allowedComponents = getAllowedComponents(zonePath);
+      const compatible = isClipboardCompatibleWithZone(payload, allowedComponents);
+
+      if (compatible) {
+        return true;
+      }
+
+      toggleNotification({ type: 'warning', message: pasteUnavailableLabel });
+      return false;
+    },
+    [getAllowedComponents, pasteUnavailableLabel, toggleNotification]
+  );
+
+  const handleDuplicate = React.useCallback(
+    async (zonePath: string, sourceIndex: number) => {
+      const schemas = schemasRef.current;
+
+      if (!schemas || typeof addFieldRow !== 'function') {
+        toggleNotification({ type: 'danger', message: duplicateErrorLabel });
+        return;
+      }
+
+      const zone = valuesRef.current[zonePath];
+
+      if (!Array.isArray(zone) || !zone[sourceIndex]) {
+        toggleNotification({ type: 'danger', message: duplicateErrorLabel });
+        return;
+      }
+
+      try {
+        const clonedEntry = await cloneFormDynamicZoneEntry(zone[sourceIndex], {
+          schemas,
+          contentTypes,
+          fetchRelationItems: fetchRelationItemsRef.current ?? undefined,
+        });
+
+        if (!insertEntryBelow(zonePath, sourceIndex, clonedEntry)) {
+          throw new Error('Insert failed');
+        }
+
+        toggleNotification({
+          type: 'success',
+          message: duplicateSuccessLabel,
+        });
+      } catch {
+        toggleNotification({ type: 'danger', message: duplicateErrorLabel });
+      }
+    },
+    [
+      contentTypes,
+      duplicateErrorLabel,
+      duplicateSuccessLabel,
+      insertEntryBelow,
+      toggleNotification,
+    ]
+  );
+
+  const handleCopy = React.useCallback(
+    async (zonePath: string, sourceIndex: number) => {
+      const schemas = schemasRef.current;
+      const zone = valuesRef.current[zonePath];
+
+      if (!schemas || !Array.isArray(zone) || !zone[sourceIndex]) {
+        toggleNotification({ type: 'danger', message: copyErrorLabel });
+        return;
+      }
+
+      try {
+        const clonedEntry = await cloneFormDynamicZoneEntry(zone[sourceIndex], {
+          schemas,
+          contentTypes,
+          fetchRelationItems: fetchRelationItemsRef.current ?? undefined,
+        });
+        const payload = buildClipboardPayload([clonedEntry]);
+
+        await writeClipboardPayload(payload);
+        clipboardReadyRef.current = true;
+        setClipboardTick((value) => value + 1);
+
+        toggleNotification({
+          type: 'success',
+          message: copySuccessLabel,
+        });
+      } catch {
+        toggleNotification({ type: 'danger', message: copyErrorLabel });
+      }
+    },
+    [contentTypes, copyErrorLabel, copySuccessLabel, toggleNotification]
+  );
+
+  const handlePaste = React.useCallback(
+    async (zonePath: string, sourceIndex: number, position: PastePosition) => {
+      if (typeof addFieldRow !== 'function') {
+        toggleNotification({ type: 'danger', message: pasteErrorLabel });
+        return;
+      }
+
+      try {
+        const payload = await resolveClipboardPayload();
+        const allowedComponents = getAllowedComponents(zonePath);
+
+        if (!isClipboardCompatibleWithZone(payload, allowedComponents)) {
+          toggleNotification({ type: 'danger', message: pasteErrorLabel });
+          return;
+        }
+
+        let insertIndex = sourceIndex;
+        const zone = valuesRef.current[zonePath];
+
+        if (!Array.isArray(zone)) {
+          throw new Error('Zone not found');
+        }
+
+        for (const entry of payload!.entries) {
+          let inserted = false;
+          let preparedEntry = entry;
+
+          if (position === 'above') {
+            preparedEntry = prepareEntryForZoneInsert(zone, insertIndex, entry);
+            inserted = insertEntryAt(zonePath, insertIndex, preparedEntry);
+            insertIndex += 1;
+          } else {
+            preparedEntry = prepareEntryForZoneInsert(zone, insertIndex + 1, entry);
+            inserted = insertEntryBelow(zonePath, insertIndex, preparedEntry);
+            insertIndex += 1;
+          }
+
+          if (!inserted) {
+            throw new Error('Insert failed');
+          }
+        }
+
+        toggleNotification({
+          type: 'success',
+          message: pasteSuccessLabels[position],
+        });
+      } catch {
+        toggleNotification({ type: 'danger', message: pasteErrorLabel });
+      }
+    },
+    [
+      addFieldRow,
+      getAllowedComponents,
+      insertEntryAt,
+      insertEntryBelow,
+      pasteErrorLabel,
+      pasteSuccessLabels,
+      toggleNotification,
+    ]
+  );
+
+  const mountRowActions = React.useCallback(
+    (
+      actionContainer: HTMLElement,
+      zonePath: string,
+      sourceIndex: number,
+      insertBefore: Element | null
+    ) => {
+      const templateButton = actionContainer.querySelector('button');
+
+      if (!(templateButton instanceof HTMLButtonElement)) {
+        return;
+      }
+
+      const host = document.createElement('span');
+      host.setAttribute(ROW_ACTIONS_ATTR, 'true');
+      host.style.display = 'inline-flex';
+      host.style.gap = '0';
+
+      const abort = new AbortController();
+
+      host.appendChild(
+        createRowActionButton(
+          templateButton,
+          duplicateLabel,
+          DUPLICATE_ICON_PATH,
+          () => {
+            void handleDuplicate(zonePath, sourceIndex);
+          },
+          abort.signal
+        )
+      );
+
+      host.appendChild(
+        createRowActionButton(
+          templateButton,
+          copyLabel,
+          COPY_BLOCK_ICON_PATH,
+          () => {
+            void handleCopy(zonePath, sourceIndex);
+          },
+          abort.signal
+        )
+      );
+
+      const { wrapper: insertMenu, menu } = createRowActionMenu(
+        templateButton,
+        insertLabel,
+        [
+          {
+            label: pasteAboveLabel,
+            onSelect: () => {
+              void handlePaste(zonePath, sourceIndex, 'above');
+            },
+          },
+          {
+            label: pasteBelowLabel,
+            onSelect: () => {
+              void handlePaste(zonePath, sourceIndex, 'below');
+            },
+          },
+        ],
+        abort.signal,
+        {
+          onBeforeOpen: () => ensurePasteAvailable(zonePath),
+        }
+      );
+
+      host.appendChild(insertMenu);
+      mountedButtonsRef.current.push({ host, menu, abort });
+
+      if (insertBefore) {
+        actionContainer.insertBefore(host, insertBefore);
+      } else {
+        actionContainer.appendChild(host);
+      }
+
+      return;
+    },
+    [
+      copyLabel,
+      duplicateLabel,
+      ensurePasteAvailable,
+      handleCopy,
+      handleDuplicate,
+      handlePaste,
+      insertLabel,
+      pasteAboveLabel,
+      pasteBelowLabel,
+    ]
+  );
+
+  const mountForRow = React.useCallback(
+    (rowElement: Element, blockRef: { zonePath: string; index: number }) => {
+      const actionContainer = findRowActionContainer(rowElement);
+
+      if (
+        !(actionContainer instanceof HTMLElement) ||
+        actionContainer.querySelector(`[${ROW_ACTIONS_ATTR}]`)
+      ) {
+        return;
+      }
+
+      mountRowActions(
+        actionContainer,
+        blockRef.zonePath,
+        blockRef.index,
+        getRowActionInsertPoint(actionContainer)
+      );
+    },
+    [mountRowActions]
+  );
+
+  const syncDuplicateButtons = React.useCallback(() => {
+    const observer = observerRef.current;
+
+    if (observer) {
+      observer.disconnect();
+    }
+
+    cleanupMountedButtons();
+
+    const currentValues = valuesRef.current;
+    const zonePaths = getDynamicZonePathsFromValues(currentValues);
+
+    if (!schemasReady || zonePaths.length === 0 || typeof addFieldRow !== 'function') {
+      observer?.observe(document.body, { childList: true, subtree: true });
+      return;
+    }
+
+    for (const list of findDynamicZoneLists()) {
+      const rows = getDynamicZoneListItems(list);
+
+      rows.forEach((row, index) => {
+        const blockRef =
+          resolveBlockFromListItem(row, currentValues) ??
+          resolveBlockFromListItemIndex(list, index, currentValues, zonePaths);
+
+        if (!blockRef) {
+          return;
+        }
+
+        mountForRow(row, blockRef);
+      });
+    }
+
+    for (const dragHandle of findDynamicZoneDragHandles()) {
+      const rowElement = findRowElementForDragHandle(dragHandle);
+
+      if (!rowElement || rowElement.querySelector(`[${ROW_ACTIONS_ATTR}]`)) {
+        continue;
+      }
+
+      const blockRef = resolveBlockFromListItem(rowElement, currentValues);
+
+      if (blockRef) {
+        mountForRow(rowElement, blockRef);
+      }
+    }
+
+    observer?.observe(document.body, { childList: true, subtree: true });
+  }, [addFieldRow, cleanupMountedButtons, clipboardTick, mountForRow, schemasReady]);
+
+  React.useEffect(() => {
+    if (typeof document === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new MutationObserver(() => {
+      if (getOpenInsertMenuCount() > 0) {
+        return;
+      }
+
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = requestAnimationFrame(() => {
+        if (getOpenInsertMenuCount() > 0) {
+          return;
+        }
+
+        syncDuplicateButtons();
+      });
+    });
+
+    observerRef.current = observer;
+    syncDuplicateButtons();
+
+    return () => {
+      cancelAnimationFrame(frameRef.current);
+      observer.disconnect();
+      observerRef.current = null;
+      cleanupMountedButtons();
+    };
+  }, [cleanupMountedButtons, syncDuplicateButtons, clipboardTick]);
+
+  return null;
+};
+
+export { DynamicZoneComponentDuplicateInjector };

package/admin/src/components/DynamicZoneEditViewExtensions.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DynamicZoneComponentDuplicateInjector } from './DynamicZoneComponentDuplicateInjector';
+
+/** Invisible row-action injector for copy/duplicate/paste buttons. */
+const DynamicZoneEditViewExtensions = () => <DynamicZoneComponentDuplicateInjector />;
+
+export { DynamicZoneEditViewExtensions };