@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
228 lines (222 loc) • 8.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PostLockedModal;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _url = require("@wordpress/url");
var _element = require("@wordpress/element");
var _hooks = require("@wordpress/hooks");
var _compose = require("@wordpress/compose");
var _coreData = require("@wordpress/core-data");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* A modal component that is displayed when a post is locked for editing by another user.
* The modal provides information about the lock status and options to take over or exit the editor.
*
* @return {JSX.Element|null} The rendered PostLockedModal component.
*/function PostLockedModal() {
const instanceId = (0, _compose.useInstanceId)(PostLockedModal);
const hookName = 'core/editor/post-locked-modal-' + instanceId;
const {
autosave,
updatePostLock
} = (0, _data.useDispatch)(_store.store);
const {
isLocked,
isTakeover,
user,
postId,
postLockUtils,
activePostLock,
postType,
previewLink
} = (0, _data.useSelect)(select => {
const {
isPostLocked,
isPostLockTakeover,
getPostLockUser,
getCurrentPostId,
getActivePostLock,
getEditedPostAttribute,
getEditedPostPreviewLink,
getEditorSettings
} = select(_store.store);
const {
getPostType
} = select(_coreData.store);
return {
isLocked: isPostLocked(),
isTakeover: isPostLockTakeover(),
user: getPostLockUser(),
postId: getCurrentPostId(),
postLockUtils: getEditorSettings().postLockUtils,
activePostLock: getActivePostLock(),
postType: getPostType(getEditedPostAttribute('type')),
previewLink: getEditedPostPreviewLink()
};
}, []);
(0, _element.useEffect)(() => {
/**
* Keep the lock refreshed.
*
* When the user does not send a heartbeat in a heartbeat-tick
* the user is no longer editing and another user can start editing.
*
* @param {Object} data Data to send in the heartbeat request.
*/
function sendPostLock(data) {
if (isLocked) {
return;
}
data['wp-refresh-post-lock'] = {
lock: activePostLock,
post_id: postId
};
}
/**
* Refresh post locks: update the lock string or show the dialog if somebody has taken over editing.
*
* @param {Object} data Data received in the heartbeat request
*/
function receivePostLock(data) {
if (!data['wp-refresh-post-lock']) {
return;
}
const received = data['wp-refresh-post-lock'];
if (received.lock_error) {
// Auto save and display the takeover modal.
autosave();
updatePostLock({
isLocked: true,
isTakeover: true,
user: {
name: received.lock_error.name,
avatar: received.lock_error.avatar_src_2x
}
});
} else if (received.new_lock) {
updatePostLock({
isLocked: false,
activePostLock: received.new_lock
});
}
}
/**
* Unlock the post before the window is exited.
*/
function releasePostLock() {
if (isLocked || !activePostLock) {
return;
}
const data = new window.FormData();
data.append('action', 'wp-remove-post-lock');
data.append('_wpnonce', postLockUtils.unlockNonce);
data.append('post_ID', postId);
data.append('active_post_lock', activePostLock);
if (window.navigator.sendBeacon) {
window.navigator.sendBeacon(postLockUtils.ajaxUrl, data);
} else {
const xhr = new window.XMLHttpRequest();
xhr.open('POST', postLockUtils.ajaxUrl, false);
xhr.send(data);
}
}
// Details on these events on the Heartbeat API docs
// https://developer.wordpress.org/plugins/javascript/heartbeat-api/
(0, _hooks.addAction)('heartbeat.send', hookName, sendPostLock);
(0, _hooks.addAction)('heartbeat.tick', hookName, receivePostLock);
window.addEventListener('beforeunload', releasePostLock);
return () => {
(0, _hooks.removeAction)('heartbeat.send', hookName);
(0, _hooks.removeAction)('heartbeat.tick', hookName);
window.removeEventListener('beforeunload', releasePostLock);
};
}, []);
if (!isLocked) {
return null;
}
const userDisplayName = user.name;
const userAvatar = user.avatar;
const unlockUrl = (0, _url.addQueryArgs)('post.php', {
'get-post-lock': '1',
lockKey: true,
post: postId,
action: 'edit',
_wpnonce: postLockUtils.nonce
});
const allPostsUrl = (0, _url.addQueryArgs)('edit.php', {
post_type: postType?.slug
});
const allPostsLabel = (0, _i18n.__)('Exit editor');
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
title: isTakeover ? (0, _i18n.__)('Someone else has taken over this post') : (0, _i18n.__)('This post is already being edited'),
focusOnMount: true,
shouldCloseOnClickOutside: false,
shouldCloseOnEsc: false,
isDismissible: false
// Do not remove this class, as this class is used by third party plugins.
,
className: "editor-post-locked-modal",
size: "medium",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
alignment: "top",
spacing: 6,
children: [!!userAvatar && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: userAvatar,
alt: (0, _i18n.__)('Avatar'),
className: "editor-post-locked-modal__avatar",
width: 64,
height: 64
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [!!isTakeover && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
children: (0, _element.createInterpolateElement)(userDisplayName ? (0, _i18n.sprintf)( /* translators: %s: user's display name */
(0, _i18n.__)('<strong>%s</strong> now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'), userDisplayName) : (0, _i18n.__)('Another user now has editing control of this post (<PreviewLink />). Don’t worry, your changes up to this moment have been saved.'), {
strong: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {}),
PreviewLink: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
href: previewLink,
children: (0, _i18n.__)('preview')
})
})
}), !isTakeover && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
children: (0, _element.createInterpolateElement)(userDisplayName ? (0, _i18n.sprintf)( /* translators: %s: user's display name */
(0, _i18n.__)('<strong>%s</strong> is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'), userDisplayName) : (0, _i18n.__)('Another user is currently working on this post (<PreviewLink />), which means you cannot make changes, unless you take over.'), {
strong: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {}),
PreviewLink: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ExternalLink, {
href: previewLink,
children: (0, _i18n.__)('preview')
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
children: (0, _i18n.__)('If you take over, the other user will lose editing control to the post, but their changes will be saved.')
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
className: "editor-post-locked-modal__buttons",
justify: "flex-end",
children: [!isTakeover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
href: unlockUrl,
children: (0, _i18n.__)('Take over')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "primary",
href: allPostsUrl,
children: allPostsLabel
})]
})]
})]
})
});
}
//# sourceMappingURL=index.js.map