@wordpress/editor 14.40.2-next.v.202602271551.0 → 14.40.2

package/build-module/components/collaborators-presence/index.mjs

@@ -1,23 +1,23 @@
 // packages/editor/src/components/collaborators-presence/index.tsx
-import {
-  Button,
-  privateApis as componentsPrivateApis
-} from "@wordpress/components";
-import { useState } from "@wordpress/element";
+import { Button } from "@wordpress/components";
+import { useMemo, useState } from "@wordpress/element";
 import {
   privateApis
 } from "@wordpress/core-data";
 import { __, sprintf } from "@wordpress/i18n";
+import Avatar from "./avatar/index.mjs";
+import AvatarGroup from "./avatar-group/index.mjs";
 import { CollaboratorsList } from "./list.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 import { getAvatarUrl } from "../collaborators-overlay/get-avatar-url.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
+import { createCursorRegistry } from "../collaborators-overlay/cursor-registry.mjs";
 
 // packages/editor/src/components/collaborators-presence/styles/collaborators-presence.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='924e260217']")) {
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='eee1778bc0']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "924e260217");
-  style.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: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:hover{background:#0000;color:#2f2f2f}.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{background:#ddd;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}"));
+  style.setAttribute("data-wp-hash", "eee1778bc0");
+  style.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}"));
   document.head.appendChild(style);
 }
 
@@ -25,7 +25,6 @@ if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !docum
 import { CollaboratorsOverlay } from "../collaborators-overlay/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { useActiveCollaborators } = unlock(privateApis);
