@wordpress/editor 14.9.0 → 14.11.0

package/build/components/collab-sidebar/comments.js

@@ -0,0 +1,321 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Comments = Comments;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _date = require("@wordpress/date");
+var _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
+var _data = require("@wordpress/data");
+var _coreData = require("@wordpress/core-data");
+var _blockEditor = require("@wordpress/block-editor");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Renders the Comments component.
+ *
+ * @param {Object}   props                  - The component props.
+ * @param {Array}    props.threads          - The array of comment threads.
+ * @param {Function} props.onEditComment    - The function to handle comment editing.
+ * @param {Function} props.onAddReply       - The function to add a reply to a comment.
+ * @param {Function} props.onCommentDelete  - The function to delete a comment.
+ * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
+ * @return {JSX.Element} The rendered Comments component.
+ */
+function Comments({
+  threads,
+  onEditComment,
+  onAddReply,
+  onCommentDelete,
+  onCommentResolve
+}) {
+  const [actionState, setActionState] = (0, _element.useState)(false);
+  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = (0, _element.useState)(false);
+  const handleConfirmDelete = () => {
+    onCommentDelete(actionState.id);
+    setActionState(false);
+    setIsConfirmDialogOpen(false);
+  };
+  const handleConfirmResolve = () => {
+    onCommentResolve(actionState.id);
+    setActionState(false);
+    setIsConfirmDialogOpen(false);
+  };
+  const handleCancelDelete = () => {
+    setActionState(false);
+    setIsConfirmDialogOpen(false);
+  };
+  const blockCommentId = (0, _data.useSelect)(select => {
+    var _select$getBlock$attr;
+    const clientID = select(_blockEditor.store).getSelectedBlockClientId();
+    return (_select$getBlock$attr = select(_blockEditor.store).getBlock(clientID)?.attributes?.blockCommentId) !== null && _select$getBlock$attr !== void 0 ? _select$getBlock$attr : false;
+  }, []);
+  const CommentBoard = ({
+    thread,
+    parentThread
+  }) => {
+    var _parentThread$status;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CommentHeader, {
+        thread: thread,
+        onResolve: () => {
+          var _parentThread$id;
+          setActionState({
+            action: 'resolve',
+            id: (_parentThread$id = parentThread?.id) !== null && _parentThread$id !== void 0 ? _parentThread$id : thread.id
+          });
+          setIsConfirmDialogOpen(true);
+        },
+        onEdit: () => setActionState({
+          action: 'edit',
+          id: thread.id
+        }),
+        onDelete: () => {
+          setActionState({
+            action: 'delete',
+            id: thread.id
+          });
+          setIsConfirmDialogOpen(true);
+        },
+        onReply: !parentThread ? () => setActionState({
+          action: 'reply',
+          id: thread.id
+        }) : undefined,
+        status: (_parentThread$status = parentThread?.status) !== null && _parentThread$status !== void 0 ? _parentThread$status : thread.status
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+        alignment: "left",
+        spacing: "3",
+        justify: "flex-start",
+        className: "editor-collab-sidebar-panel__user-comment",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+          spacing: "3",
+          className: "editor-collab-sidebar-panel__comment-field",
+          children: ['edit' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentForm, {
+            onSubmit: value => {
+              onEditComment(thread.id, value);
+              setActionState(false);
+            },
+            onCancel: () => setActionState(false),
+            thread: thread
+          }), (!actionState || 'edit' !== actionState?.action) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
+            children: thread?.content?.raw
+          })]
+        })
+      }), 'resolve' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
+        isOpen: isConfirmDialogOpen,
+        onConfirm: handleConfirmResolve,
+        onCancel: handleCancelDelete,
+        confirmButtonText: "Yes",
+        cancelButtonText: "No",
+        children:
+        // translators: message displayed when confirming an action
+        (0, _i18n.__)('Are you sure you want to mark this comment as resolved?')
+      }), 'delete' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
+        isOpen: isConfirmDialogOpen,
+        onConfirm: handleConfirmDelete,
+        onCancel: handleCancelDelete,
+        confirmButtonText: "Yes",
+        cancelButtonText: "No",
+        children:
+        // translators: message displayed when confirming an action
+        (0, _i18n.__)('Are you sure you want to delete this comment?')
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [
+    // If there are no comments, show a message indicating no comments are available.
+    (!Array.isArray(threads) || threads.length === 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+      alignment: "left",
+      className: "editor-collab-sidebar-panel__thread",
+      justify: "flex-start",
+      spacing: "3",
+      children:
+      // translators: message displayed when there are no comments available
+      (0, _i18n.__)('No comments available')
+    }), Array.isArray(threads) && threads.length > 0 && threads.map(thread => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+      className: (0, _clsx.default)('editor-collab-sidebar-panel__thread', {
+        'editor-collab-sidebar-panel__active-thread': blockCommentId && blockCommentId === thread.id
+      }),
+      id: thread.id,
+      spacing: "3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
+        thread: thread
+      }), 'reply' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+        alignment: "left",
+        spacing: "3",
+        justify: "flex-start",
+        className: "editor-collab-sidebar-panel__user-comment",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+          spacing: "3",
+          className: "editor-collab-sidebar-panel__comment-field",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentForm, {
+            onSubmit: inputComment => {
+              onAddReply(inputComment, thread.id);
+              setActionState(false);
+            },
+            onCancel: () => setActionState(false)
+          })
+        })
+      }), 0 < thread?.reply?.length && thread.reply.map(reply => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+        className: "editor-collab-sidebar-panel__child-thread",
+        id: reply.id,
+        spacing: "2",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CommentBoard, {
+          thread: reply,
+          parentThread: thread
+        })
+      }, reply.id))]
+    }, thread.id))]
+  });
+}
+
+/**
+ * EditComment component.
+ *
+ * @param {Object}   props          - The component props.
+ * @param {Function} props.onSubmit - The function to call when updating the comment.
+ * @param {Function} props.onCancel - The function to call when canceling the comment update.
+ * @param {Object}   props.thread   - The comment thread object.
+ * @return {JSX.Element} The CommentForm component.
+ */
+function CommentForm({
+  onSubmit,
+  onCancel,
+  thread
+}) {
+  var _thread$content$raw;
+  const [inputComment, setInputComment] = (0, _element.useState)((_thread$content$raw = thread?.content?.raw) !== null && _thread$content$raw !== void 0 ? _thread$content$raw : '');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextareaControl, {
+      __nextHasNoMarginBottom: true,
+      value: inputComment !== null && inputComment !== void 0 ? inputComment : '',
+      onChange: setInputComment
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+      alignment: "left",
+      spacing: "3",
+      justify: "flex-start",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        alignment: "left",
+        spacing: "3",
+        justify: "flex-start",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          __next40pxDefaultSize: true,
+          accessibleWhenDisabled: true,
+          variant: "primary",
+          onClick: () => onSubmit(inputComment),
+          disabled: 0 === (0, _utils.sanitizeCommentString)(inputComment).length,
+          children: thread ? (0, _i18n._x)('Update', 'verb') : (0, _i18n._x)('Reply', 'Add reply comment')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          __next40pxDefaultSize: true,
+          onClick: onCancel,
+          children: (0, _i18n._x)('Cancel', 'Cancel comment edit')
+        })]
+      })
+    })]
+  });
+}
+
+/**
+ * Renders the header of a comment in the collaboration sidebar.
+ *
+ * @param {Object}   props           - The component props.
+ * @param {Object}   props.thread    - The comment thread object.
+ * @param {Function} props.onResolve - The function to resolve the comment.
+ * @param {Function} props.onEdit    - The function to edit the comment.
+ * @param {Function} props.onDelete  - The function to delete the comment.
+ * @param {Function} props.onReply   - The function to reply to the comment.
+ * @param {string}   props.status    - The status of the comment.
+ * @return {JSX.Element} The rendered comment header.
+ */
+function CommentHeader({
+  thread,
+  onResolve,
+  onEdit,
+  onDelete,
+  onReply,
+  status
+}) {
+  const dateSettings = (0, _date.getSettings)();
+  const [dateTimeFormat = dateSettings.formats.time] = (0, _coreData.useEntityProp)('root', 'site', 'time_format');
+  const actions = [{
+    title: (0, _i18n._x)('Edit', 'Edit comment'),
+    onClick: onEdit
+  }, {
+    title: (0, _i18n._x)('Delete', 'Delete comment'),
+    onClick: onDelete
+  }, {
+    title: (0, _i18n._x)('Reply', 'Reply on a comment'),
+    onClick: onReply
+  }];
+  const moreActions = actions.filter(item => item.onClick);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+    alignment: "left",
+    spacing: "3",
+    justify: "flex-start",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: thread?.author_avatar_urls?.[48],
+      className: "editor-collab-sidebar-panel__user-avatar"
+      // translators: alt text for user avatar image
+      ,
+      alt: (0, _i18n.__)('User avatar'),
+      width: 32,
+      height: 32
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+      spacing: "0",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "editor-collab-sidebar-panel__user-name",
+        children: thread.author_name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("time", {
+        dateTime: (0, _date.format)('h:i A', thread.date),
+        className: "editor-collab-sidebar-panel__user-time",
+        children: (0, _date.dateI18n)(dateTimeFormat, thread.date)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: "editor-collab-sidebar-panel__comment-status",
+      children: [status !== 'approved' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        alignment: "right",
+        justify: "flex-end",
+        spacing: "0",
+        children: [0 === thread.parent && onResolve && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          label: (0, _i18n._x)('Resolve', 'Mark comment as resolved'),
+          __next40pxDefaultSize: true,
+          icon: _icons.published,
+          onClick: onResolve,
+          showTooltip: true
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
+          icon: _icons.moreVertical,
+          label: (0, _i18n._x)('Select an action', 'Select comment action'),
+          className: "editor-collab-sidebar-panel__comment-dropdown-menu",
+          controls: moreActions
+        })]
+      }), status === 'approved' &&
+      /*#__PURE__*/
+      // translators: tooltip for resolved comment
+      (0, _jsxRuntime.jsx)(_components.Tooltip, {
+        text: (0, _i18n.__)('Resolved'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: _icons.check
+        })
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=comments.js.map

package/build/components/collab-sidebar/comments.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_components","_date","_icons","_i18n","_data","_coreData","_blockEditor","_utils","_jsxRuntime","Comments","threads","onEditComment","onAddReply","onCommentDelete","onCommentResolve","actionState","setActionState","useState","isConfirmDialogOpen","setIsConfirmDialogOpen","handleConfirmDelete","id","handleConfirmResolve","handleCancelDelete","blockCommentId","useSelect","select","_select$getBlock$attr","clientID","blockEditorStore","getSelectedBlockClientId","getBlock","attributes","CommentBoard","thread","parentThread","_parentThread$status","jsxs","Fragment","children","jsx","CommentHeader","onResolve","_parentThread$id","action","onEdit","onDelete","onReply","undefined","status","__experimentalHStack","alignment","spacing","justify","className","__experimentalVStack","CommentForm","onSubmit","value","onCancel","RawHTML","content","raw","__experimentalConfirmDialog","isOpen","onConfirm","confirmButtonText","cancelButtonText","__","Array","isArray","length","map","clsx","inputComment","reply","_thread$content$raw","setInputComment","TextareaControl","__nextHasNoMarginBottom","onChange","Button","__next40pxDefaultSize","accessibleWhenDisabled","variant","onClick","disabled","sanitizeCommentString","_x","dateSettings","getDateSettings","dateTimeFormat","formats","time","useEntityProp","actions","title","moreActions","filter","item","src","author_avatar_urls","alt","width","height","author_name","dateTime","format","date","dateI18n","parent","label","icon","published","showTooltip","DropdownMenu","moreVertical","controls","Tooltip","text","Icon","check"],"sources":["@wordpress/editor/src/components/collab-sidebar/comments.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, RawHTML } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tButton,\n\tDropdownMenu,\n\tTextareaControl,\n\tTooltip,\n} from '@wordpress/components';\nimport {\n\tdateI18n,\n\tformat,\n\tgetSettings as getDateSettings,\n} from '@wordpress/date';\nimport { Icon, check, published, moreVertical } from '@wordpress/icons';\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { useEntityProp } from '@wordpress/core-data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString } from './utils';\n\n/**\n * Renders the Comments component.\n *\n * @param {Object}   props                  - The component props.\n * @param {Array}    props.threads          - The array of comment threads.\n * @param {Function} props.onEditComment    - The function to handle comment editing.\n * @param {Function} props.onAddReply       - The function to add a reply to a comment.\n * @param {Function} props.onCommentDelete  - The function to delete a comment.\n * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.\n * @return {JSX.Element} The rendered Comments component.\n */\nexport function Comments( {\n\tthreads,\n\tonEditComment,\n\tonAddReply,\n\tonCommentDelete,\n\tonCommentResolve,\n} ) {\n\tconst [ actionState, setActionState ] = useState( false );\n\tconst [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );\n\n\tconst handleConfirmDelete = () => {\n\t\tonCommentDelete( actionState.id );\n\t\tsetActionState( false );\n\t\tsetIsConfirmDialogOpen( false );\n\t};\n\n\tconst handleConfirmResolve = () => {\n\t\tonCommentResolve( actionState.id );\n\t\tsetActionState( false );\n\t\tsetIsConfirmDialogOpen( false );\n\t};\n\n\tconst handleCancelDelete = () => {\n\t\tsetActionState( false );\n\t\tsetIsConfirmDialogOpen( false );\n\t};\n\n\tconst blockCommentId = useSelect( ( select ) => {\n\t\tconst clientID = select( blockEditorStore ).getSelectedBlockClientId();\n\t\treturn (\n\t\t\tselect( blockEditorStore ).getBlock( clientID )?.attributes\n\t\t\t\t?.blockCommentId ?? false\n\t\t);\n\t}, [] );\n\n\tconst CommentBoard = ( { thread, parentThread } ) => {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<CommentHeader\n\t\t\t\t\tthread={ thread }\n\t\t\t\t\tonResolve={ () => {\n\t\t\t\t\t\tsetActionState( {\n\t\t\t\t\t\t\taction: 'resolve',\n\t\t\t\t\t\t\tid: parentThread?.id ?? thread.id,\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsetIsConfirmDialogOpen( true );\n\t\t\t\t\t} }\n\t\t\t\t\tonEdit={ () =>\n\t\t\t\t\t\tsetActionState( { action: 'edit', id: thread.id } )\n\t\t\t\t\t}\n\t\t\t\t\tonDelete={ () => {\n\t\t\t\t\t\tsetActionState( { action: 'delete', id: thread.id } );\n\t\t\t\t\t\tsetIsConfirmDialogOpen( true );\n\t\t\t\t\t} }\n\t\t\t\t\tonReply={\n\t\t\t\t\t\t! parentThread\n\t\t\t\t\t\t\t? () =>\n\t\t\t\t\t\t\t\t\tsetActionState( {\n\t\t\t\t\t\t\t\t\t\taction: 'reply',\n\t\t\t\t\t\t\t\t\t\tid: thread.id,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstatus={ parentThread?.status ?? thread.status }\n\t\t\t\t/>\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"left\"\n\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-comment\"\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-field\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ 'edit' === actionState?.action &&\n\t\t\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\t\tonSubmit={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\tonEditComment( thread.id, value );\n\t\t\t\t\t\t\t\t\t\tsetActionState( false );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonCancel={ () => setActionState( false ) }\n\t\t\t\t\t\t\t\t\tthread={ thread }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ( ! actionState ||\n\t\t\t\t\t\t\t'edit' !== actionState?.action ) && (\n\t\t\t\t\t\t\t<RawHTML>{ thread?.content?.raw }</RawHTML>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</HStack>\n\t\t\t\t{ 'resolve' === actionState?.action &&\n\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t<ConfirmDialog\n\t\t\t\t\t\t\tisOpen={ isConfirmDialogOpen }\n\t\t\t\t\t\t\tonConfirm={ handleConfirmResolve }\n\t\t\t\t\t\t\tonCancel={ handleCancelDelete }\n\t\t\t\t\t\t\tconfirmButtonText=\"Yes\"\n\t\t\t\t\t\t\tcancelButtonText=\"No\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t// translators: message displayed when confirming an action\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Are you sure you want to mark this comment as resolved?'\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ConfirmDialog>\n\t\t\t\t\t) }\n\t\t\t\t{ 'delete' === actionState?.action &&\n\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t<ConfirmDialog\n\t\t\t\t\t\t\tisOpen={ isConfirmDialogOpen }\n\t\t\t\t\t\t\tonConfirm={ handleConfirmDelete }\n\t\t\t\t\t\t\tonCancel={ handleCancelDelete }\n\t\t\t\t\t\t\tconfirmButtonText=\"Yes\"\n\t\t\t\t\t\t\tcancelButtonText=\"No\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t// translators: message displayed when confirming an action\n\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t'Are you sure you want to delete this comment?'\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</ConfirmDialog>\n\t\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// If there are no comments, show a message indicating no comments are available.\n\t\t\t\t( ! Array.isArray( threads ) || threads.length === 0 ) && (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__thread\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t// translators: message displayed when there are no comments available\n\t\t\t\t\t\t\t__( 'No comments available' )\n\t\t\t\t\t\t}\n\t\t\t\t\t</VStack>\n\t\t\t\t)\n\t\t\t}\n\n\t\t\t{ Array.isArray( threads ) &&\n\t\t\t\tthreads.length > 0 &&\n\t\t\t\tthreads.map( ( thread ) => (\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tkey={ thread.id }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'editor-collab-sidebar-panel__thread',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'editor-collab-sidebar-panel__active-thread':\n\t\t\t\t\t\t\t\t\tblockCommentId &&\n\t\t\t\t\t\t\t\t\tblockCommentId === thread.id,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tid={ thread.id }\n\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CommentBoard thread={ thread } />\n\t\t\t\t\t\t{ 'reply' === actionState?.action &&\n\t\t\t\t\t\t\tthread.id === actionState?.id && (\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\talignment=\"left\"\n\t\t\t\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-comment\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\t\tspacing=\"3\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-field\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<CommentForm\n\t\t\t\t\t\t\t\t\t\t\tonSubmit={ ( inputComment ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tonAddReply(\n\t\t\t\t\t\t\t\t\t\t\t\t\tinputComment,\n\t\t\t\t\t\t\t\t\t\t\t\t\tthread.id\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\tsetActionState( false );\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetActionState( false )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ 0 < thread?.reply?.length &&\n\t\t\t\t\t\t\tthread.reply.map( ( reply ) => (\n\t\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\t\tkey={ reply.id }\n\t\t\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__child-thread\"\n\t\t\t\t\t\t\t\t\tid={ reply.id }\n\t\t\t\t\t\t\t\t\tspacing=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<CommentBoard\n\t\t\t\t\t\t\t\t\t\tthread={ reply }\n\t\t\t\t\t\t\t\t\t\tparentThread={ thread }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</VStack>\n\t\t\t\t) ) }\n\t\t</>\n\t);\n}\n\n/**\n * EditComment component.\n *\n * @param {Object}   props          - The component props.\n * @param {Function} props.onSubmit - The function to call when updating the comment.\n * @param {Function} props.onCancel - The function to call when canceling the comment update.\n * @param {Object}   props.thread   - The comment thread object.\n * @return {JSX.Element} The CommentForm component.\n */\nfunction CommentForm( { onSubmit, onCancel, thread } ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tthread?.content?.raw ?? ''\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<TextareaControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ inputComment ?? '' }\n\t\t\t\tonChange={ setInputComment }\n\t\t\t/>\n\t\t\t<VStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\n\t\t\t\t<HStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ () => onSubmit( inputComment ) }\n\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t0 === sanitizeCommentString( inputComment ).length\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ thread\n\t\t\t\t\t\t\t? _x( 'Update', 'verb' )\n\t\t\t\t\t\t\t: _x( 'Reply', 'Add reply comment' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button __next40pxDefaultSize onClick={ onCancel }>\n\t\t\t\t\t\t{ _x( 'Cancel', 'Cancel comment edit' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\n/**\n * Renders the header of a comment in the collaboration sidebar.\n *\n * @param {Object}   props           - The component props.\n * @param {Object}   props.thread    - The comment thread object.\n * @param {Function} props.onResolve - The function to resolve the comment.\n * @param {Function} props.onEdit    - The function to edit the comment.\n * @param {Function} props.onDelete  - The function to delete the comment.\n * @param {Function} props.onReply   - The function to reply to the comment.\n * @param {string}   props.status    - The status of the comment.\n * @return {JSX.Element} The rendered comment header.\n */\nfunction CommentHeader( {\n\tthread,\n\tonResolve,\n\tonEdit,\n\tonDelete,\n\tonReply,\n\tstatus,\n} ) {\n\tconst dateSettings = getDateSettings();\n\tconst [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(\n\t\t'root',\n\t\t'site',\n\t\t'time_format'\n\t);\n\n\tconst actions = [\n\t\t{\n\t\t\ttitle: _x( 'Edit', 'Edit comment' ),\n\t\t\tonClick: onEdit,\n\t\t},\n\t\t{\n\t\t\ttitle: _x( 'Delete', 'Delete comment' ),\n\t\t\tonClick: onDelete,\n\t\t},\n\t\t{\n\t\t\ttitle: _x( 'Reply', 'Reply on a comment' ),\n\t\t\tonClick: onReply,\n\t\t},\n\t];\n\n\tconst moreActions = actions.filter( ( item ) => item.onClick );\n\n\treturn (\n\t\t<HStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\n\t\t\t<img\n\t\t\t\tsrc={ thread?.author_avatar_urls?.[ 48 ] }\n\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\talt={ __( 'User avatar' ) }\n\t\t\t\twidth={ 32 }\n\t\t\t\theight={ 32 }\n\t\t\t/>\n\t\t\t<VStack spacing=\"0\">\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ thread.author_name }\n\t\t\t\t</span>\n\t\t\t\t<time\n\t\t\t\t\tdateTime={ format( 'h:i A', thread.date ) }\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-time\"\n\t\t\t\t>\n\t\t\t\t\t{ dateI18n( dateTimeFormat, thread.date ) }\n\t\t\t\t</time>\n\t\t\t</VStack>\n\t\t\t<span className=\"editor-collab-sidebar-panel__comment-status\">\n\t\t\t\t{ status !== 'approved' && (\n\t\t\t\t\t<HStack alignment=\"right\" justify=\"flex-end\" spacing=\"0\">\n\t\t\t\t\t\t{ 0 === thread.parent && onResolve && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t\t'Resolve',\n\t\t\t\t\t\t\t\t\t'Mark comment as resolved'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\ticon={ published }\n\t\t\t\t\t\t\t\tonClick={ onResolve }\n\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t\t\t'Select an action',\n\t\t\t\t\t\t\t\t'Select comment action'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__comment-dropdown-menu\"\n\t\t\t\t\t\t\tcontrols={ moreActions }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t) }\n\t\t\t\t{ status === 'approved' && (\n\t\t\t\t\t// translators: tooltip for resolved comment\n\t\t\t\t\t<Tooltip text={ __( 'Resolved' ) }>\n\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) }\n\t\t\t</span>\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/collab-sidebar/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collabSidebarName = void 0;
+const collabSidebarName = exports.collabSidebarName = 'edit-post/collab-sidebar';
+//# sourceMappingURL=constants.js.map

package/build/components/collab-sidebar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["collabSidebarName","exports"],"sources":["@wordpress/editor/src/components/collab-sidebar/constants.js"],"sourcesContent":["export const collabSidebarName = 'edit-post/collab-sidebar';\n"],"mappings":";;;;;;AAAO,MAAMA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,0BAA0B","ignoreList":[]}

