Merge pull request #436 from prezly/fix/dev-10977-image-cropping-reve…

…rts-image-settings-to-defaults [DEV-10977] Preserve original image settings & caption formatting when cropping
prezly · Jun 9, 2023 · 91049d3 · 91049d3
2 parents 2be3639 + fb08ff2
commit 91049d3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 50 deletions.
diff --git a/packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts b/packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts
@@ -37,8 +37,7 @@ interface Data {
         images: GalleryNode['images'];
     };
     [Type.IMAGE]: {
-        file: ImageNode['file'];
-        caption: string;
+        image: ImageNode;
         operation: 'add' | 'edit';
     };
     [Type.MEDIA]: {

diff --git a/packages/slate-editor/src/extensions/placeholders/elements/ImagePlaceholderElement.tsx b/packages/slate-editor/src/extensions/placeholders/elements/ImagePlaceholderElement.tsx
@@ -8,6 +8,7 @@ import {
 } from '@prezly/uploadcare';
 import uploadcare, { type FilePromise } from '@prezly/uploadcare-widget';
 import React, { type DragEventHandler } from 'react';
+import { Node } from 'slate';
 import { useSlateStatic } from 'slate-react';
 
 import { PlaceholderImage } from '#icons';
@@ -50,8 +51,14 @@ export function ImagePlaceholderElement({
         images.forEach((filePromise, i) => {
             const uploading = toProgressPromise(filePromise).then((fileInfo: PrezlyFileInfo) => {
                 const image = UploadcareImage.createFromUploadcareWidgetPayload(fileInfo);
-                const caption = fileInfo[UPLOADCARE_FILE_DATA_KEY]?.caption || '';
-                return { file: image.toPrezlyStoragePayload(), caption, operation: 'add' } as const;
+                const caption: string = fileInfo[UPLOADCARE_FILE_DATA_KEY]?.caption || '';
+                return {
+                    image: createImage({
+                        file: image.toPrezlyStoragePayload(),
+                        children: [{ text: caption }],
+                    }),
+                    operation: 'add' as const,
+                };
             });
             PlaceholdersManager.register(element.type, placeholders[i].uuid, uploading);
         });
@@ -77,23 +84,17 @@ export function ImagePlaceholderElement({
     });
 
     const handleUploadedImage = useFunction(
-        (data: { file: ImageNode['file']; caption: string; operation: 'add' | 'edit' }) => {
-            replacePlaceholder(
-                editor,
-                element,
-                createImage({
-                    file: data.file,
-                    children: [{ text: data.caption }],
-                }),
-            );
+        (data: { image: ImageNode; operation: 'add' | 'edit' }) => {
+            const node = createImage(data.image);
+            replacePlaceholder(editor, element, node);
 
             const event = data.operation === 'edit' ? 'image-edited' : 'image-added';
             EventsEditor.dispatchEvent(editor, event, {
-                description: data.caption,
+                description: Node.string(node),
                 isPasted: false,
-                mimeType: data.file.mime_type,
-                size: data.file.size,
-                uuid: data.file.uuid,
+                mimeType: node.file.mime_type,
+                size: node.file.size,
+                uuid: node.file.uuid,
             });
         },
     );

diff --git a/packages/slate-editor/src/modules/editor/lib/images/createImageEditHandler.ts b/packages/slate-editor/src/modules/editor/lib/images/createImageEditHandler.ts
@@ -1,11 +1,6 @@
 import { EditorCommands } from '@prezly/slate-commons';
-import {
-    type PrezlyFileInfo,
-    toProgressPromise,
-    UPLOADCARE_FILE_DATA_KEY,
-    UploadcareImage,
-} from '@prezly/uploadcare';
-import { Editor, Node, Transforms } from 'slate';
+import { type PrezlyFileInfo, toProgressPromise, UploadcareImage } from '@prezly/uploadcare';
+import { Editor, Transforms } from 'slate';
 
 import type { ImageExtensionConfiguration } from '#extensions/image';
 import { getCurrentImageNodeEntry } from '#extensions/image';
@@ -24,12 +19,7 @@ export function createImageEditHandler(params: ImageExtensionConfiguration) {
 
         EventsEditor.dispatchEvent(editor, 'image-edit-clicked');
 
-        // TODO: Consider changing this code in a way to preserve the image caption as-is,
-        //       otherwise we lose formatting & inline nodes after this code is executed.
-        const originalCaption = Node.string(imageNode);
-
         const initialFileInfo = UploadcareImage.createFromPrezlyStoragePayload(imageNode.file);
-        initialFileInfo[UPLOADCARE_FILE_DATA_KEY] = { caption: originalCaption };
 
         const [upload] =
             (await UploadcareEditor.upload(editor, {
@@ -51,12 +41,11 @@ export function createImageEditHandler(params: ImageExtensionConfiguration) {
             placeholder.uuid,
             toProgressPromise(upload).then((fileInfo: PrezlyFileInfo) => {
                 const image = UploadcareImage.createFromUploadcareWidgetPayload(fileInfo);
-                const caption: string =
-                    fileInfo[UPLOADCARE_FILE_DATA_KEY]?.caption || originalCaption || '';
-
                 return {
-                    file: image.toPrezlyStoragePayload(),
-                    caption,
+                    image: {
+                        ...imageNode,
+                        file: image.toPrezlyStoragePayload(),
+                    },
                     operation: 'edit',
                 };
             }),

diff --git a/packages/slate-editor/src/modules/editor/lib/images/createImageReplaceHandler.ts b/packages/slate-editor/src/modules/editor/lib/images/createImageReplaceHandler.ts
@@ -1,11 +1,6 @@
 import { EditorCommands } from '@prezly/slate-commons';
-import {
-    type PrezlyFileInfo,
-    toProgressPromise,
-    UPLOADCARE_FILE_DATA_KEY,
-    UploadcareImage,
-} from '@prezly/uploadcare';
-import { Editor, Node, Transforms } from 'slate';
+import { type PrezlyFileInfo, toProgressPromise, UploadcareImage } from '@prezly/uploadcare';
+import { Editor, Transforms } from 'slate';
 
 import type { ImageExtensionConfiguration } from '#extensions/image';
 import { getCurrentImageNodeEntry } from '#extensions/image';
@@ -24,10 +19,6 @@ export function createImageReplaceHandler(params: ImageExtensionConfiguration) {
 
         EventsEditor.dispatchEvent(editor, 'image-edit-clicked');
 
-        // TODO: Consider changing this code in a way to preserve the image caption as-is,
-        //       otherwise we lose formatting & inline nodes after this code is executed.
-        const originalCaption = Node.string(imageNode);
-
         const [upload] =
             (await UploadcareEditor.upload(editor, {
                 ...getMediaGalleryParameters(params),
@@ -47,12 +38,11 @@ export function createImageReplaceHandler(params: ImageExtensionConfiguration) {
             placeholder.uuid,
             toProgressPromise(upload).then((fileInfo: PrezlyFileInfo) => {
                 const image = UploadcareImage.createFromUploadcareWidgetPayload(fileInfo);
-                const caption: string =
-                    fileInfo[UPLOADCARE_FILE_DATA_KEY]?.caption || originalCaption || '';
-
                 return {
-                    file: image.toPrezlyStoragePayload(),
-                    caption,
+                    image: {
+                        ...imageNode,
+                        file: image.toPrezlyStoragePayload(),
+                    },
                     operation: 'edit',
                 };
             }),