@wordpress/editor 14.12.0 → 14.13.0

package/build-module/components/collab-sidebar/add-comment.js

@@ -1,17 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
-import { __experimentalHStack as HStack, __experimentalVStack as VStack, Button, TextControl } from '@wordpress/components';
+import { __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString } from './utils';
+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.
@@ -20,7 +19,7 @@ import { sanitizeCommentString } from './utils';
  * @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 {JSX.Element} The rendered comment input UI.
+ * @return {React.ReactNode} The rendered comment input UI.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function AddComment({
@@ -28,85 +27,37 @@ export function AddComment({
   showCommentBoard,
   setShowCommentBoard
 }) {
-  var _currentUser$name;
-  // State to manage the comment thread.
-  const [inputComment, setInputComment] = useState('');
   const {
-    defaultAvatar,
     clientId,
-    blockCommentId,
-    currentUser
+    blockCommentId
   } = useSelect(select => {
     const {
-      getSettings,
       getSelectedBlock
     } = select(blockEditorStore);
-    const {
-      __experimentalDiscussionSettings
-    } = getSettings();
     const selectedBlock = getSelectedBlock();
-    const userData = select(coreStore).getCurrentUser();
     return {
-      defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
       clientId: selectedBlock?.clientId,
-      blockCommentId: selectedBlock?.attributes?.blockCommentId,
-      currentUser: userData
+      blockCommentId: selectedBlock?.attributes?.blockCommentId
     };
-  }, []);
-  const userAvatar = currentUser && currentUser.avatar_urls && currentUser.avatar_urls[48] ? currentUser.avatar_urls[48] : defaultAvatar;
-  useEffect(() => {
-    setInputComment('');
-  }, [clientId]);
-  const handleCancel = () => {
-    setShowCommentBoard(false);
-    setInputComment('');
-  };
+  });
   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",
-    children: [/*#__PURE__*/_jsxs(HStack, {
+    children: [/*#__PURE__*/_jsx(HStack, {
       alignment: "left",
       spacing: "3",
-      children: [/*#__PURE__*/_jsx("img", {
-        src: userAvatar
-        // translators: alt text for user avatar image
-        ,
-        alt: __('User Avatar'),
-        className: "editor-collab-sidebar-panel__user-avatar",
-        width: 32,
-        height: 32
-      }), /*#__PURE__*/_jsx("span", {
-        className: "editor-collab-sidebar-panel__user-name",
-        children: (_currentUser$name = currentUser?.name) !== null && _currentUser$name !== void 0 ? _currentUser$name : ''
-      })]
-    }), /*#__PURE__*/_jsx(TextControl, {
-      __next40pxDefaultSize: true,
-      __nextHasNoMarginBottom: true,
-      value: inputComment,
-      onChange: setInputComment,
-      placeholder: _x('Comment', 'noun')
-    }), /*#__PURE__*/_jsxs(HStack, {
-      alignment: "right",
-      spacing: "3",
-      children: [/*#__PURE__*/_jsx(Button, {
-        __next40pxDefaultSize: true,
-        variant: "tertiary",
-        text: _x('Cancel', 'Cancel comment button'),
-        onClick: handleCancel
-      }), /*#__PURE__*/_jsx(Button, {
-        __next40pxDefaultSize: true,
-        accessibleWhenDisabled: true,
-        variant: "primary",
-        text: _x('Comment', 'Add comment button'),
-        disabled: 0 === sanitizeCommentString(inputComment).length,
-        onClick: () => {
-          onSubmit(inputComment);
-          setInputComment('');
-        }
-      })]
+      children: /*#__PURE__*/_jsx(CommentAuthorInfo, {})
+    }), /*#__PURE__*/_jsx(CommentForm, {
+      onSubmit: inputComment => {
+        onSubmit(inputComment);
+      },
+      onCancel: () => {
+        setShowCommentBoard(false);
+      },
+      submitButtonText: _x('Comment', 'Add comment button')
     })]
   });
 }

package/build-module/components/collab-sidebar/add-comment.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","_x","useSelect","useState","useEffect","__experimentalHStack","HStack","__experimentalVStack","VStack","Button","TextControl","store","blockEditorStore","coreStore","sanitizeCommentString","jsx","_jsx","jsxs","_jsxs","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","_currentUser$name","inputComment","setInputComment","defaultAvatar","clientId","blockCommentId","currentUser","select","getSettings","getSelectedBlock","__experimentalDiscussionSettings","selectedBlock","userData","getCurrentUser","avatarURL","attributes","userAvatar","avatar_urls","handleCancel","undefined","spacing","className","children","alignment","src","alt","width","height","name","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","placeholder","variant","text","onClick","accessibleWhenDisabled","disabled","length"],"sources":["@wordpress/editor/src/components/collab-sidebar/add-comment.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useEffect } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tTextControl,\n} from '@wordpress/components';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString } from './utils';\n\n/**\n * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.\n *\n * @param {Object}   props                     - The component props.\n * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.\n * @param {boolean}  props.showCommentBoard    - The function to edit the comment.\n * @param {Function} props.setShowCommentBoard - The function to delete the comment.\n * @return {JSX.Element} The rendered comment input UI.\n */\nexport function AddComment( {\n\tonSubmit,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n} ) {\n\t// State to manage the comment thread.\n\tconst [ inputComment, setInputComment ] = useState( '' );\n\n\tconst { defaultAvatar, clientId, blockCommentId, currentUser } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSettings, getSelectedBlock } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\t\tconst selectedBlock = getSelectedBlock();\n\t\t\tconst userData = select( coreStore ).getCurrentUser();\n\t\t\treturn {\n\t\t\t\tdefaultAvatar: __experimentalDiscussionSettings?.avatarURL,\n\t\t\t\tclientId: selectedBlock?.clientId,\n\t\t\t\tblockCommentId: selectedBlock?.attributes?.blockCommentId,\n\t\t\t\tcurrentUser: userData,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst userAvatar =\n\t\tcurrentUser && currentUser.avatar_urls && currentUser.avatar_urls[ 48 ]\n\t\t\t? currentUser.avatar_urls[ 48 ]\n\t\t\t: defaultAvatar;\n\n\tuseEffect( () => {\n\t\tsetInputComment( '' );\n\t}, [ clientId ] );\n\n\tconst handleCancel = () => {\n\t\tsetShowCommentBoard( false );\n\t\tsetInputComment( '' );\n\t};\n\n\tif ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing=\"3\"\n\t\t\tclassName=\"editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread\"\n\t\t>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\">\n\t\t\t\t<img\n\t\t\t\t\tsrc={ userAvatar }\n\t\t\t\t\t// translators: alt text for user avatar image\n\t\t\t\t\talt={ __( 'User Avatar' ) }\n\t\t\t\t\tclassName=\"editor-collab-sidebar-panel__user-avatar\"\n\t\t\t\t\twidth={ 32 }\n\t\t\t\t\theight={ 32 }\n\t\t\t\t/>\n\t\t\t\t<span className=\"editor-collab-sidebar-panel__user-name\">\n\t\t\t\t\t{ currentUser?.name ?? '' }\n\t\t\t\t</span>\n\t\t\t</HStack>\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tvalue={ inputComment }\n\t\t\t\tonChange={ setInputComment }\n\t\t\t\tplaceholder={ _x( 'Comment', 'noun' ) }\n\t\t\t/>\n\t\t\t<HStack alignment=\"right\" spacing=\"3\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ttext={ _x( 'Cancel', 'Cancel comment button' ) }\n\t\t\t\t\tonClick={ handleCancel }\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\ttext={ _x( 'Comment', 'Add comment button' ) }\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\t0 === sanitizeCommentString( inputComment ).length\n\t\t\t\t\t}\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonSubmit( inputComment );\n\t\t\t\t\t\tsetInputComment( '' );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;AACxC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,QAAQ,EAAEC,SAAS,QAAQ,oBAAoB;AACxD,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,WAAW,QACL,uBAAuB;AAC9B,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;AACnE,SAASD,KAAK,IAAIE,SAAS,QAAQ,sBAAsB;;AAEzD;AACA;AACA;AACA,SAASC,qBAAqB,QAAQ,SAAS;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASA,OAAO,SAASC,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EAAA,IAAAC,iBAAA;EACH;EACA,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGtB,QAAQ,CAAE,EAAG,CAAC;EAExD,MAAM;IAAEuB,aAAa;IAAEC,QAAQ;IAAEC,cAAc;IAAEC;EAAY,CAAC,GAAG3B,SAAS,CACvE4B,MAAM,IAAM;IACb,MAAM;MAAEC,WAAW;MAAEC;IAAiB,CAAC,GACtCF,MAAM,CAAElB,gBAAiB,CAAC;IAC3B,MAAM;MAAEqB;IAAiC,CAAC,GAAGF,WAAW,CAAC,CAAC;IAC1D,MAAMG,aAAa,GAAGF,gBAAgB,CAAC,CAAC;IACxC,MAAMG,QAAQ,GAAGL,MAAM,CAAEjB,SAAU,CAAC,CAACuB,cAAc,CAAC,CAAC;IACrD,OAAO;MACNV,aAAa,EAAEO,gCAAgC,EAAEI,SAAS;MAC1DV,QAAQ,EAAEO,aAAa,EAAEP,QAAQ;MACjCC,cAAc,EAAEM,aAAa,EAAEI,UAAU,EAAEV,cAAc;MACzDC,WAAW,EAAEM;IACd,CAAC;EACF,CAAC,EACD,EACD,CAAC;EAED,MAAMI,UAAU,GACfV,WAAW,IAAIA,WAAW,CAACW,WAAW,IAAIX,WAAW,CAACW,WAAW,CAAE,EAAE,CAAE,GACpEX,WAAW,CAACW,WAAW,CAAE,EAAE,CAAE,GAC7Bd,aAAa;EAEjBtB,SAAS,CAAE,MAAM;IAChBqB,eAAe,CAAE,EAAG,CAAC;EACtB,CAAC,EAAE,CAAEE,QAAQ,CAAG,CAAC;EAEjB,MAAMc,YAAY,GAAGA,CAAA,KAAM;IAC1BnB,mBAAmB,CAAE,KAAM,CAAC;IAC5BG,eAAe,CAAE,EAAG,CAAC;EACtB,CAAC;EAED,IAAK,CAAEJ,gBAAgB,IAAI,CAAEM,QAAQ,IAAIe,SAAS,KAAKd,cAAc,EAAG;IACvE,OAAO,IAAI;EACZ;EAEA,oBACCV,KAAA,CAACV,MAAM;IACNmC,OAAO,EAAC,GAAG;IACXC,SAAS,EAAC,gFAAgF;IAAAC,QAAA,gBAE1F3B,KAAA,CAACZ,MAAM;MAACwC,SAAS,EAAC,MAAM;MAACH,OAAO,EAAC,GAAG;MAAAE,QAAA,gBACnC7B,IAAA;QACC+B,GAAG,EAAGR;QACN;QAAA;QACAS,GAAG,EAAGhD,EAAE,CAAE,aAAc,CAAG;QAC3B4C,SAAS,EAAC,0CAA0C;QACpDK,KAAK,EAAG,EAAI;QACZC,MAAM,EAAG;MAAI,CACb,CAAC,eACFlC,IAAA;QAAM4B,SAAS,EAAC,wCAAwC;QAAAC,QAAA,GAAAtB,iBAAA,GACrDM,WAAW,EAAEsB,IAAI,cAAA5B,iBAAA,cAAAA,iBAAA,GAAI;MAAE,CACpB,CAAC;IAAA,CACA,CAAC,eACTP,IAAA,CAACN,WAAW;MACX0C,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAG9B,YAAc;MACtB+B,QAAQ,EAAG9B,eAAiB;MAC5B+B,WAAW,EAAGvD,EAAE,CAAE,SAAS,EAAE,MAAO;IAAG,CACvC,CAAC,eACFiB,KAAA,CAACZ,MAAM;MAACwC,SAAS,EAAC,OAAO;MAACH,OAAO,EAAC,GAAG;MAAAE,QAAA,gBACpC7B,IAAA,CAACP,MAAM;QACN2C,qBAAqB;QACrBK,OAAO,EAAC,UAAU;QAClBC,IAAI,EAAGzD,EAAE,CAAE,QAAQ,EAAE,uBAAwB,CAAG;QAChD0D,OAAO,EAAGlB;MAAc,CACxB,CAAC,eACFzB,IAAA,CAACP,MAAM;QACN2C,qBAAqB;QACrBQ,sBAAsB;QACtBH,OAAO,EAAC,SAAS;QACjBC,IAAI,EAAGzD,EAAE,CAAE,SAAS,EAAE,oBAAqB,CAAG;QAC9C4D,QAAQ,EACP,CAAC,KAAK/C,qBAAqB,CAAEU,YAAa,CAAC,CAACsC,MAC5C;QACDH,OAAO,EAAGA,CAAA,KAAM;UACfvC,QAAQ,CAAEI,YAAa,CAAC;UACxBC,eAAe,CAAE,EAAG,CAAC;QACtB;MAAG,CACH,CAAC;IAAA,CACK,CAAC;EAAA,CACF,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["_x","useSelect","__experimentalHStack","HStack","__experimentalVStack","VStack","store","blockEditorStore","CommentAuthorInfo","CommentForm","jsx","_jsx","jsxs","_jsxs","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","clientId","blockCommentId","select","getSelectedBlock","selectedBlock","attributes","undefined","spacing","className","children","alignment","inputComment","onCancel","submitButtonText"],"sources":["@wordpress/editor/src/components/collab-sidebar/add-comment.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\n\n/**\n * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.\n *\n * @param {Object}   props                     - The component props.\n * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.\n * @param {boolean}  props.showCommentBoard    - The function to edit the comment.\n * @param {Function} props.setShowCommentBoard - The function to delete the comment.\n * @return {React.ReactNode} The rendered comment input UI.\n */\nexport function AddComment( {\n\tonSubmit,\n\tshowCommentBoard,\n\tsetShowCommentBoard,\n} ) {\n\tconst { clientId, blockCommentId } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlock } = select( blockEditorStore );\n\t\tconst selectedBlock = getSelectedBlock();\n\t\treturn {\n\t\t\tclientId: selectedBlock?.clientId,\n\t\t\tblockCommentId: selectedBlock?.attributes?.blockCommentId,\n\t\t};\n\t} );\n\n\tif ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tspacing=\"3\"\n\t\t\tclassName=\"editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread\"\n\t\t>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\">\n\t\t\t\t<CommentAuthorInfo />\n\t\t\t</HStack>\n\t\t\t<CommentForm\n\t\t\t\tonSubmit={ ( inputComment ) => {\n\t\t\t\t\tonSubmit( inputComment );\n\t\t\t\t} }\n\t\t\t\tonCancel={ () => {\n\t\t\t\t\tsetShowCommentBoard( false );\n\t\t\t\t} }\n\t\t\t\tsubmitButtonText={ _x( 'Comment', 'Add comment button' ) }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;AAC9B,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,yBAAyB;;AAEnE;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,WAAW,MAAM,gBAAgB;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AASA,OAAO,SAASC,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC,QAAQ;IAAEC;EAAe,CAAC,GAAGlB,SAAS,CAAImB,MAAM,IAAM;IAC7D,MAAM;MAAEC;IAAiB,CAAC,GAAGD,MAAM,CAAEb,gBAAiB,CAAC;IACvD,MAAMe,aAAa,GAAGD,gBAAgB,CAAC,CAAC;IACxC,OAAO;MACNH,QAAQ,EAAEI,aAAa,EAAEJ,QAAQ;MACjCC,cAAc,EAAEG,aAAa,EAAEC,UAAU,EAAEJ;IAC5C,CAAC;EACF,CAAE,CAAC;EAEH,IAAK,CAAEH,gBAAgB,IAAI,CAAEE,QAAQ,IAAIM,SAAS,KAAKL,cAAc,EAAG;IACvE,OAAO,IAAI;EACZ;EAEA,oBACCN,KAAA,CAACR,MAAM;IACNoB,OAAO,EAAC,GAAG;IACXC,SAAS,EAAC,gFAAgF;IAAAC,QAAA,gBAE1FhB,IAAA,CAACR,MAAM;MAACyB,SAAS,EAAC,MAAM;MAACH,OAAO,EAAC,GAAG;MAAAE,QAAA,eACnChB,IAAA,CAACH,iBAAiB,IAAE;IAAC,CACd,CAAC,eACTG,IAAA,CAACF,WAAW;MACXM,QAAQ,EAAKc,YAAY,IAAM;QAC9Bd,QAAQ,CAAEc,YAAa,CAAC;MACzB,CAAG;MACHC,QAAQ,EAAGA,CAAA,KAAM;QAChBb,mBAAmB,CAAE,KAAM,CAAC;MAC7B,CAAG;MACHc,gBAAgB,EAAG/B,EAAE,CAAE,SAAS,EAAE,oBAAqB;IAAG,CAC1D,CAAC;EAAA,CACK,CAAC;AAEX","ignoreList":[]}

package/build-module/components/collab-sidebar/comment-author-info.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Render author information for a comment.
+ *
+ * @param {Object} props        - Component properties.
+ * @param {string} props.avatar - URL of the author's avatar.
+ * @param {string} props.name   - Name of the author.
+ * @param {string} props.date   - Date of the comment.
+ *
+ * @return {React.ReactNode} The JSX element representing the author's information.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function CommentAuthorInfo({
+  avatar,
+  name,
+  date
+}) {
+  const dateSettings = getDateSettings();
+  const [dateTimeFormat = dateSettings.formats.time] = useEntityProp('root', 'site', 'time_format');
+  const {
+    currentUserAvatar,
+    currentUserName
+  } = useSelect(select => {
+    var _userData$avatar_urls;
+    const userData = select(coreStore).getCurrentUser();
+    const {
+      getSettings
+    } = select(blockEditorStore);
+    const {
+      __experimentalDiscussionSettings
+    } = getSettings();
+    const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+    return {
+      currentUserAvatar: (_userData$avatar_urls = userData?.avatar_urls[48]) !== null && _userData$avatar_urls !== void 0 ? _userData$avatar_urls : defaultAvatar,
+      currentUserName: userData?.name
+    };
+  }, []);
+  const currentDate = new Date();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("img", {
+      src: avatar !== null && avatar !== void 0 ? avatar : currentUserAvatar,
+      className: "editor-collab-sidebar-panel__user-avatar"
+      // translators: alt text for user avatar image
+      ,
+      alt: __('User avatar'),
+      width: 32,
+      height: 32
+    }), /*#__PURE__*/_jsxs(VStack, {
+      spacing: "0",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "editor-collab-sidebar-panel__user-name",
+        children: name !== null && name !== void 0 ? name : currentUserName
+      }), /*#__PURE__*/_jsx("time", {
+        dateTime: dateI18n('c', date !== null && date !== void 0 ? date : currentDate),
+        className: "editor-collab-sidebar-panel__user-time",
+        children: dateI18n(dateTimeFormat, date !== null && date !== void 0 ? date : currentDate)
+      })]
+    })]
+  });
+}
+export default CommentAuthorInfo;
+//# sourceMappingURL=comment-author-info.js.map

