npm - @wordpress/editor - Versions diffs - 14.41.1-next.v.202603102151.0 → 14.42.0 - Mend

@wordpress/editor 14.41.1-next.v.202603102151.0 → 14.42.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (301) hide show

package/build/components/collaborators-presence/index.cjs CHANGED Viewed

@@ -65,8 +65,19 @@ function CollaboratorsPresence({
     postType
   );
   const otherActiveCollaborators = activeCollaborators.filter(
-    (collaborator) => !collaborator.isMe
+    (c) => !c.isMe
   );
+  const collaboratorsForList = (0, import_element.useMemo)(() => {
+    return [...activeCollaborators].sort((a, b) => {
+      if (a.isMe && !b.isMe) {
+        return -1;
+      }
+      if (!a.isMe && b.isMe) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [activeCollaborators]);
   const [isPopoverVisible, setIsPopoverVisible] = (0, import_element.useState)(false);
   const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(
     null
@@ -74,6 +85,7 @@ function CollaboratorsPresence({
   if (otherActiveCollaborators.length === 0) {
     return null;
   }
+  const me = activeCollaborators.find((c) => c.isMe);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "editor-collaborators-presence", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -87,30 +99,44 @@ function CollaboratorsPresence({
           "aria-label": (0, import_i18n.sprintf)(
             // translators: %d: number of online collaborators.
             (0, import_i18n.__)("Collaborators list, %d online"),
-            otherActiveCollaborators.length
+            collaboratorsForList.length
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar_group.default, { max: 4, children: otherActiveCollaborators.map(
-            (collaboratorState) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_avatar_group.default, { max: 4, children: [
+            me && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_avatar.default,
               {
                 src: (0, import_get_avatar_url.getAvatarUrl)(
-                  collaboratorState.collaboratorInfo.avatar_urls
-                ),
-                name: collaboratorState.collaboratorInfo.name,
-                borderColor: (0, import_utils.getAvatarBorderColor)(
-                  collaboratorState.collaboratorInfo.id
+                  me.collaboratorInfo.avatar_urls
                 ),
+                name: me.collaboratorInfo.name,
+                borderColor: "var(--wp-admin-theme-color)",
                 size: "small"
               },
-              collaboratorState.clientId
+              me.clientId
+            ),
+            otherActiveCollaborators.map(
+              (collaboratorState) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_avatar.default,
+                {
+                  src: (0, import_get_avatar_url.getAvatarUrl)(
+                    collaboratorState.collaboratorInfo.avatar_urls
+                  ),
+                  name: collaboratorState.collaboratorInfo.name,
+                  borderColor: (0, import_utils.getAvatarBorderColor)(
+                    collaboratorState.collaboratorInfo.id
+                  ),
+                  size: "small"
+                },
+                collaboratorState.clientId
+              )
             )
-          ) })
+          ] })
         }
       ),
       isPopoverVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_list.CollaboratorsList,
         {
-          activeCollaborators: otherActiveCollaborators,
+          activeCollaborators: collaboratorsForList,
           popoverAnchor,
           setIsPopoverVisible
         }

package/build/components/collaborators-presence/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-presence/index.tsx", "../../../src/components/collaborators-presence/styles/collaborators-presence.scss"],
-  "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\nimport Avatar from './avatar';\nimport AvatarGroup from './avatar-group';\nimport { CollaboratorsList } from './list';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-presence.scss';\nimport { CollaboratorsOverlay } from '../collaborators-overlay';\n\nconst { useActiveCollaborators } = unlock( privateApis );\n\ninterface CollaboratorsPresenceProps {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Renders a list of avatars for the active collaborators, with a maximum of 3 visible avatars.\n * Shows a popover with all collaborators on hover.\n *\n * @param props          CollaboratorsPresence component props\n * @param props.postId   ID of the post\n * @param props.postType Type of the post\n */\nexport function CollaboratorsPresence( {\n\tpostId,\n\tpostType,\n}: CollaboratorsPresenceProps ) {\n\tconst activeCollaborators = useActiveCollaborators(\n\t\tpostId,\n\t\tpostType\n\t) as PostEditorAwarenessState[];\n\n\t// Filter out current user - we never show ourselves in the list\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( collaborator ) => ! collaborator.isMe\n\t);\n\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\t// When there are no other collaborators, this component should not render\n\t// at all. This will always be the case when collaboration is not enabled, but\n\t// also when the current user is the only editor with the post open.\n\tif ( otherActiveCollaborators.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"editor-collaborators-presence\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"editor-collaborators-presence__button\"\n\t\t\t\t\tonClick={ () => setIsPopoverVisible( ! isPopoverVisible ) }\n\t\t\t\t\tisPressed={ isPopoverVisible }\n\t\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %d: number of online collaborators.\n\t\t\t\t\t\t__( 'Collaborators list, %d online' ),\n\t\t\t\t\t\totherActiveCollaborators.length\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<AvatarGroup max={ 4 }>\n\t\t\t\t\t\t{ otherActiveCollaborators.map(\n\t\t\t\t\t\t\t( collaboratorState ) => (\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AvatarGroup>\n\t\t\t\t</Button>\n\t\t\t\t{ isPopoverVisible && (\n\t\t\t\t\t<CollaboratorsList\n\t\t\t\t\t\tactiveCollaborators={ otherActiveCollaborators }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay postId={ postId } postType={ postType } />\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='eee1778bc0']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"eee1778bc0\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:pointer;display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,qBAAyB;AACzB,uBAGO;AACP,kBAA4B;AAE5B,oBAAmB;AACnB,0BAAwB;AACxB,kBAAkC;AAClC,yBAAuB;AACvB,4BAA6B;AAC7B,mBAAqC;;;ACbrC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,6jCAA6jC,CAAC;AACxmC,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADWA,mCAAqC;AA4CnC;AA1CF,IAAM,EAAE,uBAAuB,QAAI,2BAAQ,4BAAY;AAehD,SAAS,sBAAuB;AAAA,EACtC;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AAGA,QAAM,2BAA2B,oBAAoB;AAAA,IACpD,CAAE,iBAAkB,CAAE,aAAa;AAAA,EACpC;AAEA,QAAM,CAAE,kBAAkB,mBAAoB,QAAI,yBAAU,KAAM;AAClE,QAAM,CAAE,eAAe,gBAAiB,QAAI;AAAA,IAC3C;AAAA,EACD;AAKA,MAAK,yBAAyB,WAAW,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,4EACC;AAAA,iDAAC,SAAI,WAAU,iCACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,WAAU;AAAA,UACV,SAAU,MAAM,oBAAqB,CAAE,gBAAiB;AAAA,UACxD,WAAY;AAAA,UACZ,KAAM;AAAA,UACN,kBAAa;AAAA;AAAA,gBAEZ,gBAAI,+BAAgC;AAAA,YACpC,yBAAyB;AAAA,UAC1B;AAAA,UAEA,sDAAC,oBAAAA,SAAA,EAAY,KAAM,GAChB,mCAAyB;AAAA,YAC1B,CAAE,sBACD;AAAA,cAAC,cAAAC;AAAA,cAAA;AAAA,gBAEA,SAAM;AAAA,kBACL,kBAAkB,iBAChB;AAAA,gBACH;AAAA,gBACA,MACC,kBAAkB,iBAAiB;AAAA,gBAEpC,iBAAc;AAAA,kBACb,kBAAkB,iBAAiB;AAAA,gBACpC;AAAA,gBACA,MAAK;AAAA;AAAA,cAXC,kBAAkB;AAAA,YAYzB;AAAA,UAEF,GACD;AAAA;AAAA,MACD;AAAA,MACE,oBACD;AAAA,QAAC;AAAA;AAAA,UACA,qBAAsB;AAAA,UACtB;AAAA,UACA;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,IACA,4CAAC,qDAAqB,QAAkB,UAAsB;AAAA,KAC/D;AAEF;",
+  "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\n\nimport Avatar from './avatar';\nimport AvatarGroup from './avatar-group';\nimport { CollaboratorsList } from './list';\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-presence.scss';\nimport { CollaboratorsOverlay } from '../collaborators-overlay';\n\nconst { useActiveCollaborators } = unlock( privateApis );\n\ninterface CollaboratorsPresenceProps {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Renders a list of avatars for the active collaborators, with a maximum of 3 visible avatars.\n * Shows a popover with all collaborators on hover.\n *\n * @param props          CollaboratorsPresence component props\n * @param props.postId   ID of the post\n * @param props.postType Type of the post\n */\nexport function CollaboratorsPresence( {\n\tpostId,\n\tpostType,\n}: CollaboratorsPresenceProps ) {\n\tconst activeCollaborators = useActiveCollaborators(\n\t\tpostId,\n\t\tpostType\n\t) as PostEditorAwarenessState[];\n\n\tconst otherActiveCollaborators = activeCollaborators.filter(\n\t\t( c ) => ! c.isMe\n\t);\n\n\t// Always include self in the list sorted first.\n\tconst collaboratorsForList = useMemo( () => {\n\t\treturn [ ...activeCollaborators ].sort( ( a, b ) => {\n\t\t\tif ( a.isMe && ! b.isMe ) {\n\t\t\t\treturn -1;\n\t\t\t}\n\t\t\tif ( ! a.isMe && b.isMe ) {\n\t\t\t\treturn 1;\n\t\t\t}\n\t\t\treturn 0;\n\t\t} );\n\t}, [ activeCollaborators ] );\n\n\tconst [ isPopoverVisible, setIsPopoverVisible ] = useState( false );\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\n\t// When there are no other collaborators, this component should not render\n\t// at all. This will always be the case when collaboration is not enabled, but\n\t// also when the current user is the only editor with the post open.\n\tif ( otherActiveCollaborators.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst me = activeCollaborators.find( ( c ) => c.isMe );\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"editor-collaborators-presence\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"editor-collaborators-presence__button\"\n\t\t\t\t\tonClick={ () => setIsPopoverVisible( ! isPopoverVisible ) }\n\t\t\t\t\tisPressed={ isPopoverVisible }\n\t\t\t\t\tref={ setPopoverAnchor }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %d: number of online collaborators.\n\t\t\t\t\t\t__( 'Collaborators list, %d online' ),\n\t\t\t\t\t\tcollaboratorsForList.length\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<AvatarGroup max={ 4 }>\n\t\t\t\t\t\t{ me && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tkey={ me.clientId }\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tme.collaboratorInfo.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ me.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor=\"var(--wp-admin-theme-color)\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ otherActiveCollaborators.map(\n\t\t\t\t\t\t\t( collaboratorState ) => (\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AvatarGroup>\n\t\t\t\t</Button>\n\t\t\t\t{ isPopoverVisible && (\n\t\t\t\t\t<CollaboratorsList\n\t\t\t\t\t\tactiveCollaborators={ collaboratorsForList }\n\t\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t\t\tsetIsPopoverVisible={ setIsPopoverVisible }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay postId={ postId } postType={ postType } />\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='eee1778bc0']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"eee1778bc0\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence{align-items:center;background:#f0f0f0;border-radius:4px;display:flex;flex-shrink:0;height:32px;margin-right:8px}.editor-collaborators-presence:has(.is-pressed),.editor-collaborators-presence:hover{background-color:#e0e0e0}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button{align-items:center;background:#0000;border-radius:4px;box-sizing:border-box;color:#2f2f2f;cursor:pointer;display:flex;height:100%;padding:4px;position:relative}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover,.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover{background:#0000;color:#2f2f2f}.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active){box-shadow:inset 0 0 0 var(--wp-admin-border-width-focus,2px) var(--wp-admin-theme-color,#007cba);outline:none}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,qBAAkC;AAClC,uBAGO;AACP,kBAA4B;AAE5B,oBAAmB;AACnB,0BAAwB;AACxB,kBAAkC;AAClC,yBAAuB;AACvB,4BAA6B;AAC7B,mBAAqC;;;ACbrC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,6jCAA6jC,CAAC;AACxmC,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADWA,mCAAqC;AA0DnC;AAxDF,IAAM,EAAE,uBAAuB,QAAI,2BAAQ,4BAAY;AAehD,SAAS,sBAAuB;AAAA,EACtC;AAAA,EACA;AACD,GAAgC;AAC/B,QAAM,sBAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AAEA,QAAM,2BAA2B,oBAAoB;AAAA,IACpD,CAAE,MAAO,CAAE,EAAE;AAAA,EACd;AAGA,QAAM,2BAAuB,wBAAS,MAAM;AAC3C,WAAO,CAAE,GAAG,mBAAoB,EAAE,KAAM,CAAE,GAAG,MAAO;AACnD,UAAK,EAAE,QAAQ,CAAE,EAAE,MAAO;AACzB,eAAO;AAAA,MACR;AACA,UAAK,CAAE,EAAE,QAAQ,EAAE,MAAO;AACzB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAE;AAAA,EACH,GAAG,CAAE,mBAAoB,CAAE;AAE3B,QAAM,CAAE,kBAAkB,mBAAoB,QAAI,yBAAU,KAAM;AAClE,QAAM,CAAE,eAAe,gBAAiB,QAAI;AAAA,IAC3C;AAAA,EACD;AAKA,MAAK,yBAAyB,WAAW,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,QAAM,KAAK,oBAAoB,KAAM,CAAE,MAAO,EAAE,IAAK;AAErD,SACC,4EACC;AAAA,iDAAC,SAAI,WAAU,iCACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,WAAU;AAAA,UACV,SAAU,MAAM,oBAAqB,CAAE,gBAAiB;AAAA,UACxD,WAAY;AAAA,UACZ,KAAM;AAAA,UACN,kBAAa;AAAA;AAAA,gBAEZ,gBAAI,+BAAgC;AAAA,YACpC,qBAAqB;AAAA,UACtB;AAAA,UAEA,uDAAC,oBAAAA,SAAA,EAAY,KAAM,GAChB;AAAA,kBACD;AAAA,cAAC,cAAAC;AAAA,cAAA;AAAA,gBAEA,SAAM;AAAA,kBACL,GAAG,iBAAiB;AAAA,gBACrB;AAAA,gBACA,MAAO,GAAG,iBAAiB;AAAA,gBAC3B,aAAY;AAAA,gBACZ,MAAK;AAAA;AAAA,cANC,GAAG;AAAA,YAOV;AAAA,YAEC,yBAAyB;AAAA,cAC1B,CAAE,sBACD;AAAA,gBAAC,cAAAA;AAAA,gBAAA;AAAA,kBAEA,SAAM;AAAA,oBACL,kBAAkB,iBAChB;AAAA,kBACH;AAAA,kBACA,MACC,kBAAkB,iBAAiB;AAAA,kBAEpC,iBAAc;AAAA,oBACb,kBAAkB,iBAAiB;AAAA,kBACpC;AAAA,kBACA,MAAK;AAAA;AAAA,gBAXC,kBAAkB;AAAA,cAYzB;AAAA,YAEF;AAAA,aACD;AAAA;AAAA,MACD;AAAA,MACE,oBACD;AAAA,QAAC;AAAA;AAAA,UACA,qBAAsB;AAAA,UACtB;AAAA,UACA;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,IACA,4CAAC,qDAAqB,QAAkB,UAAsB;AAAA,KAC/D;AAEF;",
   "names": ["AvatarGroup", "Avatar"]
 }

package/build/components/collaborators-presence/list.cjs CHANGED Viewed

@@ -80,30 +80,33 @@ function CollaboratorsList({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-collaborators-presence__list-items", children: activeCollaborators.map((collaboratorState) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            className: "editor-collaborators-presence__list-item",
-            disabled: true,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_avatar.default,
-                {
-                  src: (0, import_get_avatar_url.getAvatarUrl)(
-                    collaboratorState.collaboratorInfo.avatar_urls
-                  ),
-                  name: collaboratorState.collaboratorInfo.name,
-                  borderColor: (0, import_utils.getAvatarBorderColor)(
-                    collaboratorState.collaboratorInfo.id
-                  ),
-                  dimmed: !collaboratorState.isConnected
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-collaborators-presence__list-item-info", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-collaborators-presence__list-item-name", children: collaboratorState.collaboratorInfo.name }) })
-            ]
-          },
-          collaboratorState.clientId
-        )) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-collaborators-presence__list-items", children: activeCollaborators.map((collaboratorState) => {
+          const isCurrentUser = collaboratorState.isMe;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              className: "editor-collaborators-presence__list-item",
+              disabled: true,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_avatar.default,
+                  {
+                    src: (0, import_get_avatar_url.getAvatarUrl)(
+                      collaboratorState.collaboratorInfo.avatar_urls
+                    ),
+                    name: collaboratorState.collaboratorInfo.name,
+                    borderColor: isCurrentUser ? "var(--wp-admin-theme-color)" : (0, import_utils.getAvatarBorderColor)(
+                      collaboratorState.collaboratorInfo.id
+                    ),
+                    dimmed: !collaboratorState.isConnected
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-collaborators-presence__list-item-info", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "editor-collaborators-presence__list-item-name", children: isCurrentUser ? (0, import_i18n.__)("You") : collaboratorState.collaboratorInfo.name }) })
+              ]
+            },
+            collaboratorState.clientId
+          );
+        }) })
       ] })
     }
   );