-var { Avatar, AvatarGroup } = unlock(componentsPrivateApis);
 function CollaboratorsPresence({
   postId,
   postType
@@ -35,8 +34,20 @@ function CollaboratorsPresence({
     postType
   );
   const otherActiveCollaborators = activeCollaborators.filter(
-    (collaborator) => !collaborator.isMe
+    (c) => !c.isMe
   );
+  const collaboratorsForList = useMemo(() => {
+    return [...activeCollaborators].sort((a, b) => {
+      if (a.isMe && !b.isMe) {
+        return -1;
+      }
+      if (!a.isMe && b.isMe) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [activeCollaborators]);
+  const [cursorRegistry] = useState(createCursorRegistry);
   const [isPopoverVisible, setIsPopoverVisible] = useState(false);
   const [popoverAnchor, setPopoverAnchor] = useState(
     null
@@ -44,6 +55,7 @@ function CollaboratorsPresence({
   if (otherActiveCollaborators.length === 0) {
     return null;
   }
+  const me = activeCollaborators.find((c) => c.isMe);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "editor-collaborators-presence", children: [
       /* @__PURE__ */ jsx(
@@ -57,36 +69,58 @@ function CollaboratorsPresence({
           "aria-label": sprintf(
             // translators: %d: number of online collaborators.
             __("Collaborators list, %d online"),
-            otherActiveCollaborators.length
+            collaboratorsForList.length
           ),
-          children: /* @__PURE__ */ jsx(AvatarGroup, { max: 3, children: otherActiveCollaborators.map(
-            (collaboratorState) => /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs(AvatarGroup, { max: 4, children: [
+            me && /* @__PURE__ */ jsx(
               Avatar,
               {
                 src: getAvatarUrl(
-                  collaboratorState.collaboratorInfo.avatar_urls
-                ),
-                name: collaboratorState.collaboratorInfo.name,
-                borderColor: 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__ */ jsx(
+                Avatar,
+                {
+                  src: getAvatarUrl(
+                    collaboratorState.collaboratorInfo.avatar_urls
+                  ),
+                  name: collaboratorState.collaboratorInfo.name,
+                  borderColor: getAvatarBorderColor(
+                    collaboratorState.collaboratorInfo.id
+                  ),
+                  size: "small"
+                },
+                collaboratorState.clientId
+              )
             )
-          ) })
+          ] })
         }
       ),
       isPopoverVisible && /* @__PURE__ */ jsx(
         CollaboratorsList,
         {
-          activeCollaborators: otherActiveCollaborators,
+          activeCollaborators: collaboratorsForList,
           popoverAnchor,
-          setIsPopoverVisible
+          setIsPopoverVisible,
+          cursorRegistry
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(CollaboratorsOverlay, { postId, postType })
+    /* @__PURE__ */ jsx(
+      CollaboratorsOverlay,
+      {
+        postId,
+        postType,
+        cursorRegistry
+      }
+    )
   ] });
 }
 export {

package/build-module/components/collaborators-presence/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-presence/index.tsx", "../../../src/components/collaborators-presence/styles/collaborators-presence.scss"],
-  "sourcesContent": ["import {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} 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 { 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 );\nconst { Avatar, AvatarGroup } = unlock( componentsPrivateApis );\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={ 3 }>\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='924e260217']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"924e260217\");\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: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:hover{background:#0000;color:#2f2f2f}.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{background:#ddd;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,EACC;AAAA,EACA,eAAe;AAAA,OACT;AACP,SAAS,gBAAgB;AACzB;AAAA,EACC;AAAA,OAEM;AACP,SAAS,IAAI,eAAe;AAE5B,SAAS,yBAAyB;AAClC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACdrC,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,2iCAA2iC,CAAC;AACtlC,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADYA,SAAS,4BAA4B;AA6CnC,mBAiBM,KAhBL,YADD;AA3CF,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;AACvD,IAAM,EAAE,QAAQ,YAAY,IAAI,OAAQ,qBAAsB;AAevD,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,IAAI,SAAU,KAAM;AAClE,QAAM,CAAE,eAAe,gBAAiB,IAAI;AAAA,IAC3C;AAAA,EACD;AAKA,MAAK,yBAAyB,WAAW,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,SACC,iCACC;AAAA,yBAAC,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,cAAa;AAAA;AAAA,YAEZ,GAAI,+BAAgC;AAAA,YACpC,yBAAyB;AAAA,UAC1B;AAAA,UAEA,8BAAC,eAAY,KAAM,GAChB,mCAAyB;AAAA,YAC1B,CAAE,sBACD;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAM;AAAA,kBACL,kBAAkB,iBAChB;AAAA,gBACH;AAAA,gBACA,MACC,kBAAkB,iBAAiB;AAAA,gBAEpC,aAAc;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,oBAAC,wBAAqB,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';\nimport { createCursorRegistry } from '../collaborators-overlay/cursor-registry';\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 [ cursorRegistry ] = useState( createCursorRegistry );\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\tcursorRegistry={ cursorRegistry }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t\t<CollaboratorsOverlay\n\t\t\t\tpostId={ postId }\n\t\t\t\tpostType={ postType }\n\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t/>\n\t\t</>\n\t);\n}\n", "if (typeof document !== 'undefined' && !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": "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",
   "names": []
 }

package/build-module/components/collaborators-presence/list.mjs

@@ -1,31 +1,39 @@
 // packages/editor/src/components/collaborators-presence/list.tsx
 import { __ } from "@wordpress/i18n";
-import {
-  Popover,
-  Button,
-  privateApis as componentsPrivateApis
-} from "@wordpress/components";
-import { close } from "@wordpress/icons";
-import { unlock } from "../../lock-unlock.mjs";
+import { Popover, Button } from "@wordpress/components";
+import { closeSmall } from "@wordpress/icons";
+import { speak } from "@wordpress/a11y";
+import Avatar from "./avatar/index.mjs";
 import { getAvatarUrl } from "../collaborators-overlay/get-avatar-url.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
 
 // packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='fa8f32cb5e']")) {
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='9537a5e604']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "fa8f32cb5e");
-  style.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:0 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{font-size:13px;font-weight:499;line-height:20px;padding:14px 0;text-transform:uppercase}.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:8px 0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:24px;padding:0;width:24px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding:0 10px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;border-radius:12px;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:6px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:#0000000d}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:#00000014}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#007cba);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;font-size:12px;line-height:16px}"));
+  style.setAttribute("data-wp-hash", "9537a5e604");
+  style.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}"));
   document.head.appendChild(style);
 }
 
 // packages/editor/src/components/collaborators-presence/list.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var { Avatar } = unlock(componentsPrivateApis);
 function CollaboratorsList({
   activeCollaborators,
   popoverAnchor,
-  setIsPopoverVisible
+  setIsPopoverVisible,
+  cursorRegistry
 }) {
+  const handleCollaboratorClick = (clientId) => {
+    const success = cursorRegistry.scrollToCursor(clientId, {
+      behavior: "smooth",
+      block: "center",
+      highlightDuration: 2e3
+    });
+    if (success) {
+      speak(__("Scrolled to cursor"), "polite");
+      setIsPopoverVisible(false);
+    }
+  };
   return /* @__PURE__ */ jsx(
     Popover,
     {
@@ -38,49 +46,49 @@ function CollaboratorsList({
         /* @__PURE__ */ jsxs("div", { className: "editor-collaborators-presence__list-header", children: [
           /* @__PURE__ */ jsxs("div", { className: "editor-collaborators-presence__list-header-title", children: [
             __("Collaborators"),
-            /* @__PURE__ */ jsxs("span", { children: [
-              " ",
-              activeCollaborators.length,
-              " "
-            ] })
+            /* @__PURE__ */ jsx("span", { children: activeCollaborators.length })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-header-action", children: /* @__PURE__ */ jsx(
             Button,
             {
               __next40pxDefaultSize: true,
-              icon: close,
-              iconSize: 16,
+              icon: closeSmall,
+              iconSize: 24,
               label: __("Close Collaborators List"),
               onClick: () => setIsPopoverVisible(false)
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-items", children: activeCollaborators.map((collaboratorState) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: "editor-collaborators-presence__list-item",
-            disabled: true,
-            style: {
-              opacity: collaboratorState.isConnected ? 1 : 0.5
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                Avatar,
-                {
-                  src: getAvatarUrl(
-                    collaboratorState.collaboratorInfo.avatar_urls
-                  ),
-                  name: collaboratorState.collaboratorInfo.name,
-                  borderColor: getAvatarBorderColor(
-                    collaboratorState.collaboratorInfo.id
-                  )
-                }
+        /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-items", children: activeCollaborators.map((collaboratorState) => {
+          const isCurrentUser = collaboratorState.isMe;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "editor-collaborators-presence__list-item",
+              disabled: isCurrentUser,
+              onClick: () => handleCollaboratorClick(
+                collaboratorState.clientId
               ),
-              /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-item-info", children: /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-item-name", children: collaboratorState.collaboratorInfo.name }) })
-            ]
-          },
-          collaboratorState.clientId
-        )) })
+              children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    src: getAvatarUrl(
+                      collaboratorState.collaboratorInfo.avatar_urls
+                    ),
+                    name: collaboratorState.collaboratorInfo.name,
+                    borderColor: isCurrentUser ? "var(--wp-admin-theme-color)" : getAvatarBorderColor(
+                      collaboratorState.collaboratorInfo.id
+                    ),
+                    dimmed: !collaboratorState.isConnected
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-item-info", children: /* @__PURE__ */ jsx("div", { className: "editor-collaborators-presence__list-item-name", children: isCurrentUser ? __("You") : collaboratorState.collaboratorInfo.name }) })
+              ]
+            },
+            collaboratorState.clientId
+          );
+        }) })
       ] })
     }
   );