package/build-module/components/collab-sidebar/comment-author-info.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__experimentalVStack","VStack","__","dateI18n","getSettings","getDateSettings","useEntityProp","store","coreStore","useSelect","blockEditorStore","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CommentAuthorInfo","avatar","name","date","dateSettings","dateTimeFormat","formats","time","currentUserAvatar","currentUserName","select","_userData$avatar_urls","userData","getCurrentUser","__experimentalDiscussionSettings","defaultAvatar","avatarURL","avatar_urls","currentDate","Date","children","src","className","alt","width","height","spacing","dateTime"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-author-info.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalVStack as VStack } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { dateI18n, getSettings as getDateSettings } from '@wordpress/date';\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\n\n/**\n * Render author information for a comment.\n *\n * @param {Object} props        - Component properties.\n * @param {string} props.avatar - URL of the author's avatar.\n * @param {string} props.name   - Name of the author.\n * @param {string} props.date   - Date of the comment.\n *\n * @return {React.ReactNode} The JSX element representing the author's information.\n */\nfunction CommentAuthorInfo( { avatar, name, date } ) {\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 { currentUserAvatar, currentUserName } = useSelect( ( select ) => {\n\t\tconst userData = select( coreStore ).getCurrentUser();\n\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\tconst defaultAvatar = __experimentalDiscussionSettings?.avatarURL;\n\t\treturn {\n\t\t\tcurrentUserAvatar: userData?.avatar_urls[ 48 ] ?? defaultAvatar,\n\t\t\tcurrentUserName: userData?.name,\n\t\t};\n\t}, [] );\n\n\tconst currentDate = new Date();\n\n\treturn (\n\t\t<>\n\t\t\t<img\n\t\t\t\tsrc={ avatar ?? currentUserAvatar }\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{ name ?? currentUserName }\n\t\t\t\t</span>\n\t\t\t\t<time\n\t\t\t\t\tdateTime={ dateI18n( 'c', date ?? currentDate ) }\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, date ?? currentDate ) }\n\t\t\t\t</time>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default CommentAuthorInfo;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,oBAAoB,IAAIC,MAAM,QAAQ,uBAAuB;AACtE,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,QAAQ,EAAEC,WAAW,IAAIC,eAAe,QAAQ,iBAAiB;AAC1E,SAASC,aAAa,EAAEC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AACxE,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASF,KAAK,IAAIG,gBAAgB,QAAQ,yBAAyB;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAUA,SAASC,iBAAiBA,CAAE;EAAEC,MAAM;EAAEC,IAAI;EAAEC;AAAK,CAAC,EAAG;EACpD,MAAMC,YAAY,GAAGhB,eAAe,CAAC,CAAC;EACtC,MAAM,CAAEiB,cAAc,GAAGD,YAAY,CAACE,OAAO,CAACC,IAAI,CAAE,GAAGlB,aAAa,CACnE,MAAM,EACN,MAAM,EACN,aACD,CAAC;EAED,MAAM;IAAEmB,iBAAiB;IAAEC;EAAgB,CAAC,GAAGjB,SAAS,CAAIkB,MAAM,IAAM;IAAA,IAAAC,qBAAA;IACvE,MAAMC,QAAQ,GAAGF,MAAM,CAAEnB,SAAU,CAAC,CAACsB,cAAc,CAAC,CAAC;IAErD,MAAM;MAAE1B;IAAY,CAAC,GAAGuB,MAAM,CAAEjB,gBAAiB,CAAC;IAClD,MAAM;MAAEqB;IAAiC,CAAC,GAAG3B,WAAW,CAAC,CAAC;IAC1D,MAAM4B,aAAa,GAAGD,gCAAgC,EAAEE,SAAS;IACjE,OAAO;MACNR,iBAAiB,GAAAG,qBAAA,GAAEC,QAAQ,EAAEK,WAAW,CAAE,EAAE,CAAE,cAAAN,qBAAA,cAAAA,qBAAA,GAAII,aAAa;MAC/DN,eAAe,EAAEG,QAAQ,EAAEV;IAC5B,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMgB,WAAW,GAAG,IAAIC,IAAI,CAAC,CAAC;EAE9B,oBACCtB,KAAA,CAAAE,SAAA;IAAAqB,QAAA,gBACCzB,IAAA;MACC0B,GAAG,EAAGpB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIO,iBAAmB;MACnCc,SAAS,EAAC;MACV;MAAA;MACAC,GAAG,EAAGtC,EAAE,CAAE,aAAc,CAAG;MAC3BuC,KAAK,EAAG,EAAI;MACZC,MAAM,EAAG;IAAI,CACb,CAAC,eACF5B,KAAA,CAACb,MAAM;MAAC0C,OAAO,EAAC,GAAG;MAAAN,QAAA,gBAClBzB,IAAA;QAAM2B,SAAS,EAAC,wCAAwC;QAAAF,QAAA,EACrDlB,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIO;MAAe,CACpB,CAAC,eACPd,IAAA;QACCgC,QAAQ,EAAGzC,QAAQ,CAAE,GAAG,EAAEiB,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIe,WAAY,CAAG;QACjDI,SAAS,EAAC,wCAAwC;QAAAF,QAAA,EAEhDlC,QAAQ,CAAEmB,cAAc,EAAEF,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIe,WAAY;MAAC,CAC5C,CAAC;IAAA,CACA,CAAC;EAAA,CACR,CAAC;AAEL;AAEA,eAAelB,iBAAiB","ignoreList":[]}

