@atlaskit/editor-plugin-media-editing
Version:
MediaEditing plugin for @atlaskit/editor-core
161 lines (155 loc) • 6.93 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useEffect, useState } from 'react';
import { MediaClient } from '@atlaskit/media-client';
import { isExternalMedia } from '../../pm-plugins/utils';
import { ImageEditor } from './index';
export var RenderImageEditor = function RenderImageEditor(_ref) {
var mediaClientConfig = _ref.mediaClientConfig,
onClose = _ref.onClose,
selectedNodeAttrs = _ref.selectedNodeAttrs,
errorReporter = _ref.errorReporter,
editorView = _ref.editorView;
var _useState = useState(''),
_useState2 = _slicedToArray(_useState, 2),
imageUrl = _useState2[0],
setImageUrl = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isSaving = _useState4[0],
setIsSaving = _useState4[1];
useEffect(function () {
var getImageUrl = function getImageUrl() {
if (isExternalMedia(selectedNodeAttrs)) {
// Fall back in case editing button shows by mistake
onClose();
errorReporter === null || errorReporter === void 0 || errorReporter.captureException(new Error('Cannot edit external media due to CORS restrictions'));
} else {
// File media - use MediaClient to get the image URL
var id = selectedNodeAttrs.id,
_selectedNodeAttrs$co = selectedNodeAttrs.collection,
collection = _selectedNodeAttrs$co === void 0 ? '' : _selectedNodeAttrs$co;
try {
var mediaClient = new MediaClient(mediaClientConfig);
// Subscribe to file state to get file information
var subscription = mediaClient.file.getFileState(id, {
collectionName: collection
}).subscribe(function (fileState) {
if (fileState.status === 'processed' || fileState.status === 'processing') {
// Get the image URL from the processed file
mediaClient.file.getFileBinaryURL(id, collection).then(function (url) {
setImageUrl(url);
});
}
});
// Cleanup subscription on unmount
return function () {
return subscription.unsubscribe();
};
} catch (error) {
if (errorReporter) {
errorReporter.captureException(error instanceof Error ? error : new Error(String(error)));
}
setImageUrl('');
}
}
};
getImageUrl();
}, [selectedNodeAttrs, mediaClientConfig, errorReporter, onClose]);
var handleSave = function handleSave(blob, width, height) {
var mediaClient = new MediaClient(mediaClientConfig);
var collection = 'collection' in selectedNodeAttrs ? selectedNodeAttrs.collection || '' : '';
// Ensure blob has MIME type
var typedBlob = blob.type ? blob : new Blob([blob], {
type: 'image/png'
});
var localId = !isExternalMedia(selectedNodeAttrs) ? selectedNodeAttrs.localId : undefined;
// Upload the edited image as a new file with a different filename
var originalFileName = !isExternalMedia(selectedNodeAttrs) ? selectedNodeAttrs.__fileName : undefined;
var editedFileName = 'edited-image.png'; // fallback if the filename doesn't exist
if (originalFileName) {
var lastDotIndex = originalFileName.lastIndexOf('.');
if (lastDotIndex > 0) {
var baseName = originalFileName.substring(0, lastDotIndex);
editedFileName = "".concat(baseName, "-edited-").concat(localId);
} else {
editedFileName = "".concat(originalFileName, "-edited-").concat(localId);
}
}
var uploadableFile = {
content: typedBlob,
collection: collection,
mimeType: typedBlob.type,
name: editedFileName,
size: typedBlob.size
};
// Show saving state in modal
setIsSaving(true);
var uploadSubscription = mediaClient.file.upload(uploadableFile).subscribe({
next: function next(fileState) {
if (fileState.status === 'error') {
setIsSaving(false);
onClose();
uploadSubscription.unsubscribe();
return;
}
// Only update document when upload is complete
if (fileState.status !== 'uploading' && fileState.status !== 'processing') {
var updatedAttrs = isExternalMedia(selectedNodeAttrs) ? selectedNodeAttrs : _objectSpread(_objectSpread({}, selectedNodeAttrs), {}, {
id: fileState.id,
__fileName: fileState.name,
__fileMimeType: fileState.mimeType,
__fileSize: fileState.size,
width: width,
height: height
});
// Find the media node position and update it
var state = editorView.state,
dispatch = editorView.dispatch;
var doc = state.doc;
var nodePos = null;
var selectedLocalId = !isExternalMedia(selectedNodeAttrs) ? selectedNodeAttrs.localId : undefined;
doc.descendants(function (node, pos) {
if (isExternalMedia(selectedNodeAttrs)) {
return true;
}
// Find by localId (unique per node instance)
if (selectedLocalId && node.attrs.localId === selectedLocalId) {
nodePos = pos;
return false;
}
return true;
});
if (nodePos !== null) {
var node = doc.nodeAt(nodePos);
if (node) {
var tr = state.tr.setNodeMarkup(nodePos, undefined, updatedAttrs);
dispatch(tr);
}
}
uploadSubscription.unsubscribe();
setIsSaving(false);
onClose();
}
},
error: function error(_error) {
if (errorReporter) {
errorReporter.captureException(_error instanceof Error ? _error : new Error(String(_error)));
}
uploadSubscription.unsubscribe();
setIsSaving(false);
onClose();
}
});
};
return /*#__PURE__*/React.createElement(ImageEditor, {
isOpen: true,
onClose: onClose,
imageUrl: imageUrl,
onSave: handleSave,
errorReporter: errorReporter,
isSaving: isSaving
});
};