@wordpress/editor 14.41.2-next.v.202603161435.0 → 14.43.0

package/build-module/components/collaborators-overlay/overlay-iframe-styles.mjs

@@ -114,7 +114,7 @@ var OVERLAY_IFRAME_STYLES = `
 	outline-style: solid;
 	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
 	outline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, ${BORDER_WIDTH_FOCUS_FALLBACK}) + ${BORDER_WIDTH}) ${WHITE}, 0 0 0 ${BORDER_WIDTH} ${WHITE}, ${ELEVATION_X_SMALL};
+	box-shadow: inset 0 0 0 calc((var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${WHITE}, 0.7);
 	z-index: 1;
 }
 @media (prefers-reduced-motion: reduce) {

package/build-module/components/collaborators-overlay/overlay-iframe-styles.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/overlay-iframe-styles.ts"],
-  "sourcesContent": ["/**\n * CSS for the collaborators overlay \u2014 cursor indicators, block highlights,\n * and positioning of Avatar labels inside the editor canvas iframe.\n */\n\nimport {\n\tBORDER_WIDTH,\n\tBORDER_WIDTH_FOCUS_FALLBACK,\n\tELEVATION_X_SMALL,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const OVERLAY_IFRAME_STYLES = `\n.block-canvas-cover {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none;\n\tz-index: 20000;\n}\n.block-canvas-cover .collaborators-overlay-full {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n.block-canvas-cover .collaborators-overlay-fixed {\n\tposition: fixed;\n\twidth: 100%;\n\theight: 100%;\n}\n.collaborators-overlay-user {\n\tposition: absolute;\n}\n/* Cursor lines render below avatar labels across all users. The parent\n   .collaborators-overlay-user has no z-index so it does not create a\n   stacking context \u2014 children participate in the shared overlay context. */\n.collaborators-overlay-user-cursor {\n\tposition: absolute;\n\tz-index: 0;\n\twidth: ${ BORDER_WIDTH_FOCUS_FALLBACK };\n\tborder-radius: ${ BORDER_WIDTH };\n\toutline: ${ BORDER_WIDTH } solid ${ WHITE };\n\tbox-shadow: ${ ELEVATION_X_SMALL };\n\tanimation: collaborators-overlay-cursor-blink 1s infinite;\n}\n.collaborators-overlay-selection-rect {\n\tposition: absolute;\n\topacity: 0.15;\n\tpointer-events: none;\n\tborder-radius: 2px;\n}\n\n/* Overlay-specific positioning applied to the Avatar cursor label. */\n.collaborators-overlay-user-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translate(-11px, -100%);\n\tmargin-top: -${ GRID_UNIT_05 };\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n/* Avatar positioned above a highlighted block as a label. */\n.collaborators-overlay-block-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translateY(calc(-100% - ${ GRID_UNIT_10 }));\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n\n@keyframes collaborators-overlay-cursor-blink {\n\t0%, 45% { opacity: 1; }\n\t55%, 95% { opacity: 0; }\n\t100% { opacity: 1; }\n}\n.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-cursor {\n\tanimation: collaborators-overlay-cursor-highlight 0.6s ease-in-out 3;\n}\n.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-label {\n\tanimation: collaborators-overlay-label-highlight 0.6s ease-in-out 3;\n}\n@keyframes collaborators-overlay-cursor-highlight {\n\t0%, 100% {\n\t\ttransform: scale(1);\n\t\tfilter: drop-shadow(0 0 0 transparent);\n\t}\n\t50% {\n\t\ttransform: scale(1.2);\n\t\tfilter: drop-shadow(0 0 8px currentColor);\n\t}\n}\n@keyframes collaborators-overlay-label-highlight {\n\t0%, 100% {\n\t\ttransform: translate(-11px, -100%) scale(1);\n\t\tfilter: drop-shadow(0 0 0 transparent);\n\t}\n\t50% {\n\t\ttransform: translate(-11px, -100%) scale(1.1);\n\t\tfilter: drop-shadow(0 0 6px currentColor);\n\t}\n}\n.block-editor-block-list__block.is-collaborator-selected:not(:focus)::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tpointer-events: none;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\toutline-color: var(--collaborator-outline-color);\n\toutline-style: solid;\n\toutline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));\n\toutline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));\n\tbox-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, ${ BORDER_WIDTH_FOCUS_FALLBACK }) + ${ BORDER_WIDTH }) ${ WHITE }, 0 0 0 ${ BORDER_WIDTH } ${ WHITE }, ${ ELEVATION_X_SMALL };\n\tz-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n\t.collaborators-overlay-user-label,\n\t.collaborators-overlay-user-cursor {\n\t\tanimation: none;\n\t}\n}\n`;\n"],
-  "mappings": ";AAKA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEA,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UA+B1B,2BAA4B;AAAA,kBACpB,YAAa;AAAA,YACnB,YAAa,UAAW,KAAM;AAAA,eAC3B,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAejB,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCASS,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAiDgB,2BAA4B,OAAQ,YAAa,KAAM,KAAM,WAAY,YAAa,IAAK,KAAM,KAAM,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * CSS for the collaborators overlay \u2014 cursor indicators, block highlights,\n * and positioning of Avatar labels inside the editor canvas iframe.\n */\n\nimport {\n\tBORDER_WIDTH,\n\tBORDER_WIDTH_FOCUS_FALLBACK,\n\tELEVATION_X_SMALL,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const OVERLAY_IFRAME_STYLES = `\n.block-canvas-cover {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tpointer-events: none;\n\tz-index: 20000;\n}\n.block-canvas-cover .collaborators-overlay-full {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n.block-canvas-cover .collaborators-overlay-fixed {\n\tposition: fixed;\n\twidth: 100%;\n\theight: 100%;\n}\n.collaborators-overlay-user {\n\tposition: absolute;\n}\n/* Cursor lines render below avatar labels across all users. The parent\n   .collaborators-overlay-user has no z-index so it does not create a\n   stacking context \u2014 children participate in the shared overlay context. */\n.collaborators-overlay-user-cursor {\n\tposition: absolute;\n\tz-index: 0;\n\twidth: ${ BORDER_WIDTH_FOCUS_FALLBACK };\n\tborder-radius: ${ BORDER_WIDTH };\n\toutline: ${ BORDER_WIDTH } solid ${ WHITE };\n\tbox-shadow: ${ ELEVATION_X_SMALL };\n\tanimation: collaborators-overlay-cursor-blink 1s infinite;\n}\n.collaborators-overlay-selection-rect {\n\tposition: absolute;\n\topacity: 0.15;\n\tpointer-events: none;\n\tborder-radius: 2px;\n}\n\n/* Overlay-specific positioning applied to the Avatar cursor label. */\n.collaborators-overlay-user-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translate(-11px, -100%);\n\tmargin-top: -${ GRID_UNIT_05 };\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n/* Avatar positioned above a highlighted block as a label. */\n.collaborators-overlay-block-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translateY(calc(-100% - ${ GRID_UNIT_10 }));\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n\n@keyframes collaborators-overlay-cursor-blink {\n\t0%, 45% { opacity: 1; }\n\t55%, 95% { opacity: 0; }\n\t100% { opacity: 1; }\n}\n.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-cursor {\n\tanimation: collaborators-overlay-cursor-highlight 0.6s ease-in-out 3;\n}\n.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-label {\n\tanimation: collaborators-overlay-label-highlight 0.6s ease-in-out 3;\n}\n@keyframes collaborators-overlay-cursor-highlight {\n\t0%, 100% {\n\t\ttransform: scale(1);\n\t\tfilter: drop-shadow(0 0 0 transparent);\n\t}\n\t50% {\n\t\ttransform: scale(1.2);\n\t\tfilter: drop-shadow(0 0 8px currentColor);\n\t}\n}\n@keyframes collaborators-overlay-label-highlight {\n\t0%, 100% {\n\t\ttransform: translate(-11px, -100%) scale(1);\n\t\tfilter: drop-shadow(0 0 0 transparent);\n\t}\n\t50% {\n\t\ttransform: translate(-11px, -100%) scale(1.1);\n\t\tfilter: drop-shadow(0 0 6px currentColor);\n\t}\n}\n.block-editor-block-list__block.is-collaborator-selected:not(:focus)::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tpointer-events: none;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\toutline-color: var(--collaborator-outline-color);\n\toutline-style: solid;\n\toutline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));\n\toutline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));\n\tbox-shadow: inset 0 0 0 calc((var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${ WHITE }, 0.7);\n\tz-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n\t.collaborators-overlay-user-label,\n\t.collaborators-overlay-user-cursor {\n\t\tanimation: none;\n\t}\n}\n`;\n"],
+  "mappings": ";AAKA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEA,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UA+B1B,2BAA4B;AAAA,kBACpB,YAAa;AAAA,YACnB,YAAa,UAAW,KAAM;AAAA,eAC3B,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAejB,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCASS,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qIAiDkF,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/build-module/components/collaborators-overlay/overlay.mjs

@@ -1,18 +1,21 @@
 // packages/editor/src/components/collaborators-overlay/overlay.tsx
 import { useResizeObserver, useMergeRefs } from "@wordpress/compose";
-import { useCallback, useEffect, useState } from "@wordpress/element";
+import { useCallback, useEffect, useRef, useState } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import Avatar from "../collaborators-presence/avatar/index.mjs";
 import { AVATAR_IFRAME_STYLES } from "./avatar-iframe-styles.mjs";
 import { OVERLAY_IFRAME_STYLES } from "./overlay-iframe-styles.mjs";
+import { setDelayedInterval } from "./timing-utils.mjs";
 import { useBlockHighlighting } from "./use-block-highlighting.mjs";
 import { useRenderCursors } from "./use-render-cursors.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var RERENDER_DELAY_MS = 500;
+var CURSOR_REDRAW_INTERVAL_MS = 1e4;
 function Overlay({
   blockEditorDocument,
   postId,
-  postType
+  postType,
+  cursorRegistry
 }) {
   const [overlayElement, setOverlayElement] = useState(null);
   const { cursors, rerenderCursorsAfterDelay } = useRenderCursors(
@@ -42,10 +45,47 @@ function Overlay({
       cleanupHighlights();
     };
   }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  useEffect(() => {
+    if (cursors.length === 0) {
+      return;
+    }
+    return setDelayedInterval(
+      rerenderCursorsAfterDelay,
+      CURSOR_REDRAW_INTERVAL_MS
+    );
+  }, [cursors.length, rerenderCursorsAfterDelay]);
   const mergedRef = useMergeRefs([
     setOverlayElement,
     resizeObserverRef
   ]);
+  const cursorRefsMap = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!cursorRegistry) {
+      return;
+    }
+    const refs = cursorRefsMap.current;
+    const currentIds = new Set(cursors.map((c) => c.clientId));
+    for (const id of refs.keys()) {
+      if (!currentIds.has(id)) {
+        cursorRegistry.unregisterCursor(id);
+        refs.delete(id);
+      }
+    }
+    for (const [id, el] of refs.entries()) {
+      cursorRegistry.registerCursor(id, el);
+    }
+    return () => cursorRegistry.removeAll();
+  }, [cursors, cursorRegistry]);
+  const setCursorRef = useCallback(
+    (clientId) => (el) => {
+      if (el) {
+        cursorRefsMap.current.set(clientId, el);
+      } else {
+        cursorRefsMap.current.delete(clientId);
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ jsxs("div", { className: "collaborators-overlay-full", ref: mergedRef, children: [
     /* @__PURE__ */ jsx("style", { children: AVATAR_IFRAME_STYLES + OVERLAY_IFRAME_STYLES }),
     cursors.map((cursor) => /* @__PURE__ */ jsxs("div", { children: [
@@ -66,6 +106,7 @@ function Overlay({
       /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: setCursorRef(cursor.clientId),
           className: "collaborators-overlay-user",
           style: {
             left: `${cursor.x}px`,

package/build-module/components/collaborators-overlay/overlay.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/overlay.tsx"],
-  "sourcesContent": ["import { useResizeObserver, useMergeRefs } from '@wordpress/compose';\nimport { useCallback, useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\nimport Avatar from '../collaborators-presence/avatar';\nimport { AVATAR_IFRAME_STYLES } from './avatar-iframe-styles';\nimport { OVERLAY_IFRAME_STYLES } from './overlay-iframe-styles';\nimport { useBlockHighlighting } from './use-block-highlighting';\nimport { useRenderCursors } from './use-render-cursors';\n\nconst RERENDER_DELAY_MS = 500;\n\ninterface OverlayProps {\n\tblockEditorDocument?: Document;\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * This component is responsible for rendering the overlay components within the editor iframe.\n *\n * @param props                     - The overlay props.\n * @param props.blockEditorDocument - The block editor document.\n * @param props.postId              - The ID of the post.\n * @param props.postType            - The type of the post.\n * @return The Overlay component.\n */\nexport function Overlay( {\n\tblockEditorDocument,\n\tpostId,\n\tpostType,\n}: OverlayProps ) {\n\t// Use state for the overlay element so that the hook re-runs once the ref is attached.\n\tconst [ overlayElement, setOverlayElement ] =\n\t\tuseState< HTMLDivElement | null >( null );\n\n\tconst { cursors, rerenderCursorsAfterDelay } = useRenderCursors(\n\t\toverlayElement,\n\t\tblockEditorDocument ?? null,\n\t\tpostId ?? null,\n\t\tpostType ?? null,\n\t\tRERENDER_DELAY_MS\n\t);\n\n\tconst { highlights, rerenderHighlightsAfterDelay } = useBlockHighlighting(\n\t\toverlayElement,\n\t\tblockEditorDocument ?? null,\n\t\tpostId ?? null,\n\t\tpostType ?? null,\n\t\tRERENDER_DELAY_MS\n\t);\n\n\t// Detect layout changes on overlay (e.g. turning on \"Show Template\") and window\n\t// resizes, and re-render the cursors and block highlights.\n\tconst onResize = useCallback( () => {\n\t\trerenderCursorsAfterDelay();\n\t\trerenderHighlightsAfterDelay();\n\t}, [ rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay ] );\n\tconst resizeObserverRef = useResizeObserver( onResize );\n\n\t// Trigger the initial position computation on mount.\n\tuseEffect( () => {\n\t\tconst cleanupCursors = rerenderCursorsAfterDelay();\n\t\tconst cleanupHighlights = rerenderHighlightsAfterDelay();\n\t\treturn () => {\n\t\t\tcleanupCursors();\n\t\t\tcleanupHighlights();\n\t\t};\n\t}, [ rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay ] );\n\n\t// Merge the refs to use the same element for both overlay and resize observation\n\tconst mergedRef = useMergeRefs< HTMLDivElement | null >( [\n\t\tsetOverlayElement,\n\t\tresizeObserverRef,\n\t] );\n\n\t// This is a full overlay that covers the entire iframe document. Good for\n\t// scrollable elements like cursor indicators.\n\treturn (\n\t\t<div className=\"collaborators-overlay-full\" ref={ mergedRef }>\n\t\t\t<style>{ AVATAR_IFRAME_STYLES + OVERLAY_IFRAME_STYLES }</style>\n\t\t\t{ cursors.map( ( cursor ) => (\n\t\t\t\t<div key={ cursor.clientId }>\n\t\t\t\t\t{ ! cursor.isMe &&\n\t\t\t\t\t\tcursor.selectionRects?.map( ( rect, index ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ `${ cursor.clientId }-sel-${ index }` }\n\t\t\t\t\t\t\t\tclassName=\"collaborators-overlay-selection-rect\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tleft: `${ rect.x }px`,\n\t\t\t\t\t\t\t\t\ttop: `${ rect.y }px`,\n\t\t\t\t\t\t\t\t\twidth: `${ rect.width }px`,\n\t\t\t\t\t\t\t\t\theight: `${ rect.height }px`,\n\t\t\t\t\t\t\t\t\tbackgroundColor: cursor.color,\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<div\n\t\t\t\t\t\tclassName=\"collaborators-overlay-user\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tleft: `${ cursor.x }px`,\n\t\t\t\t\t\t\ttop: `${ cursor.y }px`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! cursor.isMe && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"collaborators-overlay-user-cursor\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackgroundColor: cursor.color,\n\t\t\t\t\t\t\t\t\theight: `${ cursor.height }px`,\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\t<Avatar\n\t\t\t\t\t\t\tclassName=\"collaborators-overlay-user-label\"\n\t\t\t\t\t\t\tvariant=\"badge\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tsrc={ cursor.avatarUrl }\n\t\t\t\t\t\t\tname={ cursor.userName }\n\t\t\t\t\t\t\tlabel={ cursor.isMe ? __( 'You' ) : undefined }\n\t\t\t\t\t\t\tborderColor={ cursor.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t\t{ highlights.map( ( highlight ) => (\n\t\t\t\t<Avatar\n\t\t\t\t\tkey={ highlight.blockId }\n\t\t\t\t\tclassName=\"collaborators-overlay-block-label\"\n\t\t\t\t\tvariant=\"badge\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tsrc={ highlight.avatarUrl }\n\t\t\t\t\tname={ highlight.userName }\n\t\t\t\t\tborderColor={ highlight.color }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft: `${ highlight.x }px`,\n\t\t\t\t\t\ttop: `${ highlight.y }px`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useResizeObserver, useMergeRefs } from '@wordpress/compose';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\nimport Avatar from '../collaborators-presence/avatar';\nimport { AVATAR_IFRAME_STYLES } from './avatar-iframe-styles';\nimport { OVERLAY_IFRAME_STYLES } from './overlay-iframe-styles';\nimport { setDelayedInterval } from './timing-utils';\nimport { useBlockHighlighting } from './use-block-highlighting';\nimport { useRenderCursors } from './use-render-cursors';\nimport { type CursorRegistry } from './cursor-registry';\n\n// Milliseconds to wait after a change before recomputing cursor positions.\nconst RERENDER_DELAY_MS = 500;\n\n// Periodically recompute cursor positions to account for DOM layout\n// changes that don't trigger awareness state updates (e.g. a collaborator\n// applying formatting shifts text but the cursor's logical position is\n// unchanged). Only active when remote cursors are visible.\nconst CURSOR_REDRAW_INTERVAL_MS = 10_000;\n\ninterface OverlayProps {\n\tblockEditorDocument?: Document;\n\tpostId: number | null;\n\tpostType: string | null;\n\tcursorRegistry?: CursorRegistry;\n}\n\n/**\n * This component is responsible for rendering the overlay components within the editor iframe.\n *\n * @param props                     - The overlay props.\n * @param props.blockEditorDocument - The block editor document.\n * @param props.postId              - The ID of the post.\n * @param props.postType            - The type of the post.\n * @param props.cursorRegistry      - The shared cursor registry.\n * @return The Overlay component.\n */\nexport function Overlay( {\n\tblockEditorDocument,\n\tpostId,\n\tpostType,\n\tcursorRegistry,\n}: OverlayProps ) {\n\t// Use state for the overlay element so that the hook re-runs once the ref is attached.\n\tconst [ overlayElement, setOverlayElement ] =\n\t\tuseState< HTMLDivElement | null >( null );\n\n\tconst { cursors, rerenderCursorsAfterDelay } = useRenderCursors(\n\t\toverlayElement,\n\t\tblockEditorDocument ?? null,\n\t\tpostId ?? null,\n\t\tpostType ?? null,\n\t\tRERENDER_DELAY_MS\n\t);\n\n\tconst { highlights, rerenderHighlightsAfterDelay } = useBlockHighlighting(\n\t\toverlayElement,\n\t\tblockEditorDocument ?? null,\n\t\tpostId ?? null,\n\t\tpostType ?? null,\n\t\tRERENDER_DELAY_MS\n\t);\n\n\t// Detect layout changes on overlay (e.g. turning on \"Show Template\") and window\n\t// resizes, and re-render the cursors and block highlights.\n\tconst onResize = useCallback( () => {\n\t\trerenderCursorsAfterDelay();\n\t\trerenderHighlightsAfterDelay();\n\t}, [ rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay ] );\n\tconst resizeObserverRef = useResizeObserver( onResize );\n\n\t// Trigger the initial position computation on mount.\n\tuseEffect( () => {\n\t\tconst cleanupCursors = rerenderCursorsAfterDelay();\n\t\tconst cleanupHighlights = rerenderHighlightsAfterDelay();\n\t\treturn () => {\n\t\t\tcleanupCursors();\n\t\t\tcleanupHighlights();\n\t\t};\n\t}, [ rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay ] );\n\n\tuseEffect( () => {\n\t\tif ( cursors.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn setDelayedInterval(\n\t\t\trerenderCursorsAfterDelay,\n\t\t\tCURSOR_REDRAW_INTERVAL_MS\n\t\t);\n\t}, [ cursors.length, rerenderCursorsAfterDelay ] );\n\n\t// Merge the refs to use the same element for both overlay and resize observation\n\tconst mergedRef = useMergeRefs< HTMLDivElement | null >( [\n\t\tsetOverlayElement,\n\t\tresizeObserverRef,\n\t] );\n\n\t// Track cursor element refs for registry registration.\n\tconst cursorRefsMap = useRef< Map< number, HTMLElement > >( new Map() );\n\n\t// Keep the registry in sync whenever the rendered cursors change.\n\tuseEffect( () => {\n\t\tif ( ! cursorRegistry ) {\n\t\t\treturn;\n\t\t}\n\t\tconst refs = cursorRefsMap.current;\n\t\tconst currentIds = new Set( cursors.map( ( c ) => c.clientId ) );\n\n\t\t// Unregister cursors that are no longer rendered.\n\t\tfor ( const id of refs.keys() ) {\n\t\t\tif ( ! currentIds.has( id ) ) {\n\t\t\t\tcursorRegistry.unregisterCursor( id );\n\t\t\t\trefs.delete( id );\n\t\t\t}\n\t\t}\n\n\t\t// Register or update cursors that are currently rendered.\n\t\tfor ( const [ id, el ] of refs.entries() ) {\n\t\t\tcursorRegistry.registerCursor( id, el );\n\t\t}\n\n\t\treturn () => cursorRegistry.removeAll();\n\t}, [ cursors, cursorRegistry ] );\n\n\t// Callback ref factory to capture each cursor's DOM element.\n\tconst setCursorRef = useCallback(\n\t\t( clientId: number ) => ( el: HTMLDivElement | null ) => {\n\t\t\tif ( el ) {\n\t\t\t\tcursorRefsMap.current.set( clientId, el );\n\t\t\t} else {\n\t\t\t\tcursorRefsMap.current.delete( clientId );\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\t// This is a full overlay that covers the entire iframe document. Good for\n\t// scrollable elements like cursor indicators.\n\treturn (\n\t\t<div className=\"collaborators-overlay-full\" ref={ mergedRef }>\n\t\t\t<style>{ AVATAR_IFRAME_STYLES + OVERLAY_IFRAME_STYLES }</style>\n\t\t\t{ cursors.map( ( cursor ) => (\n\t\t\t\t<div key={ cursor.clientId }>\n\t\t\t\t\t{ ! cursor.isMe &&\n\t\t\t\t\t\tcursor.selectionRects?.map( ( rect, index ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ `${ cursor.clientId }-sel-${ index }` }\n\t\t\t\t\t\t\t\tclassName=\"collaborators-overlay-selection-rect\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tleft: `${ rect.x }px`,\n\t\t\t\t\t\t\t\t\ttop: `${ rect.y }px`,\n\t\t\t\t\t\t\t\t\twidth: `${ rect.width }px`,\n\t\t\t\t\t\t\t\t\theight: `${ rect.height }px`,\n\t\t\t\t\t\t\t\t\tbackgroundColor: cursor.color,\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<div\n\t\t\t\t\t\tref={ setCursorRef( cursor.clientId ) }\n\t\t\t\t\t\tclassName=\"collaborators-overlay-user\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tleft: `${ cursor.x }px`,\n\t\t\t\t\t\t\ttop: `${ cursor.y }px`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! cursor.isMe && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"collaborators-overlay-user-cursor\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackgroundColor: cursor.color,\n\t\t\t\t\t\t\t\t\theight: `${ cursor.height }px`,\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\t<Avatar\n\t\t\t\t\t\t\tclassName=\"collaborators-overlay-user-label\"\n\t\t\t\t\t\t\tvariant=\"badge\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tsrc={ cursor.avatarUrl }\n\t\t\t\t\t\t\tname={ cursor.userName }\n\t\t\t\t\t\t\tlabel={ cursor.isMe ? __( 'You' ) : undefined }\n\t\t\t\t\t\t\tborderColor={ cursor.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t\t{ highlights.map( ( highlight ) => (\n\t\t\t\t<Avatar\n\t\t\t\t\tkey={ highlight.blockId }\n\t\t\t\t\tclassName=\"collaborators-overlay-block-label\"\n\t\t\t\t\tvariant=\"badge\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tsrc={ highlight.avatarUrl }\n\t\t\t\t\tname={ highlight.userName }\n\t\t\t\t\tborderColor={ highlight.color }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft: `${ highlight.x }px`,\n\t\t\t\t\t\ttop: `${ highlight.y }px`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/collaborators-overlay/timing-utils.mjs

@@ -0,0 +1,21 @@
+// packages/editor/src/components/collaborators-overlay/timing-utils.ts
+function setDelayedInterval(callback, delayMs) {
+  let timerHandle = null;
+  const runner = () => {
+    try {
+      callback();
+    } catch (error) {
+    }
+    timerHandle = setTimeout(runner, delayMs);
+  };
+  timerHandle = setTimeout(runner, delayMs);
+  return () => {
+    if (timerHandle) {
+      clearTimeout(timerHandle);
+    }
+  };
+}
+export {
+  setDelayedInterval
+};
+//# sourceMappingURL=timing-utils.mjs.map

package/build-module/components/collaborators-overlay/timing-utils.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/timing-utils.ts"],
+  "sourcesContent": ["/**\n * Like setInterval but chains setTimeout calls, so the delay is measured from\n * the end of one run to the start of the next. This prevents callbacks from\n * stacking up when the main thread is busy.\n *\n * @param callback The function to call repeatedly.\n * @param delayMs  Milliseconds between runs.\n * @return A cleanup function that stops the timer.\n */\nexport function setDelayedInterval( callback: () => void, delayMs: number ) {\n\tlet timerHandle: ReturnType< typeof setTimeout > | null = null;\n\n\tconst runner = () => {\n\t\ttry {\n\t\t\tcallback();\n\t\t} catch ( error ) {\n\t\t\t// Do nothing\n\t\t}\n\n\t\ttimerHandle = setTimeout( runner, delayMs );\n\t};\n\n\ttimerHandle = setTimeout( runner, delayMs );\n\n\treturn () => {\n\t\tif ( timerHandle ) {\n\t\t\tclearTimeout( timerHandle );\n\t\t}\n\t};\n}\n"],
+  "mappings": ";AASO,SAAS,mBAAoB,UAAsB,SAAkB;AAC3E,MAAI,cAAsD;AAE1D,QAAM,SAAS,MAAM;AACpB,QAAI;AACH,eAAS;AAAA,IACV,SAAU,OAAQ;AAAA,IAElB;AAEA,kBAAc,WAAY,QAAQ,OAAQ;AAAA,EAC3C;AAEA,gBAAc,WAAY,QAAQ,OAAQ;AAE1C,SAAO,MAAM;AACZ,QAAK,aAAc;AAClB,mBAAc,WAAY;AAAA,IAC3B;AAAA,EACD;AACD;",
+  "names": []
+}

package/build-module/components/collaborators-overlay/use-render-cursors.mjs

@@ -51,7 +51,7 @@ function useRenderCursors(overlayElement, blockEditorDocument, postId, postType,
         type: SelectionType.None
       };
       let start = {
-        textIndex: null,
+        richTextOffset: null,
         localClientId: null
       };
       let end;

package/build-module/components/collaborators-overlay/use-render-cursors.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/use-render-cursors.ts"],
-  "sourcesContent": ["import {\n\tprivateApis as coreDataPrivateApis,\n\tSelectionType,\n\ttype PostEditorAwarenessState as ActiveCollaborator,\n} from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useEffect, useState } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport type { ResolvedSelection } from '@wordpress/core-data';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from './get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { computeSelectionVisual } from './compute-selection';\nimport { useDebouncedRecompute } from './use-debounced-recompute';\nimport type { SelectionRect } from './cursor-dom-utils';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\n\nexport type { SelectionRect };\n\nexport interface CursorData {\n\tuserName: string;\n\tclientId: number;\n\tcolor: string;\n\tavatarUrl?: string;\n\tx: number;\n\ty: number;\n\theight: number;\n\tisMe?: boolean;\n\tselectionRects?: SelectionRect[];\n}\n\n/**\n * Custom hook that computes cursor positions for each remote user in the editor.\n *\n * @param overlayElement      - The overlay element\n * @param blockEditorDocument - The block editor document\n * @param postId              - The ID of the post\n * @param postType            - The type of the post\n * @param delayMs             - Milliseconds to wait before recomputing cursor positions.\n * @return An array of cursor data for rendering, and a function to trigger a delayed recompute.\n */\nexport function useRenderCursors(\n\toverlayElement: HTMLElement | null,\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null,\n\tdelayMs: number\n): { cursors: CursorData[]; rerenderCursorsAfterDelay: () => () => void } {\n\tconst sortedUsers = useActiveCollaborators(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\tconst resolveSelection = useResolvedSelection(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\n\tconst showOwnCursor = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get( 'core', 'showCollaborationCursor' ),\n\t\t[]\n\t);\n\n\tconst [ cursorPositions, setCursorPositions ] = useState< CursorData[] >(\n\t\t[]\n\t);\n\n\t// Bump this counter to force the effect to re-run (e.g. after a layout shift).\n\tconst [ recomputeToken, rerenderCursorsAfterDelay ] =\n\t\tuseDebouncedRecompute( delayMs );\n\n\t// All DOM position computations live inside useEffect.\n\tuseEffect( () => {\n\t\tif ( ! overlayElement || ! blockEditorDocument ) {\n\t\t\tsetCursorPositions( [] );\n\t\t\treturn;\n\t\t}\n\n\t\t// Pre-compute the overlay rect once, same for every user.\n\t\tconst overlayRect = overlayElement.getBoundingClientRect();\n\t\tconst overlayContext = {\n\t\t\teditorDocument: blockEditorDocument,\n\t\t\toverlayRect,\n\t\t};\n\n\t\tconst results: CursorData[] = [];\n\n\t\tconst hasOtherCollaborators = sortedUsers.some(\n\t\t\t( u: ActiveCollaborator ) => ! u.isMe\n\t\t);\n\n\t\tsortedUsers.forEach( ( user: ActiveCollaborator ) => {\n\t\t\tif ( user.isMe && ( ! showOwnCursor || ! hasOtherCollaborators ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selection = user.editorState?.selection ?? {\n\t\t\t\ttype: SelectionType.None,\n\t\t\t};\n\n\t\t\tlet start: ResolvedSelection = {\n\t\t\t\ttextIndex: null,\n\t\t\t\tlocalClientId: null,\n\t\t\t};\n\t\t\tlet end: ResolvedSelection | undefined;\n\n\t\t\tif ( selection.type === SelectionType.Cursor ) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( selection );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tselection.type === SelectionType.SelectionInOneBlock ||\n\t\t\t\tselection.type === SelectionType.SelectionInMultipleBlocks\n\t\t\t) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorStartPosition,\n\t\t\t\t\t} );\n\n\t\t\t\t\tend = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorEndPosition,\n\t\t\t\t\t} );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst userName = user.collaboratorInfo.name;\n\t\t\tconst clientId = user.clientId;\n\t\t\tconst color = user.isMe\n\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t: getAvatarBorderColor( user.collaboratorInfo.id );\n\t\t\tconst avatarUrl = getAvatarUrl( user.collaboratorInfo.avatar_urls );\n\n\t\t\tconst selectionVisual = computeSelectionVisual(\n\t\t\t\tselection,\n\t\t\t\tstart,\n\t\t\t\tend,\n\t\t\t\toverlayContext\n\t\t\t);\n\n\t\t\tif ( selectionVisual.coords ) {\n\t\t\t\tconst cursorData: CursorData = {\n\t\t\t\t\tuserName,\n\t\t\t\t\tclientId,\n\t\t\t\t\tcolor,\n\t\t\t\t\tavatarUrl,\n\t\t\t\t\tisMe: user.isMe,\n\t\t\t\t\t...selectionVisual.coords,\n\t\t\t\t};\n\n\t\t\t\tif ( selectionVisual.selectionRects ) {\n\t\t\t\t\tcursorData.selectionRects = selectionVisual.selectionRects;\n\t\t\t\t}\n\n\t\t\t\tresults.push( cursorData );\n\t\t\t}\n\t\t} );\n\n\t\tsetCursorPositions( results );\n\t}, [\n\t\tblockEditorDocument,\n\t\tresolveSelection,\n\t\toverlayElement,\n\t\tsortedUsers,\n\t\tshowOwnCursor,\n\t\trecomputeToken,\n\t] );\n\n\treturn { cursors: cursorPositions, rerenderCursorsAfterDelay };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tprivateApis as coreDataPrivateApis,\n\tSelectionType,\n\ttype PostEditorAwarenessState as ActiveCollaborator,\n} from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useEffect, useState } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport type { ResolvedSelection } from '@wordpress/core-data';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from './get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { computeSelectionVisual } from './compute-selection';\nimport { useDebouncedRecompute } from './use-debounced-recompute';\nimport type { SelectionRect } from './cursor-dom-utils';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\n\nexport type { SelectionRect };\n\nexport interface CursorData {\n\tuserName: string;\n\tclientId: number;\n\tcolor: string;\n\tavatarUrl?: string;\n\tx: number;\n\ty: number;\n\theight: number;\n\tisMe?: boolean;\n\tselectionRects?: SelectionRect[];\n}\n\n/**\n * Custom hook that computes cursor positions for each remote user in the editor.\n *\n * @param overlayElement      - The overlay element\n * @param blockEditorDocument - The block editor document\n * @param postId              - The ID of the post\n * @param postType            - The type of the post\n * @param delayMs             - Milliseconds to wait before recomputing cursor positions.\n * @return An array of cursor data for rendering, and a function to trigger a delayed recompute.\n */\nexport function useRenderCursors(\n\toverlayElement: HTMLElement | null,\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null,\n\tdelayMs: number\n): { cursors: CursorData[]; rerenderCursorsAfterDelay: () => () => void } {\n\tconst sortedUsers = useActiveCollaborators(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\tconst resolveSelection = useResolvedSelection(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\n\tconst showOwnCursor = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get( 'core', 'showCollaborationCursor' ),\n\t\t[]\n\t);\n\n\tconst [ cursorPositions, setCursorPositions ] = useState< CursorData[] >(\n\t\t[]\n\t);\n\n\t// Bump this counter to force the effect to re-run (e.g. after a layout shift).\n\tconst [ recomputeToken, rerenderCursorsAfterDelay ] =\n\t\tuseDebouncedRecompute( delayMs );\n\n\t// All DOM position computations live inside useEffect.\n\tuseEffect( () => {\n\t\tif ( ! overlayElement || ! blockEditorDocument ) {\n\t\t\tsetCursorPositions( [] );\n\t\t\treturn;\n\t\t}\n\n\t\t// Pre-compute the overlay rect once, same for every user.\n\t\tconst overlayRect = overlayElement.getBoundingClientRect();\n\t\tconst overlayContext = {\n\t\t\teditorDocument: blockEditorDocument,\n\t\t\toverlayRect,\n\t\t};\n\n\t\tconst results: CursorData[] = [];\n\n\t\tconst hasOtherCollaborators = sortedUsers.some(\n\t\t\t( u: ActiveCollaborator ) => ! u.isMe\n\t\t);\n\n\t\tsortedUsers.forEach( ( user: ActiveCollaborator ) => {\n\t\t\tif ( user.isMe && ( ! showOwnCursor || ! hasOtherCollaborators ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selection = user.editorState?.selection ?? {\n\t\t\t\ttype: SelectionType.None,\n\t\t\t};\n\n\t\t\tlet start: ResolvedSelection = {\n\t\t\t\trichTextOffset: null,\n\t\t\t\tlocalClientId: null,\n\t\t\t};\n\t\t\tlet end: ResolvedSelection | undefined;\n\n\t\t\tif ( selection.type === SelectionType.Cursor ) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( selection );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tselection.type === SelectionType.SelectionInOneBlock ||\n\t\t\t\tselection.type === SelectionType.SelectionInMultipleBlocks\n\t\t\t) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorStartPosition,\n\t\t\t\t\t} );\n\n\t\t\t\t\tend = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorEndPosition,\n\t\t\t\t\t} );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst userName = user.collaboratorInfo.name;\n\t\t\tconst clientId = user.clientId;\n\t\t\tconst color = user.isMe\n\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t: getAvatarBorderColor( user.collaboratorInfo.id );\n\t\t\tconst avatarUrl = getAvatarUrl( user.collaboratorInfo.avatar_urls );\n\n\t\t\tconst selectionVisual = computeSelectionVisual(\n\t\t\t\tselection,\n\t\t\t\tstart,\n\t\t\t\tend,\n\t\t\t\toverlayContext\n\t\t\t);\n\n\t\t\tif ( selectionVisual.coords ) {\n\t\t\t\tconst cursorData: CursorData = {\n\t\t\t\t\tuserName,\n\t\t\t\t\tclientId,\n\t\t\t\t\tcolor,\n\t\t\t\t\tavatarUrl,\n\t\t\t\t\tisMe: user.isMe,\n\t\t\t\t\t...selectionVisual.coords,\n\t\t\t\t};\n\n\t\t\t\tif ( selectionVisual.selectionRects ) {\n\t\t\t\t\tcursorData.selectionRects = selectionVisual.selectionRects;\n\t\t\t\t}\n\n\t\t\t\tresults.push( cursorData );\n\t\t\t}\n\t\t} );\n\n\t\tsetCursorPositions( results );\n\t}, [\n\t\tblockEditorDocument,\n\t\tresolveSelection,\n\t\toverlayElement,\n\t\tsortedUsers,\n\t\tshowOwnCursor,\n\t\trecomputeToken,\n\t] );\n\n\treturn { cursors: cursorPositions, rerenderCursorsAfterDelay };\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -11,11 +11,12 @@ 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='eee1778bc0']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='5ffe927286']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "eee1778bc0");
+  style.setAttribute("data-wp-hash", "5ffe927286");
   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);
 }
@@ -46,6 +47,7 @@ function CollaboratorsPresence({
       return 0;
     });
   }, [activeCollaborators]);
+  const [cursorRegistry] = useState(createCursorRegistry);
   const [isPopoverVisible, setIsPopoverVisible] = useState(false);
   const [popoverAnchor, setPopoverAnchor] = useState(
     null
@@ -106,11 +108,19 @@ function CollaboratorsPresence({
         {
           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 { 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,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB;AAClC;AAAA,EACC;AAAA,OAEM;AACP,SAAS,IAAI,eAAe;AAE5B,OAAO,YAAY;AACnB,OAAO,iBAAiB;AACxB,SAAS,yBAAyB;AAClC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;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,SAAS,4BAA4B;AA0DnC,mBAgBK,KAFF,YAdH;AAxDF,IAAM,EAAE,uBAAuB,IAAI,OAAQ,WAAY;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,uBAAuB,QAAS,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,IAAI,SAAU,KAAM;AAClE,QAAM,CAAE,eAAe,gBAAiB,IAAI;AAAA,IAC3C;AAAA,EACD;AAKA,MAAK,yBAAyB,WAAW,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,QAAM,KAAK,oBAAoB,KAAM,CAAE,MAAO,EAAE,IAAK;AAErD,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,qBAAqB;AAAA,UACtB;AAAA,UAEA,+BAAC,eAAY,KAAM,GAChB;AAAA,kBACD;AAAA,cAAC;AAAA;AAAA,gBAEA,KAAM;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;AAAA;AAAA,kBAEA,KAAM;AAAA,oBACL,kBAAkB,iBAChB;AAAA,kBACH;AAAA,kBACA,MACC,kBAAkB,iBAAiB;AAAA,kBAEpC,aAAc;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,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' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='5ffe927286']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"5ffe927286\");\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

@@ -2,14 +2,15 @@
 import { __ } from "@wordpress/i18n";
 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='9537a5e604']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='0f8400f482']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "9537a5e604");
+  style.setAttribute("data-wp-hash", "0f8400f482");
   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);
 }
@@ -19,8 +20,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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,
     {
@@ -52,7 +65,10 @@ function CollaboratorsList({
             "button",
             {
               className: "editor-collaborators-presence__list-item",
-              disabled: true,
+              disabled: isCurrentUser,
+              onClick: () => handleCollaboratorClick(
+                collaboratorState.clientId
+              ),
               children: [
                 /* @__PURE__ */ jsx(
                   Avatar,

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 { 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,SAAS,UAAU;AACnB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAG3B,OAAO,YAAY;AACnB,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;;;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,SAEC,KAFD;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,+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,UAAQ;AAAA,cAER;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,YA7BM,kBAAkB;AAAA,UA8BzB;AAAA,QAEF,CAAE,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' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='0f8400f482']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0f8400f482\");\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,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;;;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/post-card-panel/index.mjs

@@ -7,7 +7,7 @@ import {
   __experimentalText as Text,
   privateApis as componentsPrivateApis
 } from "@wordpress/components";
-import { moreVertical, close } from "@wordpress/icons";
+import { close } from "@wordpress/icons";
 import { store as coreStore } from "@wordpress/core-data";
 import { useSelect } from "@wordpress/data";
 import { useMemo } from "@wordpress/element";
@@ -22,7 +22,7 @@ import { unlock } from "../../lock-unlock.mjs";
 import PostActions from "../post-actions/index.mjs";
 import usePageTypeBadge from "../../utils/pageTypeBadge.mjs";
 import { getTemplateInfo } from "../../utils/get-template-info.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var { Badge } = unlock(componentsPrivateApis);
 function PostCardPanel({
   postType,
@@ -35,7 +35,7 @@ function PostCardPanel({
     () => Array.isArray(postId) ? postId : [postId],
     [postId]
   );
-  const { postTitle, icon, labels, isRevision } = useSelect(
+  const { postTitle, icon, labels } = useSelect(
     (select) => {
       const { getEditedEntityRecord, getCurrentTheme, getPostType } = select(coreStore);
       const {
@@ -54,8 +54,7 @@ function PostCardPanel({
           icon: getPostIcon(parentPostType, {
             area: _record2?.area
           }),
-          labels: getPostType(parentPostType)?.labels,
-          isRevision: true
+          labels: getPostType(parentPostType)?.labels
         };
       }
       const _record = getEditedEntityRecord(
@@ -118,24 +117,14 @@ function PostCardPanel({
               ]
             }
           ),
-          !hideActions && postIds.length === 1 && /* @__PURE__ */ jsx(Fragment, { children: isRevision ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "small",
-              icon: moreVertical,
-              label: __("Actions"),
-              disabled: true,
-              accessibleWhenDisabled: true,
-              className: "editor-all-actions-button"
-            }
-          ) : /* @__PURE__ */ jsx(
+          !hideActions && postIds.length === 1 && /* @__PURE__ */ jsx(
             PostActions,
             {
               postType,
               postId: postIds[0],
               onActionPerformed
             }
-          ) }),
+          ),
           onClose && /* @__PURE__ */ jsx(
             Button,
             {

package/build-module/components/post-card-panel/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/post-card-panel/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { moreVertical, close } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../store/constants';\nimport { unlock } from '../../lock-unlock';\nimport PostActions from '../post-actions';\nimport usePageTypeBadge from '../../utils/pageTypeBadge';\nimport { getTemplateInfo } from '../../utils/get-template-info';\nconst { Badge } = unlock( componentsPrivateApis );\n\n/**\n * Renders a title of the post type and the available quick actions available within a 3-dot dropdown.\n *\n * @param {Object}          props                     - Component props.\n * @param {string}          [props.postType]          - The post type string.\n * @param {string|string[]} [props.postId]            - The post id or list of post ids.\n * @param {boolean}         [props.hideActions]       - Whether to hide the actions. False by default.\n * @param {Function}        [props.onActionPerformed] - A callback function for when a quick action is performed.\n * @param {Function}        [props.onClose]           - A callback function for when the close button is clicked.\n * @return {React.ReactNode} The rendered component.\n */\nexport default function PostCardPanel( {\n\tpostType,\n\tpostId,\n\thideActions = false,\n\tonActionPerformed,\n\tonClose,\n} ) {\n\tconst postIds = useMemo(\n\t\t() => ( Array.isArray( postId ) ? postId : [ postId ] ),\n\t\t[ postId ]\n\t);\n\tconst { postTitle, icon, labels, isRevision } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedEntityRecord, getCurrentTheme, getPostType } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst {\n\t\t\t\tgetPostIcon,\n\t\t\t\tgetCurrentPostType,\n\t\t\t\tisRevisionsMode,\n\t\t\t\tgetCurrentRevision,\n\t\t\t} = unlock( select( editorStore ) );\n\t\t\tlet _title = '';\n\n\t\t\t// In revisions mode, use the current revision.\n\t\t\tif ( isRevisionsMode() ) {\n\t\t\t\tconst parentPostType = getCurrentPostType();\n\t\t\t\tconst _record = getCurrentRevision();\n\t\t\t\t_title = _record?.title?.rendered || _record?.title?.raw || '';\n\t\t\t\treturn {\n\t\t\t\t\tpostTitle: _title,\n\t\t\t\t\ticon: getPostIcon( parentPostType, {\n\t\t\t\t\t\tarea: _record?.area,\n\t\t\t\t\t} ),\n\t\t\t\t\tlabels: getPostType( parentPostType )?.labels,\n\t\t\t\t\tisRevision: true,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst _record = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\tpostIds[ 0 ]\n\t\t\t);\n\t\t\tif ( postIds.length === 1 ) {\n\t\t\t\tconst { default_template_types: templateTypes = [] } =\n\t\t\t\t\tgetCurrentTheme() ?? {};\n\n\t\t\t\tconst _templateInfo = [\n\t\t\t\t\tTEMPLATE_POST_TYPE,\n\t\t\t\t\tTEMPLATE_PART_POST_TYPE,\n\t\t\t\t].includes( postType )\n\t\t\t\t\t? getTemplateInfo( {\n\t\t\t\t\t\t\ttemplate: _record,\n\t\t\t\t\t\t\ttemplateTypes,\n\t\t\t\t\t  } )\n\t\t\t\t\t: {};\n\t\t\t\t_title = _templateInfo?.title || _record?.title;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tpostTitle: _title,\n\t\t\t\ticon: getPostIcon( postType, {\n\t\t\t\t\tarea: _record?.area,\n\t\t\t\t} ),\n\t\t\t\tlabels: getPostType( postType )?.labels,\n\t\t\t};\n\t\t},\n\t\t[ postIds, postType ]\n\t);\n\n\tconst pageTypeBadge = usePageTypeBadge( postId );\n\tlet title = __( 'No title' );\n\tif ( labels?.name && postIds.length > 1 ) {\n\t\ttitle = sprintf(\n\t\t\t// translators: %1$d number of selected items %2$s: Name of the plural post type e.g: \"Posts\".\n\t\t\t__( '%1$d %2$s' ),\n\t\t\tpostIds.length,\n\t\t\tlabels?.name\n\t\t);\n\t} else if ( postTitle ) {\n\t\ttitle = stripHTML( postTitle );\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 1 } className=\"editor-post-card-panel\">\n\t\t\t<HStack\n\t\t\t\tspacing={ 2 }\n\t\t\t\tclassName=\"editor-post-card-panel__header\"\n\t\t\t\talignment=\"flex-start\"\n\t\t\t>\n\t\t\t\t<Icon className=\"editor-post-card-panel__icon\" icon={ icon } />\n\t\t\t\t<Text\n\t\t\t\t\tnumberOfLines={ 2 }\n\t\t\t\t\ttruncate\n\t\t\t\t\tclassName=\"editor-post-card-panel__title\"\n\t\t\t\t\tas=\"h2\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"editor-post-card-panel__title-name\">\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ pageTypeBadge && postIds.length === 1 && (\n\t\t\t\t\t\t<Badge>{ pageTypeBadge }</Badge>\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t\t{ ! hideActions && postIds.length === 1 && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ isRevision ? (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tclassName=\"editor-all-actions-button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<PostActions\n\t\t\t\t\t\t\t\tpostType={ postType }\n\t\t\t\t\t\t\t\tpostId={ postIds[ 0 ] }\n\t\t\t\t\t\t\t\tonActionPerformed={ onActionPerformed }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ onClose && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ postIds.length > 1 && (\n\t\t\t\t<Text className=\"editor-post-card-panel__description\">\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t// translators: %s: Name of the plural post type e.g: \"Posts\".\n\t\t\t\t\t\t__( 'Changes will be applied to all selected %s.' ),\n\t\t\t\t\t\tlabels?.name.toLowerCase()\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB,eAAe;AAAA,OACT;AACP,SAAS,cAAc,aAAa;AACpC,SAAS,SAAS,iBAAiB;AACnC,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,IAAI,eAAe;AAC5B,SAAS,uBAAuB,iBAAiB;AAKjD,SAAS,SAAS,mBAAmB;AACrC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,cAAc;AACvB,OAAO,iBAAiB;AACxB,OAAO,sBAAsB;AAC7B,SAAS,uBAAuB;AAwG5B,SAeC,UAfD,KACA,YADA;AAvGJ,IAAM,EAAE,MAAM,IAAI,OAAQ,qBAAsB;AAajC,SAAR,cAAgC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AACD,GAAI;AACH,QAAM,UAAU;AAAA,IACf,MAAQ,MAAM,QAAS,MAAO,IAAI,SAAS,CAAE,MAAO;AAAA,IACpD,CAAE,MAAO;AAAA,EACV;AACA,QAAM,EAAE,WAAW,MAAM,QAAQ,WAAW,IAAI;AAAA,IAC/C,CAAE,WAAY;AACb,YAAM,EAAE,uBAAuB,iBAAiB,YAAY,IAC3D,OAAQ,SAAU;AACnB,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,OAAQ,WAAY,CAAE;AAClC,UAAI,SAAS;AAGb,UAAK,gBAAgB,GAAI;AACxB,cAAM,iBAAiB,mBAAmB;AAC1C,cAAMA,WAAU,mBAAmB;AACnC,iBAASA,UAAS,OAAO,YAAYA,UAAS,OAAO,OAAO;AAC5D,eAAO;AAAA,UACN,WAAW;AAAA,UACX,MAAM,YAAa,gBAAgB;AAAA,YAClC,MAAMA,UAAS;AAAA,UAChB,CAAE;AAAA,UACF,QAAQ,YAAa,cAAe,GAAG;AAAA,UACvC,YAAY;AAAA,QACb;AAAA,MACD;AAEA,YAAM,UAAU;AAAA,QACf;AAAA,QACA;AAAA,QACA,QAAS,CAAE;AAAA,MACZ;AACA,UAAK,QAAQ,WAAW,GAAI;AAC3B,cAAM,EAAE,wBAAwB,gBAAgB,CAAC,EAAE,IAClD,gBAAgB,KAAK,CAAC;AAEvB,cAAM,gBAAgB;AAAA,UACrB;AAAA,UACA;AAAA,QACD,EAAE,SAAU,QAAS,IAClB,gBAAiB;AAAA,UACjB,UAAU;AAAA,UACV;AAAA,QACA,CAAE,IACF,CAAC;AACJ,iBAAS,eAAe,SAAS,SAAS;AAAA,MAC3C;AAEA,aAAO;AAAA,QACN,WAAW;AAAA,QACX,MAAM,YAAa,UAAU;AAAA,UAC5B,MAAM,SAAS;AAAA,QAChB,CAAE;AAAA,QACF,QAAQ,YAAa,QAAS,GAAG;AAAA,MAClC;AAAA,IACD;AAAA,IACA,CAAE,SAAS,QAAS;AAAA,EACrB;AAEA,QAAM,gBAAgB,iBAAkB,MAAO;AAC/C,MAAI,QAAQ,GAAI,UAAW;AAC3B,MAAK,QAAQ,QAAQ,QAAQ,SAAS,GAAI;AACzC,YAAQ;AAAA;AAAA,MAEP,GAAI,WAAY;AAAA,MAChB,QAAQ;AAAA,MACR,QAAQ;AAAA,IACT;AAAA,EACD,WAAY,WAAY;AACvB,YAAQ,UAAW,SAAU;AAAA,EAC9B;AAEA,SACC,qBAAC,UAAO,SAAU,GAAI,WAAU,0BAC/B;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAU;AAAA,QAEV;AAAA,8BAAC,QAAK,WAAU,gCAA+B,MAAc;AAAA,UAC7D;AAAA,YAAC;AAAA;AAAA,cACA,eAAgB;AAAA,cAChB,UAAQ;AAAA,cACR,WAAU;AAAA,cACV,IAAG;AAAA,cAEH;AAAA,oCAAC,UAAK,WAAU,sCACb,iBACH;AAAA,gBACE,iBAAiB,QAAQ,WAAW,KACrC,oBAAC,SAAQ,yBAAe;AAAA;AAAA;AAAA,UAE1B;AAAA,UACE,CAAE,eAAe,QAAQ,WAAW,KACrC,gCACG,uBACD;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,MAAO;AAAA,cACP,OAAQ,GAAI,SAAU;AAAA,cACtB,UAAQ;AAAA,cACR,wBAAsB;AAAA,cACtB,WAAU;AAAA;AAAA,UACX,IAEA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,QAAS,QAAS,CAAE;AAAA,cACpB;AAAA;AAAA,UACD,GAEF;AAAA,UAEC,WACD;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,MAAO;AAAA,cACP,OAAQ,GAAI,OAAQ;AAAA,cACpB,SAAU;AAAA;AAAA,UACX;AAAA;AAAA;AAAA,IAEF;AAAA,IACE,QAAQ,SAAS,KAClB,oBAAC,QAAK,WAAU,uCACb;AAAA;AAAA,MAED,GAAI,6CAA8C;AAAA,MAClD,QAAQ,KAAK,YAAY;AAAA,IAC1B,GACD;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalText as Text,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { close } from '@wordpress/icons';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\nimport {\n\tTEMPLATE_POST_TYPE,\n\tTEMPLATE_PART_POST_TYPE,\n} from '../../store/constants';\nimport { unlock } from '../../lock-unlock';\nimport PostActions from '../post-actions';\nimport usePageTypeBadge from '../../utils/pageTypeBadge';\nimport { getTemplateInfo } from '../../utils/get-template-info';\nconst { Badge } = unlock( componentsPrivateApis );\n\n/**\n * Renders a title of the post type and the available quick actions available within a 3-dot dropdown.\n *\n * @param {Object}          props                     - Component props.\n * @param {string}          [props.postType]          - The post type string.\n * @param {string|string[]} [props.postId]            - The post id or list of post ids.\n * @param {boolean}         [props.hideActions]       - Whether to hide the actions. False by default.\n * @param {Function}        [props.onActionPerformed] - A callback function for when a quick action is performed.\n * @param {Function}        [props.onClose]           - A callback function for when the close button is clicked.\n * @return {React.ReactNode} The rendered component.\n */\nexport default function PostCardPanel( {\n\tpostType,\n\tpostId,\n\thideActions = false,\n\tonActionPerformed,\n\tonClose,\n} ) {\n\tconst postIds = useMemo(\n\t\t() => ( Array.isArray( postId ) ? postId : [ postId ] ),\n\t\t[ postId ]\n\t);\n\tconst { postTitle, icon, labels } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEditedEntityRecord, getCurrentTheme, getPostType } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst {\n\t\t\t\tgetPostIcon,\n\t\t\t\tgetCurrentPostType,\n\t\t\t\tisRevisionsMode,\n\t\t\t\tgetCurrentRevision,\n\t\t\t} = unlock( select( editorStore ) );\n\t\t\tlet _title = '';\n\n\t\t\t// In revisions mode, use the current revision.\n\t\t\tif ( isRevisionsMode() ) {\n\t\t\t\tconst parentPostType = getCurrentPostType();\n\t\t\t\tconst _record = getCurrentRevision();\n\t\t\t\t_title = _record?.title?.rendered || _record?.title?.raw || '';\n\t\t\t\treturn {\n\t\t\t\t\tpostTitle: _title,\n\t\t\t\t\ticon: getPostIcon( parentPostType, {\n\t\t\t\t\t\tarea: _record?.area,\n\t\t\t\t\t} ),\n\t\t\t\t\tlabels: getPostType( parentPostType )?.labels,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst _record = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\tpostType,\n\t\t\t\tpostIds[ 0 ]\n\t\t\t);\n\t\t\tif ( postIds.length === 1 ) {\n\t\t\t\tconst { default_template_types: templateTypes = [] } =\n\t\t\t\t\tgetCurrentTheme() ?? {};\n\n\t\t\t\tconst _templateInfo = [\n\t\t\t\t\tTEMPLATE_POST_TYPE,\n\t\t\t\t\tTEMPLATE_PART_POST_TYPE,\n\t\t\t\t].includes( postType )\n\t\t\t\t\t? getTemplateInfo( {\n\t\t\t\t\t\t\ttemplate: _record,\n\t\t\t\t\t\t\ttemplateTypes,\n\t\t\t\t\t  } )\n\t\t\t\t\t: {};\n\t\t\t\t_title = _templateInfo?.title || _record?.title;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tpostTitle: _title,\n\t\t\t\ticon: getPostIcon( postType, {\n\t\t\t\t\tarea: _record?.area,\n\t\t\t\t} ),\n\t\t\t\tlabels: getPostType( postType )?.labels,\n\t\t\t};\n\t\t},\n\t\t[ postIds, postType ]\n\t);\n\n\tconst pageTypeBadge = usePageTypeBadge( postId );\n\tlet title = __( 'No title' );\n\tif ( labels?.name && postIds.length > 1 ) {\n\t\ttitle = sprintf(\n\t\t\t// translators: %1$d number of selected items %2$s: Name of the plural post type e.g: \"Posts\".\n\t\t\t__( '%1$d %2$s' ),\n\t\t\tpostIds.length,\n\t\t\tlabels?.name\n\t\t);\n\t} else if ( postTitle ) {\n\t\ttitle = stripHTML( postTitle );\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 1 } className=\"editor-post-card-panel\">\n\t\t\t<HStack\n\t\t\t\tspacing={ 2 }\n\t\t\t\tclassName=\"editor-post-card-panel__header\"\n\t\t\t\talignment=\"flex-start\"\n\t\t\t>\n\t\t\t\t<Icon className=\"editor-post-card-panel__icon\" icon={ icon } />\n\t\t\t\t<Text\n\t\t\t\t\tnumberOfLines={ 2 }\n\t\t\t\t\ttruncate\n\t\t\t\t\tclassName=\"editor-post-card-panel__title\"\n\t\t\t\t\tas=\"h2\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"editor-post-card-panel__title-name\">\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ pageTypeBadge && postIds.length === 1 && (\n\t\t\t\t\t\t<Badge>{ pageTypeBadge }</Badge>\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t\t{ ! hideActions && postIds.length === 1 && (\n\t\t\t\t\t<PostActions\n\t\t\t\t\t\tpostType={ postType }\n\t\t\t\t\t\tpostId={ postIds[ 0 ] }\n\t\t\t\t\t\tonActionPerformed={ onActionPerformed }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ onClose && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\tlabel={ __( 'Close' ) }\n\t\t\t\t\t\tonClick={ onClose }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ postIds.length > 1 && (\n\t\t\t\t<Text className=\"editor-post-card-panel__description\">\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t// translators: %s: Name of the plural post type e.g: \"Posts\".\n\t\t\t\t\t\t__( 'Changes will be applied to all selected %s.' ),\n\t\t\t\t\t\tlabels?.name.toLowerCase()\n\t\t\t\t\t) }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["_record"]
 }