@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
64 lines (62 loc) • 2.14 kB
JavaScript
/**
* WordPress dependencies
*/
import { _x } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
import { store as blockEditorStore } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import CommentAuthorInfo from './comment-author-info';
import CommentForm from './comment-form';
/**
* Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
*
* @param {Object} props - The component props.
* @param {Function} props.onSubmit - A callback function to be called when the user submits a comment.
* @param {boolean} props.showCommentBoard - The function to edit the comment.
* @param {Function} props.setShowCommentBoard - The function to delete the comment.
* @return {React.ReactNode} The rendered comment input UI.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function AddComment({
onSubmit,
showCommentBoard,
setShowCommentBoard
}) {
const {
clientId,
blockCommentId
} = useSelect(select => {
const {
getSelectedBlock
} = select(blockEditorStore);
const selectedBlock = getSelectedBlock();
return {
clientId: selectedBlock?.clientId,
blockCommentId: selectedBlock?.attributes?.blockCommentId
};
});
if (!showCommentBoard || !clientId || undefined !== blockCommentId) {
return null;
}
return /*#__PURE__*/_jsxs(VStack, {
spacing: "3",
className: "editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread",
children: [/*#__PURE__*/_jsx(HStack, {
alignment: "left",
spacing: "3",
children: /*#__PURE__*/_jsx(CommentAuthorInfo, {})
}), /*#__PURE__*/_jsx(CommentForm, {
onSubmit: inputComment => {
onSubmit(inputComment);
},
onCancel: () => {
setShowCommentBoard(false);
},
submitButtonText: _x('Comment', 'Add comment button')
})]
});
}
//# sourceMappingURL=add-comment.js.map