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

package/build/components/collaborators-overlay/overlay.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/editor/src/components/collaborators-overlay/overlay.tsx
@@ -23,201 +33,16 @@ __export(overlay_exports, {
   Overlay: () => Overlay
 });
 module.exports = __toCommonJS(overlay_exports);
-var import_components = require("@wordpress/components");
 var import_compose = require("@wordpress/compose");
 var import_element = require("@wordpress/element");
-var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_i18n = require("@wordpress/i18n");
+var import_avatar = __toESM(require("../collaborators-presence/avatar/index.cjs"));
+var import_avatar_iframe_styles = require("./avatar-iframe-styles.cjs");
+var import_overlay_iframe_styles = require("./overlay-iframe-styles.cjs");
 var import_use_block_highlighting = require("./use-block-highlighting.cjs");
 var import_use_render_cursors = require("./use-render-cursors.cjs");
-var import_collaborator_styles = require("./collaborator-styles.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var { Avatar } = (0, import_lock_unlock.unlock)(import_components.privateApis);
-var COLLABORATORS_OVERLAY_STYLES = `
-.block-canvas-cover {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	z-index: 20000;
-}
-.block-canvas-cover .collaborators-overlay-full {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-.block-canvas-cover .collaborators-overlay-fixed {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-}
-.collaborators-overlay-user {
-	position: absolute;
-}
-.collaborators-overlay-user-cursor {
-	position: absolute;
-	width: 2px;
-	border-radius: 1px;
-	outline: 1px solid #fff;
-	box-shadow: ${import_collaborator_styles.ELEVATION_X_SMALL};
-	animation: collaborators-overlay-cursor-blink 1s infinite;
-}
-
-/* \u2500\u2500 Avatar component (compiled from packages/components/src/avatar/styles.scss) \u2500\u2500 */
-.components-avatar {
-	display: inline-flex;
-	align-items: center;
-	border-radius: 9999px;
-	overflow: clip;
-	flex-shrink: 0;
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff, ${import_collaborator_styles.ELEVATION_X_SMALL};
-}
-.components-avatar__image {
-	box-sizing: border-box;
-	position: relative;
-	width: 32px;
-	height: 32px;
-	border-radius: 9999px;
-	border: 0;
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-	overflow: clip;
-	flex-shrink: 0;
-	font-size: 0;
-	color: #fff;
-}
-.is-small > .components-avatar__image {
-	width: 24px;
-	height: 24px;
-}
-.has-src > .components-avatar__image {
-	background-image: var(--components-avatar-url);
-	background-size: cover;
-	background-position: center;
-}
-.has-avatar-border-color > .components-avatar__image {
-	border: var(--wp-admin-border-width-focus, 2px) solid var(--components-avatar-outline-color);
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;
-	background-clip: padding-box;
-}
-.components-avatar:not(.has-src) > .components-avatar__image {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 11px;
-	font-weight: 499;
-	border: 0;
-	box-shadow: none;
-	background-clip: border-box;
-}
-.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
-	background-color: var(--components-avatar-outline-color);
-}
-.components-avatar__name {
-	font-size: 13px;
-	line-height: 20px;
-	color: #fff;
-	min-width: 0;
-	padding-bottom: 2px;
-	overflow: hidden;
-	opacity: 0;
-	white-space: nowrap;
-	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
-}
-.components-avatar.has-badge {
-	display: inline-grid;
-	grid-template-columns: min-content 0fr;
-	column-gap: 0;
-	padding-inline-end: 0;
-	transition:
-		grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
-}
-.components-avatar.has-badge:hover {
-	grid-template-columns: min-content 1fr;
-	column-gap: 4px;
-	padding-inline-end: 8px;
-	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge:hover .components-avatar__name {
-	opacity: 1;
-	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge.has-avatar-border-color {
-	background-color: var(--components-avatar-outline-color);
-}
-/* \u2500\u2500 end Avatar \u2500\u2500 */
-
-/* Overlay-specific positioning applied to the Avatar cursor label. */
-.collaborators-overlay-user-label.components-avatar {
-	position: absolute;
-	transform: translate(-11px, -100%);
-	margin-top: -4px;
-	pointer-events: auto;
-	overflow: visible;
-	width: max-content;
-}
-
-@keyframes collaborators-overlay-cursor-blink {
-	0%, 45% { opacity: 1; }
-	55%, 95% { opacity: 0; }
-	100% { opacity: 1; }
-}
-.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-cursor {
-	animation: collaborators-overlay-cursor-highlight 0.6s ease-in-out 3;
-}
-.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-label {
-	animation: collaborators-overlay-label-highlight 0.6s ease-in-out 3;
-}
-@keyframes collaborators-overlay-cursor-highlight {
-	0%, 100% {
-		transform: scale(1);
-		filter: drop-shadow(0 0 0 transparent);
-	}
-	50% {
-		transform: scale(1.2);
-		filter: drop-shadow(0 0 8px currentColor);
-	}
-}
-@keyframes collaborators-overlay-label-highlight {
-	0%, 100% {
-		transform: translate(-11px, -100%) scale(1);
-		filter: drop-shadow(0 0 0 transparent);
-	}
-	50% {
-		transform: translate(-11px, -100%) scale(1.1);
-		filter: drop-shadow(0 0 6px currentColor);
-	}
-}
-.block-editor-block-list__block.is-collaborator-selected:not(:focus)::after {
-	content: "";
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	outline-color: var(--collaborator-outline-color);
-	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, 2px) + 1px) #fff, 0 0 0 1px #fff, ${import_collaborator_styles.ELEVATION_X_SMALL};
-	z-index: 1;
-}
-@media (prefers-reduced-motion: reduce) {
-	.components-avatar.has-badge,
-	.components-avatar__name,
-	.collaborators-overlay-user-label,
-	.collaborators-overlay-user-cursor {
-		transition: none;
-		animation: none;
-	}
-}
-`;
+var RERENDER_DELAY_MS = 500;
 function Overlay({
   blockEditorDocument,
   postId,
@@ -228,54 +53,100 @@ function Overlay({
     overlayElement,
     blockEditorDocument ?? null,
     postId ?? null,
-    postType ?? null
+    postType ?? null,
+    RERENDER_DELAY_MS
+  );
+  const { highlights, rerenderHighlightsAfterDelay } = (0, import_use_block_highlighting.useBlockHighlighting)(
+    overlayElement,
+    blockEditorDocument ?? null,
+    postId ?? null,
+    postType ?? null,
+    RERENDER_DELAY_MS
   );
-  const resizeObserverRef = (0, import_compose.useResizeObserver)(rerenderCursorsAfterDelay);
-  (0, import_element.useEffect)(rerenderCursorsAfterDelay, [rerenderCursorsAfterDelay]);
+  const onResize = (0, import_element.useCallback)(() => {
+    rerenderCursorsAfterDelay();
+    rerenderHighlightsAfterDelay();
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  const resizeObserverRef = (0, import_compose.useResizeObserver)(onResize);
+  (0, import_element.useEffect)(() => {
+    const cleanupCursors = rerenderCursorsAfterDelay();
+    const cleanupHighlights = rerenderHighlightsAfterDelay();
+    return () => {
+      cleanupCursors();
+      cleanupHighlights();
+    };
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
   const mergedRef = (0, import_compose.useMergeRefs)([
     setOverlayElement,
     resizeObserverRef
   ]);
-  (0, import_use_block_highlighting.useBlockHighlighting)(
-    blockEditorDocument ?? null,
-    postId ?? null,
-    postType ?? null
-  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "collaborators-overlay-full", ref: mergedRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: COLLABORATORS_OVERLAY_STYLES }),
-    cursors.map((cursor) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: "collaborators-overlay-user",
-        style: {
-          left: `${cursor.x}px`,
-          top: `${cursor.y}px`
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: import_avatar_iframe_styles.AVATAR_IFRAME_STYLES + import_overlay_iframe_styles.OVERLAY_IFRAME_STYLES }),
+    cursors.map((cursor) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      !cursor.isMe && cursor.selectionRects?.map((rect, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: "collaborators-overlay-selection-rect",
+          style: {
+            left: `${rect.x}px`,
+            top: `${rect.y}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            backgroundColor: cursor.color
+          }
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
-            {
-              className: "collaborators-overlay-user-cursor",
-              style: {
-                backgroundColor: cursor.color,
-                height: `${cursor.height}px`
+        `${cursor.clientId}-sel-${index}`
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "collaborators-overlay-user",
+          style: {
+            left: `${cursor.x}px`,
+            top: `${cursor.y}px`
+          },
+          children: [
+            !cursor.isMe && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "collaborators-overlay-user-cursor",
+                style: {
+                  backgroundColor: cursor.color,
+                  height: `${cursor.height}px`
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_avatar.default,
+              {
+                className: "collaborators-overlay-user-label",
+                variant: "badge",
+                size: "small",
+                src: cursor.avatarUrl,
+                name: cursor.userName,
+                label: cursor.isMe ? (0, import_i18n.__)("You") : void 0,
+                borderColor: cursor.color
               }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            Avatar,
-            {
-              className: "collaborators-overlay-user-label",
-              badge: true,
-              size: "small",
-              src: cursor.avatarUrl,
-              name: cursor.userName,
-              borderColor: cursor.color
-            }
-          )
-        ]
+            )
+          ]
+        }
+      )
+    ] }, cursor.clientId)),
+    highlights.map((highlight) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_avatar.default,
+      {
+        className: "collaborators-overlay-block-label",
+        variant: "badge",
+        size: "small",
+        src: highlight.avatarUrl,
+        name: highlight.userName,
+        borderColor: highlight.color,
+        style: {
+          left: `${highlight.x}px`,
+          top: `${highlight.y}px`
+        }
       },
-      cursor.clientId
+      highlight.blockId
     ))
   ] });
 }

package/build/components/collaborators-overlay/overlay.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/overlay.tsx"],
-  "sourcesContent": ["import { privateApis as componentsPrivateApis } from '@wordpress/components';\nimport { useResizeObserver, useMergeRefs } from '@wordpress/compose';\nimport { useEffect, useState } from '@wordpress/element';\n\nimport { unlock } from '../../lock-unlock';\nimport { useBlockHighlighting } from './use-block-highlighting';\nimport { useRenderCursors } from './use-render-cursors';\nimport { ELEVATION_X_SMALL } from './collaborator-styles';\n\nconst { Avatar } = unlock( componentsPrivateApis );\n\n// wp-components styles are excluded from the editor canvas iframe, so the\n// Avatar component's SCSS is not available there. We inject compiled versions\n// of the relevant rules alongside the overlay-specific positioning styles.\nconst COLLABORATORS_OVERLAY_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.collaborators-overlay-user-cursor {\n\tposition: absolute;\n\twidth: 2px;\n\tborder-radius: 1px;\n\toutline: 1px solid #fff;\n\tbox-shadow: ${ ELEVATION_X_SMALL };\n\tanimation: collaborators-overlay-cursor-blink 1s infinite;\n}\n\n/* \u2500\u2500 Avatar component (compiled from packages/components/src/avatar/styles.scss) \u2500\u2500 */\n.components-avatar {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: 9999px;\n\toverflow: clip;\n\tflex-shrink: 0;\n\tbackground-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff, ${ ELEVATION_X_SMALL };\n}\n.components-avatar__image {\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 9999px;\n\tborder: 0;\n\tbackground-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));\n\toverflow: clip;\n\tflex-shrink: 0;\n\tfont-size: 0;\n\tcolor: #fff;\n}\n.is-small > .components-avatar__image {\n\twidth: 24px;\n\theight: 24px;\n}\n.has-src > .components-avatar__image {\n\tbackground-image: var(--components-avatar-url);\n\tbackground-size: cover;\n\tbackground-position: center;\n}\n.has-avatar-border-color > .components-avatar__image {\n\tborder: var(--wp-admin-border-width-focus, 2px) solid var(--components-avatar-outline-color);\n\tbox-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;\n\tbackground-clip: padding-box;\n}\n.components-avatar:not(.has-src) > .components-avatar__image {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 11px;\n\tfont-weight: 499;\n\tborder: 0;\n\tbox-shadow: none;\n\tbackground-clip: border-box;\n}\n.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {\n\tbackground-color: var(--components-avatar-outline-color);\n}\n.components-avatar__name {\n\tfont-size: 13px;\n\tline-height: 20px;\n\tcolor: #fff;\n\tmin-width: 0;\n\tpadding-bottom: 2px;\n\toverflow: hidden;\n\topacity: 0;\n\twhite-space: nowrap;\n\ttransition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);\n}\n.components-avatar.has-badge {\n\tdisplay: inline-grid;\n\tgrid-template-columns: min-content 0fr;\n\tcolumn-gap: 0;\n\tpadding-inline-end: 0;\n\ttransition:\n\t\tgrid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),\n\t\tcolumn-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),\n\t\tpadding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);\n}\n.components-avatar.has-badge:hover {\n\tgrid-template-columns: min-content 1fr;\n\tcolumn-gap: 4px;\n\tpadding-inline-end: 8px;\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.components-avatar.has-badge:hover .components-avatar__name {\n\topacity: 1;\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.components-avatar.has-badge.has-avatar-border-color {\n\tbackground-color: var(--components-avatar-outline-color);\n}\n/* \u2500\u2500 end Avatar \u2500\u2500 */\n\n/* Overlay-specific positioning applied to the Avatar cursor label. */\n.collaborators-overlay-user-label.components-avatar {\n\tposition: absolute;\n\ttransform: translate(-11px, -100%);\n\tmargin-top: -4px;\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, 2px) + 1px) #fff, 0 0 0 1px #fff, ${ ELEVATION_X_SMALL };\n\tz-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n\t.components-avatar.has-badge,\n\t.components-avatar__name,\n\t.collaborators-overlay-user-label,\n\t.collaborators-overlay-user-cursor {\n\t\ttransition: none;\n\t\tanimation: none;\n\t}\n}\n`;\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);\n\n\t// Detect layout changes on overlay (e.g. turning on \"Show Template\") and window\n\t// resizes, and re-render the cursors.\n\tconst resizeObserverRef = useResizeObserver( rerenderCursorsAfterDelay );\n\tuseEffect( rerenderCursorsAfterDelay, [ 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\tuseBlockHighlighting(\n\t\tblockEditorDocument ?? null,\n\t\tpostId ?? null,\n\t\tpostType ?? null\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>{ COLLABORATORS_OVERLAY_STYLES }</style>\n\t\t\t{ cursors.map( ( cursor ) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={ cursor.clientId }\n\t\t\t\t\tclassName=\"collaborators-overlay-user\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tleft: `${ cursor.x }px`,\n\t\t\t\t\t\ttop: `${ cursor.y }px`,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"collaborators-overlay-user-cursor\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\tbackgroundColor: cursor.color,\n\t\t\t\t\t\t\theight: `${ cursor.height }px`,\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<Avatar\n\t\t\t\t\t\tclassName=\"collaborators-overlay-user-label\"\n\t\t\t\t\t\tbadge\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tsrc={ cursor.avatarUrl }\n\t\t\t\t\t\tname={ cursor.userName }\n\t\t\t\t\t\tborderColor={ cursor.color }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["componentsPrivateApis"]
+  "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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",
+  "names": ["Avatar"]
 }

package/build/components/collaborators-overlay/use-block-highlighting.cjs

@@ -27,8 +27,10 @@ var import_core_data = require("@wordpress/core-data");
 var import_element = require("@wordpress/element");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_utils = require("../collab-sidebar/utils.cjs");
+var import_get_avatar_url = require("./get-avatar-url.cjs");
+var import_use_debounced_recompute = require("./use-debounced-recompute.cjs");
 var { useActiveCollaborators, useResolvedSelection } = (0, import_lock_unlock.unlock)(import_core_data.privateApis);
-function useBlockHighlighting(blockEditorDocument, postId, postType) {
+function useBlockHighlighting(overlayElement, blockEditorDocument, postId, postType, delayMs) {
   const highlightedBlockIds = (0, import_element.useRef)(/* @__PURE__ */ new Set());
   const userStates = useActiveCollaborators(
     postId ?? null,
@@ -38,12 +40,55 @@ function useBlockHighlighting(blockEditorDocument, postId, postType) {
     postId ?? null,
     postType ?? null
   );
+  const [highlights, setHighlights] = (0, import_element.useState)(
+    []
+  );
+  const [recomputeToken, rerenderHighlightsAfterDelay] = (0, import_use_debounced_recompute.useDebouncedRecompute)(delayMs);
   (0, import_element.useEffect)(() => {
-    if (blockEditorDocument === null) {
+    if (!blockEditorDocument) {
+      setHighlights([]);
       return;
     }
-    const unhighlightBlocks = (blockIds) => {
-      blockIds.forEach((blockId) => {
+    const currentHighlightedIds = highlightedBlockIds.current;
+    const seen = /* @__PURE__ */ new Set();
+    const blocksToHighlight = userStates.filter((userState) => {
+      const isWholeBlockSelected = userState.editorState?.selection?.type === import_core_data.SelectionType.WholeBlock;
+      return !userState.isMe && isWholeBlockSelected;
+    }).map((userState) => {
+      let localClientId;
+      try {
+        ({ localClientId } = resolveSelection(
+          userState.editorState?.selection
+        ));
+      } catch {
+        return null;
+      }
+      if (!localClientId) {
+        return null;
+      }
+      return {
+        blockId: localClientId,
+        color: userState.isMe ? "var(--wp-admin-theme-color)" : (0, import_utils.getAvatarBorderColor)(userState.collaboratorInfo.id),
+        userName: userState.collaboratorInfo.name,
+        avatarUrl: (0, import_get_avatar_url.getAvatarUrl)(
+          userState.collaboratorInfo.avatar_urls
+        )
+      };
+    }).filter((block) => {
+      if (!block) {
+        return false;
+      }
+      if (seen.has(block.blockId)) {
+        return false;
+      }
+      seen.add(block.blockId);
+      return true;
+    });
+    const selectedBlockIds = new Set(
+      blocksToHighlight.map((block) => block.blockId)
+    );
+    for (const blockId of currentHighlightedIds) {
+      if (!selectedBlockIds.has(blockId)) {
         const blockElement = getBlockElementById(
           blockEditorDocument,
           blockId
@@ -54,37 +99,13 @@ function useBlockHighlighting(blockEditorDocument, postId, postType) {
             "--collaborator-outline-color"
           );
         }
-        highlightedBlockIds.current.delete(blockId);
-      });
-    };
-    const blocksToHighlight = userStates.map((userState) => {
-      const isWholeBlockSelected = userState.editorState?.selection?.type === import_core_data.SelectionType.WholeBlock;
-      const shouldDrawUser = !userState.isMe;
-      if (isWholeBlockSelected && shouldDrawUser) {
-        const { localClientId } = resolveSelection(
-          userState.editorState?.selection
-        );
-        if (!localClientId) {
-          return null;
-        }
-        return {
-          blockId: localClientId,
-          color: (0, import_utils.getAvatarBorderColor)(
-            userState.collaboratorInfo.id
-          )
-        };
+        currentHighlightedIds.delete(blockId);
       }
-      return null;
-    }).filter((block) => block !== null);
-    const selectedBlockIds = blocksToHighlight.map(
-      (block) => block.blockId
-    );
-    const blocksIdsToUnhighlight = Array.from(
-      highlightedBlockIds.current
-    ).filter((blockId) => !selectedBlockIds.includes(blockId));
-    unhighlightBlocks(blocksIdsToUnhighlight);
-    blocksToHighlight.forEach((blockColorPair) => {
-      const { color, blockId } = blockColorPair;
+    }
+    const results = [];
+    const overlayRect = overlayElement?.getBoundingClientRect() ?? null;
+    blocksToHighlight.forEach((block) => {
+      const { color, blockId, userName, avatarUrl } = block;
       const blockElement = getBlockElementById(
         blockEditorDocument,
         blockId
@@ -92,16 +113,43 @@ function useBlockHighlighting(blockEditorDocument, postId, postType) {
       if (!blockElement) {
         return;
       }
-      if (blockElement) {
-        blockElement.classList.add("is-collaborator-selected");
-        blockElement.style.setProperty(
-          "--collaborator-outline-color",
-          color
-        );
-        highlightedBlockIds.current.add(blockId);
+      blockElement.classList.add("is-collaborator-selected");
+      blockElement.style.setProperty(
+        "--collaborator-outline-color",
+        color
+      );
+      currentHighlightedIds.add(blockId);
+      if (overlayRect) {
+        const blockRect = blockElement.getBoundingClientRect();
+        results.push({
+          blockId,
+          userName,
+          avatarUrl,
+          color,
+          x: blockRect.left - overlayRect.left,
+          y: blockRect.top - overlayRect.top
+        });
       }
     });
-  }, [userStates, blockEditorDocument, resolveSelection]);
+    setHighlights(results);
+    return () => {
+      for (const blockId of currentHighlightedIds) {
+        const el = getBlockElementById(blockEditorDocument, blockId);
+        if (el) {
+          el.classList.remove("is-collaborator-selected");
+          el.style.removeProperty("--collaborator-outline-color");
+        }
+      }
+      currentHighlightedIds.clear();
+    };
+  }, [
+    userStates,
+    blockEditorDocument,
+    overlayElement,
+    recomputeToken,
+    resolveSelection
+  ]);
+  return { highlights, rerenderHighlightsAfterDelay };
 }
 var getBlockElementById = (blockEditorDocument, blockId) => {
   return blockEditorDocument.querySelector(`[data-block="${blockId}"]`);

package/build/components/collaborators-overlay/use-block-highlighting.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/use-block-highlighting.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as coreDataPrivateApis,\n\tSelectionType,\n} from '@wordpress/core-data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\n\n/**\n * Custom hook for highlighting selected blocks in the editor\n * @param blockEditorDocument - Ref to the block editor document, used to directly style block elements.\n * @param postId              - The ID of the post\n * @param postType            - The type of the post\n */\nexport function useBlockHighlighting(\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null\n) {\n\tconst highlightedBlockIds = useRef< Set< string > >( new Set() );\n\tconst userStates = 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\t// Draw block highlights\n\tuseEffect( () => {\n\t\t// Don't do anything if editor is not rendered yet.\n\t\tif ( blockEditorDocument === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst unhighlightBlocks = ( blockIds: string[] ) => {\n\t\t\tblockIds.forEach( ( blockId ) => {\n\t\t\t\tconst blockElement = getBlockElementById(\n\t\t\t\t\tblockEditorDocument,\n\t\t\t\t\tblockId\n\t\t\t\t);\n\n\t\t\t\tif ( blockElement ) {\n\t\t\t\t\tblockElement.classList.remove( 'is-collaborator-selected' );\n\t\t\t\t\tblockElement.style.removeProperty(\n\t\t\t\t\t\t'--collaborator-outline-color'\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\thighlightedBlockIds.current.delete( blockId );\n\t\t\t} );\n\t\t};\n\n\t\tconst blocksToHighlight = userStates\n\t\t\t.map( ( userState: any ) => {\n\t\t\t\tconst isWholeBlockSelected =\n\t\t\t\t\tuserState.editorState?.selection?.type ===\n\t\t\t\t\tSelectionType.WholeBlock;\n\t\t\t\tconst shouldDrawUser = ! userState.isMe;\n\n\t\t\t\tif ( isWholeBlockSelected && shouldDrawUser ) {\n\t\t\t\t\tconst { localClientId } = resolveSelection(\n\t\t\t\t\t\tuserState.editorState?.selection\n\t\t\t\t\t);\n\n\t\t\t\t\tif ( ! localClientId ) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tblockId: localClientId,\n\t\t\t\t\t\tcolor: getAvatarBorderColor(\n\t\t\t\t\t\t\tuserState.collaboratorInfo.id\n\t\t\t\t\t\t),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} )\n\t\t\t.filter( ( block: any ) => block !== null );\n\n\t\t// Unhighlight blocks that are no longer highlighted.\n\t\tconst selectedBlockIds = blocksToHighlight.map(\n\t\t\t( block: any ) => block.blockId\n\t\t);\n\t\tconst blocksIdsToUnhighlight = Array.from(\n\t\t\thighlightedBlockIds.current\n\t\t).filter( ( blockId ) => ! selectedBlockIds.includes( blockId ) );\n\n\t\tunhighlightBlocks( blocksIdsToUnhighlight );\n\n\t\t// Highlight blocks that are currently highlighted.\n\t\tblocksToHighlight.forEach( ( blockColorPair: any ) => {\n\t\t\tconst { color, blockId } = blockColorPair;\n\t\t\tconst blockElement = getBlockElementById(\n\t\t\t\tblockEditorDocument,\n\t\t\t\tblockId\n\t\t\t);\n\n\t\t\tif ( ! blockElement ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( blockElement ) {\n\t\t\t\tblockElement.classList.add( 'is-collaborator-selected' );\n\t\t\t\tblockElement.style.setProperty(\n\t\t\t\t\t'--collaborator-outline-color',\n\t\t\t\t\tcolor\n\t\t\t\t);\n\t\t\t\thighlightedBlockIds.current.add( blockId );\n\t\t\t}\n\t\t} );\n\t}, [ userStates, blockEditorDocument, resolveSelection ] );\n}\n\nconst getBlockElementById = (\n\tblockEditorDocument: Document,\n\tblockId: string\n): HTMLElement | null => {\n\treturn blockEditorDocument.querySelector( `[data-block=\"${ blockId }\"]` );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAGO;AACP,qBAAkC;AAKlC,yBAAuB;AACvB,mBAAqC;AAErC,IAAM,EAAE,wBAAwB,qBAAqB,QACpD,2BAAQ,iBAAAA,WAAoB;AAQtB,SAAS,qBACf,qBACA,QACA,UACC;AACD,QAAM,0BAAsB,uBAAyB,oBAAI,IAAI,CAAE;AAC/D,QAAM,aAAa;AAAA,IAClB,UAAU;AAAA,IACV,YAAY;AAAA,EACb;AACA,QAAM,mBAAmB;AAAA,IACxB,UAAU;AAAA,IACV,YAAY;AAAA,EACb;AAGA,gCAAW,MAAM;AAEhB,QAAK,wBAAwB,MAAO;AACnC;AAAA,IACD;AAEA,UAAM,oBAAoB,CAAE,aAAwB;AACnD,eAAS,QAAS,CAAE,YAAa;AAChC,cAAM,eAAe;AAAA,UACpB;AAAA,UACA;AAAA,QACD;AAEA,YAAK,cAAe;AACnB,uBAAa,UAAU,OAAQ,0BAA2B;AAC1D,uBAAa,MAAM;AAAA,YAClB;AAAA,UACD;AAAA,QACD;AAEA,4BAAoB,QAAQ,OAAQ,OAAQ;AAAA,MAC7C,CAAE;AAAA,IACH;AAEA,UAAM,oBAAoB,WACxB,IAAK,CAAE,cAAoB;AAC3B,YAAM,uBACL,UAAU,aAAa,WAAW,SAClC,+BAAc;AACf,YAAM,iBAAiB,CAAE,UAAU;AAEnC,UAAK,wBAAwB,gBAAiB;AAC7C,cAAM,EAAE,cAAc,IAAI;AAAA,UACzB,UAAU,aAAa;AAAA,QACxB;AAEA,YAAK,CAAE,eAAgB;AACtB,iBAAO;AAAA,QACR;AAEA,eAAO;AAAA,UACN,SAAS;AAAA,UACT,WAAO;AAAA,YACN,UAAU,iBAAiB;AAAA,UAC5B;AAAA,QACD;AAAA,MACD;AAEA,aAAO;AAAA,IACR,CAAE,EACD,OAAQ,CAAE,UAAgB,UAAU,IAAK;AAG3C,UAAM,mBAAmB,kBAAkB;AAAA,MAC1C,CAAE,UAAgB,MAAM;AAAA,IACzB;AACA,UAAM,yBAAyB,MAAM;AAAA,MACpC,oBAAoB;AAAA,IACrB,EAAE,OAAQ,CAAE,YAAa,CAAE,iBAAiB,SAAU,OAAQ,CAAE;AAEhE,sBAAmB,sBAAuB;AAG1C,sBAAkB,QAAS,CAAE,mBAAyB;AACrD,YAAM,EAAE,OAAO,QAAQ,IAAI;AAC3B,YAAM,eAAe;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAEA,UAAK,CAAE,cAAe;AACrB;AAAA,MACD;AAEA,UAAK,cAAe;AACnB,qBAAa,UAAU,IAAK,0BAA2B;AACvD,qBAAa,MAAM;AAAA,UAClB;AAAA,UACA;AAAA,QACD;AACA,4BAAoB,QAAQ,IAAK,OAAQ;AAAA,MAC1C;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAE,YAAY,qBAAqB,gBAAiB,CAAE;AAC1D;AAEA,IAAM,sBAAsB,CAC3B,qBACA,YACwB;AACxB,SAAO,oBAAoB,cAAe,gBAAiB,OAAQ,IAAK;AACzE;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as coreDataPrivateApis,\n\tSelectionType,\n\ttype PostEditorAwarenessState as ActiveCollaborator,\n} from '@wordpress/core-data';\nimport { useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { getAvatarUrl } from './get-avatar-url';\nimport { useDebouncedRecompute } from './use-debounced-recompute';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\n\nexport interface BlockHighlightData {\n\tblockId: string;\n\tuserName: string;\n\tavatarUrl?: string;\n\tcolor: string;\n\tx: number;\n\ty: number;\n}\n\n/**\n * Custom hook for highlighting selected blocks in the editor and computing\n * their positions for rendering avatar labels in the overlay.\n *\n * @param overlayElement      - The overlay element used as position reference.\n * @param blockEditorDocument - Ref to 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 highlight positions.\n * @return Highlight data for rendering and a delayed recompute function.\n */\nexport function useBlockHighlighting(\n\toverlayElement: HTMLElement | null,\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null,\n\tdelayMs: number\n): {\n\thighlights: BlockHighlightData[];\n\trerenderHighlightsAfterDelay: () => () => void;\n} {\n\tconst highlightedBlockIds = useRef< Set< string > >( new Set() );\n\tconst userStates: ActiveCollaborator[] = 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 [ highlights, setHighlights ] = useState< BlockHighlightData[] >(\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, rerenderHighlightsAfterDelay ] =\n\t\tuseDebouncedRecompute( delayMs );\n\n\t// All DOM mutations and position computations live inside useEffect.\n\tuseEffect( () => {\n\t\tif ( ! blockEditorDocument ) {\n\t\t\tsetHighlights( [] );\n\t\t\treturn;\n\t\t}\n\n\t\t// Capture the ref value so the cleanup closure sees the same Set\n\t\t// even if a later render replaces it.\n\t\tconst currentHighlightedIds = highlightedBlockIds.current;\n\n\t\t// Deduplicate by blockId \u2014 when multiple collaborators select the\n\t\t// same block, only the first one gets the highlight and avatar label.\n\t\tconst seen = new Set< string >();\n\t\tconst blocksToHighlight = userStates\n\t\t\t.filter( ( userState: ActiveCollaborator ) => {\n\t\t\t\tconst isWholeBlockSelected =\n\t\t\t\t\tuserState.editorState?.selection?.type ===\n\t\t\t\t\tSelectionType.WholeBlock;\n\n\t\t\t\treturn ! userState.isMe && isWholeBlockSelected;\n\t\t\t} )\n\t\t\t.map( ( userState ) => {\n\t\t\t\tlet localClientId;\n\t\t\t\ttry {\n\t\t\t\t\t( { localClientId } = resolveSelection(\n\t\t\t\t\t\tuserState.editorState?.selection\n\t\t\t\t\t) );\n\t\t\t\t} catch {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( ! localClientId ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn {\n\t\t\t\t\tblockId: localClientId,\n\t\t\t\t\tcolor: userState.isMe\n\t\t\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t\t\t: getAvatarBorderColor( userState.collaboratorInfo.id ),\n\t\t\t\t\tuserName: userState.collaboratorInfo.name,\n\t\t\t\t\tavatarUrl: getAvatarUrl(\n\t\t\t\t\t\tuserState.collaboratorInfo.avatar_urls\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t} )\n\t\t\t.filter( ( block ): block is NonNullable< typeof block > => {\n\t\t\t\tif ( ! block ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tif ( seen.has( block.blockId ) ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tseen.add( block.blockId );\n\t\t\t\treturn true;\n\t\t\t} );\n\n\t\t// Unhighlight blocks that are no longer selected.\n\t\tconst selectedBlockIds = new Set(\n\t\t\tblocksToHighlight.map( ( block ) => block.blockId )\n\t\t);\n\n\t\tfor ( const blockId of currentHighlightedIds ) {\n\t\t\tif ( ! selectedBlockIds.has( blockId ) ) {\n\t\t\t\tconst blockElement = getBlockElementById(\n\t\t\t\t\tblockEditorDocument,\n\t\t\t\t\tblockId\n\t\t\t\t);\n\n\t\t\t\tif ( blockElement ) {\n\t\t\t\t\tblockElement.classList.remove( 'is-collaborator-selected' );\n\t\t\t\t\tblockElement.style.removeProperty(\n\t\t\t\t\t\t'--collaborator-outline-color'\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tcurrentHighlightedIds.delete( blockId );\n\t\t\t}\n\t\t}\n\n\t\t// Highlight blocks and compute positions for avatar labels.\n\t\tconst results: BlockHighlightData[] = [];\n\t\tconst overlayRect = overlayElement?.getBoundingClientRect() ?? null;\n\n\t\tblocksToHighlight.forEach( ( block ) => {\n\t\t\tconst { color, blockId, userName, avatarUrl } = block;\n\t\t\tconst blockElement = getBlockElementById(\n\t\t\t\tblockEditorDocument,\n\t\t\t\tblockId\n\t\t\t);\n\n\t\t\tif ( ! blockElement ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tblockElement.classList.add( 'is-collaborator-selected' );\n\t\t\tblockElement.style.setProperty(\n\t\t\t\t'--collaborator-outline-color',\n\t\t\t\tcolor\n\t\t\t);\n\t\t\tcurrentHighlightedIds.add( blockId );\n\n\t\t\tif ( overlayRect ) {\n\t\t\t\tconst blockRect = blockElement.getBoundingClientRect();\n\n\t\t\t\tresults.push( {\n\t\t\t\t\tblockId,\n\t\t\t\t\tuserName,\n\t\t\t\t\tavatarUrl,\n\t\t\t\t\tcolor,\n\t\t\t\t\tx: blockRect.left - overlayRect.left,\n\t\t\t\t\ty: blockRect.top - overlayRect.top,\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\n\t\tsetHighlights( results );\n\n\t\t// Clean up all highlights on unmount.\n\t\treturn () => {\n\t\t\tfor ( const blockId of currentHighlightedIds ) {\n\t\t\t\tconst el = getBlockElementById( blockEditorDocument, blockId );\n\t\t\t\tif ( el ) {\n\t\t\t\t\tel.classList.remove( 'is-collaborator-selected' );\n\t\t\t\t\tel.style.removeProperty( '--collaborator-outline-color' );\n\t\t\t\t}\n\t\t\t}\n\t\t\tcurrentHighlightedIds.clear();\n\t\t};\n\t}, [\n\t\tuserStates,\n\t\tblockEditorDocument,\n\t\toverlayElement,\n\t\trecomputeToken,\n\t\tresolveSelection,\n\t] );\n\n\treturn { highlights, rerenderHighlightsAfterDelay };\n}\n\nconst getBlockElementById = (\n\tblockEditorDocument: Document,\n\tblockId: string\n): HTMLElement | null => {\n\treturn blockEditorDocument.querySelector( `[data-block=\"${ blockId }\"]` );\n};\n"],
+  "mappings": "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",
   "names": ["coreDataPrivateApis"]
 }