@wordpress/editor 14.10.0 → 14.11.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 14.11.0 (2024-10-30)
+
+### Bug Fixes
+
+-   `Post Featured Image`: Fix `Set featured image` button's `box-shadow` transition to prevent border from flashing when focused.
+
 ## 14.10.0 (2024-10-16)
 
 ## 14.9.0 (2024-10-03)

package/README.md

@@ -878,9 +878,9 @@ function onPreviewClick() {
 }
 
 const ExternalPreviewMenuItem = () => (
-	<PreviewDropdownMenuItem icon={ external } onClick={ onPreviewClick }>
+	<PluginPreviewMenuItem icon={ external } onClick={ onPreviewClick }>
 		{ __( 'Preview in new tab' ) }
-	</PreviewDropdownMenuItem>
+	</PluginPreviewMenuItem>
 );
 registerPlugin( 'external-preview-menu-item', {
 	render: ExternalPreviewMenuItem,

package/build/bindings/post-meta.js

@@ -63,7 +63,8 @@ function getPostMetaFields(select, context) {
         value: // When using the entity value, an empty string IS a valid value.
         (_entityMetaValues$key = entityMetaValues?.[key]) !== null && _entityMetaValues$key !== void 0 ? _entityMetaValues$key :
         // When using the default, an empty string IS NOT a valid value.
-        props.default || undefined
+        props.default || undefined,
+        type: props.type
       };
     }
   });

package/build/bindings/post-meta.js.map