package/build-module/components/collab-sidebar/comment-button-toolbar.js

@@ -12,12 +12,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../lock-unlock';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
-  __unstableCommentIconToolbarFill
+  CommentIconToolbarSlotFill
 } = unlock(blockEditorPrivateApis);
 const AddCommentToolbarButton = ({
   onClick
 }) => {
-  return /*#__PURE__*/_jsx(__unstableCommentIconToolbarFill, {
+  return /*#__PURE__*/_jsx(CommentIconToolbarSlotFill.Fill, {
     children: /*#__PURE__*/_jsx(ToolbarButton, {
       accessibleWhenDisabled: true,
       icon: commentIcon,

package/build-module/components/collab-sidebar/comment-button-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["ToolbarButton","_x","comment","commentIcon","privateApis","blockEditorPrivateApis","unlock","jsx","_jsx","__unstableCommentIconToolbarFill","AddCommentToolbarButton","onClick","children","accessibleWhenDisabled","icon","label"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { __unstableCommentIconToolbarFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentToolbarButton = ( { onClick } ) => {\n\treturn (\n\t\t<__unstableCommentIconToolbarFill>\n\t\t\t<ToolbarButton\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tlabel={ _x( 'Comment', 'View comment' ) }\n\t\t\t\tonClick={ onClick }\n\t\t\t/>\n\t\t</__unstableCommentIconToolbarFill>\n\t);\n};\n\nexport default AddCommentToolbarButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AACrD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,IAAIC,WAAW,QAAQ,kBAAkB;AACzD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAM;EAAEC;AAAiC,CAAC,GAAGH,MAAM,CAAED,sBAAuB,CAAC;AAE7E,MAAMK,uBAAuB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAClD,oBACCH,IAAA,CAACC,gCAAgC;IAAAG,QAAA,eAChCJ,IAAA,CAACR,aAAa;MACba,sBAAsB;MACtBC,IAAI,EAAGX,WAAa;MACpBY,KAAK,EAAGd,EAAE,CAAE,SAAS,EAAE,cAAe,CAAG;MACzCU,OAAO,EAAGA;IAAS,CACnB;EAAC,CAC+B,CAAC;AAErC,CAAC;AAED,eAAeD,uBAAuB","ignoreList":[]}
+{"version":3,"names":["ToolbarButton","_x","comment","commentIcon","privateApis","blockEditorPrivateApis","unlock","jsx","_jsx","CommentIconToolbarSlotFill","AddCommentToolbarButton","onClick","Fill","children","accessibleWhenDisabled","icon","label"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentToolbarButton = ( { onClick } ) => {\n\treturn (\n\t\t<CommentIconToolbarSlotFill.Fill>\n\t\t\t<ToolbarButton\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tlabel={ _x( 'Comment', 'View comment' ) }\n\t\t\t\tonClick={ onClick }\n\t\t\t/>\n\t\t</CommentIconToolbarSlotFill.Fill>\n\t);\n};\n\nexport default AddCommentToolbarButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,uBAAuB;AACrD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,IAAIC,WAAW,QAAQ,kBAAkB;AACzD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAM;EAAEC;AAA2B,CAAC,GAAGH,MAAM,CAAED,sBAAuB,CAAC;AAEvE,MAAMK,uBAAuB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAClD,oBACCH,IAAA,CAACC,0BAA0B,CAACG,IAAI;IAAAC,QAAA,eAC/BL,IAAA,CAACR,aAAa;MACbc,sBAAsB;MACtBC,IAAI,EAAGZ,WAAa;MACpBa,KAAK,EAAGf,EAAE,CAAE,SAAS,EAAE,cAAe,CAAG;MACzCU,OAAO,EAAGA;IAAS,CACnB;EAAC,CAC8B,CAAC;AAEpC,CAAC;AAED,eAAeD,uBAAuB","ignoreList":[]}

package/build-module/components/collab-sidebar/comment-button.js

@@ -12,12 +12,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../lock-unlock';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
-  __unstableCommentIconFill
+  CommentIconSlotFill
 } = unlock(blockEditorPrivateApis);
 const AddCommentButton = ({
   onClick
 }) => {
-  return /*#__PURE__*/_jsx(__unstableCommentIconFill, {
+  return /*#__PURE__*/_jsx(CommentIconSlotFill.Fill, {
     children: /*#__PURE__*/_jsx(MenuItem, {
       icon: commentIcon,
       onClick: onClick,

package/build-module/components/collab-sidebar/comment-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["MenuItem","_x","comment","commentIcon","privateApis","blockEditorPrivateApis","unlock","jsx","_jsx","__unstableCommentIconFill","AddCommentButton","onClick","children","icon"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\n\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { __unstableCommentIconFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentButton = ( { onClick } ) => {\n\treturn (\n\t\t<__unstableCommentIconFill>\n\t\t\t<MenuItem\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tonClick={ onClick }\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t>\n\t\t\t\t{ _x( 'Comment', 'Add comment button' ) }\n\t\t\t</MenuItem>\n\t\t</__unstableCommentIconFill>\n\t);\n};\n\nexport default AddCommentButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,IAAIC,WAAW,QAAQ,kBAAkB;AAEzD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAM;EAAEC;AAA0B,CAAC,GAAGH,MAAM,CAAED,sBAAuB,CAAC;AAEtE,MAAMK,gBAAgB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAC3C,oBACCH,IAAA,CAACC,yBAAyB;IAAAG,QAAA,eACzBJ,IAAA,CAACR,QAAQ;MACRa,IAAI,EAAGV,WAAa;MACpBQ,OAAO,EAAGA,OAAS;MACnB,iBAAc,QAAQ;MAAAC,QAAA,EAEpBX,EAAE,CAAE,SAAS,EAAE,oBAAqB;IAAC,CAC9B;EAAC,CACe,CAAC;AAE9B,CAAC;AAED,eAAeS,gBAAgB","ignoreList":[]}
+{"version":3,"names":["MenuItem","_x","comment","commentIcon","privateApis","blockEditorPrivateApis","unlock","jsx","_jsx","CommentIconSlotFill","AddCommentButton","onClick","Fill","children","icon"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MenuItem } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\nimport { comment as commentIcon } from '@wordpress/icons';\n\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { CommentIconSlotFill } = unlock( blockEditorPrivateApis );\n\nconst AddCommentButton = ( { onClick } ) => {\n\treturn (\n\t\t<CommentIconSlotFill.Fill>\n\t\t\t<MenuItem\n\t\t\t\ticon={ commentIcon }\n\t\t\t\tonClick={ onClick }\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t>\n\t\t\t\t{ _x( 'Comment', 'Add comment button' ) }\n\t\t\t</MenuItem>\n\t\t</CommentIconSlotFill.Fill>\n\t);\n};\n\nexport default AddCommentButton;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,OAAO,IAAIC,WAAW,QAAQ,kBAAkB;AAEzD,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,MAAM,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3C,MAAM;EAAEC;AAAoB,CAAC,GAAGH,MAAM,CAAED,sBAAuB,CAAC;AAEhE,MAAMK,gBAAgB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAC3C,oBACCH,IAAA,CAACC,mBAAmB,CAACG,IAAI;IAAAC,QAAA,eACxBL,IAAA,CAACR,QAAQ;MACRc,IAAI,EAAGX,WAAa;MACpBQ,OAAO,EAAGA,OAAS;MACnB,iBAAc,QAAQ;MAAAE,QAAA,EAEpBZ,EAAE,CAAE,SAAS,EAAE,oBAAqB;IAAC,CAC9B;EAAC,CACc,CAAC;AAE7B,CAAC;AAED,eAAeS,gBAAgB","ignoreList":[]}

package/build-module/components/collab-sidebar/comment-form.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __experimentalHStack as HStack, Button, TextareaControl } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { sanitizeCommentString } from './utils';
+
+/**
+ * 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.
+ * @param {string}   props.submitButtonText - The text to display on the submit button.
+ * @return {React.ReactNode} The CommentForm component.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function CommentForm({
+  onSubmit,
+  onCancel,
+  thread,
+  submitButtonText
+}) {
+  var _thread$content$raw;
+  const [inputComment, setInputComment] = useState((_thread$content$raw = thread?.content?.raw) !== null && _thread$content$raw !== void 0 ? _thread$content$raw : '');
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextareaControl, {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      value: inputComment !== null && inputComment !== void 0 ? inputComment : '',
+      onChange: setInputComment
+    }), /*#__PURE__*/_jsxs(HStack, {
+      alignment: "left",
+      spacing: "3",
+      justify: "flex-start",
+      children: [/*#__PURE__*/_jsx(Button, {
+        __next40pxDefaultSize: true,
+        accessibleWhenDisabled: true,
+        variant: "primary",
+        onClick: () => onSubmit(inputComment),
+        disabled: 0 === sanitizeCommentString(inputComment).length,
+        text: submitButtonText
+      }), /*#__PURE__*/_jsx(Button, {
+        __next40pxDefaultSize: true,
+        variant: "tertiary",
+        onClick: onCancel,
+        text: _x('Cancel', 'Cancel comment button')
+      })]
+    })]
+  });
+}
+export default CommentForm;
+//# sourceMappingURL=comment-form.js.map

package/build-module/components/collab-sidebar/comment-form.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","__experimentalHStack","HStack","Button","TextareaControl","_x","sanitizeCommentString","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","CommentForm","onSubmit","onCancel","thread","submitButtonText","_thread$content$raw","inputComment","setInputComment","content","raw","children","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","alignment","spacing","justify","accessibleWhenDisabled","variant","onClick","disabled","length","text"],"sources":["@wordpress/editor/src/components/collab-sidebar/comment-form.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\tButton,\n\tTextareaControl,\n} from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString } from './utils';\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 * @param {string}   props.submitButtonText - The text to display on the submit button.\n * @return {React.ReactNode} The CommentForm component.\n */\nfunction CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {\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__next40pxDefaultSize\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<HStack alignment=\"left\" spacing=\"3\" justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\tonClick={ () => onSubmit( inputComment ) }\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\t0 === sanitizeCommentString( inputComment ).length\n\t\t\t\t\t}\n\t\t\t\t\ttext={ submitButtonText }\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t\ttext={ _x( 'Cancel', 'Cancel comment button' ) }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</>\n\t);\n}\n\nexport default CommentForm;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SACCC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,eAAe,QACT,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,qBAAqB,QAAQ,SAAS;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AATA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAUA,SAASC,WAAWA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAiB,CAAC,EAAG;EAAA,IAAAC,mBAAA;EACxE,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGpB,QAAQ,EAAAkB,mBAAA,GACjDF,MAAM,EAAEK,OAAO,EAAEC,GAAG,cAAAJ,mBAAA,cAAAA,mBAAA,GAAI,EACzB,CAAC;EAED,oBACCR,KAAA,CAAAE,SAAA;IAAAW,QAAA,gBACCf,IAAA,CAACJ,eAAe;MACfoB,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAGP,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAI;MAC5BQ,QAAQ,EAAGP;IAAiB,CAC5B,CAAC,eACFV,KAAA,CAACR,MAAM;MAAC0B,SAAS,EAAC,MAAM;MAACC,OAAO,EAAC,GAAG;MAACC,OAAO,EAAC,YAAY;MAAAP,QAAA,gBACxDf,IAAA,CAACL,MAAM;QACNqB,qBAAqB;QACrBO,sBAAsB;QACtBC,OAAO,EAAC,SAAS;QACjBC,OAAO,EAAGA,CAAA,KAAMnB,QAAQ,CAAEK,YAAa,CAAG;QAC1Ce,QAAQ,EACP,CAAC,KAAK5B,qBAAqB,CAAEa,YAAa,CAAC,CAACgB,MAC5C;QACDC,IAAI,EAAGnB;MAAkB,CACzB,CAAC,eACFT,IAAA,CAACL,MAAM;QACNqB,qBAAqB;QACrBQ,OAAO,EAAC,UAAU;QAClBC,OAAO,EAAGlB,QAAU;QACpBqB,IAAI,EAAG/B,EAAE,CAAE,QAAQ,EAAE,uBAAwB;MAAG,CAChD,CAAC;IAAA,CACK,CAAC;EAAA,CACR,CAAC;AAEL;AAEA,eAAeQ,WAAW","ignoreList":[]}

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

@@ -7,18 +7,17 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useState, RawHTML } from '@wordpress/element';
-import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalConfirmDialog as ConfirmDialog, Button, DropdownMenu, TextareaControl, Tooltip } from '@wordpress/components';
-import { dateI18n, format, getSettings as getDateSettings } from '@wordpress/date';
+import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalConfirmDialog as ConfirmDialog, Button, DropdownMenu, Tooltip } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString } from './utils';
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
 
 /**
  * Renders the Comments component.
@@ -29,7 +28,7 @@ import { sanitizeCommentString } from './utils';
  * @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.
+ * @return {React.ReactNode} The rendered Comments component.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function Comments({
@@ -106,7 +105,8 @@ export function Comments({
               setActionState(false);
             },
             onCancel: () => setActionState(false),
-            thread: thread
+            thread: thread,
+            submitButtonText: _x('Update', 'verb')
           }), (!actionState || 'edit' !== actionState?.action) && /*#__PURE__*/_jsx(RawHTML, {
             children: thread?.content?.raw
           })]
@@ -151,22 +151,6 @@ export function Comments({
       spacing: "3",
       children: [/*#__PURE__*/_jsx(CommentBoard, {
         thread: thread
-      }), 'reply' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsx(HStack, {
-        alignment: "left",
-        spacing: "3",
-        justify: "flex-start",
-        className: "editor-collab-sidebar-panel__user-comment",
-        children: /*#__PURE__*/_jsx(VStack, {
-          spacing: "3",
-          className: "editor-collab-sidebar-panel__comment-field",
-          children: /*#__PURE__*/_jsx(CommentForm, {
-            onSubmit: inputComment => {
-              onAddReply(inputComment, thread.id);
-              setActionState(false);
-            },
-            onCancel: () => setActionState(false)
-          })
-        })
       }), 0 < thread?.reply?.length && thread.reply.map(reply => /*#__PURE__*/_jsx(VStack, {
         className: "editor-collab-sidebar-panel__child-thread",
         id: reply.id,
@@ -175,54 +159,28 @@ export function Comments({
           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] = useState((_thread$content$raw = thread?.content?.raw) !== null && _thread$content$raw !== void 0 ? _thread$content$raw : '');
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TextareaControl, {
-      __nextHasNoMarginBottom: true,
-      value: inputComment !== null && inputComment !== void 0 ? inputComment : '',
-      onChange: setInputComment
-    }), /*#__PURE__*/_jsx(VStack, {
-      alignment: "left",
-      spacing: "3",
-      justify: "flex-start",
-      children: /*#__PURE__*/_jsxs(HStack, {
-        alignment: "left",
-        spacing: "3",
-        justify: "flex-start",
-        children: [/*#__PURE__*/_jsx(Button, {
-          __next40pxDefaultSize: true,
-          accessibleWhenDisabled: true,
-          variant: "primary",
-          onClick: () => onSubmit(inputComment),
-          disabled: 0 === sanitizeCommentString(inputComment).length,
-          children: thread ? _x('Update', 'verb') : _x('Reply', 'Add reply comment')
-        }), /*#__PURE__*/_jsx(Button, {
-          __next40pxDefaultSize: true,
-          onClick: onCancel,
-          children: _x('Cancel', 'Cancel comment edit')
+      }, reply.id)), 'reply' === actionState?.action && thread.id === actionState?.id && /*#__PURE__*/_jsxs(VStack, {
+        className: "editor-collab-sidebar-panel__child-thread",
+        spacing: "2",
+        children: [/*#__PURE__*/_jsx(HStack, {
+          alignment: "left",
+          spacing: "3",
+          justify: "flex-start",
+          children: /*#__PURE__*/_jsx(CommentAuthorInfo, {})
+        }), /*#__PURE__*/_jsx(VStack, {
+          spacing: "3",
+          className: "editor-collab-sidebar-panel__comment-field",
+          children: /*#__PURE__*/_jsx(CommentForm, {
+            onSubmit: inputComment => {
+              onAddReply(inputComment, thread.id);
+              setActionState(false);
+            },
+            onCancel: () => setActionState(false),
+            submitButtonText: _x('Reply', 'Add reply comment')
+          })
         })]
-      })
-    })]
+      })]
+    }, thread.id))]
   });
 }
 
@@ -236,7 +194,7 @@ function CommentForm({
  * @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.
+ * @return {React.ReactNode} The rendered comment header.
  */
 function CommentHeader({
   thread,
@@ -246,8 +204,6 @@ function CommentHeader({
   onReply,
   status
 }) {
-  const dateSettings = getDateSettings();
-  const [dateTimeFormat = dateSettings.formats.time] = useEntityProp('root', 'site', 'time_format');
   const actions = [{
     title: _x('Edit', 'Edit comment'),
     onClick: onEdit
@@ -263,31 +219,17 @@ function CommentHeader({
     alignment: "left",
     spacing: "3",
     justify: "flex-start",
-    children: [/*#__PURE__*/_jsx("img", {
-      src: thread?.author_avatar_urls?.[48],
-      className: "editor-collab-sidebar-panel__user-avatar"
-      // translators: alt text for user avatar image
-      ,
-      alt: __('User avatar'),
-      width: 32,
-      height: 32
-    }), /*#__PURE__*/_jsxs(VStack, {
-      spacing: "0",
-      children: [/*#__PURE__*/_jsx("span", {
-        className: "editor-collab-sidebar-panel__user-name",
-        children: thread.author_name
-      }), /*#__PURE__*/_jsx("time", {
-        dateTime: format('h:i A', thread.date),
-        className: "editor-collab-sidebar-panel__user-time",
-        children: dateI18n(dateTimeFormat, thread.date)
-      })]
+    children: [/*#__PURE__*/_jsx(CommentAuthorInfo, {
+      avatar: thread?.author_avatar_urls?.[48],
+      name: thread?.author_name,
+      date: thread?.date
     }), /*#__PURE__*/_jsxs("span", {
       className: "editor-collab-sidebar-panel__comment-status",
       children: [status !== 'approved' && /*#__PURE__*/_jsxs(HStack, {
         alignment: "right",
         justify: "flex-end",
         spacing: "0",
-        children: [0 === thread.parent && onResolve && /*#__PURE__*/_jsx(Button, {
+        children: [0 === thread?.parent && onResolve && /*#__PURE__*/_jsx(Button, {
           label: _x('Resolve', 'Mark comment as resolved'),
           __next40pxDefaultSize: true,
           icon: published,