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

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

@@ -1,261 +1,161 @@
 // packages/editor/src/components/collaborators-overlay/overlay.tsx
-import { useStyleOverride } from "@wordpress/block-editor";
-import { privateApis as componentsPrivateApis } from "@wordpress/components";
 import { useResizeObserver, useMergeRefs } from "@wordpress/compose";
-import { useEffect, useState } from "@wordpress/element";
-import { unlock } from "../../lock-unlock.mjs";
+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 { ELEVATION_X_SMALL } from "./collaborator-styles.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-var { Avatar } = unlock(componentsPrivateApis);
-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: ${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, ${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, ${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;
+var CURSOR_REDRAW_INTERVAL_MS = 1e4;
 function Overlay({
   blockEditorDocument,
   postId,
-  postType
+  postType,
+  cursorRegistry
 }) {
-  useStyleOverride({
-    id: "collaborators-overlay",
-    css: COLLABORATORS_OVERLAY_STYLES
-  });
   const [overlayElement, setOverlayElement] = useState(null);
   const { cursors, rerenderCursorsAfterDelay } = useRenderCursors(
     overlayElement,
     blockEditorDocument ?? null,
     postId ?? null,
-    postType ?? null
+    postType ?? null,
+    RERENDER_DELAY_MS
+  );
+  const { highlights, rerenderHighlightsAfterDelay } = useBlockHighlighting(
+    overlayElement,
+    blockEditorDocument ?? null,
+    postId ?? null,
+    postType ?? null,
+    RERENDER_DELAY_MS
   );
-  const resizeObserverRef = useResizeObserver(rerenderCursorsAfterDelay);
-  useEffect(rerenderCursorsAfterDelay, [rerenderCursorsAfterDelay]);
+  const onResize = useCallback(() => {
+    rerenderCursorsAfterDelay();
+    rerenderHighlightsAfterDelay();
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  const resizeObserverRef = useResizeObserver(onResize);
+  useEffect(() => {
+    const cleanupCursors = rerenderCursorsAfterDelay();
+    const cleanupHighlights = rerenderHighlightsAfterDelay();
+    return () => {
+      cleanupCursors();
+      cleanupHighlights();
+    };
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  useEffect(() => {
+    if (cursors.length === 0) {
+      return;
+    }
+    return setDelayedInterval(
+      rerenderCursorsAfterDelay,
+      CURSOR_REDRAW_INTERVAL_MS
+    );
+  }, [cursors.length, rerenderCursorsAfterDelay]);
   const mergedRef = useMergeRefs([
     setOverlayElement,
     resizeObserverRef
   ]);
-  useBlockHighlighting(
-    blockEditorDocument ?? null,
-    postId ?? null,
-    postType ?? null
+  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__ */ jsx("div", { className: "collaborators-overlay-full", ref: mergedRef, children: cursors.map((cursor) => /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "collaborators-overlay-user",
-      style: {
-        left: `${cursor.x}px`,
-        top: `${cursor.y}px`
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "collaborators-overlay-user-cursor",
-            style: {
-              backgroundColor: cursor.color,
-              height: `${cursor.height}px`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            className: "collaborators-overlay-user-label",
-            badge: true,
-            size: "small",
-            src: cursor.avatarUrl,
-            name: cursor.userName,
-            borderColor: cursor.color
+  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: [
+      cursor.selectionRects?.map((rect, index) => /* @__PURE__ */ 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
           }
-        )
-      ]
-    },
-    cursor.clientId
-  )) });
+        },
+        `${cursor.clientId}-sel-${index}`
+      )),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setCursorRef(cursor.clientId),
+          className: "collaborators-overlay-user",
+          style: {
+            left: `${cursor.x}px`,
+            top: `${cursor.y}px`
+          },
+          children: [
+            !cursor.isMe && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "collaborators-overlay-user-cursor",
+                style: {
+                  backgroundColor: cursor.color,
+                  height: `${cursor.height}px`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                className: "collaborators-overlay-user-label",
+                variant: "badge",
+                size: "small",
+                src: cursor.avatarUrl,
+                name: cursor.userName,
+                label: cursor.isMe ? __("You") : void 0,
+                borderColor: cursor.color
+              }
+            )
+          ]
+        }
+      )
+    ] }, cursor.clientId)),
+    highlights.map((highlight) => /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        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`
+        }
+      },
+      highlight.blockId
+    ))
+  ] });
 }
 export {
   Overlay

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/overlay.tsx"],
-  "sourcesContent": ["// @ts-expect-error No exported types\nimport { useStyleOverride } from '@wordpress/block-editor';\nimport { 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\tuseStyleOverride( {\n\t\tid: 'collaborators-overlay',\n\t\tcss: COLLABORATORS_OVERLAY_STYLES,\n\t} );\n\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{ 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": ";AACA,SAAS,wBAAwB;AACjC,SAAS,eAAe,6BAA6B;AACrD,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,WAAW,gBAAgB;AAEpC,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AA4P9B,SAQC,KARD;AA1PJ,IAAM,EAAE,OAAO,IAAI,OAAQ,qBAAsB;AAKjD,IAAM,+BAA+B;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,eA8BrB,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAYkC,iBAAkB;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;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;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,qGAmIgB,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BjH,SAAS,QAAS;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACD,GAAkB;AACjB,mBAAkB;AAAA,IACjB,IAAI;AAAA,IACJ,KAAK;AAAA,EACN,CAAE;AAGF,QAAM,CAAE,gBAAgB,iBAAkB,IACzC,SAAmC,IAAK;AAEzC,QAAM,EAAE,SAAS,0BAA0B,IAAI;AAAA,IAC9C;AAAA,IACA,uBAAuB;AAAA,IACvB,UAAU;AAAA,IACV,YAAY;AAAA,EACb;AAIA,QAAM,oBAAoB,kBAAmB,yBAA0B;AACvE,YAAW,2BAA2B,CAAE,yBAA0B,CAAE;AAGpE,QAAM,YAAY,aAAuC;AAAA,IACxD;AAAA,IACA;AAAA,EACD,CAAE;AAEF;AAAA,IACC,uBAAuB;AAAA,IACvB,UAAU;AAAA,IACV,YAAY;AAAA,EACb;AAIA,SACC,oBAAC,SAAI,WAAU,8BAA6B,KAAM,WAC/C,kBAAQ,IAAK,CAAE,WAChB;AAAA,IAAC;AAAA;AAAA,MAEA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,MAAM,GAAI,OAAO,CAAE;AAAA,QACnB,KAAK,GAAI,OAAO,CAAE;AAAA,MACnB;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,iBAAiB,OAAO;AAAA,cACxB,QAAQ,GAAI,OAAO,MAAO;AAAA,YAC3B;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAK;AAAA,YACL,MAAK;AAAA,YACL,KAAM,OAAO;AAAA,YACb,MAAO,OAAO;AAAA,YACd,aAAc,OAAO;AAAA;AAAA,QACtB;AAAA;AAAA;AAAA,IArBM,OAAO;AAAA,EAsBd,CACC,GACH;AAEF;",
+  "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.selectionRects?.map( ( rect, index ) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={ `${ cursor.clientId }-sel-${ index }` }\n\t\t\t\t\t\t\tclassName=\"collaborators-overlay-selection-rect\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ rect.x }px`,\n\t\t\t\t\t\t\t\ttop: `${ rect.y }px`,\n\t\t\t\t\t\t\t\twidth: `${ rect.width }px`,\n\t\t\t\t\t\t\t\theight: `${ rect.height }px`,\n\t\t\t\t\t\t\t\tbackgroundColor: cursor.color,\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\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": []
+}