@wordpress/editor/build/components/collaborators-overlay/overlay.cjs.map

Enhanced block editor for WordPress posts.

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