@@ -1 +1 @@
-{"version":3,"names":["_coreData","require","_store","_lockUnlock","getPostMetaFields","select","context","getEditedEntityRecord","coreDataStore","getRegisteredPostMeta","unlock","entityMetaValues","postType","postId","meta","registeredFields","metaFields","Object","entries","forEach","key","props","charAt","_entityMetaValues$key","label","title","value","default","undefined","keys","length","_default","exports","name","getValues","bindings","newValues","attributeName","source","_ref","fieldKey","args","fieldValue","fieldLabel","setValues","dispatch","newMeta","values","newValue","editEntityRecord","canUserEditValue","query","queryId","editorStore","getCurrentPostType","areCustomFieldsEnabled","getEditorSettings","enableCustomFields","canUserEdit","canUser","kind","id","getFieldsList"],"sources":["@wordpress/editor/src/bindings/post-meta.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Gets a list of post meta fields with their values and labels\n * to be consumed in the needed callbacks.\n * If the value is not available based on context, like in templates,\n * it falls back to the default value, label, or key.\n *\n * @param {Object} select  The select function from the data store.\n * @param {Object} context The context provided.\n * @return {Object} List of post meta fields with their value and label.\n *\n * @example\n * ```js\n * {\n *     field_1_key: {\n *         label: 'Field 1 Label',\n *         value: 'Field 1 Value',\n *     },\n *     field_2_key: {\n *         label: 'Field 2 Label',\n *         value: 'Field 2 Value',\n *     },\n *     ...\n * }\n * ```\n */\nfunction getPostMetaFields( select, context ) {\n\tconst { getEditedEntityRecord } = select( coreDataStore );\n\tconst { getRegisteredPostMeta } = unlock( select( coreDataStore ) );\n\n\tlet entityMetaValues;\n\t// Try to get the current entity meta values.\n\tif ( context?.postType && context?.postId ) {\n\t\tentityMetaValues = getEditedEntityRecord(\n\t\t\t'postType',\n\t\t\tcontext?.postType,\n\t\t\tcontext?.postId\n\t\t).meta;\n\t}\n\n\tconst registeredFields = getRegisteredPostMeta( context?.postType );\n\tconst metaFields = {};\n\tObject.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {\n\t\t// Don't include footnotes or private fields.\n\t\tif ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {\n\t\t\tmetaFields[ key ] = {\n\t\t\t\tlabel: props.title || key,\n\t\t\t\tvalue:\n\t\t\t\t\t// When using the entity value, an empty string IS a valid value.\n\t\t\t\t\tentityMetaValues?.[ key ] ??\n\t\t\t\t\t// When using the default, an empty string IS NOT a valid value.\n\t\t\t\t\t( props.default || undefined ),\n\t\t\t};\n\t\t}\n\t} );\n\n\tif ( ! Object.keys( metaFields || {} ).length ) {\n\t\treturn null;\n\t}\n\n\treturn metaFields;\n}\n\nexport default {\n\tname: 'core/post-meta',\n\tgetValues( { select, context, bindings } ) {\n\t\tconst metaFields = getPostMetaFields( select, context );\n\n\t\tconst newValues = {};\n\t\tfor ( const [ attributeName, source ] of Object.entries( bindings ) ) {\n\t\t\t// Use the value, the field label, or the field key.\n\t\t\tconst fieldKey = source.args.key;\n\t\t\tconst { value: fieldValue, label: fieldLabel } =\n\t\t\t\tmetaFields?.[ fieldKey ] || {};\n\t\t\tnewValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;\n\t\t}\n\t\treturn newValues;\n\t},\n\tsetValues( { dispatch, context, bindings } ) {\n\t\tconst newMeta = {};\n\t\tObject.values( bindings ).forEach( ( { args, newValue } ) => {\n\t\t\tnewMeta[ args.key ] = newValue;\n\t\t} );\n\n\t\tdispatch( coreDataStore ).editEntityRecord(\n\t\t\t'postType',\n\t\t\tcontext?.postType,\n\t\t\tcontext?.postId,\n\t\t\t{\n\t\t\t\tmeta: newMeta,\n\t\t\t}\n\t\t);\n\t},\n\tcanUserEditValue( { select, context, args } ) {\n\t\t// Lock editing in query loop.\n\t\tif ( context?.query || context?.queryId ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst postType =\n\t\t\tcontext?.postType || select( editorStore ).getCurrentPostType();\n\n\t\t// Check that editing is happening in the post editor and not a template.\n\t\tif ( postType === 'wp_template' ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst fieldValue = getPostMetaFields( select, context )?.[ args.key ]\n\t\t\t?.value;\n\t\t// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.\n\t\tif ( fieldValue === undefined ) {\n\t\t\treturn false;\n\t\t}\n\t\t// Check that custom fields metabox is not enabled.\n\t\tconst areCustomFieldsEnabled =\n\t\t\tselect( editorStore ).getEditorSettings().enableCustomFields;\n\t\tif ( areCustomFieldsEnabled ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Check that the user has the capability to edit post meta.\n\t\tconst canUserEdit = select( coreDataStore ).canUser( 'update', {\n\t\t\tkind: 'postType',\n\t\t\tname: context?.postType,\n\t\t\tid: context?.postId,\n\t\t} );\n\t\tif ( ! canUserEdit ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t},\n\tgetFieldsList( { select, context } ) {\n\t\treturn getPostMetaFields( select, context );\n\t},\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_coreData","require","_store","_lockUnlock","getPostMetaFields","select","context","getEditedEntityRecord","coreDataStore","getRegisteredPostMeta","unlock","entityMetaValues","postType","postId","meta","registeredFields","metaFields","Object","entries","forEach","key","props","charAt","_entityMetaValues$key","label","title","value","default","undefined","type","keys","length","_default","exports","name","getValues","bindings","newValues","attributeName","source","_ref","fieldKey","args","fieldValue","fieldLabel","setValues","dispatch","newMeta","values","newValue","editEntityRecord","canUserEditValue","query","queryId","editorStore","getCurrentPostType","areCustomFieldsEnabled","getEditorSettings","enableCustomFields","canUserEdit","canUser","kind","id","getFieldsList"],"sources":["@wordpress/editor/src/bindings/post-meta.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Gets a list of post meta fields with their values and labels\n * to be consumed in the needed callbacks.\n * If the value is not available based on context, like in templates,\n * it falls back to the default value, label, or key.\n *\n * @param {Object} select  The select function from the data store.\n * @param {Object} context The context provided.\n * @return {Object} List of post meta fields with their value and label.\n *\n * @example\n * ```js\n * {\n *     field_1_key: {\n *         label: 'Field 1 Label',\n *         value: 'Field 1 Value',\n *     },\n *     field_2_key: {\n *         label: 'Field 2 Label',\n *         value: 'Field 2 Value',\n *     },\n *     ...\n * }\n * ```\n */\nfunction getPostMetaFields( select, context ) {\n\tconst { getEditedEntityRecord } = select( coreDataStore );\n\tconst { getRegisteredPostMeta } = unlock( select( coreDataStore ) );\n\n\tlet entityMetaValues;\n\t// Try to get the current entity meta values.\n\tif ( context?.postType && context?.postId ) {\n\t\tentityMetaValues = getEditedEntityRecord(\n\t\t\t'postType',\n\t\t\tcontext?.postType,\n\t\t\tcontext?.postId\n\t\t).meta;\n\t}\n\n\tconst registeredFields = getRegisteredPostMeta( context?.postType );\n\tconst metaFields = {};\n\tObject.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {\n\t\t// Don't include footnotes or private fields.\n\t\tif ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {\n\t\t\tmetaFields[ key ] = {\n\t\t\t\tlabel: props.title || key,\n\t\t\t\tvalue:\n\t\t\t\t\t// When using the entity value, an empty string IS a valid value.\n\t\t\t\t\tentityMetaValues?.[ key ] ??\n\t\t\t\t\t// When using the default, an empty string IS NOT a valid value.\n\t\t\t\t\t( props.default || undefined ),\n\t\t\t\ttype: props.type,\n\t\t\t};\n\t\t}\n\t} );\n\n\tif ( ! Object.keys( metaFields || {} ).length ) {\n\t\treturn null;\n\t}\n\n\treturn metaFields;\n}\n\nexport default {\n\tname: 'core/post-meta',\n\tgetValues( { select, context, bindings } ) {\n\t\tconst metaFields = getPostMetaFields( select, context );\n\n\t\tconst newValues = {};\n\t\tfor ( const [ attributeName, source ] of Object.entries( bindings ) ) {\n\t\t\t// Use the value, the field label, or the field key.\n\t\t\tconst fieldKey = source.args.key;\n\t\t\tconst { value: fieldValue, label: fieldLabel } =\n\t\t\t\tmetaFields?.[ fieldKey ] || {};\n\t\t\tnewValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;\n\t\t}\n\t\treturn newValues;\n\t},\n\tsetValues( { dispatch, context, bindings } ) {\n\t\tconst newMeta = {};\n\t\tObject.values( bindings ).forEach( ( { args, newValue } ) => {\n\t\t\tnewMeta[ args.key ] = newValue;\n\t\t} );\n\n\t\tdispatch( coreDataStore ).editEntityRecord(\n\t\t\t'postType',\n\t\t\tcontext?.postType,\n\t\t\tcontext?.postId,\n\t\t\t{\n\t\t\t\tmeta: newMeta,\n\t\t\t}\n\t\t);\n\t},\n\tcanUserEditValue( { select, context, args } ) {\n\t\t// Lock editing in query loop.\n\t\tif ( context?.query || context?.queryId ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst postType =\n\t\t\tcontext?.postType || select( editorStore ).getCurrentPostType();\n\n\t\t// Check that editing is happening in the post editor and not a template.\n\t\tif ( postType === 'wp_template' ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst fieldValue = getPostMetaFields( select, context )?.[ args.key ]\n\t\t\t?.value;\n\t\t// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.\n\t\tif ( fieldValue === undefined ) {\n\t\t\treturn false;\n\t\t}\n\t\t// Check that custom fields metabox is not enabled.\n\t\tconst areCustomFieldsEnabled =\n\t\t\tselect( editorStore ).getEditorSettings().enableCustomFields;\n\t\tif ( areCustomFieldsEnabled ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Check that the user has the capability to edit post meta.\n\t\tconst canUserEdit = select( coreDataStore ).canUser( 'update', {\n\t\t\tkind: 'postType',\n\t\t\tname: context?.postType,\n\t\t\tid: context?.postId,\n\t\t} );\n\t\tif ( ! canUserEdit ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t},\n\tgetFieldsList( { select, context } ) {\n\t\treturn getPostMetaFields( select, context );\n\t},\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AddComment = AddComment;
+var _i18n = require("@wordpress/i18n");
+var _data = require("@wordpress/data");
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _blockEditor = require("@wordpress/block-editor");
+var _coreData = require("@wordpress/core-data");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * 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 {JSX.Element} The rendered comment input UI.
+ */
+function AddComment({
+  onSubmit,
+  showCommentBoard,
+  setShowCommentBoard
+}) {
+  var _currentUser$name;
+  // State to manage the comment thread.
+  const [inputComment, setInputComment] = (0, _element.useState)('');
+  const {
+    defaultAvatar,
+    clientId,
+    blockCommentId,
+    showAddCommentBoard,
+    currentUser
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    const {
+      __experimentalDiscussionSettings
+    } = getSettings();
+    const selectedBlock = select(_blockEditor.store).getSelectedBlock();
+    const userData = select(_coreData.store).getCurrentUser();
+    return {
+      defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
+      clientId: selectedBlock?.clientId,
+      blockCommentId: selectedBlock?.attributes?.blockCommentId,
+      showAddCommentBoard: showCommentBoard,
+      currentUser: userData
+    };
+  });
+  const userAvatar = currentUser && currentUser.avatar_urls && currentUser.avatar_urls[48] ? currentUser.avatar_urls[48] : defaultAvatar;
+  (0, _element.useEffect)(() => {
+    setInputComment('');
+  }, [clientId]);
+  const handleCancel = () => {
+    setShowCommentBoard(false);
+    setInputComment('');
+  };
+  if (!showAddCommentBoard || !clientId || undefined !== blockCommentId) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    spacing: "3",
+    className: "editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      alignment: "left",
+      spacing: "3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: userAvatar
+        // translators: alt text for user avatar image
+        ,
+        alt: (0, _i18n.__)('User Avatar'),
+        className: "editor-collab-sidebar-panel__user-avatar",
+        width: 32,
+        height: 32
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "editor-collab-sidebar-panel__user-name",
+        children: (_currentUser$name = currentUser?.name) !== null && _currentUser$name !== void 0 ? _currentUser$name : ''
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      value: inputComment,
+      onChange: setInputComment,
+      placeholder: (0, _i18n._x)('Comment', 'noun')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      alignment: "right",
+      spacing: "3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        __next40pxDefaultSize: true,
+        variant: "tertiary",
+        text: (0, _i18n._x)('Cancel', 'Cancel comment button'),
+        onClick: handleCancel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        __next40pxDefaultSize: true,
+        accessibleWhenDisabled: true,
+        variant: "primary",
+        text: (0, _i18n._x)('Comment', 'Add comment button'),
+        disabled: 0 === (0, _utils.sanitizeCommentString)(inputComment).length,
+        onClick: () => {
+          onSubmit(inputComment);
+          setInputComment('');
+        }
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=add-comment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_data","_element","_components","_blockEditor","_coreData","_utils","_jsxRuntime","AddComment","onSubmit","showCommentBoard","setShowCommentBoard","_currentUser$name","inputComment","setInputComment","useState","defaultAvatar","clientId","blockCommentId","showAddCommentBoard","currentUser","useSelect","select","getSettings","blockEditorStore","__experimentalDiscussionSettings","selectedBlock","getSelectedBlock","userData","coreStore","getCurrentUser","avatarURL","attributes","userAvatar","avatar_urls","useEffect","handleCancel","undefined","jsxs","__experimentalVStack","spacing","className","children","__experimentalHStack","alignment","jsx","src","alt","__","width","height","name","TextControl","__next40pxDefaultSize","__nextHasNoMarginBottom","value","onChange","placeholder","_x","Button","variant","text","onClick","accessibleWhenDisabled","disabled","sanitizeCommentString","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 {\n\t\tdefaultAvatar,\n\t\tclientId,\n\t\tblockCommentId,\n\t\tshowAddCommentBoard,\n\t\tcurrentUser,\n\t} = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\tconst selectedBlock = select( blockEditorStore ).getSelectedBlock();\n\t\tconst userData = select( coreStore ).getCurrentUser();\n\t\treturn {\n\t\t\tdefaultAvatar: __experimentalDiscussionSettings?.avatarURL,\n\t\t\tclientId: selectedBlock?.clientId,\n\t\t\tblockCommentId: selectedBlock?.attributes?.blockCommentId,\n\t\t\tshowAddCommentBoard: showCommentBoard,\n\t\t\tcurrentUser: userData,\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 ( ! showAddCommentBoard || ! 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":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAMA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAKA,IAAAM,MAAA,GAAAN,OAAA;AAAgD,IAAAO,WAAA,GAAAP,OAAA;AAlBhD;AACA;AACA;;AAaA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASQ,UAAUA,CAAE;EAC3BC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EAAA,IAAAC,iBAAA;EACH;EACA,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAG,IAAAC,iBAAQ,EAAE,EAAG,CAAC;EAExD,MAAM;IACLC,aAAa;IACbC,QAAQ;IACRC,cAAc;IACdC,mBAAmB;IACnBC;EACD,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC5B,MAAM;MAAEC;IAAY,CAAC,GAAGD,MAAM,CAAEE,kBAAiB,CAAC;IAClD,MAAM;MAAEC;IAAiC,CAAC,GAAGF,WAAW,CAAC,CAAC;IAC1D,MAAMG,aAAa,GAAGJ,MAAM,CAAEE,kBAAiB,CAAC,CAACG,gBAAgB,CAAC,CAAC;IACnE,MAAMC,QAAQ,GAAGN,MAAM,CAAEO,eAAU,CAAC,CAACC,cAAc,CAAC,CAAC;IACrD,OAAO;MACNd,aAAa,EAAES,gCAAgC,EAAEM,SAAS;MAC1Dd,QAAQ,EAAES,aAAa,EAAET,QAAQ;MACjCC,cAAc,EAAEQ,aAAa,EAAEM,UAAU,EAAEd,cAAc;MACzDC,mBAAmB,EAAET,gBAAgB;MACrCU,WAAW,EAAEQ;IACd,CAAC;EACF,CAAE,CAAC;EAEH,MAAMK,UAAU,GACfb,WAAW,IAAIA,WAAW,CAACc,WAAW,IAAId,WAAW,CAACc,WAAW,CAAE,EAAE,CAAE,GACpEd,WAAW,CAACc,WAAW,CAAE,EAAE,CAAE,GAC7BlB,aAAa;EAEjB,IAAAmB,kBAAS,EAAE,MAAM;IAChBrB,eAAe,CAAE,EAAG,CAAC;EACtB,CAAC,EAAE,CAAEG,QAAQ,CAAG,CAAC;EAEjB,MAAMmB,YAAY,GAAGA,CAAA,KAAM;IAC1BzB,mBAAmB,CAAE,KAAM,CAAC;IAC5BG,eAAe,CAAE,EAAG,CAAC;EACtB,CAAC;EAED,IAAK,CAAEK,mBAAmB,IAAI,CAAEF,QAAQ,IAAIoB,SAAS,KAAKnB,cAAc,EAAG;IAC1E,OAAO,IAAI;EACZ;EAEA,oBACC,IAAAX,WAAA,CAAA+B,IAAA,EAACnC,WAAA,CAAAoC,oBAAM;IACNC,OAAO,EAAC,GAAG;IACXC,SAAS,EAAC,gFAAgF;IAAAC,QAAA,gBAE1F,IAAAnC,WAAA,CAAA+B,IAAA,EAACnC,WAAA,CAAAwC,oBAAM;MAACC,SAAS,EAAC,MAAM;MAACJ,OAAO,EAAC,GAAG;MAAAE,QAAA,gBACnC,IAAAnC,WAAA,CAAAsC,GAAA;QACCC,GAAG,EAAGb;QACN;QAAA;QACAc,GAAG,EAAG,IAAAC,QAAE,EAAE,aAAc,CAAG;QAC3BP,SAAS,EAAC,0CAA0C;QACpDQ,KAAK,EAAG,EAAI;QACZC,MAAM,EAAG;MAAI,CACb,CAAC,eACF,IAAA3C,WAAA,CAAAsC,GAAA;QAAMJ,SAAS,EAAC,wCAAwC;QAAAC,QAAA,GAAA9B,iBAAA,GACrDQ,WAAW,EAAE+B,IAAI,cAAAvC,iBAAA,cAAAA,iBAAA,GAAI;MAAE,CACpB,CAAC;IAAA,CACA,CAAC,eACT,IAAAL,WAAA,CAAAsC,GAAA,EAAC1C,WAAA,CAAAiD,WAAW;MACXC,qBAAqB;MACrBC,uBAAuB;MACvBC,KAAK,EAAG1C,YAAc;MACtB2C,QAAQ,EAAG1C,eAAiB;MAC5B2C,WAAW,EAAG,IAAAC,QAAE,EAAE,SAAS,EAAE,MAAO;IAAG,CACvC,CAAC,eACF,IAAAnD,WAAA,CAAA+B,IAAA,EAACnC,WAAA,CAAAwC,oBAAM;MAACC,SAAS,EAAC,OAAO;MAACJ,OAAO,EAAC,GAAG;MAAAE,QAAA,gBACpC,IAAAnC,WAAA,CAAAsC,GAAA,EAAC1C,WAAA,CAAAwD,MAAM;QACNN,qBAAqB;QACrBO,OAAO,EAAC,UAAU;QAClBC,IAAI,EAAG,IAAAH,QAAE,EAAE,QAAQ,EAAE,uBAAwB,CAAG;QAChDI,OAAO,EAAG1B;MAAc,CACxB,CAAC,eACF,IAAA7B,WAAA,CAAAsC,GAAA,EAAC1C,WAAA,CAAAwD,MAAM;QACNN,qBAAqB;QACrBU,sBAAsB;QACtBH,OAAO,EAAC,SAAS;QACjBC,IAAI,EAAG,IAAAH,QAAE,EAAE,SAAS,EAAE,oBAAqB,CAAG;QAC9CM,QAAQ,EACP,CAAC,KAAK,IAAAC,4BAAqB,EAAEpD,YAAa,CAAC,CAACqD,MAC5C;QACDJ,OAAO,EAAGA,CAAA,KAAM;UACfrD,QAAQ,CAAEI,YAAa,CAAC;UACxBC,eAAe,CAAE,EAAG,CAAC;QACtB;MAAG,CACH,CAAC;IAAA,CACK,CAAC;EAAA,CACF,CAAC;AAEX","ignoreList":[]}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _blockEditor = require("@wordpress/block-editor");
+var _lockUnlock = require("../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  __unstableCommentIconToolbarFill
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+const AddCommentToolbarButton = ({
+  onClick
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(__unstableCommentIconToolbarFill, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
+      accessibleWhenDisabled: true,
+      icon: _icons.comment,
+      label: (0, _i18n._x)('Comment', 'View comment'),
+      onClick: onClick
+    })
+  });
+};
+var _default = exports.default = AddCommentToolbarButton;
+//# sourceMappingURL=comment-button-toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_i18n","_icons","_blockEditor","_lockUnlock","_jsxRuntime","__unstableCommentIconToolbarFill","unlock","blockEditorPrivateApis","AddCommentToolbarButton","onClick","jsx","children","ToolbarButton","accessibleWhenDisabled","icon","commentIcon","label","_x","_default","exports","default"],"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":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAX3C;AACA;AACA;;AAMA;AACA;AACA;;AAGA,MAAM;EAAEM;AAAiC,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAE7E,MAAMC,uBAAuB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAClD,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACL,gCAAgC;IAAAM,QAAA,eAChC,IAAAP,WAAA,CAAAM,GAAA,EAACZ,WAAA,CAAAc,aAAa;MACbC,sBAAsB;MACtBC,IAAI,EAAGC,cAAa;MACpBC,KAAK,EAAG,IAAAC,QAAE,EAAE,SAAS,EAAE,cAAe,CAAG;MACzCR,OAAO,EAAGA;IAAS,CACnB;EAAC,CAC+B,CAAC;AAErC,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaZ,uBAAuB","ignoreList":[]}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _blockEditor = require("@wordpress/block-editor");
+var _lockUnlock = require("../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  __unstableCommentIconFill
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+const AddCommentButton = ({
+  onClick
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(__unstableCommentIconFill, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+      icon: _icons.comment,
+      onClick: onClick,
+      "aria-haspopup": "dialog",
+      children: (0, _i18n._x)('Comment', 'Add comment button')
+    })
+  });
+};
+var _default = exports.default = AddCommentButton;
+//# sourceMappingURL=comment-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_i18n","_icons","_blockEditor","_lockUnlock","_jsxRuntime","__unstableCommentIconFill","unlock","blockEditorPrivateApis","AddCommentButton","onClick","jsx","children","MenuItem","icon","commentIcon","_x","_default","exports","default"],"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":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AAA2C,IAAAK,WAAA,GAAAL,OAAA;AAZ3C;AACA;AACA;;AAOA;AACA;AACA;;AAGA,MAAM;EAAEM;AAA0B,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEtE,MAAMC,gBAAgB,GAAGA,CAAE;EAAEC;AAAQ,CAAC,KAAM;EAC3C,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACL,yBAAyB;IAAAM,QAAA,eACzB,IAAAP,WAAA,CAAAM,GAAA,EAACZ,WAAA,CAAAc,QAAQ;MACRC,IAAI,EAAGC,cAAa;MACpBL,OAAO,EAAGA,OAAS;MACnB,iBAAc,QAAQ;MAAAE,QAAA,EAEpB,IAAAI,QAAE,EAAE,SAAS,EAAE,oBAAqB;IAAC,CAC9B;EAAC,CACe,CAAC;AAE9B,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEaV,gBAAgB","ignoreList":[]}

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