package/build-module/components/collaborators-presence/list.mjs.map

@@ -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 {\n\tPopover,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { close } from '@wordpress/icons';\nimport { type PostEditorAwarenessState } from '@wordpress/core-data';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nimport './styles/collaborators-list.scss';\n\nconst { Avatar } = unlock( componentsPrivateApis );\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={ close }\n\t\t\t\t\t\t\ticonSize={ 16 }\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\tstyle={ {\n\t\t\t\t\t\t\t\topacity: collaboratorState.isConnected\n\t\t\t\t\t\t\t\t\t? 1\n\t\t\t\t\t\t\t\t\t: 0.5,\n\t\t\t\t\t\t\t} }\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/>\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='fa8f32cb5e']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"fa8f32cb5e\");\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:0 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-title{font-size:13px;font-weight:499;line-height:20px;padding:14px 0;text-transform:uppercase}.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:8px 0}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-header-action button{color:#1e1e1e;height:24px;padding:0;width:24px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-items{display:flex;flex-direction:column;padding:0 10px 16px}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item{all:unset;align-items:center;border-radius:12px;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;padding:6px;transition:background-color .2s ease;width:100%}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:hover:not(:disabled){background-color:#0000000d}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:active:not(:disabled){background-color:#00000014}.editor-collaborators-presence__list.components-popover .editor-collaborators-presence__list-item:focus-visible{outline:2px solid var(--wp-admin-theme-color,#007cba);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;font-size:12px;line-height:16px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAAA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,OACT;AACP,SAAS,aAAa;AAGtB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACXrC,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,8yEAA8yE,CAAC;AACz1E,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD2CM,SAGA,KAHA;AAjCN,IAAM,EAAE,OAAO,IAAI,OAAQ,qBAAsB;AAgB1C,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,+BAAC,SAAI,WAAU,+CACd;AAAA,6BAAC,SAAI,WAAU,8CACd;AAAA,+BAAC,SAAI,WAAU,oDACZ;AAAA,eAAI,eAAgB;AAAA,YACtB,qBAAC,UAAK;AAAA;AAAA,cAAG,oBAAoB;AAAA,cAAQ;AAAA,eAAC;AAAA,aACvC;AAAA,UACA,oBAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,OAAQ,GAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,oBAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAC5B;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YACV,UAAQ;AAAA,YACR,OAAQ;AAAA,cACP,SAAS,kBAAkB,cACxB,IACA;AAAA,YACJ;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,KAAM;AAAA,oBACL,kBAAkB,iBAChB;AAAA,kBACH;AAAA,kBACA,MAAO,kBAAkB,iBAAiB;AAAA,kBAC1C,aAAc;AAAA,oBACb,kBAAkB,iBAAiB;AAAA,kBACpC;AAAA;AAAA,cACD;AAAA,cACA,oBAAC,SAAI,WAAU,iDACd,8BAAC,SAAI,WAAU,iDACZ,4BAAkB,iBAAiB,MACtC,GACD;AAAA;AAAA;AAAA,UAvBM,kBAAkB;AAAA,QAwBzB,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';\nimport { speak } from '@wordpress/a11y';\n\nimport Avatar from './avatar';\nimport { getAvatarUrl } from '../collaborators-overlay/get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { type CursorRegistry } from '../collaborators-overlay/cursor-registry';\n\nimport './styles/collaborators-list.scss';\n\ninterface CollaboratorsListProps {\n\tactiveCollaborators: PostEditorAwarenessState[];\n\tpopoverAnchor?: HTMLElement | null;\n\tsetIsPopoverVisible: ( isVisible: boolean ) => void;\n\tcursorRegistry: CursorRegistry;\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 * @param props.cursorRegistry      Shared registry for scroll-to-cursor support\n */\nexport function CollaboratorsList( {\n\tactiveCollaborators,\n\tpopoverAnchor,\n\tsetIsPopoverVisible,\n\tcursorRegistry,\n}: CollaboratorsListProps ) {\n\tconst handleCollaboratorClick = ( clientId: number ) => {\n\t\tconst success = cursorRegistry.scrollToCursor( clientId, {\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'center',\n\t\t\thighlightDuration: 2000,\n\t\t} );\n\n\t\tif ( success ) {\n\t\t\tspeak( __( 'Scrolled to cursor' ), 'polite' );\n\n\t\t\tsetIsPopoverVisible( false );\n\t\t}\n\t};\n\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={ isCurrentUser }\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\thandleCollaboratorClick(\n\t\t\t\t\t\t\t\t\t\tcollaboratorState.clientId\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\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' && !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,SAAS,UAAU;AACnB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;ACRrC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,yhFAAyhF,CAAC;AACpkF,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuDK,SAEC,KAFD;AA9BE,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,0BAA0B,CAAE,aAAsB;AACvD,UAAM,UAAU,eAAe,eAAgB,UAAU;AAAA,MACxD,UAAU;AAAA,MACV,OAAO;AAAA,MACP,mBAAmB;AAAA,IACpB,CAAE;AAEF,QAAK,SAAU;AACd,YAAO,GAAI,oBAAqB,GAAG,QAAS;AAE5C,0BAAqB,KAAM;AAAA,IAC5B;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS;AAAA,MACT,WAAU;AAAA,MACV,QAAS;AAAA,MACT,WAAU;AAAA,MACV,SAAU,MAAM,oBAAqB,KAAM;AAAA,MAE3C,+BAAC,SAAI,WAAU,+CACd;AAAA,6BAAC,SAAI,WAAU,8CACd;AAAA,+BAAC,SAAI,WAAU,oDACZ;AAAA,eAAI,eAAgB;AAAA,YACtB,oBAAC,UAAO,8BAAoB,QAAQ;AAAA,aACrC;AAAA,UACA,oBAAC,SAAI,WAAU,qDACd;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,MAAO;AAAA,cACP,UAAW;AAAA,cACX,OAAQ,GAAI,0BAA2B;AAAA,cACvC,SAAU,MAAM,oBAAqB,KAAM;AAAA;AAAA,UAC5C,GACD;AAAA,WACD;AAAA,QACA,oBAAC,SAAI,WAAU,6CACZ,8BAAoB,IAAK,CAAE,sBAAuB;AACnD,gBAAM,gBAAgB,kBAAkB;AACxC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,WAAU;AAAA,cACV,UAAW;AAAA,cACX,SAAU,MACT;AAAA,gBACC,kBAAkB;AAAA,cACnB;AAAA,cAGD;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACA,KAAM;AAAA,sBACL,kBAAkB,iBAChB;AAAA,oBACH;AAAA,oBACA,MACC,kBAAkB,iBAAiB;AAAA,oBAEpC,aACC,gBACG,gCACA;AAAA,sBACA,kBACE,iBAAiB;AAAA,oBACnB;AAAA,oBAEJ,QAAS,CAAE,kBAAkB;AAAA;AAAA,gBAC9B;AAAA,gBACA,oBAAC,SAAI,WAAU,iDACd,8BAAC,SAAI,WAAU,iDACZ,0BACC,GAAI,KAAM,IACV,kBAAkB,iBACjB,MACL,GACD;AAAA;AAAA;AAAA,YAlCM,kBAAkB;AAAA,UAmCzB;AAAA,QAEF,CAAE,GACH;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/collaborators-presence/use-collaborator-notifications.mjs

