@wordpress/block-editor
Version:
142 lines (141 loc) • 3.46 kB
JavaScript
// packages/block-editor/src/components/image-editor/use-save-image.js
import { useDispatch, useSelect } from "@wordpress/data";
import { useCallback, useMemo, useState } from "@wordpress/element";
import { __, sprintf } from "@wordpress/i18n";
import { store as noticesStore } from "@wordpress/notices";
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
import { store as blockEditorStore } from "../../store";
import { mediaEditKey } from "../../store/private-keys";
var messages = {
crop: __("Image cropped."),
rotate: __("Image rotated."),
cropAndRotate: __("Image cropped and rotated.")
};
function useSaveImage({
crop,
rotation,
url,
id,
onSaveImage,
onFinishEditing
}) {
const { createErrorNotice, createSuccessNotice } = useDispatch(noticesStore);
const [isInProgress, setIsInProgress] = useState(false);
const { editMediaEntity } = useSelect((select) => {
const settings = select(blockEditorStore).getSettings();
return {
editMediaEntity: settings?.[mediaEditKey]
};
}, []);
const cancel = useCallback(() => {
setIsInProgress(false);
onFinishEditing();
}, [onFinishEditing]);
const apply = useCallback(async () => {
if (!editMediaEntity) {
onFinishEditing();
createErrorNotice(
__("Sorry, you are not allowed to edit images on this site."),
{
id: "image-editing-error",
type: "snackbar"
}
);
return;
}
setIsInProgress(true);
const modifiers = [];
if (rotation > 0) {
modifiers.push({
type: "rotate",
args: {
angle: rotation
}
});
}
if (crop.width < 99.9 || crop.height < 99.9) {
modifiers.push({
type: "crop",
args: {
left: crop.x,
top: crop.y,
width: crop.width,
height: crop.height
}
});
}
if (modifiers.length === 0) {
setIsInProgress(false);
onFinishEditing();
return;
}
const modifierType = modifiers.length === 1 ? modifiers[0].type : "cropAndRotate";
try {
const savedImage = await editMediaEntity(
id,
{
src: url,
modifiers
},
{ throwOnError: true }
);
if (savedImage) {
onSaveImage({
id: savedImage.id,
url: savedImage.source_url
});
createSuccessNotice(messages[modifierType], {
type: "snackbar",
actions: [
{
label: __("Undo"),
onClick: () => {
onSaveImage({
id,
url
});
}
}
]
});
}
} catch (error) {
createErrorNotice(
sprintf(
/* translators: %s: Error message. */
__("Could not edit image. %s"),
stripHTML(error.message)
),
{
id: "image-editing-error",
type: "snackbar"
}
);
} finally {
setIsInProgress(false);
onFinishEditing();
}
}, [
crop,
rotation,
id,
url,
onSaveImage,
createErrorNotice,
createSuccessNotice,
onFinishEditing,
editMediaEntity
]);
return useMemo(
() => ({
isInProgress,
apply,
cancel
}),
[isInProgress, apply, cancel]
);
}
export {
useSaveImage as default
};
//# sourceMappingURL=use-save-image.js.map