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

package/build-module/components/collaborators-overlay/overlay.mjs.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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",
+  "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": []
+}

package/build-module/components/collaborators-overlay/use-block-highlighting.mjs

@@ -1,13 +1,15 @@
 // packages/editor/src/components/collaborators-overlay/use-block-highlighting.ts
 import {
-  privateApis as coreDataPrivateApis,
-  SelectionType
+  privateApis as coreDataPrivateApis
 } from "@wordpress/core-data";
-import { useEffect, useRef } from "@wordpress/element";
+import { useEffect, useRef, useState } from "@wordpress/element";
 import { unlock } from "../../lock-unlock.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
+import { getAvatarUrl } from "./get-avatar-url.mjs";
+import { useDebouncedRecompute } from "./use-debounced-recompute.mjs";
 var { useActiveCollaborators, useResolvedSelection } = unlock(coreDataPrivateApis);
-function useBlockHighlighting(blockEditorDocument, postId, postType) {
+var { SelectionType } = unlock(coreDataPrivateApis);
+function useBlockHighlighting(overlayElement, blockEditorDocument, postId, postType, delayMs) {
   const highlightedBlockIds = useRef(/* @__PURE__ */ new Set());
   const userStates = useActiveCollaborators(
     postId ?? null,
@@ -17,12 +19,55 @@ function useBlockHighlighting(blockEditorDocument, postId, postType) {
     postId ?? null,
     postType ?? null
   );
+  const [highlights, setHighlights] = useState(
+    []
+  );
+  const [recomputeToken, rerenderHighlightsAfterDelay] = useDebouncedRecompute(delayMs);
   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 === 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)" : getAvatarBorderColor(userState.collaboratorInfo.id),
+        userName: userState.collaboratorInfo.name,
+        avatarUrl: 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
@@ -33,37 +78,13 @@ function useBlockHighlighting(blockEditorDocument, postId, postType) {
             "--collaborator-outline-color"
           );
         }
-        highlightedBlockIds.current.delete(blockId);
-      });
-    };
-    const blocksToHighlight = userStates.map((userState) => {
-      const isWholeBlockSelected = userState.editorState?.selection?.type === SelectionType.WholeBlock;
-      const shouldDrawUser = !userState.isMe;
-      if (isWholeBlockSelected && shouldDrawUser) {
-        const { localClientId } = resolveSelection(
-          userState.editorState?.selection
-        );
-        if (!localClientId) {
-          return null;
-        }
-        return {
-          blockId: localClientId,
-          color: 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
@@ -71,16 +92,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-module/components/collaborators-overlay/use-block-highlighting.mjs.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": ";AAGA;AAAA,EACC,eAAe;AAAA,EACf;AAAA,OACM;AACP,SAAS,WAAW,cAAc;AAKlC,SAAS,cAAc;AACvB,SAAS,4BAA4B;AAErC,IAAM,EAAE,wBAAwB,qBAAqB,IACpD,OAAQ,mBAAoB;AAQtB,SAAS,qBACf,qBACA,QACA,UACC;AACD,QAAM,sBAAsB,OAAyB,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,YAAW,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,cAAc;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,OAAO;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\ttype CoreDataPrivateApis,\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 );\nconst { SelectionType } = unlock( coreDataPrivateApis ) as Pick<\n\tCoreDataPrivateApis,\n\t'SelectionType'\n>;\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": []
 }

package/build-module/components/collaborators-overlay/use-debounced-recompute.mjs

@@ -0,0 +1,24 @@
+// packages/editor/src/components/collaborators-overlay/use-debounced-recompute.ts
+import { useCallback, useRef, useState } from "@wordpress/element";
+function useDebouncedRecompute(delayMs) {
+  const [recomputeToken, setRecomputeToken] = useState(0);
+  const timeoutRef = useRef(null);
+  const rerenderAfterDelay = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setRecomputeToken((t) => t + 1);
+    }, delayMs);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [delayMs]);
+  return [recomputeToken, rerenderAfterDelay];
+}
+export {
+  useDebouncedRecompute
+};
+//# sourceMappingURL=use-debounced-recompute.mjs.map

package/build-module/components/collaborators-overlay/use-debounced-recompute.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/use-debounced-recompute.ts"],
+  "sourcesContent": ["import { useCallback, useRef, useState } from '@wordpress/element';\n\n/**\n * Returns a recompute token and a debounced callback that bumps it.\n * Rapid successive calls cancel the previous pending timeout so only one\n * recompute fires, `delayMs` after the last call.\n *\n * @param delayMs - Milliseconds to wait before bumping the recompute token.\n * @return A tuple of [recomputeToken, rerenderAfterDelay].\n */\nexport function useDebouncedRecompute(\n\tdelayMs: number\n): [ number, () => () => void ] {\n\tconst [ recomputeToken, setRecomputeToken ] = useState( 0 );\n\tconst timeoutRef = useRef< ReturnType< typeof setTimeout > | null >( null );\n\n\tconst rerenderAfterDelay = useCallback( () => {\n\t\tif ( timeoutRef.current ) {\n\t\t\tclearTimeout( timeoutRef.current );\n\t\t}\n\t\ttimeoutRef.current = setTimeout( () => {\n\t\t\tsetRecomputeToken( ( t ) => t + 1 );\n\t\t}, delayMs );\n\t\treturn () => {\n\t\t\tif ( timeoutRef.current ) {\n\t\t\t\tclearTimeout( timeoutRef.current );\n\t\t\t}\n\t\t};\n\t}, [ delayMs ] );\n\n\treturn [ recomputeToken, rerenderAfterDelay ];\n}\n"],
+  "mappings": ";AAAA,SAAS,aAAa,QAAQ,gBAAgB;AAUvC,SAAS,sBACf,SAC+B;AAC/B,QAAM,CAAE,gBAAgB,iBAAkB,IAAI,SAAU,CAAE;AAC1D,QAAM,aAAa,OAAkD,IAAK;AAE1E,QAAM,qBAAqB,YAAa,MAAM;AAC7C,QAAK,WAAW,SAAU;AACzB,mBAAc,WAAW,OAAQ;AAAA,IAClC;AACA,eAAW,UAAU,WAAY,MAAM;AACtC,wBAAmB,CAAE,MAAO,IAAI,CAAE;AAAA,IACnC,GAAG,OAAQ;AACX,WAAO,MAAM;AACZ,UAAK,WAAW,SAAU;AACzB,qBAAc,WAAW,OAAQ;AAAA,MAClC;AAAA,IACD;AAAA,EACD,GAAG,CAAE,OAAQ,CAAE;AAEf,SAAO,CAAE,gBAAgB,kBAAmB;AAC7C;",
+  "names": []
+}