package/build/components/collaborators-presence/list.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-presence/list.tsx", "../../../src/components/collaborators-presence/styles/collaborators-list.scss"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Popover, Button } from '@wordpress/components';\nimport { closeSmall } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-list.scss';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * Note: activeUsers should already exclude the current user (filtered by parent component).\n * @param props                     Component props\n * @param props.activeCollaborators List of active collaborators\n * @param props.popoverAnchor       Anchor element for the popover\n * @param props.setIsPopoverVisible Callback to set the visibility of the popover\n */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n}: CollaboratorsListProps ) {\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ popoverAnchor }\n\t\t\tplacement=\"bottom\"\n\t\t\toffset={ 8 }\n\t\t\tclassName=\"editor-collaborators-presence__list\"\n\t\t\tonClose={ () => setIsPopoverVisible( false ) }\n\t\t>\n\t\t\t<div className=\"editor-collaborators-presence__list-content\">\n\t\t\t\t<div className=\"editor-collaborators-presence__list-header\">\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-title\">\n\t\t\t\t\t\t{ __( 'Collaborators' ) }\n\t\t\t\t\t\t<span>{ activeCollaborators.length }</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-action\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\t\t\tlabel={ __( 'Close Collaborators List' ) }\n\t\t\t\t\t\t\tonClick={ () => setIsPopoverVisible( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-collaborators-presence__list-items\">\n\t\t\t\t\t{ activeCollaborators.map( ( collaboratorState ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tname={ collaboratorState.collaboratorInfo.name }\n\t\t\t\t\t\t\t\tborderColor={ getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.id\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tdimmed={ ! collaboratorState.isConnected }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-info\">\n\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-name\">\n\t\t\t\t\t\t\t\t\t{ collaboratorState.collaboratorInfo.name }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='9537a5e604']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"9537a5e604\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmB;AACnB,wBAAgC;AAChC,mBAA2B;AAG3B,oBAAmB;AACnB,4BAA6B;AAC7B,mBAAqC;;;ACPrC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,yhFAAyhF,CAAC;AACpkF,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADmCK;AAfE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,uDAAC,SAAI,WAAU,+CACd;AAAA,qDAAC,SAAI,WAAU,8CACd;AAAA,uDAAC,SAAI,WAAU,oDACZ;AAAA,gCAAI,eAAgB;AAAA,YACtB,4CAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,4CAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,WAAQ,gBAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,4CAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAC5B;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YACV,UAAQ;AAAA,YAER;AAAA;AAAA,gBAAC,cAAAA;AAAA,gBAAA;AAAA,kBACA,SAAM;AAAA,oBACL,kBAAkB,iBAChB;AAAA,kBACH;AAAA,kBACA,MAAO,kBAAkB,iBAAiB;AAAA,kBAC1C,iBAAc;AAAA,oBACb,kBAAkB,iBAAiB;AAAA,kBACpC;AAAA,kBACA,QAAS,CAAE,kBAAkB;AAAA;AAAA,cAC9B;AAAA,cACA,4CAAC,SAAI,WAAU,iDACd,sDAAC,SAAI,WAAU,iDACZ,4BAAkB,iBAAiB,MACtC,GACD;AAAA;AAAA;AAAA,UAnBM,kBAAkB;AAAA,QAoBzB,CACC,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { Popover, Button } from '@wordpress/components';\nimport { closeSmall } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-list.scss';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n}\n\n/**\n * Renders a list showing all active collaborators with their details.\n * When the showCollaborationCursor preference is enabled, the current user\n * is included and expected to be first in the list.\n * @param props                     Component props\n * @param props.activeCollaborators List of active collaborators\n * @param props.popoverAnchor       Anchor element for the popover\n * @param props.setIsPopoverVisible Callback to set the visibility of the popover\n */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n}: CollaboratorsListProps ) {\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ popoverAnchor }\n\t\t\tplacement=\"bottom\"\n\t\t\toffset={ 8 }\n\t\t\tclassName=\"editor-collaborators-presence__list\"\n\t\t\tonClose={ () => setIsPopoverVisible( false ) }\n\t\t>\n\t\t\t<div className=\"editor-collaborators-presence__list-content\">\n\t\t\t\t<div className=\"editor-collaborators-presence__list-header\">\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-title\">\n\t\t\t\t\t\t{ __( 'Collaborators' ) }\n\t\t\t\t\t\t<span>{ activeCollaborators.length }</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"editor-collaborators-presence__list-header-action\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\t\t\tlabel={ __( 'Close Collaborators List' ) }\n\t\t\t\t\t\t\tonClick={ () => setIsPopoverVisible( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"editor-collaborators-presence__list-items\">\n\t\t\t\t\t{ activeCollaborators.map( ( collaboratorState ) => {\n\t\t\t\t\t\tconst isCurrentUser = collaboratorState.isMe;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tkey={ collaboratorState.clientId }\n\t\t\t\t\t\t\t\tclassName=\"editor-collaborators-presence__list-item\"\n\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tsrc={ getAvatarUrl(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t.avatar_urls\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.collaboratorInfo.name\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tborderColor={\n\t\t\t\t\t\t\t\t\t\tisCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t\t\t\t\t\t\t\t: getAvatarBorderColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcollaboratorState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.collaboratorInfo.id\n\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdimmed={ ! collaboratorState.isConnected }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-info\">\n\t\t\t\t\t\t\t\t\t<div className=\"editor-collaborators-presence__list-item-name\">\n\t\t\t\t\t\t\t\t\t\t{ isCurrentUser\n\t\t\t\t\t\t\t\t\t\t\t? __( 'You' )\n\t\t\t\t\t\t\t\t\t\t\t: collaboratorState.collaboratorInfo\n\t\t\t\t\t\t\t\t\t\t\t\t\t.name }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='9537a5e604']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"9537a5e604\");\n\tstyle.appendChild(document.createTextNode(\".editor-collaborators-presence__list.components-popover .components-popover__content{background:#fff;border:1px solid #ddd;border-radius:8px;border-width:1px 0 0 1px;box-shadow:0 1px 2px #0000000d,0 2px 3px #0000000a,0 6px 6px #00000008,0 8px 8px #00000005}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-content{min-width:280px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header{align-items:center;display:flex;justify-content:space-between;padding:8px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{display:flex;font-size:13px;font-weight:499;gap:4px;line-height:20px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title span{color:#757575}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action{padding:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:32px;padding:0;width:32px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding-bottom:16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:12px 16px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.04)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:rgba(var(--wp-admin-theme-color--rgb),.08)}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#3858e9);outline-offset:-2px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:disabled{cursor:default}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-info{display:flex;flex:1;flex-direction:column;min-width:0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item-name{color:#1e1e1e;font-size:13px;font-weight:499;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmB;AACnB,wBAAgC;AAChC,mBAA2B;AAG3B,oBAAmB;AACnB,4BAA6B;AAC7B,mBAAqC;;;ACPrC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,yhFAAyhF,CAAC;AACpkF,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADoCK;AAfE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,uDAAC,SAAI,WAAU,+CACd;AAAA,qDAAC,SAAI,WAAU,8CACd;AAAA,uDAAC,SAAI,WAAU,oDACZ;AAAA,gCAAI,eAAgB;AAAA,YACtB,4CAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,4CAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,WAAQ,gBAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,4CAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAAuB;AACnD,gBAAM,gBAAgB,kBAAkB;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,UAAQ;AAAA,cAER;AAAA;AAAA,kBAAC,cAAAA;AAAA,kBAAA;AAAA,oBACA,SAAM;AAAA,sBACL,kBAAkB,iBAChB;AAAA,oBACH;AAAA,oBACA,MACC,kBAAkB,iBAAiB;AAAA,oBAEpC,aACC,gBACG,oCACA;AAAA,sBACA,kBACE,iBAAiB;AAAA,oBACnB;AAAA,oBAEJ,QAAS,CAAE,kBAAkB;AAAA;AAAA,gBAC9B;AAAA,gBACA,4CAAC,SAAI,WAAU,iDACd,sDAAC,SAAI,WAAU,iDACZ,8BACC,gBAAI,KAAM,IACV,kBAAkB,iBACjB,MACL,GACD;AAAA;AAAA;AAAA,YA7BM,kBAAkB;AAAA,UA8BzB;AAAA,QAEF,CAAE,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
   "names": ["Avatar"]
 }