@@ -0,0 +1,126 @@
+// packages/editor/src/components/collaborators-presence/use-collaborator-notifications.ts
+import { useDispatch, useSelect } from "@wordpress/data";
+import { useCallback } from "@wordpress/element";
+import { __, sprintf } from "@wordpress/i18n";
+import { store as noticesStore } from "@wordpress/notices";
+import {
+  privateApis
+} from "@wordpress/core-data";
+import { store as preferencesStore } from "@wordpress/preferences";
+import { unlock } from "../../lock-unlock.mjs";
+import { store as editorStore } from "../../store/index.mjs";
+var { useOnCollaboratorJoin, useOnCollaboratorLeave, useOnPostSave } = unlock(privateApis);
+var NOTIFICATION_TYPE = {
+  COLLAB_POST_UPDATED: "collab-post-updated",
+  COLLAB_USER_ENTERED: "collab-user-entered",
+  COLLAB_USER_EXITED: "collab-user-exited"
+};
+var PUBLISHED_STATUSES = ["publish", "private", "future"];
+function getPostUpdatedMessage(name, status, isFirstPublish) {
+  if (isFirstPublish) {
+    return sprintf(__("Post published by %s."), name);
+  }
+  if (PUBLISHED_STATUSES.includes(status)) {
+    return sprintf(__("Post updated by %s."), name);
+  }
+  return sprintf(__("Draft saved by %s."), name);
+}
+function useCollaboratorNotifications(postId, postType) {
+  const { postStatus, isCollaborationEnabled, showNotifications } = useSelect(
+    (select) => {
+      const {
+        getCurrentPostAttribute,
+        isCollaborationEnabledForCurrentPost
+      } = unlock(select(editorStore));
+      return {
+        postStatus: getCurrentPostAttribute("status"),
+        isCollaborationEnabled: isCollaborationEnabledForCurrentPost(),
+        showNotifications: select(preferencesStore).get(
+          "core",
+          "showCollaborationNotifications"
+        ) ?? true
+      };
+    },
+    []
+  );
+  const { createNotice } = useDispatch(noticesStore);
+  const shouldSubscribe = isCollaborationEnabled && showNotifications;
+  const effectivePostId = shouldSubscribe ? postId : null;
+  const effectivePostType = shouldSubscribe ? postType : null;
+  useOnCollaboratorJoin(
+    effectivePostId,
+    effectivePostType,
+    useCallback(
+      (collaborator, me) => {
+        if (me && collaborator.collaboratorInfo.enteredAt < me.collaboratorInfo.enteredAt) {
+          return;
+        }
+        void createNotice(
+          "info",
+          sprintf(
+            /* translators: %s: collaborator display name */
+            __("%s has joined the post."),
+            collaborator.collaboratorInfo.name
+          ),
+          {
+            id: `${NOTIFICATION_TYPE.COLLAB_USER_ENTERED}-${collaborator.collaboratorInfo.id}`,
+            type: "snackbar",
+            isDismissible: false
+          }
+        );
+      },
+      [createNotice]
+    )
+  );
+  useOnCollaboratorLeave(
+    effectivePostId,
+    effectivePostType,
+    useCallback(
+      (collaborator) => {
+        void createNotice(
+          "info",
+          sprintf(
+            /* translators: %s: collaborator display name */
+            __("%s has left the post."),
+            collaborator.collaboratorInfo.name
+          ),
+          {
+            id: `${NOTIFICATION_TYPE.COLLAB_USER_EXITED}-${collaborator.collaboratorInfo.id}`,
+            type: "snackbar",
+            isDismissible: false
+          }
+        );
+      },
+      [createNotice]
+    )
+  );
+  useOnPostSave(
+    effectivePostId,
+    effectivePostType,
+    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]
+    )
+  );
+}
+export {
+  useCollaboratorNotifications
+};
+//# sourceMappingURL=use-collaborator-notifications.mjs.map

