@atlaskit/editor-plugin-media-editing
Version:
MediaEditing plugin for @atlaskit/editor-core
170 lines (163 loc) • 8.09 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RenderImageEditor = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _mediaClient = require("@atlaskit/media-client");
var _utils = require("../../pm-plugins/utils");
var _index = require("./index");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
var RenderImageEditor = exports.RenderImageEditor = function RenderImageEditor(_ref) {
var mediaClientConfig = _ref.mediaClientConfig,
onClose = _ref.onClose,
selectedNodeAttrs = _ref.selectedNodeAttrs,
errorReporter = _ref.errorReporter,
editorView = _ref.editorView;
var _useState = (0, _react.useState)(''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
imageUrl = _useState2[0],
setImageUrl = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isSaving = _useState4[0],
setIsSaving = _useState4[1];
(0, _react.useEffect)(function () {
var getImageUrl = function getImageUrl() {
if ((0, _utils.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.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.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 = !(0, _utils.isExternalMedia)(selectedNodeAttrs) ? selectedNodeAttrs.localId : undefined;
// Upload the edited image as a new file with a different filename
var originalFileName = !(0, _utils.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 = (0, _utils.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 = !(0, _utils.isExternalMedia)(selectedNodeAttrs) ? selectedNodeAttrs.localId : undefined;
doc.descendants(function (node, pos) {
if ((0, _utils.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.default.createElement(_index.ImageEditor, {
isOpen: true,
onClose: onClose,
imageUrl: imageUrl,
onSave: handleSave,
errorReporter: errorReporter,
isSaving: isSaving
});
};