package/build/components/collab-sidebar/index.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CollabSidebar;
+var _i18n = require("@wordpress/i18n");
+var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
+var _hooks = require("@wordpress/hooks");
+var _notices = require("@wordpress/notices");
+var _coreData = require("@wordpress/core-data");
+var _blockEditor = require("@wordpress/block-editor");
+var _interface = require("@wordpress/interface");
+var _pluginSidebar = _interopRequireDefault(require("../plugin-sidebar"));
+var _constants = require("./constants");
+var _comments = require("./comments");
+var _addComment = require("./add-comment");
+var _store = require("../../store");
+var _commentButton = _interopRequireDefault(require("./comment-button"));
+var _commentButtonToolbar = _interopRequireDefault(require("./comment-button-toolbar"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const threadsEmptyArray = [];
+const isBlockCommentExperimentEnabled = window?.__experimentalEnableBlockComment;
+const modifyBlockCommentAttributes = settings => {
+  if (!settings.attributes.blockCommentId) {
+    settings.attributes = {
+      ...settings.attributes,
+      blockCommentId: {
+        type: 'number'
+      }
+    };
+  }
+  return settings;
+};
+
+// Apply the filter to all core blocks
+(0, _hooks.addFilter)('blocks.registerBlockType', 'block-comment/modify-core-block-attributes', modifyBlockCommentAttributes);
+
+/**
+ * Renders the Collab sidebar.
+ */
+function CollabSidebar() {
+  const {
+    createNotice
+  } = (0, _data.useDispatch)(_notices.store);
+  const {
+    saveEntityRecord,
+    deleteEntityRecord
+  } = (0, _data.useDispatch)(_coreData.store);
+  const {
+    getEntityRecord
+  } = (0, _data.resolveSelect)(_coreData.store);
+  const {
+    enableComplementaryArea
+  } = (0, _data.useDispatch)(_interface.store);
+  const [blockCommentID, setBlockCommentID] = (0, _element.useState)(null);
+  const [showCommentBoard, setShowCommentBoard] = (0, _element.useState)(false);
+  const {
+    postId
+  } = (0, _data.useSelect)(select => {
+    return {
+      postId: select(_store.store).getCurrentPostId()
+    };
+  }, []);
+  const postStatus = (0, _data.useSelect)(select => {
+    const post = select(_store.store).getCurrentPost();
+    return {
+      postStatus: post?.status
+    };
+  }, []);
+  const threads = (0, _data.useSelect)(select => {
+    if (!postId) {
+      return threadsEmptyArray;
+    }
+    const {
+      getEntityRecords
+    } = select(_coreData.store);
+    const data = getEntityRecords('root', 'comment', {
+      post: postId,
+      type: 'block_comment',
+      status: 'any',
+      per_page: 100
+    });
+    return data || threadsEmptyArray;
+  }, [postId]);
+  const clientId = (0, _data.useSelect)(select => {
+    const {
+      getSelectedBlockClientId
+    } = select(_blockEditor.store);
+    return getSelectedBlockClientId();
+  }, []);
+  const blockDetails = (0, _data.useSelect)(select => {
+    return clientId ? select(_blockEditor.store).getBlock(clientId) : null;
+  }, [clientId]);
+
+  // Get the dispatch functions to save the comment and update the block attributes.
+  const {
+    updateBlockAttributes
+  } = (0, _data.useDispatch)(_blockEditor.store);
+
+  // Process comments to build the tree structure
+  const resultComments = (0, _element.useMemo)(() => {
+    // Create a compare to store the references to all objects by id
+    const compare = {};
+    const result = [];
+    const filteredComments = threads.filter(comment => comment.status !== 'trash');
+
+    // Initialize each object with an empty `reply` array
+    filteredComments.forEach(item => {
+      compare[item.id] = {
+        ...item,
+        reply: []
+      };
+    });
+
+    // Iterate over the data to build the tree structure
+    filteredComments.forEach(item => {
+      if (item.parent === 0) {
+        // If parent is 0, it's a root item, push it to the result array
+        result.push(compare[item.id]);
+      } else if (compare[item.parent]) {
+        // Otherwise, find its parent and push it to the parent's `reply` array
+        compare[item.parent].reply.push(compare[item.id]);
+      }
+    });
+    return result;
+  }, [threads]);
+  const openCollabBoard = () => {
+    setShowCommentBoard(true);
+    enableComplementaryArea('core', 'edit-post/collab-sidebar');
+  };
+
+  // Function to save the comment.
+  const addNewComment = async (comment, parentCommentId) => {
+    const args = {
+      post: postId,
+      content: comment,
+      comment_type: 'block_comment',
+      comment_approved: 0
+    };
+
+    // Create a new object, conditionally including the parent property
+    const updatedArgs = {
+      ...args,
+      ...(parentCommentId ? {
+        parent: parentCommentId
+      } : {})
+    };
+    const savedRecord = await saveEntityRecord('root', 'comment', updatedArgs);
+    if (savedRecord) {
+      // If it's a main comment, update the block attributes with the comment id.
+      if (!parentCommentId) {
+        updateBlockAttributes(clientId, {
+          blockCommentId: savedRecord?.id
+        });
+      }
+      createNotice('snackbar', parentCommentId ?
+      // translators: Reply added successfully
+      (0, _i18n.__)('Reply added successfully.') :
+      // translators: Comment added successfully
+      (0, _i18n.__)('Comment added successfully.'), {
+        type: 'snackbar',
+        isDismissible: true
+      });
+    } else {
+      onError();
+    }
+  };
+  const onCommentResolve = async commentId => {
+    const savedRecord = await saveEntityRecord('root', 'comment', {
+      id: commentId,
+      status: 'approved'
+    });
+    if (savedRecord) {
+      // translators: Comment resolved successfully
+      createNotice('snackbar', (0, _i18n.__)('Comment marked as resolved.'), {
+        type: 'snackbar',
+        isDismissible: true
+      });
+    } else {
+      onError();
+    }
+  };
+  const onEditComment = async (commentId, comment) => {
+    const savedRecord = await saveEntityRecord('root', 'comment', {
+      id: commentId,
+      content: comment
+    });
+    if (savedRecord) {
+      createNotice('snackbar',
+      // translators: Comment edited successfully
+      (0, _i18n.__)('Comment edited successfully.'), {
+        type: 'snackbar',
+        isDismissible: true
+      });
+    } else {
+      onError();
+    }
+  };
+  const onError = () => {
+    createNotice('error',
+    // translators: Error message when comment submission fails
+    (0, _i18n.__)('Something went wrong. Please try publishing the post, or you may have already submitted your comment earlier.'), {
+      isDismissible: true
+    });
+  };
+  const onCommentDelete = async commentId => {
+    const childComment = await getEntityRecord('root', 'comment', commentId);
+    await deleteEntityRecord('root', 'comment', commentId);
+    if (childComment && !childComment.parent) {
+      updateBlockAttributes(clientId, {
+        blockCommentId: undefined
+      });
+    }
+    createNotice('snackbar',
+    // translators: Comment deleted successfully
+    (0, _i18n.__)('Comment deleted successfully.'), {
+      type: 'snackbar',
+      isDismissible: true
+    });
+  };
+  (0, _element.useEffect)(() => {
+    if (blockDetails) {
+      setBlockCommentID(blockDetails?.attributes.blockCommentId);
+    }
+  }, [postId, clientId]);
+
+  // Check if the experimental flag is enabled.
+  if (!isBlockCommentExperimentEnabled || postStatus.postStatus === 'publish') {
+    return null; // or maybe return some message indicating no threads are available.
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!blockCommentID && /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentButton.default, {
+      onClick: openCollabBoard
+    }), blockCommentID > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_commentButtonToolbar.default, {
+      onClick: openCollabBoard
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_pluginSidebar.default, {
+      identifier: _constants.collabSidebarName
+      // translators: Comments sidebar title
+      ,
+      title: (0, _i18n.__)('Comments'),
+      icon: _icons.comment,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "editor-collab-sidebar-panel",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_addComment.AddComment, {
+          threads: resultComments,
+          onSubmit: addNewComment,
+          showCommentBoard: showCommentBoard,
+          setShowCommentBoard: setShowCommentBoard
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_comments.Comments, {
+          threads: resultComments,
+          onEditComment: onEditComment,
+          onAddReply: addNewComment,
+          onCommentDelete: onCommentDelete,
+          onCommentResolve: onCommentResolve
+        })]
+      })
+    })]
+  });
+}
+//# sourceMappingURL=index.js.map