package/build-module/components/collaborators-presence/use-collaborator-notifications.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-presence/use-collaborator-notifications.ts"],
+  "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 {\n\t\t\t\tgetCurrentPostAttribute,\n\t\t\t\tisCollaborationEnabledForCurrentPost,\n\t\t\t} = unlock( select( editorStore ) );\n\t\t\treturn {\n\t\t\t\tpostStatus: getCurrentPostAttribute( 'status' ) as\n\t\t\t\t\t| string\n\t\t\t\t\t| undefined,\n\t\t\t\tisCollaborationEnabled: 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": []
+}

package/build-module/components/editor-interface/index.mjs

@@ -1,7 +1,7 @@
 // packages/editor/src/components/editor-interface/index.js
 import clsx from "clsx";
 import { InterfaceSkeleton, ComplementaryArea } from "@wordpress/interface";
-import { useSelect } from "@wordpress/data";
+import { useSelect, useDispatch } from "@wordpress/data";
 import { __ } from "@wordpress/i18n";
 import { store as preferencesStore } from "@wordpress/preferences";
 import { BlockBreadcrumb, BlockToolbar } from "@wordpress/block-editor";
@@ -17,6 +17,7 @@ import InserterSidebar from "../inserter-sidebar/index.mjs";
 import ListViewSidebar from "../list-view-sidebar/index.mjs";
 import { RevisionsHeader, RevisionsCanvas } from "../post-revisions-preview/index.mjs";
 import { CollaboratorsOverlay } from "../collaborators-overlay/index.mjs";