package/build/components/collaborators-presence/use-collaborator-notifications.cjs CHANGED Viewed

@@ -23,25 +23,20 @@ __export(use_collaborator_notifications_exports, {
   useCollaboratorNotifications: () => useCollaboratorNotifications
 });
 module.exports = __toCommonJS(use_collaborator_notifications_exports);
-var import_compose = require("@wordpress/compose");
 var import_data = require("@wordpress/data");
 var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
 var import_notices = require("@wordpress/notices");
 var import_core_data = require("@wordpress/core-data");
+var import_preferences = require("@wordpress/preferences");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_store = require("../../store/index.cjs");
-var { useActiveCollaborators, useLastPostSave } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
+var { useOnCollaboratorJoin, useOnCollaboratorLeave, useOnPostSave } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
 var NOTIFICATION_TYPE = {
   COLLAB_POST_UPDATED: "collab-post-updated",
   COLLAB_USER_ENTERED: "collab-user-entered",
   COLLAB_USER_EXITED: "collab-user-exited"
 };
-var NOTIFICATIONS_CONFIG = {
-  userEntered: true,
-  userExited: true,
-  postUpdated: true
-};
 var PUBLISHED_STATUSES = ["publish", "private", "future"];
 function getPostUpdatedMessage(name, status, isFirstPublish) {
   if (isFirstPublish) {
@@ -53,119 +48,96 @@ function getPostUpdatedMessage(name, status, isFirstPublish) {
   return (0, import_i18n.sprintf)((0, import_i18n.__)("Draft saved by %s."), name);
 }
 function useCollaboratorNotifications(postId, postType) {
-  const activeCollaborators = useActiveCollaborators(
-    postId,
-    postType
+  const { postStatus, isCollaborationEnabled, showNotifications } = (0, import_data.useSelect)(
+    (select) => {
+      const editorSel = select(import_store.store);
+      return {
+        postStatus: editorSel.getCurrentPostAttribute("status"),
+        isCollaborationEnabled: editorSel.isCollaborationEnabledForCurrentPost(),
+        showNotifications: select(import_preferences.store).get(
+          "core",
+          "showCollaborationNotifications"
+        ) ?? true
+      };
+    },
+    []
   );
-  const lastPostSave = useLastPostSave(postId, postType);
-  const { postStatus, isCollaborationEnabled } = (0, import_data.useSelect)((select) => {
-    const editorSel = select(import_store.store);
-    return {
-      postStatus: editorSel.getCurrentPostAttribute("status"),
-      isCollaborationEnabled: editorSel.isCollaborationEnabledForCurrentPost()
-    };
-  }, []);
   const { createNotice } = (0, import_data.useDispatch)(import_notices.store);
-  const prevCollaborators = (0, import_compose.usePrevious)(activeCollaborators);
-  const prevPostSave = (0, import_compose.usePrevious)(lastPostSave);
-  (0, import_element.useEffect)(() => {
-    if (!isCollaborationEnabled) {
-      return;
-    }
-    if (!prevCollaborators || prevCollaborators.length === 0) {
-      return;
-    }
-    function notify(noticeId, message) {
-      void createNotice("info", message, {
-        id: noticeId,
-        type: "snackbar",
-        isDismissible: false
-      });
-    }
-    const prevMap = new Map(
-      prevCollaborators.map((c) => [c.clientId, c])
-    );
-    const newMap = new Map(
-      activeCollaborators.map((c) => [c.clientId, c])
-    );
-    if (NOTIFICATIONS_CONFIG.userEntered) {
-      const me = activeCollaborators.find((c) => c.isMe);
-      for (const [clientId, collaborator] of newMap) {
-        if (prevMap.has(clientId) || collaborator.isMe) {
-          continue;
-        }
+  const shouldSubscribe = isCollaborationEnabled && showNotifications;
+  const effectivePostId = shouldSubscribe ? postId : null;
+  const effectivePostType = shouldSubscribe ? postType : null;
+  useOnCollaboratorJoin(
+    effectivePostId,
+    effectivePostType,
+    (0, import_element.useCallback)(
+      (collaborator, me) => {
         if (me && collaborator.collaboratorInfo.enteredAt < me.collaboratorInfo.enteredAt) {
-          continue;
+          return;
         }
-        notify(
-          `${NOTIFICATION_TYPE.COLLAB_USER_ENTERED}-${collaborator.collaboratorInfo.id}`,
+        void createNotice(
+          "info",
           (0, import_i18n.sprintf)(
             /* translators: %s: collaborator display name */
             (0, import_i18n.__)("%s has joined the post."),
             collaborator.collaboratorInfo.name
-          )
+          ),
+          {
+            id: `${NOTIFICATION_TYPE.COLLAB_USER_ENTERED}-${collaborator.collaboratorInfo.id}`,
+            type: "snackbar",
+            isDismissible: false
+          }
         );
-      }
-    }
-    if (NOTIFICATIONS_CONFIG.userExited) {
-      for (const [clientId, prevCollab] of prevMap) {
-        if (prevCollab.isMe || !prevCollab.isConnected) {
-          continue;
-        }
-        const newCollab = newMap.get(clientId);
-        if (newCollab?.isConnected) {
-          continue;
-        }
-        notify(
-          `${NOTIFICATION_TYPE.COLLAB_USER_EXITED}-${prevCollab.collaboratorInfo.id}`,
+      },
+      [createNotice]
+    )
+  );
+  useOnCollaboratorLeave(
+    effectivePostId,
+    effectivePostType,
+    (0, import_element.useCallback)(
+      (collaborator) => {
+        void createNotice(
+          "info",
           (0, import_i18n.sprintf)(
             /* translators: %s: collaborator display name */
             (0, import_i18n.__)("%s has left the post."),
-            prevCollab.collaboratorInfo.name
-          )
+            collaborator.collaboratorInfo.name
+          ),
+          {
+            id: `${NOTIFICATION_TYPE.COLLAB_USER_EXITED}-${collaborator.collaboratorInfo.id}`,
+            type: "snackbar",
+            isDismissible: false
+          }
         );
-      }
-    }
-  }, [
-    activeCollaborators,
-    prevCollaborators,
-    isCollaborationEnabled,
-    createNotice
-  ]);
-  (0, import_element.useEffect)(() => {
-    if (!isCollaborationEnabled || !NOTIFICATIONS_CONFIG.postUpdated || !lastPostSave || !postStatus) {
-      return;
-    }
-    if (prevPostSave && lastPostSave.savedAt === prevPostSave.savedAt) {
-      return;
-    }
-    const saver = activeCollaborators.find(
-      (c) => c.clientId === lastPostSave.savedByClientId && !c.isMe
-    );
-    if (!saver) {
-      return;
-    }
-    const effectiveStatus = lastPostSave.postStatus ?? postStatus ?? "draft";
-    const prevStatus = prevPostSave?.postStatus ?? postStatus;
-    const isFirstPublish = !(prevStatus && PUBLISHED_STATUSES.includes(prevStatus)) && PUBLISHED_STATUSES.includes(effectiveStatus);
-    const message = getPostUpdatedMessage(
-      saver.collaboratorInfo.name,
-      effectiveStatus,
-      isFirstPublish
-    );
-    void createNotice("info", message, {
-      id: `${NOTIFICATION_TYPE.COLLAB_POST_UPDATED}-${saver.collaboratorInfo.id}`,
-      type: "snackbar",
-      isDismissible: false
-    });
-  }, [
-    lastPostSave,
-    prevPostSave,
-    activeCollaborators,
-    isCollaborationEnabled,
-    postStatus,
-    createNotice
-  ]);
+      },
+      [createNotice]
+    )
+  );
+  useOnPostSave(
+    effectivePostId,
+    effectivePostType,
+    (0, import_element.useCallback)(
+      (saveEvent, saver, prevEvent) => {
+        if (!postStatus) {
+          return;
+        }
+        const effectiveStatus = saveEvent.postStatus ?? postStatus ?? "draft";
+        const prevStatus = prevEvent?.postStatus ?? postStatus;
+        const isFirstPublish = !(prevStatus && PUBLISHED_STATUSES.includes(prevStatus)) && PUBLISHED_STATUSES.includes(effectiveStatus);
+        const message = getPostUpdatedMessage(
+          saver.collaboratorInfo.name,
+          effectiveStatus,
+          isFirstPublish
+        );
+        void createNotice("info", message, {
+          id: `${NOTIFICATION_TYPE.COLLAB_POST_UPDATED}-${saver.collaboratorInfo.id}`,
+          type: "snackbar",
+          isDismissible: false
+        });
+      },
+      [createNotice, postStatus]
+    )
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/components/collaborators-presence/use-collaborator-notifications.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-presence/use-collaborator-notifications.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { usePrevious } from '@wordpress/compose';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n} from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\n\nconst { useActiveCollaborators, useLastPostSave } = unlock( privateApis );\n\n/**\n * Notice IDs for each notification type. Using stable IDs prevents duplicate\n * notices if the same event is processed more than once.\n */\nconst NOTIFICATION_TYPE = {\n\tCOLLAB_POST_UPDATED: 'collab-post-updated',\n\tCOLLAB_USER_ENTERED: 'collab-user-entered',\n\tCOLLAB_USER_EXITED: 'collab-user-exited',\n} as const;\n\nconst NOTIFICATIONS_CONFIG = {\n\tuserEntered: true,\n\tuserExited: true,\n\tpostUpdated: true,\n};\n\nconst PUBLISHED_STATUSES = [ 'publish', 'private', 'future' ];\n\n/**\n * Returns the snackbar message for a post updated notification.\n *\n * @param name           Display name of the collaborator who saved.\n * @param status         WordPress post status at the time of save.\n * @param isFirstPublish Whether this save transitioned the post to published.\n */\nfunction getPostUpdatedMessage(\n\tname: string,\n\tstatus: string,\n\tisFirstPublish: boolean\n): string {\n\tif ( isFirstPublish ) {\n\t\t/* translators: %s: collaborator display name */\n\t\treturn sprintf( __( 'Post published by %s.' ), name );\n\t}\n\tif ( PUBLISHED_STATUSES.includes( status ) ) {\n\t\t/* translators: %s: collaborator display name */\n\t\treturn sprintf( __( 'Post updated by %s.' ), name );\n\t}\n\t/* translators: %s: collaborator display name */\n\treturn sprintf( __( 'Draft saved by %s.' ), name );\n}\n\n/**\n * Hook that watches for collaborator join/leave events and remote save events,\n * dispatching snackbar notices accordingly.\n *\n * @param postId   The ID of the post being edited.\n * @param postType The post type of the post being edited.\n */\nexport function useCollaboratorNotifications(\n\tpostId: number | null,\n\tpostType: string | null\n): void {\n\tconst activeCollaborators = useActiveCollaborators(\n\t\tpostId,\n\t\tpostType\n\t) as PostEditorAwarenessState[];\n\n\tconst lastPostSave = useLastPostSave( postId, postType );\n\n\tconst { postStatus, isCollaborationEnabled } = useSelect( ( select ) => {\n\t\tconst editorSel = select( editorStore );\n\t\treturn {\n\t\t\tpostStatus: editorSel.getCurrentPostAttribute( 'status' ) as\n\t\t\t\t| string\n\t\t\t\t| undefined,\n\t\t\tisCollaborationEnabled:\n\t\t\t\teditorSel.isCollaborationEnabledForCurrentPost(),\n\t\t};\n\t}, [] );\n\n\tconst { createNotice } = useDispatch( noticesStore );\n\n\tconst prevCollaborators = usePrevious( activeCollaborators );\n\tconst prevPostSave = usePrevious( lastPostSave );\n\n\t/*\n\t * Detect collaborator joins and leaves.\n\t */\n\tuseEffect( () => {\n\t\tif ( ! isCollaborationEnabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * On first render usePrevious returns undefined. On subsequent renders\n\t\t * the list may still be empty while the store hydrates. In both cases,\n\t\t * skip to avoid spurious \"X joined\" toasts for users already present.\n\t\t */\n\t\tif ( ! prevCollaborators || prevCollaborators.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfunction notify( noticeId: string, message: string ) {\n\t\t\tvoid createNotice( 'info', message, {\n\t\t\t\tid: noticeId,\n\t\t\t\ttype: 'snackbar',\n\t\t\t\tisDismissible: false,\n\t\t\t} );\n\t\t}\n\n\t\tconst prevMap = new Map< number, PostEditorAwarenessState >(\n\t\t\tprevCollaborators.map( ( c ) => [ c.clientId, c ] )\n\t\t);\n\t\tconst newMap = new Map< number, PostEditorAwarenessState >(\n\t\t\tactiveCollaborators.map( ( c ) => [ c.clientId, c ] )\n\t\t);\n\n\t\t/*\n\t\t * Detect joins: new clientIds that weren't in the previous state.\n\t\t */\n\t\tif ( NOTIFICATIONS_CONFIG.userEntered ) {\n\t\t\tconst me = activeCollaborators.find( ( c ) => c.isMe );\n\n\t\t\tfor ( const [ clientId, collaborator ] of newMap ) {\n\t\t\t\tif ( prevMap.has( clientId ) || collaborator.isMe ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t/*\n\t\t\t\t * Skip collaborators who were present before the current user\n\t\t\t\t * joined. Their enteredAt is earlier than ours, meaning we're\n\t\t\t\t * the newcomer.\n\t\t\t\t */\n\t\t\t\tif (\n\t\t\t\t\tme &&\n\t\t\t\t\tcollaborator.collaboratorInfo.enteredAt <\n\t\t\t\t\t\tme.collaboratorInfo.enteredAt\n\t\t\t\t) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tnotify(\n\t\t\t\t\t`${ NOTIFICATION_TYPE.COLLAB_USER_ENTERED }-${ collaborator.collaboratorInfo.id }`,\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: collaborator display name */\n\t\t\t\t\t\t__( '%s has joined the post.' ),\n\t\t\t\t\t\tcollaborator.collaboratorInfo.name\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * Detect leaves by iterating the previous collaborator list. A leave\n\t\t * notification fires when a previously-connected collaborator either:\n\t\t *   - transitions to isConnected=false (greyed-out in the UI), or\n\t\t *   - disappears from the list entirely while still connected.\n\t\t * Already-disconnected collaborators that are later removed from the\n\t\t * list (after the 5 s delay) are silently ignored.\n\t\t */\n\t\tif ( NOTIFICATIONS_CONFIG.userExited ) {\n\t\t\tfor ( const [ clientId, prevCollab ] of prevMap ) {\n\t\t\t\tif ( prevCollab.isMe || ! prevCollab.isConnected ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tconst newCollab = newMap.get( clientId );\n\t\t\t\tif ( newCollab?.isConnected ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tnotify(\n\t\t\t\t\t`${ NOTIFICATION_TYPE.COLLAB_USER_EXITED }-${ prevCollab.collaboratorInfo.id }`,\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: collaborator display name */\n\t\t\t\t\t\t__( '%s has left the post.' ),\n\t\t\t\t\t\tprevCollab.collaboratorInfo.name\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}, [\n\t\tactiveCollaborators,\n\t\tprevCollaborators,\n\t\tisCollaborationEnabled,\n\t\tcreateNotice,\n\t] );\n\n\t/*\n\t * Detect remote save events via the CRDT state map. The savedByClientId\n\t * is a Y.Doc client ID which maps to a collaborator via clientId.\n\t */\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! isCollaborationEnabled ||\n\t\t\t! NOTIFICATIONS_CONFIG.postUpdated ||\n\t\t\t! lastPostSave ||\n\t\t\t! postStatus\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( prevPostSave && lastPostSave.savedAt === prevPostSave.savedAt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst saver = activeCollaborators.find(\n\t\t\t( c ) => c.clientId === lastPostSave.savedByClientId && ! c.isMe\n\t\t);\n\n\t\tif ( ! saver ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prefer the remote status from Y.Doc (accurate at save time) over\n\t\t// the local Redux value, which may not have synced yet.\n\t\tconst effectiveStatus =\n\t\t\tlastPostSave.postStatus ?? postStatus ?? 'draft';\n\n\t\t// prevPostSave is null on the first save this session, so fall back\n\t\t// to the Redux status (still pre-save when the notification fires).\n\t\tconst prevStatus = prevPostSave?.postStatus ?? postStatus;\n\t\tconst isFirstPublish =\n\t\t\t! ( prevStatus && PUBLISHED_STATUSES.includes( prevStatus ) ) &&\n\t\t\tPUBLISHED_STATUSES.includes( effectiveStatus );\n\n\t\tconst message = getPostUpdatedMessage(\n\t\t\tsaver.collaboratorInfo.name,\n\t\t\teffectiveStatus,\n\t\t\tisFirstPublish\n\t\t);\n\n\t\tvoid createNotice( 'info', message, {\n\t\t\tid: `${ NOTIFICATION_TYPE.COLLAB_POST_UPDATED }-${ saver.collaboratorInfo.id }`,\n\t\t\ttype: 'snackbar',\n\t\t\tisDismissible: false,\n\t\t} );\n\t}, [\n\t\tlastPostSave,\n\t\tprevPostSave,\n\t\tactiveCollaborators,\n\t\tisCollaborationEnabled,\n\t\tpostStatus,\n\t\tcreateNotice,\n\t] );\n}\n"],
-  "mappings": "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",
-  "names": ["editorStore", "noticesStore"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport {\n\tprivateApis,\n\ttype PostEditorAwarenessState,\n\ttype PostSaveEvent,\n} from '@wordpress/core-data';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as editorStore } from '../../store';\n\nconst { useOnCollaboratorJoin, useOnCollaboratorLeave, useOnPostSave } =\n\tunlock( privateApis );\n\n/**\n * Notice IDs for each notification type. Using stable IDs prevents duplicate\n * notices if the same event is processed more than once.\n */\nconst NOTIFICATION_TYPE = {\n\tCOLLAB_POST_UPDATED: 'collab-post-updated',\n\tCOLLAB_USER_ENTERED: 'collab-user-entered',\n\tCOLLAB_USER_EXITED: 'collab-user-exited',\n} as const;\n\nconst PUBLISHED_STATUSES = [ 'publish', 'private', 'future' ];\n\n/**\n * Returns the snackbar message for a post updated notification.\n *\n * @param name           Display name of the collaborator who saved.\n * @param status         WordPress post status at the time of save.\n * @param isFirstPublish Whether this save transitioned the post to published.\n */\nfunction getPostUpdatedMessage(\n\tname: string,\n\tstatus: string,\n\tisFirstPublish: boolean\n): string {\n\tif ( isFirstPublish ) {\n\t\t/* translators: %s: collaborator display name */\n\t\treturn sprintf( __( 'Post published by %s.' ), name );\n\t}\n\tif ( PUBLISHED_STATUSES.includes( status ) ) {\n\t\t/* translators: %s: collaborator display name */\n\t\treturn sprintf( __( 'Post updated by %s.' ), name );\n\t}\n\t/* translators: %s: collaborator display name */\n\treturn sprintf( __( 'Draft saved by %s.' ), name );\n}\n\n/**\n * Hook that watches for collaborator join/leave events and remote save events,\n * dispatching snackbar notices accordingly.\n *\n * @param postId   The ID of the post being edited.\n * @param postType The post type of the post being edited.\n */\nexport function useCollaboratorNotifications(\n\tpostId: number | null,\n\tpostType: string | null\n): void {\n\tconst { postStatus, isCollaborationEnabled, showNotifications } = useSelect(\n\t\t( select ) => {\n\t\t\tconst editorSel = select( editorStore );\n\t\t\treturn {\n\t\t\t\tpostStatus: editorSel.getCurrentPostAttribute( 'status' ) as\n\t\t\t\t\t| string\n\t\t\t\t\t| undefined,\n\t\t\t\tisCollaborationEnabled:\n\t\t\t\t\teditorSel.isCollaborationEnabledForCurrentPost(),\n\t\t\t\tshowNotifications:\n\t\t\t\t\tselect( preferencesStore ).get(\n\t\t\t\t\t\t'core',\n\t\t\t\t\t\t'showCollaborationNotifications'\n\t\t\t\t\t) ?? true,\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst { createNotice } = useDispatch( noticesStore );\n\n\t// Pass null when collaboration is disabled or notifications are\n\t// turned off to prevent the hooks from subscribing to awareness state.\n\tconst shouldSubscribe = isCollaborationEnabled && showNotifications;\n\tconst effectivePostId = shouldSubscribe ? postId : null;\n\tconst effectivePostType = shouldSubscribe ? postType : null;\n\n\tuseOnCollaboratorJoin(\n\t\teffectivePostId,\n\t\teffectivePostType,\n\t\tuseCallback(\n\t\t\t(\n\t\t\t\tcollaborator: PostEditorAwarenessState,\n\t\t\t\tme?: PostEditorAwarenessState\n\t\t\t) => {\n\t\t\t\t/*\n\t\t\t\t * Skip collaborators who were present before the current user\n\t\t\t\t * joined. Their enteredAt is earlier than ours, meaning we're\n\t\t\t\t * the newcomer.\n\t\t\t\t */\n\t\t\t\tif (\n\t\t\t\t\tme &&\n\t\t\t\t\tcollaborator.collaboratorInfo.enteredAt <\n\t\t\t\t\t\tme.collaboratorInfo.enteredAt\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tvoid createNotice(\n\t\t\t\t\t'info',\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: collaborator display name */\n\t\t\t\t\t\t__( '%s has joined the post.' ),\n\t\t\t\t\t\tcollaborator.collaboratorInfo.name\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tid: `${ NOTIFICATION_TYPE.COLLAB_USER_ENTERED }-${ collaborator.collaboratorInfo.id }`,\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: false,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t},\n\t\t\t[ createNotice ]\n\t\t)\n\t);\n\n\tuseOnCollaboratorLeave(\n\t\teffectivePostId,\n\t\teffectivePostType,\n\t\tuseCallback(\n\t\t\t( collaborator: PostEditorAwarenessState ) => {\n\t\t\t\tvoid createNotice(\n\t\t\t\t\t'info',\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: collaborator display name */\n\t\t\t\t\t\t__( '%s has left the post.' ),\n\t\t\t\t\t\tcollaborator.collaboratorInfo.name\n\t\t\t\t\t),\n\t\t\t\t\t{\n\t\t\t\t\t\tid: `${ NOTIFICATION_TYPE.COLLAB_USER_EXITED }-${ collaborator.collaboratorInfo.id }`,\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: false,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t},\n\t\t\t[ createNotice ]\n\t\t)\n\t);\n\n\tuseOnPostSave(\n\t\teffectivePostId,\n\t\teffectivePostType,\n\t\tuseCallback(\n\t\t\t(\n\t\t\t\tsaveEvent: PostSaveEvent,\n\t\t\t\tsaver: PostEditorAwarenessState,\n\t\t\t\tprevEvent: PostSaveEvent | null\n\t\t\t) => {\n\t\t\t\tif ( ! postStatus ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prefer the remote status from Y.Doc (accurate at save time)\n\t\t\t\t// over the local Redux value, which may not have synced yet.\n\t\t\t\tconst effectiveStatus =\n\t\t\t\t\tsaveEvent.postStatus ?? postStatus ?? 'draft';\n\n\t\t\t\t// Use the previous save event's status when available for\n\t\t\t\t// accurate first-publish detection across rapid saves.\n\t\t\t\tconst prevStatus = prevEvent?.postStatus ?? postStatus;\n\t\t\t\tconst isFirstPublish =\n\t\t\t\t\t! (\n\t\t\t\t\t\tprevStatus && PUBLISHED_STATUSES.includes( prevStatus )\n\t\t\t\t\t) && PUBLISHED_STATUSES.includes( effectiveStatus );\n\n\t\t\t\tconst message = getPostUpdatedMessage(\n\t\t\t\t\tsaver.collaboratorInfo.name,\n\t\t\t\t\teffectiveStatus,\n\t\t\t\t\tisFirstPublish\n\t\t\t\t);\n\n\t\t\t\tvoid createNotice( 'info', message, {\n\t\t\t\t\tid: `${ NOTIFICATION_TYPE.COLLAB_POST_UPDATED }-${ saver.collaboratorInfo.id }`,\n\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\tisDismissible: false,\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[ createNotice, postStatus ]\n\t\t)\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["editorStore", "preferencesStore", "noticesStore"]
 }

package/build/components/editor-interface/index.cjs CHANGED Viewed

@@ -103,7 +103,8 @@ function EditorInterface({
     postTypeLabel,
     stylesPath,
     showStylebook,
-    isRevisionsMode
+    isRevisionsMode,
+    showDiff
   } = (0, import_data.useSelect)((select) => {
     const { get } = select(import_preferences.store);
     const {
@@ -115,7 +116,8 @@ function EditorInterface({
     const {
       getStylesPath,
       getShowStylebook,
-      isRevisionsMode: _isRevisionsMode
+      isRevisionsMode: _isRevisionsMode,
+      isShowingRevisionDiff
     } = (0, import_lock_unlock.unlock)(select(import_store.store));
     const editorSettings = getEditorSettings();
     let _mode = select(import_store.store).getEditorMode();
@@ -138,9 +140,11 @@ function EditorInterface({
       stylesPath: getStylesPath(),
       showStylebook: getShowStylebook(),
       isAttachment: getCurrentPostType() === "attachment" && window?.__experimentalMediaEditor,
-      isRevisionsMode: _isRevisionsMode()
+      isRevisionsMode: _isRevisionsMode(),
+      showDiff: isShowingRevisionDiff()
     };
   }, []);
+  const { setShowRevisionDiff } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
   (0, import_use_collaborator_notifications.useCollaboratorNotifications)(postId, postType);
   const isLargeViewport = (0, import_compose.useViewportMatch)("medium");
   const secondarySidebarLabel = isListViewOpened ? (0, import_i18n.__)("Document Overview") : (0, import_i18n.__)("Block Library");
@@ -157,7 +161,6 @@ function EditorInterface({
     },
     [entitiesSavedStatesCallback]
   );
-  const [showDiff, setShowDiff] = (0, import_element.useState)(true);
   if (isRevisionsMode) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_interface.InterfaceSkeleton,
@@ -168,10 +171,10 @@ function EditorInterface({
           import_post_revisions_preview.RevisionsHeader,
           {
             showDiff,
-            onToggleDiff: () => setShowDiff(!showDiff)
+            onToggleDiff: () => setShowRevisionDiff(!showDiff)
           }
         ),
-        content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_post_revisions_preview.RevisionsCanvas, { showDiff }),
+        content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_post_revisions_preview.RevisionsCanvas, {}),
         sidebar: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_interface.ComplementaryArea.Slot, { scope: "core" })
       }
     );