Add copy and paste entry buttons

.changeset/wicked-parrots-pull.md

@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Add copy and paste entry buttons

packages/keystatic/src/app/ItemPage.tsx

@@ -21,6 +21,8 @@ import { Button, ButtonGroup } from '@keystar/ui/button';
 import { AlertDialog, Dialog, DialogContainer } from '@keystar/ui/dialog';
 import { Icon } from '@keystar/ui/icon';
 import { copyPlusIcon } from '@keystar/ui/icon/icons/copyPlusIcon';
+import { clipboardCopyIcon } from '@keystar/ui/icon/icons/clipboardCopyIcon';
+import { clipboardPasteIcon } from '@keystar/ui/icon/icons/clipboardPasteIcon';
 import { externalLinkIcon } from '@keystar/ui/icon/icons/externalLinkIcon';
 import { githubIcon } from '@keystar/ui/icon/icons/githubIcon';
 import { historyIcon } from '@keystar/ui/icon/icons/historyIcon';
@@ -39,7 +41,7 @@ import { TextField } from '@keystar/ui/text-field';
 import { Heading, Text } from '@keystar/ui/typography';
 
 import { Config } from '../config';
-import { ComponentSchema, GenericPreviewProps } from '../form/api';
+import { ComponentSchema, GenericPreviewProps, ObjectField } from '../form/api';
 import { clientSideValidateProp } from '../form/errors';
 import { useEventCallback } from '../form/fields/document/DocumentEditor/ui-utils';
 import { getYjsValFromParsedValue } from '../form/yjs-props-value';
@@ -87,6 +89,9 @@ import {
   usePreviewPropsFromY,
 } from './preview-props';
 import { ErrorBoundary } from './error-boundary';
+import { copyEntryToClipboard, getPastedEntry } from './entry-clipboard';
+import { setValueToPreviewProps } from '../form/get-value';
+import { toastQueue } from '@keystar/ui/toast';
 
 type ItemPageProps = {
   collection: string;
@@ -112,7 +117,10 @@ function ItemPageInner(
     onReset: () => void;
     updateResult: ReturnType<typeof useUpsertItem>[0];
     onResetUpdateItem: () => void;
-    previewProps: GenericPreviewProps<ComponentSchema, undefined>;
+    previewProps: GenericPreviewProps<
+      ObjectField<Record<string, ComponentSchema>>,
+      undefined
+    >;
     hasChanged: boolean;
     state: Record<string, unknown>;
   }
@@ -182,6 +190,30 @@ function ItemPageInner(
     return hasUpdated;
   });
 
