From fb08ff2da95e7a78ec8925284c60cb71807a96b8 Mon Sep 17 00:00:00 2001 From: Ivan Voskoboinyk Date: Fri, 9 Jun 2023 13:04:59 +0300 Subject: [PATCH] [DEV-10977] Preserve original image settings & caption formatting when cropping --- .../placeholders/PlaceholdersManager.ts | 3 +- .../elements/ImagePlaceholderElement.tsx | 31 ++++++++++--------- .../lib/images/createImageEditHandler.ts | 23 ++++---------- .../lib/images/createImageReplaceHandler.ts | 22 ++++--------- 4 files changed, 29 insertions(+), 50 deletions(-) diff --git a/packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts b/packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts index 21c1ec085..1ff61c01a 100644 --- 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 index 5ab9e521a..f953e2888 100644 --- 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 index aca4ca821..6f5ef047b 100644 --- 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 index d6e4d752d..5bf073eb7 100644 --- 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', }; }),