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

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": []
+}

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

@@ -1,14 +1,16 @@
 // packages/editor/src/components/collaborators-overlay/use-render-cursors.ts
-import {
-  privateApis as coreDataPrivateApis,
-  SelectionType
-} from "@wordpress/core-data";
-import { useEffect, useMemo, useState } from "@wordpress/element";
+import { privateApis as coreDataPrivateApis } from "@wordpress/core-data";
+import { useSelect } from "@wordpress/data";
+import { useEffect, useState } from "@wordpress/element";
+import { store as preferencesStore } from "@wordpress/preferences";
 import { unlock } from "../../lock-unlock.mjs";
 import { getAvatarUrl } from "./get-avatar-url.mjs";
 import { getAvatarBorderColor } from "../collab-sidebar/utils.mjs";
+import { computeSelectionVisual } from "./compute-selection.mjs";
+import { useDebouncedRecompute } from "./use-debounced-recompute.mjs";
 var { useActiveCollaborators, useResolvedSelection } = unlock(coreDataPrivateApis);
-function useRenderCursors(overlayElement, blockEditorDocument, postId, postType) {
+var { SelectionType } = unlock(coreDataPrivateApis);
+function useRenderCursors(overlayElement, blockEditorDocument, postId, postType, delayMs) {
   const sortedUsers = useActiveCollaborators(
     postId ?? null,
     postType ?? null
@@ -17,191 +19,96 @@ function useRenderCursors(overlayElement, blockEditorDocument, postId, postType)
     postId ?? null,
     postType ?? null
   );
+  const showOwnCursor = useSelect(
+    (select) => select(preferencesStore).get("core", "showCollaborationCursor"),
+    []
+  );
   const [cursorPositions, setCursorPositions] = useState(
     []
   );
-  const computeCursors = useMemo(
-    () => () => {
-      if (!overlayElement || !blockEditorDocument) {
-        setCursorPositions([]);
+  const [recomputeToken, rerenderCursorsAfterDelay] = useDebouncedRecompute(delayMs);
+  useEffect(() => {
+    if (!overlayElement || !blockEditorDocument) {
+      setCursorPositions([]);
+      return;
+    }
+    const overlayRect = overlayElement.getBoundingClientRect();
+    const overlayContext = {
+      editorDocument: blockEditorDocument,
+      overlayRect
+    };
+    const results = [];
+    const hasOtherCollaborators = sortedUsers.some(
+      (u) => !u.isMe
+    );
+    sortedUsers.forEach((user) => {
+      if (user.isMe && (!showOwnCursor || !hasOtherCollaborators)) {
         return;
       }
-      const results = [];
-      sortedUsers.forEach((user) => {
-        if (user.isMe) {
+      const selection = user.editorState?.selection ?? {
+        type: SelectionType.None
+      };
+      let start = {
+        richTextOffset: null,
+        localClientId: null
+      };
+      let end;
+      if (selection.type === SelectionType.Cursor) {
+        try {
+          start = resolveSelection(selection);
+        } catch {
           return;
         }
-        const selection = user.editorState?.selection ?? {
-          type: SelectionType.None
-        };
-        const userName = user.collaboratorInfo.name;
-        const clientId = user.clientId;
-        const color = getAvatarBorderColor(user.collaboratorInfo.id);
-        const avatarUrl = getAvatarUrl(
-          user.collaboratorInfo.avatar_urls
-        );
-        let coords = null;
-        if (selection.type === SelectionType.None) {
-        } else if (selection.type === SelectionType.WholeBlock) {
-        } else if (selection.type === SelectionType.Cursor) {
-          const { textIndex, localClientId } = resolveSelection(selection);
-          if (localClientId) {
-            coords = getCursorPosition(
-              textIndex,
-              localClientId,
-              blockEditorDocument,
-              overlayElement
-            );
-          }
-        } else if (selection.type === SelectionType.SelectionInOneBlock || selection.type === SelectionType.SelectionInMultipleBlocks) {
-          const { textIndex, localClientId } = resolveSelection({
+      } else if (selection.type === SelectionType.SelectionInOneBlock || selection.type === SelectionType.SelectionInMultipleBlocks) {
+        try {
+          start = resolveSelection({
             type: SelectionType.Cursor,
             cursorPosition: selection.cursorStartPosition
           });
-          if (localClientId) {
-            coords = getCursorPosition(
-              textIndex,
-              localClientId,
-              blockEditorDocument,
-              overlayElement
-            );
-          }
-        }
-        if (coords) {
-          results.push({
-            userName,
-            clientId,
-            color,
-            avatarUrl,
-            ...coords
+          end = resolveSelection({
+            type: SelectionType.Cursor,
+            cursorPosition: selection.cursorEndPosition
           });
+        } catch {
+          return;
         }
-      });
-      setCursorPositions(results);
-    },
-    [blockEditorDocument, resolveSelection, overlayElement, sortedUsers]
-  );
-  useEffect(computeCursors, [computeCursors]);
-  const rerenderCursorsAfterDelay = useMemo(
-    () => () => {
-      const timeout = setTimeout(computeCursors, 500);
-      return () => clearTimeout(timeout);
-    },
-    [computeCursors]
-  );
-  return { cursors: cursorPositions, rerenderCursorsAfterDelay };
-}
-var getCursorPosition = (absolutePositionIndex, blockId, editorDocument, overlay) => {
-  if (absolutePositionIndex === null) {
-    return null;
-  }
-  const blockElement = editorDocument.querySelector(
-    `[data-block="${blockId}"]`
-  );
-  if (!blockElement) {
-    return null;
-  }
-  return getOffsetPositionInBlock(
-    blockElement,
-    absolutePositionIndex,
-    editorDocument,
-    overlay
-  ) ?? null;
-};
-var getOffsetPositionInBlock = (blockElement, charOffset, editorDocument, overlay) => {
-  const { node, offset } = findInnerBlockOffset(
-    blockElement,
-    charOffset,
-    editorDocument
-  );
-  const cursorRange = editorDocument.createRange();
-  try {
-    cursorRange.setStart(node, offset);
-  } catch (error) {
-    return null;
-  }
-  cursorRange.collapse(true);
-  const cursorRect = cursorRange.getBoundingClientRect();
-  const overlayRect = overlay.getBoundingClientRect();
-  const blockRect = blockElement.getBoundingClientRect();
-  let cursorX = 0;
-  let cursorY = 0;
-  if (cursorRect.x === 0 && cursorRect.y === 0 && cursorRect.width === 0 && cursorRect.height === 0) {
-    cursorX = blockRect.left - overlayRect.left;
-    cursorY = blockRect.top - overlayRect.top;
-  } else {
-    cursorX = cursorRect.left - overlayRect.left;
-    cursorY = cursorRect.top - overlayRect.top;
-  }
-  let cursorHeight = cursorRect.height;
-  if (cursorHeight === 0) {
-    cursorHeight = parseInt(
-      window.getComputedStyle(blockElement).lineHeight,
-      10
-    ) || blockRect.height;
-  }
-  return {
-    x: cursorX,
-    y: cursorY,
-    height: cursorHeight
-  };
-};
-var MAX_NODE_OFFSET_COUNT = 1e3;
-var findInnerBlockOffset = (blockElement, offset, editorDocument) => {
-  const treeWalker = editorDocument.createTreeWalker(
-    blockElement,
-    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT
-    // eslint-disable-line no-bitwise
-  );
-  let currentOffset = 0;
-  let lastTextNode = null;
-  let node = null;
-  let nodeCount = 1;
-  while (node = treeWalker.nextNode()) {
-    nodeCount++;
-    if (nodeCount > MAX_NODE_OFFSET_COUNT) {
-      if (lastTextNode) {
-        return { node: lastTextNode, offset: 0 };
       }
-      return { node: blockElement, offset: 0 };
-    }
-    const nodeLength = node.nodeValue?.length ?? 0;
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      if (node.nodeName === "BR") {
-        if (currentOffset + 1 >= offset) {
-          const nodeAfterBr = treeWalker.nextNode();
-          if (nodeAfterBr?.nodeType === Node.TEXT_NODE) {
-            return { node: nodeAfterBr, offset: 0 };
-          } else if (lastTextNode) {
-            return {
-              node: lastTextNode,
-              offset: lastTextNode.nodeValue?.length ?? 0
-            };
-          }
-          return { node: blockElement, offset: 0 };
+      const userName = user.collaboratorInfo.name;
+      const clientId = user.clientId;
+      const color = user.isMe ? "var(--wp-admin-theme-color)" : getAvatarBorderColor(user.collaboratorInfo.id);
+      const avatarUrl = getAvatarUrl(user.collaboratorInfo.avatar_urls);
+      const selectionVisual = computeSelectionVisual(
+        selection,
+        start,
+        end,
+        overlayContext
+      );
+      if (selectionVisual.coords) {
+        const cursorData = {
+          userName,
+          clientId,
+          color,
+          avatarUrl,
+          isMe: user.isMe,
+          ...selectionVisual.coords
+        };
+        if (selectionVisual.selectionRects) {
+          cursorData.selectionRects = selectionVisual.selectionRects;
         }
-        currentOffset += 1;
-        continue;
-      } else {
-        continue;
+        results.push(cursorData);
       }
-    }
-    if (nodeLength === 0) {
-      continue;
-    }
-    if (currentOffset + nodeLength >= offset) {
-      return { node, offset: offset - currentOffset };
-    }
-    currentOffset += nodeLength;
-    if (node.nodeType === Node.TEXT_NODE) {
-      lastTextNode = node;
-    }
-  }
-  if (lastTextNode && lastTextNode.nodeValue?.length) {
-    return { node: lastTextNode, offset: lastTextNode.nodeValue.length };
-  }
-  return { node: blockElement, offset: 0 };
-};
+    });
+    setCursorPositions(results);
+  }, [
+    blockEditorDocument,
+    resolveSelection,
+    overlayElement,
+    sortedUsers,
+    showOwnCursor,
+    recomputeToken
+  ]);
+  return { cursors: cursorPositions, rerenderCursorsAfterDelay };
+}
 export {
   useRenderCursors
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/use-render-cursors.ts"],
-  "sourcesContent": ["import {\n\tprivateApis as coreDataPrivateApis,\n\tSelectionType,\n} from '@wordpress/core-data';\nimport { useEffect, useMemo, useState } from '@wordpress/element';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from './get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\n\nexport interface CursorData {\n\tuserName: string;\n\tclientId: number;\n\tcolor: string;\n\tavatarUrl?: string;\n\tx: number;\n\ty: number;\n\theight: number;\n}\n\n/**\n * Custom hook that computes cursor positions for each remote user in the editor.\n *\n * @param overlayElement      - The overlay element\n * @param blockEditorDocument - The block editor document\n * @param postId              - The ID of the post\n * @param postType            - The type of the post\n * @return An array of cursor data for rendering, and a function to trigger a delayed recompute.\n */\nexport function useRenderCursors(\n\toverlayElement: HTMLElement | null,\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null\n): { cursors: CursorData[]; rerenderCursorsAfterDelay: () => () => void } {\n\tconst sortedUsers = useActiveCollaborators(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\tconst resolveSelection = useResolvedSelection(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\n\tconst [ cursorPositions, setCursorPositions ] = useState< CursorData[] >(\n\t\t[]\n\t);\n\n\tconst computeCursors = useMemo(\n\t\t() => () => {\n\t\t\tif ( ! overlayElement || ! blockEditorDocument ) {\n\t\t\t\tsetCursorPositions( [] );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst results: CursorData[] = [];\n\n\t\t\tsortedUsers.forEach( ( user: any ) => {\n\t\t\t\tif ( user.isMe ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst selection = user.editorState?.selection ?? {\n\t\t\t\t\ttype: SelectionType.None,\n\t\t\t\t};\n\t\t\t\tconst userName = user.collaboratorInfo.name;\n\t\t\t\tconst clientId = user.clientId;\n\t\t\t\tconst color = getAvatarBorderColor( user.collaboratorInfo.id );\n\t\t\t\tconst avatarUrl = getAvatarUrl(\n\t\t\t\t\tuser.collaboratorInfo.avatar_urls\n\t\t\t\t);\n\n\t\t\t\tlet coords: {\n\t\t\t\t\tx: number;\n\t\t\t\t\ty: number;\n\t\t\t\t\theight: number;\n\t\t\t\t} | null = null;\n\n\t\t\t\tif ( selection.type === SelectionType.None ) {\n\t\t\t\t\t// Nothing selected.\n\t\t\t\t} else if ( selection.type === SelectionType.WholeBlock ) {\n\t\t\t\t\t// Don't draw a cursor for a whole block selection.\n\t\t\t\t} else if ( selection.type === SelectionType.Cursor ) {\n\t\t\t\t\tconst { textIndex, localClientId } =\n\t\t\t\t\t\tresolveSelection( selection );\n\t\t\t\t\tif ( localClientId ) {\n\t\t\t\t\t\tcoords = getCursorPosition(\n\t\t\t\t\t\t\ttextIndex,\n\t\t\t\t\t\t\tlocalClientId,\n\t\t\t\t\t\t\tblockEditorDocument,\n\t\t\t\t\t\t\toverlayElement\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else if (\n\t\t\t\t\tselection.type === SelectionType.SelectionInOneBlock ||\n\t\t\t\t\tselection.type === SelectionType.SelectionInMultipleBlocks\n\t\t\t\t) {\n\t\t\t\t\tconst { textIndex, localClientId } = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorStartPosition,\n\t\t\t\t\t} );\n\t\t\t\t\tif ( localClientId ) {\n\t\t\t\t\t\tcoords = getCursorPosition(\n\t\t\t\t\t\t\ttextIndex,\n\t\t\t\t\t\t\tlocalClientId,\n\t\t\t\t\t\t\tblockEditorDocument,\n\t\t\t\t\t\t\toverlayElement\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif ( coords ) {\n\t\t\t\t\tresults.push( {\n\t\t\t\t\t\tuserName,\n\t\t\t\t\t\tclientId,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tavatarUrl,\n\t\t\t\t\t\t...coords,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tsetCursorPositions( results );\n\t\t},\n\t\t[ blockEditorDocument, resolveSelection, overlayElement, sortedUsers ]\n\t);\n\n\tuseEffect( computeCursors, [ computeCursors ] );\n\n\tconst rerenderCursorsAfterDelay = useMemo(\n\t\t() => () => {\n\t\t\tconst timeout = setTimeout( computeCursors, 500 );\n\t\t\treturn () => clearTimeout( timeout );\n\t\t},\n\t\t[ computeCursors ]\n\t);\n\n\treturn { cursors: cursorPositions, rerenderCursorsAfterDelay };\n}\n\n/**\n * Given a selection, returns the coordinates of the cursor in the block.\n *\n * @param absolutePositionIndex - The absolute position index\n * @param blockId               - The block ID\n * @param editorDocument        - The editor document\n * @param overlay               - The overlay element\n * @return The position of the cursor\n */\nconst getCursorPosition = (\n\tabsolutePositionIndex: number | null,\n\tblockId: string,\n\teditorDocument: Document,\n\toverlay: HTMLElement\n): { x: number; y: number; height: number } | null => {\n\tif ( absolutePositionIndex === null ) {\n\t\t// An absolute position index can be null if a cursor was set in a block that\n\t\t// has since been deleted.\n\t\t// Return null so we don't try to draw it.\n\t\treturn null;\n\t}\n\n\tconst blockElement = editorDocument.querySelector(\n\t\t`[data-block=\"${ blockId }\"]`\n\t) as HTMLElement;\n\n\tif ( ! blockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\tgetOffsetPositionInBlock(\n\t\t\tblockElement,\n\t\t\tabsolutePositionIndex,\n\t\t\teditorDocument,\n\t\t\toverlay\n\t\t) ?? null\n\t);\n};\n\n/**\n * Given a block element and a character offset, returns the coordinates for drawing a visual cursor in the block.\n *\n * @param blockElement   - The block element\n * @param charOffset     - The character offset\n * @param editorDocument - The editor document\n * @param overlay        - The overlay element\n * @return The position of the cursor\n */\nconst getOffsetPositionInBlock = (\n\tblockElement: HTMLElement,\n\tcharOffset: number,\n\teditorDocument: Document,\n\toverlay: HTMLElement\n) => {\n\tconst { node, offset } = findInnerBlockOffset(\n\t\tblockElement,\n\t\tcharOffset,\n\t\teditorDocument\n\t);\n\n\tconst cursorRange = editorDocument.createRange();\n\n\ttry {\n\t\tcursorRange.setStart( node, offset );\n\t} catch ( error ) {\n\t\treturn null;\n\t}\n\n\t// Ensure the range only represents single point in the DOM.\n\tcursorRange.collapse( true );\n\n\tconst cursorRect = cursorRange.getBoundingClientRect();\n\tconst overlayRect = overlay.getBoundingClientRect();\n\tconst blockRect = blockElement.getBoundingClientRect();\n\n\tlet cursorX = 0;\n\tlet cursorY = 0;\n\n\tif (\n\t\tcursorRect.x === 0 &&\n\t\tcursorRect.y === 0 &&\n\t\tcursorRect.width === 0 &&\n\t\tcursorRect.height === 0\n\t) {\n\t\t// This can happen for empty blocks.\n\t\tcursorX = blockRect.left - overlayRect.left;\n\t\tcursorY = blockRect.top - overlayRect.top;\n\t} else {\n\t\tcursorX = cursorRect.left - overlayRect.left;\n\t\tcursorY = cursorRect.top - overlayRect.top;\n\t}\n\n\tlet cursorHeight = cursorRect.height;\n\tif ( cursorHeight === 0 ) {\n\t\tcursorHeight =\n\t\t\tparseInt(\n\t\t\t\twindow.getComputedStyle( blockElement ).lineHeight,\n\t\t\t\t10\n\t\t\t) || blockRect.height;\n\t}\n\n\treturn {\n\t\tx: cursorX,\n\t\ty: cursorY,\n\t\theight: cursorHeight,\n\t};\n};\n\nconst MAX_NODE_OFFSET_COUNT = 1000;\n\n/**\n * Given a block element and a character offset, returns an exact inner node and offset for use in a range.\n *\n * @param blockElement   - The block element\n * @param offset         - The character offset\n * @param editorDocument - The editor document\n * @return The node and offset of the character at the offset\n */\nconst findInnerBlockOffset = (\n\tblockElement: HTMLElement,\n\toffset: number,\n\teditorDocument: Document\n) => {\n\tconst treeWalker = editorDocument.createTreeWalker(\n\t\tblockElement,\n\t\tNodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT // eslint-disable-line no-bitwise\n\t);\n\n\tlet currentOffset = 0;\n\tlet lastTextNode: Node | null = null;\n\n\tlet node: Node | null = null;\n\tlet nodeCount = 1;\n\n\twhile ( ( node = treeWalker.nextNode() ) ) {\n\t\tnodeCount++;\n\n\t\tif ( nodeCount > MAX_NODE_OFFSET_COUNT ) {\n\t\t\t// If we've walked too many nodes, return the last text node or the beginning of the block.\n\t\t\tif ( lastTextNode ) {\n\t\t\t\treturn { node: lastTextNode, offset: 0 };\n\t\t\t}\n\t\t\treturn { node: blockElement, offset: 0 };\n\t\t}\n\n\t\tconst nodeLength = node.nodeValue?.length ?? 0;\n\n\t\tif ( node.nodeType === Node.ELEMENT_NODE ) {\n\t\t\tif ( node.nodeName === 'BR' ) {\n\t\t\t\t// Treat <br> as a single \"\\n\" character.\n\n\t\t\t\tif ( currentOffset + 1 >= offset ) {\n\t\t\t\t\t// If the <br> occurs right on the target offset, return the next text node.\n\t\t\t\t\tconst nodeAfterBr = treeWalker.nextNode();\n\n\t\t\t\t\tif ( nodeAfterBr?.nodeType === Node.TEXT_NODE ) {\n\t\t\t\t\t\treturn { node: nodeAfterBr, offset: 0 };\n\t\t\t\t\t} else if ( lastTextNode ) {\n\t\t\t\t\t\t// If there's no text node after the <br>, return the end offset of the last text node.\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tnode: lastTextNode,\n\t\t\t\t\t\t\toffset: lastTextNode.nodeValue?.length ?? 0,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\t// Just in case, if there's no last text node, return the beginning of the block.\n\t\t\t\t\treturn { node: blockElement, offset: 0 };\n\t\t\t\t}\n\n\t\t\t\t// The <br> is before the target offset. Count it as a single character.\n\t\t\t\tcurrentOffset += 1;\n\t\t\t\tcontinue;\n\t\t\t} else {\n\t\t\t\t// Skip other element types.\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t}\n\n\t\tif ( nodeLength === 0 ) {\n\t\t\t// Skip empty nodes.\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( currentOffset + nodeLength >= offset ) {\n\t\t\t// This node exceeds the target offset. Return the node and the position of the offset within it.\n\t\t\treturn { node, offset: offset - currentOffset };\n\t\t}\n\n\t\tcurrentOffset += nodeLength;\n\n\t\tif ( node.nodeType === Node.TEXT_NODE ) {\n\t\t\tlastTextNode = node;\n\t\t}\n\t}\n\n\tif ( lastTextNode && lastTextNode.nodeValue?.length ) {\n\t\t// We didn't reach the target offset. Return the last text node's last character.\n\t\treturn { node: lastTextNode, offset: lastTextNode.nodeValue.length };\n\t}\n\n\t// We didn't find any text nodes. Return the beginning of the block.\n\treturn { node: blockElement, offset: 0 };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { privateApis as coreDataPrivateApis } from '@wordpress/core-data';\nimport type {\n\tCoreDataPrivateApis,\n\tResolvedSelection,\n\tPostEditorAwarenessState as ActiveCollaborator,\n} from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useEffect, useState } from '@wordpress/element';\nimport { store as preferencesStore } from '@wordpress/preferences';\n\nimport { unlock } from '../../lock-unlock';\nimport { getAvatarUrl } from './get-avatar-url';\nimport { getAvatarBorderColor } from '../collab-sidebar/utils';\nimport { computeSelectionVisual } from './compute-selection';\nimport { useDebouncedRecompute } from './use-debounced-recompute';\nimport type { SelectionRect } from './cursor-dom-utils';\n\nconst { useActiveCollaborators, useResolvedSelection } =\n\tunlock( coreDataPrivateApis );\nconst { SelectionType } = unlock( coreDataPrivateApis ) as Pick<\n\tCoreDataPrivateApis,\n\t'SelectionType'\n>;\n\nexport type { SelectionRect };\n\nexport interface CursorData {\n\tuserName: string;\n\tclientId: number;\n\tcolor: string;\n\tavatarUrl?: string;\n\tx: number;\n\ty: number;\n\theight: number;\n\tisMe?: boolean;\n\tselectionRects?: SelectionRect[];\n}\n\n/**\n * Custom hook that computes cursor positions for each remote user in the editor.\n *\n * @param overlayElement      - The overlay element\n * @param blockEditorDocument - The block editor document\n * @param postId              - The ID of the post\n * @param postType            - The type of the post\n * @param delayMs             - Milliseconds to wait before recomputing cursor positions.\n * @return An array of cursor data for rendering, and a function to trigger a delayed recompute.\n */\nexport function useRenderCursors(\n\toverlayElement: HTMLElement | null,\n\tblockEditorDocument: Document | null,\n\tpostId: number | null,\n\tpostType: string | null,\n\tdelayMs: number\n): { cursors: CursorData[]; rerenderCursorsAfterDelay: () => () => void } {\n\tconst sortedUsers = useActiveCollaborators(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\tconst resolveSelection = useResolvedSelection(\n\t\tpostId ?? null,\n\t\tpostType ?? null\n\t);\n\n\tconst showOwnCursor = useSelect(\n\t\t( select ) =>\n\t\t\tselect( preferencesStore ).get( 'core', 'showCollaborationCursor' ),\n\t\t[]\n\t);\n\n\tconst [ cursorPositions, setCursorPositions ] = useState< CursorData[] >(\n\t\t[]\n\t);\n\n\t// Bump this counter to force the effect to re-run (e.g. after a layout shift).\n\tconst [ recomputeToken, rerenderCursorsAfterDelay ] =\n\t\tuseDebouncedRecompute( delayMs );\n\n\t// All DOM position computations live inside useEffect.\n\tuseEffect( () => {\n\t\tif ( ! overlayElement || ! blockEditorDocument ) {\n\t\t\tsetCursorPositions( [] );\n\t\t\treturn;\n\t\t}\n\n\t\t// Pre-compute the overlay rect once, same for every user.\n\t\tconst overlayRect = overlayElement.getBoundingClientRect();\n\t\tconst overlayContext = {\n\t\t\teditorDocument: blockEditorDocument,\n\t\t\toverlayRect,\n\t\t};\n\n\t\tconst results: CursorData[] = [];\n\n\t\tconst hasOtherCollaborators = sortedUsers.some(\n\t\t\t( u: ActiveCollaborator ) => ! u.isMe\n\t\t);\n\n\t\tsortedUsers.forEach( ( user: ActiveCollaborator ) => {\n\t\t\tif ( user.isMe && ( ! showOwnCursor || ! hasOtherCollaborators ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selection = user.editorState?.selection ?? {\n\t\t\t\ttype: SelectionType.None,\n\t\t\t};\n\n\t\t\tlet start: ResolvedSelection = {\n\t\t\t\trichTextOffset: null,\n\t\t\t\tlocalClientId: null,\n\t\t\t};\n\t\t\tlet end: ResolvedSelection | undefined;\n\n\t\t\tif ( selection.type === SelectionType.Cursor ) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( selection );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tselection.type === SelectionType.SelectionInOneBlock ||\n\t\t\t\tselection.type === SelectionType.SelectionInMultipleBlocks\n\t\t\t) {\n\t\t\t\ttry {\n\t\t\t\t\tstart = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorStartPosition,\n\t\t\t\t\t} );\n\n\t\t\t\t\tend = resolveSelection( {\n\t\t\t\t\t\ttype: SelectionType.Cursor,\n\t\t\t\t\t\tcursorPosition: selection.cursorEndPosition,\n\t\t\t\t\t} );\n\t\t\t\t} catch {\n\t\t\t\t\t// Selection may reference a stale Yjs position.\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst userName = user.collaboratorInfo.name;\n\t\t\tconst clientId = user.clientId;\n\t\t\tconst color = user.isMe\n\t\t\t\t? 'var(--wp-admin-theme-color)'\n\t\t\t\t: getAvatarBorderColor( user.collaboratorInfo.id );\n\t\t\tconst avatarUrl = getAvatarUrl( user.collaboratorInfo.avatar_urls );\n\n\t\t\tconst selectionVisual = computeSelectionVisual(\n\t\t\t\tselection,\n\t\t\t\tstart,\n\t\t\t\tend,\n\t\t\t\toverlayContext\n\t\t\t);\n\n\t\t\tif ( selectionVisual.coords ) {\n\t\t\t\tconst cursorData: CursorData = {\n\t\t\t\t\tuserName,\n\t\t\t\t\tclientId,\n\t\t\t\t\tcolor,\n\t\t\t\t\tavatarUrl,\n\t\t\t\t\tisMe: user.isMe,\n\t\t\t\t\t...selectionVisual.coords,\n\t\t\t\t};\n\n\t\t\t\tif ( selectionVisual.selectionRects ) {\n\t\t\t\t\tcursorData.selectionRects = selectionVisual.selectionRects;\n\t\t\t\t}\n\n\t\t\t\tresults.push( cursorData );\n\t\t\t}\n\t\t} );\n\n\t\tsetCursorPositions( results );\n\t}, [\n\t\tblockEditorDocument,\n\t\tresolveSelection,\n\t\toverlayElement,\n\t\tsortedUsers,\n\t\tshowOwnCursor,\n\t\trecomputeToken,\n\t] );\n\n\treturn { cursors: cursorPositions, rerenderCursorsAfterDelay };\n}\n"],
+  "mappings": "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",
   "names": []
 }