+import { useCollaboratorNotifications } from "../collaborators-presence/use-collaborator-notifications.mjs";
 import SavePublishPanels from "../save-publish-panels/index.mjs";
 import TextEditor from "../text-editor/index.mjs";
 import VisualEditor from "../visual-editor/index.mjs";
@@ -68,7 +69,8 @@ function EditorInterface({
     postTypeLabel,
     stylesPath,
     showStylebook,
-    isRevisionsMode
+    isRevisionsMode,
+    showDiff
   } = useSelect((select) => {
     const { get } = select(preferencesStore);
     const {
@@ -80,7 +82,8 @@ function EditorInterface({
     const {
       getStylesPath,
       getShowStylebook,
-      isRevisionsMode: _isRevisionsMode
+      isRevisionsMode: _isRevisionsMode,
+      isShowingRevisionDiff
     } = unlock(select(editorStore));
     const editorSettings = getEditorSettings();
     let _mode = select(editorStore).getEditorMode();
@@ -103,9 +106,12 @@ function EditorInterface({
       stylesPath: getStylesPath(),
       showStylebook: getShowStylebook(),
       isAttachment: getCurrentPostType() === "attachment" && window?.__experimentalMediaEditor,
-      isRevisionsMode: _isRevisionsMode()
+      isRevisionsMode: _isRevisionsMode(),
+      showDiff: isShowingRevisionDiff()
     };
   }, []);
+  const { setShowRevisionDiff } = unlock(useDispatch(editorStore));
+  useCollaboratorNotifications(postId, postType);
   const isLargeViewport = useViewportMatch("medium");
   const secondarySidebarLabel = isListViewOpened ? __("Document Overview") : __("Block Library");
   const shouldShowMediaEditor = !!isAttachment;
@@ -121,7 +127,6 @@ function EditorInterface({
     },
     [entitiesSavedStatesCallback]
   );
-  const [showDiff, setShowDiff] = useState(true);
   if (isRevisionsMode) {
     return /* @__PURE__ */ jsx(
       InterfaceSkeleton,
@@ -132,10 +137,10 @@ function EditorInterface({
           RevisionsHeader,
           {
             showDiff,
-            onToggleDiff: () => setShowDiff(!showDiff)
+            onToggleDiff: () => setShowRevisionDiff(!showDiff)
           }
         ),
-        content: /* @__PURE__ */ jsx(RevisionsCanvas, { showDiff }),
+        content: /* @__PURE__ */ jsx(RevisionsCanvas, {}),
         sidebar: /* @__PURE__ */ jsx(ComplementaryArea.Slot, { scope: "core" })
       }
     );