+  const onCopy = useEventCallback(() => {
+    copyEntryToClipboard(props.state, formatInfo, collectionConfig.schema, {
+      field: collectionConfig.slugField,
+      value: getSlugFromState(collectionConfig, props.state),
+    });
+  });
+
+  const onPaste = useEventCallback(async () => {
+    const entry = await getPastedEntry(formatInfo, collectionConfig.schema, {
+      field: collectionConfig.slugField,
+      slug: getSlugFromState(collectionConfig, props.state),
+    });
+    if (entry) {
+      setValueToPreviewProps(entry, props.previewProps);
+      toastQueue.positive('Entry pasted', {
+        shouldCloseOnAction: true,
+        actionLabel: 'Undo',
+        onAction: () => {
+          setValueToPreviewProps(props.state, props.previewProps);
+        },
+      });
+    }
+  });
+
   const viewHref =
     config.storage.kind !== 'local' && repoInfo
       ? `${getRepoUrl(repoInfo)}${
@@ -222,6 +254,8 @@ function ItemPageInner(
             hasChanged={props.hasChanged}
             onDelete={onDelete}
             onDuplicate={onDuplicate}
+            onCopy={onCopy}
+            onPaste={onPaste}
             onReset={props.onReset}
             viewHref={viewHref}
             previewHref={previewHref}
@@ -405,7 +439,6 @@ function LocalItemPage(
     if (hasChanged) {
       const serialized = serializeEntryToFiles({
         basePath: futureBasePath,
-        config,
         format: getCollectionFormat(config, collection),
         schema: collectionConfig.schema,
         slug: { field: collectionConfig.slugField, value: slug },
@@ -515,6 +548,8 @@ function HeaderActions(props: {
   onDelete: () => void;
   onDuplicate: () => void;
   onReset: () => void;
+  onCopy: () => void;
+  onPaste: () => void;
   previewHref?: string;
   viewHref?: string;
 }) {
@@ -525,6 +560,8 @@ function HeaderActions(props: {
     onDelete,
     onDuplicate,
     onReset,
+    onCopy,
+    onPaste,
     previewHref,
     viewHref,
   } = props;
@@ -553,6 +590,16 @@ function HeaderActions(props: {
         label: 'Delete entry…', // TODO: l10n
         icon: trash2Icon,
       },
+      {
+        key: 'copy',
+        label: 'Copy entry', // TODO: l10n
+        icon: clipboardCopyIcon,
+      },
+      {
+        key: 'paste',
+        label: 'Paste entry', // TODO: l10n
+        icon: clipboardPasteIcon,
+      },
       {
         key: 'duplicate',
         label: 'Duplicate entry…', // TODO: l10n
@@ -633,6 +680,12 @@ function HeaderActions(props: {
             case 'delete':
               setDeleteAlertOpen(true);
               break;
+            case 'copy':
+              onCopy();
+              break;
+            case 'paste':
+              onPaste();
+              break;
             case 'duplicate':
               if (hasChanged) {
                 setDuplicateAlertOpen(true);
@@ -812,7 +865,6 @@ function ItemPageOuterWrapper(props: ItemPageWrapperProps) {
         const stored = storedValSchema.create(raw);
         const parsed = parseEntry(
           {
-            config: props.config,
             dirpath: getCollectionItemPath(
               props.config,
               props.collection,

packages/keystatic/src/app/SingletonPage.tsx

@@ -60,6 +60,11 @@ import {
   useSingleton,
 } from './preview-props';
 import { ComponentSchema, GenericPreviewProps } from '..';
+import { copyEntryToClipboard, getPastedEntry } from './entry-clipboard';
+import { clipboardPasteIcon } from '@keystar/ui/icon/icons/clipboardPasteIcon';
+import { clipboardCopyIcon } from '@keystar/ui/icon/icons/clipboardCopyIcon';
+import { setValueToPreviewProps } from '../form/get-value';
+import { toastQueue } from '@keystar/ui/toast';
 
 type SingletonPageProps = {
   singleton: string;
@@ -127,6 +132,16 @@ function SingletonPageInner(
         label: 'Reset',
         icon: historyIcon,
       },
+      {
+        key: 'copy',
+        label: 'Copy entry',
+        icon: clipboardCopyIcon,
+      },
+      {
+        key: 'paste',
+        label: 'Paste entry',
+        icon: clipboardPasteIcon,
+      },
     ];
     if (previewHref) {
       actions.push({
@@ -166,6 +181,33 @@ function SingletonPageInner(
     await props.onUpdate();
   };
 
+  const onCopy = () => {
+    copyEntryToClipboard(
+      props.state,
+      formatInfo,
+      singletonConfig.schema,
+      undefined
+    );
+  };
+
+  const onPaste = async () => {
+    const entry = await getPastedEntry(
+      formatInfo,
+      singletonConfig.schema,
+      undefined
+    );
+    if (entry) {
+      setValueToPreviewProps(entry, props.previewProps);
+      toastQueue.positive('Entry pasted', {
+        shouldCloseOnAction: true,
+        actionLabel: 'Undo',
+        onAction: () => {
+          setValueToPreviewProps(props.state, props.previewProps);
+        },
+      });
+    }
+  };
+
   return (
     <PageRoot containerWidth={containerWidthForEntryLayout(singletonConfig)}>
       <PageHeader>
@@ -198,6 +240,12 @@ function SingletonPageInner(
               case 'reset':
                 props.onReset();
                 break;
+              case 'copy':
+                onCopy();
+                break;
+              case 'paste':
+                onPaste();
+                break;
             }
           }}
         >
@@ -336,7 +384,6 @@ function LocalSingletonPage(
     if (hasChanged) {
       const serialized = serializeEntryToFiles({
         basePath: singletonPath,
-        config,
         format: getSingletonFormat(config, singleton),
         schema: singletonConfig.schema,
         slug: undefined,
@@ -502,7 +549,6 @@ function SingletonPageWrapper(props: { singleton: string; config: Config }) {
       const stored = storedValSchema.create(raw);
       const parsed = parseEntry(
         {
-          config: props.config,
           dirpath,
           format,
           schema: singletonConfig.schema,
@@ -515,7 +561,7 @@ function SingletonPageWrapper(props: { singleton: string; config: Config }) {
         savedAt: stored.savedAt,
         treeKey: stored.beforeTreeKey,
       };
-    }, [dirpath, format, props.config, props.singleton, singletonConfig.schema])
+    }, [dirpath, format, props.singleton, singletonConfig.schema])
   );
 
   const itemData = useItemData({