@wordpress/editor 14.41.1-next.v.202603102151.0 → 14.42.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 14.42.0 (2026-03-18)
+
+### Bug Fixes
+
+-   Fixed avatar contrast ring not displaying over loaded images by using a `::after` pseudo-element instead of an inset `box-shadow`.
+
 ## 14.41.0 (2026-03-04)
 
 ## 14.40.0 (2026-02-18)

package/build/components/collaborators-overlay/avatar-iframe-styles.cjs

@@ -30,8 +30,6 @@ var AVATAR_IFRAME_STYLES = `
 	display: inline-flex;
 	align-items: center;
 	border-radius: ${import_collaborator_styles.RADIUS_FULL};
-	overflow: hidden;
-	overflow: clip;
 	flex-shrink: 0;
 	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) ${import_collaborator_styles.WHITE}, ${import_collaborator_styles.ELEVATION_X_SMALL};
 }
@@ -55,9 +53,17 @@ var AVATAR_IFRAME_STYLES = `
 }
 .has-avatar-border-color > .editor-avatar__image {
 	border: var(--wp-admin-border-width-focus, 2px) solid var(--editor-avatar-outline-color);
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${import_collaborator_styles.WHITE};
 	background-clip: padding-box;
 }
+.has-avatar-border-color > .editor-avatar__image::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${import_collaborator_styles.WHITE};
+	pointer-events: none;
+	z-index: 1;
+}
 .editor-avatar__img {
 	position: absolute;
 	inset: 0;
@@ -77,9 +83,11 @@ var AVATAR_IFRAME_STYLES = `
 	font-size: ${import_collaborator_styles.FONT_SIZE_X_SMALL};
 	font-weight: ${import_collaborator_styles.FONT_WEIGHT_MEDIUM};
 	border: 0;
-	box-shadow: none;
 	background-clip: border-box;
 }
+.editor-avatar:not(.has-src) > .editor-avatar__image::after {
+	content: none;
+}
 .editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {
 	background-color: var(--editor-avatar-outline-color);
 }

package/build/components/collaborators-overlay/avatar-iframe-styles.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/avatar-iframe-styles.ts"],
-  "sourcesContent": ["/**\n * Compiled CSS for the Avatar component, for injection into the editor canvas\n * iframe where the editor package's SCSS is not available.\n *\n * Source: ../collaborators-presence/avatar/styles.scss\n *\n * Dimmed and status-indicator styles are intentionally omitted \u2014 they are not\n * used in the overlay. Keep in sync when editing the SCSS source.\n */\n\nimport {\n\tBUTTON_SIZE_COMPACT,\n\tBUTTON_SIZE_SMALL,\n\tELEVATION_X_SMALL,\n\tFONT_LINE_HEIGHT_SMALL,\n\tFONT_SIZE_MEDIUM,\n\tFONT_SIZE_X_SMALL,\n\tFONT_WEIGHT_MEDIUM,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tRADIUS_FULL,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const AVATAR_IFRAME_STYLES = `\n.editor-avatar {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: ${ RADIUS_FULL };\n\toverflow: hidden;\n\toverflow: clip;\n\tflex-shrink: 0;\n\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE }, ${ ELEVATION_X_SMALL };\n}\n.editor-avatar__image {\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: ${ BUTTON_SIZE_COMPACT };\n\theight: ${ BUTTON_SIZE_COMPACT };\n\tborder-radius: ${ RADIUS_FULL };\n\tborder: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\n\toverflow: hidden;\n\toverflow: clip;\n\tflex-shrink: 0;\n\tfont-size: 0;\n\tcolor: ${ WHITE };\n}\n.is-small > .editor-avatar__image {\n\twidth: ${ BUTTON_SIZE_SMALL };\n\theight: ${ BUTTON_SIZE_SMALL };\n}\n.has-avatar-border-color > .editor-avatar__image {\n\tborder: var(--wp-admin-border-width-focus, 2px) solid var(--editor-avatar-outline-color);\n\tbox-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE };\n\tbackground-clip: padding-box;\n}\n.editor-avatar__img {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tborder-radius: inherit;\n\topacity: 0;\n}\n.has-src > .editor-avatar__image > .editor-avatar__img {\n\topacity: 1;\n}\n.editor-avatar:not(.has-src) > .editor-avatar__image {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: ${ FONT_SIZE_X_SMALL };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tborder: 0;\n\tbox-shadow: none;\n\tbackground-clip: border-box;\n}\n.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n.editor-avatar__name {\n\tfont-size: ${ FONT_SIZE_MEDIUM };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tline-height: ${ FONT_LINE_HEIGHT_SMALL };\n\tcolor: var(--editor-avatar-name-color, ${ WHITE });\n\tmin-width: 0;\n\tpadding-bottom: 2px; /* $grid-unit-05 / 2 */\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.editor-avatar.is-badge {\n\tdisplay: inline-grid;\n\tgrid-template-columns: min-content 0fr;\n\tcolumn-gap: 0;\n\tpadding-inline-end: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\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.editor-avatar.is-badge:hover {\n\tgrid-template-columns: min-content 1fr;\n\tcolumn-gap: ${ GRID_UNIT_05 };\n\tpadding-inline-end: ${ GRID_UNIT_10 };\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge:hover .editor-avatar__name {\n\topacity: 1;\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge.has-avatar-border-color {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n@media (prefers-reduced-motion: reduce) {\n\t.editor-avatar.is-badge,\n\t.editor-avatar__name {\n\t\ttransition: none;\n\t}\n}\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,iCAYO;AAEA,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKjB,sCAAY;AAAA;AAAA;AAAA;AAAA,6DAI+B,gCAAM,KAAM,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjF,8CAAoB;AAAA,WACnB,8CAAoB;AAAA,kBACb,sCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOpB,gCAAM;AAAA;AAAA;AAAA,UAGN,4CAAkB;AAAA,WACjB,4CAAkB;AAAA;AAAA;AAAA;AAAA,mEAIsC,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAmB3D,4CAAkB;AAAA,gBAChB,6CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cASrB,2CAAiB;AAAA,gBACf,6CAAmB;AAAA,gBACnB,iDAAuB;AAAA,0CACG,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAqBjC,uCAAa;AAAA,uBACL,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * Compiled CSS for the Avatar component, for injection into the editor canvas\n * iframe where the editor package's SCSS is not available.\n *\n * Source: ../collaborators-presence/avatar/styles.scss\n *\n * Dimmed and status-indicator styles are intentionally omitted \u2014 they are not\n * used in the overlay. Keep in sync when editing the SCSS source.\n */\n\nimport {\n\tBUTTON_SIZE_COMPACT,\n\tBUTTON_SIZE_SMALL,\n\tELEVATION_X_SMALL,\n\tFONT_LINE_HEIGHT_SMALL,\n\tFONT_SIZE_MEDIUM,\n\tFONT_SIZE_X_SMALL,\n\tFONT_WEIGHT_MEDIUM,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tRADIUS_FULL,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const AVATAR_IFRAME_STYLES = `\n.editor-avatar {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: ${ RADIUS_FULL };\n\tflex-shrink: 0;\n\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE }, ${ ELEVATION_X_SMALL };\n}\n.editor-avatar__image {\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: ${ BUTTON_SIZE_COMPACT };\n\theight: ${ BUTTON_SIZE_COMPACT };\n\tborder-radius: ${ RADIUS_FULL };\n\tborder: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\n\toverflow: hidden;\n\toverflow: clip;\n\tflex-shrink: 0;\n\tfont-size: 0;\n\tcolor: ${ WHITE };\n}\n.is-small > .editor-avatar__image {\n\twidth: ${ BUTTON_SIZE_SMALL };\n\theight: ${ BUTTON_SIZE_SMALL };\n}\n.has-avatar-border-color > .editor-avatar__image {\n\tborder: var(--wp-admin-border-width-focus, 2px) solid var(--editor-avatar-outline-color);\n\tbackground-clip: padding-box;\n}\n.has-avatar-border-color > .editor-avatar__image::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tborder-radius: inherit;\n\tbox-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE };\n\tpointer-events: none;\n\tz-index: 1;\n}\n.editor-avatar__img {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tborder-radius: inherit;\n\topacity: 0;\n}\n.has-src > .editor-avatar__image > .editor-avatar__img {\n\topacity: 1;\n}\n.editor-avatar:not(.has-src) > .editor-avatar__image {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: ${ FONT_SIZE_X_SMALL };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tborder: 0;\n\tbackground-clip: border-box;\n}\n.editor-avatar:not(.has-src) > .editor-avatar__image::after {\n\tcontent: none;\n}\n.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n.editor-avatar__name {\n\tfont-size: ${ FONT_SIZE_MEDIUM };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tline-height: ${ FONT_LINE_HEIGHT_SMALL };\n\tcolor: var(--editor-avatar-name-color, ${ WHITE });\n\tmin-width: 0;\n\tpadding-bottom: 2px; /* $grid-unit-05 / 2 */\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.editor-avatar.is-badge {\n\tdisplay: inline-grid;\n\tgrid-template-columns: min-content 0fr;\n\tcolumn-gap: 0;\n\tpadding-inline-end: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\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.editor-avatar.is-badge:hover {\n\tgrid-template-columns: min-content 1fr;\n\tcolumn-gap: ${ GRID_UNIT_05 };\n\tpadding-inline-end: ${ GRID_UNIT_10 };\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge:hover .editor-avatar__name {\n\topacity: 1;\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge.has-avatar-border-color {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n@media (prefers-reduced-motion: reduce) {\n\t.editor-avatar.is-badge,\n\t.editor-avatar__name {\n\t\ttransition: none;\n\t}\n}\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,iCAYO;AAEA,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKjB,sCAAY;AAAA;AAAA,6DAE+B,gCAAM,KAAM,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjF,8CAAoB;AAAA,WACnB,8CAAoB;AAAA,kBACb,sCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOpB,gCAAM;AAAA;AAAA;AAAA,UAGN,4CAAkB;AAAA,WACjB,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAWsC,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAoB3D,4CAAkB;AAAA,gBAChB,6CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWrB,2CAAiB;AAAA,gBACf,6CAAmB;AAAA,gBACnB,iDAAuB;AAAA,0CACG,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAqBjC,uCAAa;AAAA,uBACL,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -0,0 +1,181 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collaborators-overlay/compute-selection.ts
+var compute_selection_exports = {};
+__export(compute_selection_exports, {
+  computeSelectionVisual: () => computeSelectionVisual
+});
+module.exports = __toCommonJS(compute_selection_exports);
+var import_core_data = require("@wordpress/core-data");
+var import_cursor_dom_utils = require("./cursor-dom-utils.cjs");
+function computeSelectionVisual(selection, start, end, overlayContext) {
+  if (selection.type === import_core_data.SelectionType.None || selection.type === import_core_data.SelectionType.WholeBlock) {
+    return {};
+  }
+  if (selection.type === import_core_data.SelectionType.Cursor) {
+    return computeCursorOnly(start, overlayContext);
+  }
+  if (!end) {
+    return {};
+  }
+  return computeTextSelection(selection, start, end, overlayContext);
+}
+function computeCursorOnly(start, overlayContext) {
+  if (!start.localClientId) {
+    return {};
+  }
+  const blockElement = overlayContext.editorDocument.querySelector(
+    `[data-block="${start.localClientId}"]`
+  );
+  return {
+    coords: (0, import_cursor_dom_utils.getCursorPosition)(
+      start.richTextOffset,
+      blockElement,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    )
+  };
+}
+function computeTextSelection(selection, start, end, overlayContext) {
+  if (!start.localClientId || !end.localClientId || start.richTextOffset === null || end.richTextOffset === null) {
+    return {};
+  }
+  const isReverse = selection.selectionDirection === import_core_data.SelectionDirection.Backward;
+  const activeEnd = isReverse ? start : end;
+  let allRects;
+  let activeEndBlock = null;
+  if (selection.type === import_core_data.SelectionType.SelectionInOneBlock) {
+    const result = computeSingleBlockRects(start, end, overlayContext);
+    allRects = result.rects;
+    activeEndBlock = result.blockElement;
+  } else {
+    const result = computeMultiBlockRects(start, end, overlayContext);
+    allRects = result.rects;
+    activeEndBlock = activeEnd.localClientId === result.firstBlockClientId ? result.firstBlock : result.lastBlock;
+  }
+  if (allRects.length > 0) {
+    return {
+      coords: (0, import_cursor_dom_utils.getCursorPosition)(
+        activeEnd.richTextOffset,
+        activeEndBlock,
+        overlayContext.editorDocument,
+        overlayContext.overlayRect
+      ),
+      selectionRects: allRects
+    };
+  }
+  const startBlock = overlayContext.editorDocument.querySelector(
+    `[data-block="${start.localClientId}"]`
+  );
+  return {
+    coords: (0, import_cursor_dom_utils.getCursorPosition)(
+      start.richTextOffset,
+      startBlock,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    )
+  };
+}
+function computeSingleBlockRects(start, end, overlayContext) {
+  const blockElement = overlayContext.editorDocument.querySelector(
+    `[data-block="${start.localClientId}"]`
+  );
+  if (!blockElement || start.richTextOffset === null || end.richTextOffset === null) {
+    return { rects: [], blockElement: null };
+  }
+  return {
+    rects: (0, import_cursor_dom_utils.getSelectionRects)(
+      blockElement,
+      start.richTextOffset,
+      end.richTextOffset,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    ) ?? [],
+    blockElement
+  };
+}
+function computeMultiBlockRects(start, end, overlayContext) {
+  let docFirst = start;
+  let docLast = end;
+  let firstBlock = overlayContext.editorDocument.querySelector(
+    `[data-block="${docFirst.localClientId}"]`
+  );
+  let lastBlock = overlayContext.editorDocument.querySelector(
+    `[data-block="${docLast.localClientId}"]`
+  );
+  if (firstBlock && lastBlock && (0, import_cursor_dom_utils.isNodeBefore)(lastBlock, firstBlock)) {
+    docFirst = end;
+    docLast = start;
+    [firstBlock, lastBlock] = [lastBlock, firstBlock];
+  }
+  if (!firstBlock || !lastBlock || docFirst.richTextOffset === null || docLast.richTextOffset === null || !docFirst.localClientId || !docLast.localClientId) {
+    return {
+      rects: [],
+      firstBlock: null,
+      lastBlock: null,
+      firstBlockClientId: null
+    };
+  }
+  const allRects = [];
+  const startRects = (0, import_cursor_dom_utils.getSelectionRects)(
+    firstBlock,
+    docFirst.richTextOffset,
+    Number.MAX_SAFE_INTEGER,
+    overlayContext.editorDocument,
+    overlayContext.overlayRect
+  );
+  if (startRects) {
+    allRects.push(...startRects);
+  }
+  const intermediateBlocks = (0, import_cursor_dom_utils.getBlocksBetween)(
+    docFirst.localClientId,
+    docLast.localClientId,
+    overlayContext.editorDocument
+  );
+  for (const intermediateBlock of intermediateBlocks) {
+    const rects = (0, import_cursor_dom_utils.getFullBlockSelectionRects)(
+      intermediateBlock,
+      overlayContext.editorDocument,
+      overlayContext.overlayRect
+    );
+    allRects.push(...rects);
+  }
+  const endRects = (0, import_cursor_dom_utils.getSelectionRects)(
+    lastBlock,
+    0,
+    docLast.richTextOffset,
+    overlayContext.editorDocument,
+    overlayContext.overlayRect
+  );
+  if (endRects) {
+    allRects.push(...endRects);
+  }
+  return {
+    rects: allRects,
+    firstBlock,
+    lastBlock,
+    firstBlockClientId: docFirst.localClientId
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  computeSelectionVisual
+});
+//# sourceMappingURL=compute-selection.cjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/compute-selection.ts"],
+  "sourcesContent": ["import { SelectionDirection, SelectionType } from '@wordpress/core-data';\nimport type { ResolvedSelection } from '@wordpress/core-data';\n\nimport {\n\tgetCursorPosition,\n\tgetSelectionRects,\n\tgetFullBlockSelectionRects,\n\tgetBlocksBetween,\n\tisNodeBefore,\n} from './cursor-dom-utils';\nimport type { CursorCoords, SelectionRect } from './cursor-dom-utils';\n\n/** Common parameters passed to cursor/selection computation helpers. */\ninterface OverlayContext {\n\teditorDocument: Document;\n\toverlayRect: DOMRect;\n}\n\n/** Selection rects and the resolved block element for a single-block selection. */\ninterface SingleBlockResult {\n\trects: SelectionRect[];\n\tblockElement: HTMLElement | null;\n}\n\n/** Selection rects and the resolved block elements for a multi-block selection. */\ninterface MultiBlockResult {\n\trects: SelectionRect[];\n\tfirstBlock: HTMLElement | null;\n\tlastBlock: HTMLElement | null;\n\tfirstBlockClientId: string | null;\n}\n\n/** Result of computing visual cursor/selection state for a single user. */\nexport interface SelectionVisual {\n\tcoords?: CursorCoords | null;\n\tselectionRects?: SelectionRect[];\n}\n\n/**\n * Compute cursor coords and optional selection rects for a single user's selection.\n *\n * @param selection      - The selection state from the awareness layer.\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (only for range selections).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Cursor coordinates and optional selection rectangles.\n */\nexport function computeSelectionVisual(\n\tselection: any,\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection | undefined,\n\toverlayContext: OverlayContext\n): SelectionVisual {\n\tif (\n\t\tselection.type === SelectionType.None ||\n\t\tselection.type === SelectionType.WholeBlock\n\t) {\n\t\treturn {};\n\t}\n\n\tif ( selection.type === SelectionType.Cursor ) {\n\t\treturn computeCursorOnly( start, overlayContext );\n\t}\n\n\t// SelectionInOneBlock or SelectionInMultipleBlocks.\n\tif ( ! end ) {\n\t\treturn {};\n\t}\n\treturn computeTextSelection( selection, start, end, overlayContext );\n}\n\n/**\n * Compute cursor coordinates for a simple cursor (no highlighted text).\n *\n * @param start          - Cursor position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Cursor coordinates.\n */\nfunction computeCursorOnly(\n\tstart: ResolvedSelection,\n\toverlayContext: OverlayContext\n): SelectionVisual {\n\tif ( ! start.localClientId ) {\n\t\treturn {};\n\t}\n\tconst blockElement =\n\t\toverlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t\t`[data-block=\"${ start.localClientId }\"]`\n\t\t);\n\treturn {\n\t\tcoords: getCursorPosition(\n\t\t\tstart.richTextOffset,\n\t\t\tblockElement,\n\t\t\toverlayContext.editorDocument,\n\t\t\toverlayContext.overlayRect\n\t\t),\n\t};\n}\n\n/**\n * Compute cursor coordinates and selection highlight rects for a text selection\n * (single-block or multi-block).\n *\n * @param selection      - The selection state.\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Cursor coordinates and optional selection rectangles.\n */\nfunction computeTextSelection(\n\tselection: any,\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection,\n\toverlayContext: OverlayContext\n): SelectionVisual {\n\tif (\n\t\t! start.localClientId ||\n\t\t! end.localClientId ||\n\t\tstart.richTextOffset === null ||\n\t\tend.richTextOffset === null\n\t) {\n\t\treturn {};\n\t}\n\n\tconst isReverse =\n\t\tselection.selectionDirection === SelectionDirection.Backward;\n\tconst activeEnd = isReverse ? start : end;\n\n\tlet allRects: SelectionRect[];\n\tlet activeEndBlock: HTMLElement | null = null;\n\n\tif ( selection.type === SelectionType.SelectionInOneBlock ) {\n\t\tconst result = computeSingleBlockRects( start, end, overlayContext );\n\t\tallRects = result.rects;\n\t\t// Single block: start and end share the same block element.\n\t\tactiveEndBlock = result.blockElement;\n\t} else {\n\t\tconst result = computeMultiBlockRects( start, end, overlayContext );\n\t\tallRects = result.rects;\n\t\t// Pick the block element that matches the active end.\n\t\tactiveEndBlock =\n\t\t\tactiveEnd.localClientId === result.firstBlockClientId\n\t\t\t\t? result.firstBlock\n\t\t\t\t: result.lastBlock;\n\t}\n\n\tif ( allRects.length > 0 ) {\n\t\treturn {\n\t\t\tcoords: getCursorPosition(\n\t\t\t\tactiveEnd.richTextOffset,\n\t\t\t\tactiveEndBlock,\n\t\t\t\toverlayContext.editorDocument,\n\t\t\t\toverlayContext.overlayRect\n\t\t\t),\n\t\t\tselectionRects: allRects,\n\t\t};\n\t}\n\n\t// Fallback: cursor at start position only.\n\tconst startBlock =\n\t\toverlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t\t`[data-block=\"${ start.localClientId }\"]`\n\t\t);\n\n\treturn {\n\t\tcoords: getCursorPosition(\n\t\t\tstart.richTextOffset,\n\t\t\tstartBlock,\n\t\t\toverlayContext.editorDocument,\n\t\t\toverlayContext.overlayRect\n\t\t),\n\t};\n}\n\n/**\n * Compute selection rects for a selection within a single block.\n *\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Array of selection rectangles.\n */\nfunction computeSingleBlockRects(\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection,\n\toverlayContext: OverlayContext\n): SingleBlockResult {\n\tconst blockElement =\n\t\toverlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t\t`[data-block=\"${ start.localClientId }\"]`\n\t\t);\n\tif (\n\t\t! blockElement ||\n\t\tstart.richTextOffset === null ||\n\t\tend.richTextOffset === null\n\t) {\n\t\treturn { rects: [], blockElement: null };\n\t}\n\treturn {\n\t\trects:\n\t\t\tgetSelectionRects(\n\t\t\t\tblockElement,\n\t\t\t\tstart.richTextOffset,\n\t\t\t\tend.richTextOffset,\n\t\t\t\toverlayContext.editorDocument,\n\t\t\t\toverlayContext.overlayRect\n\t\t\t) ?? [],\n\t\tblockElement,\n\t};\n}\n\n/**\n * Compute selection rects for a selection spanning multiple blocks.\n *\n * Normalizes to document order \u2014 for backward selections the block editor\n * reports start after end.\n *\n * @param start          - Start position (block clientId + text index).\n * @param end            - End position (block clientId + text index).\n * @param overlayContext - Shared editor document / overlay references.\n * @return Array of selection rectangles.\n */\nfunction computeMultiBlockRects(\n\tstart: ResolvedSelection,\n\tend: ResolvedSelection,\n\toverlayContext: OverlayContext\n): MultiBlockResult {\n\tlet docFirst = start;\n\tlet docLast = end;\n\tlet firstBlock = overlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t`[data-block=\"${ docFirst.localClientId }\"]`\n\t);\n\tlet lastBlock = overlayContext.editorDocument.querySelector< HTMLElement >(\n\t\t`[data-block=\"${ docLast.localClientId }\"]`\n\t);\n\n\t// Swap to document order if needed.\n\tif ( firstBlock && lastBlock && isNodeBefore( lastBlock, firstBlock ) ) {\n\t\tdocFirst = end;\n\t\tdocLast = start;\n\t\t[ firstBlock, lastBlock ] = [ lastBlock, firstBlock ];\n\t}\n\n\tif (\n\t\t! firstBlock ||\n\t\t! lastBlock ||\n\t\tdocFirst.richTextOffset === null ||\n\t\tdocLast.richTextOffset === null ||\n\t\t! docFirst.localClientId ||\n\t\t! docLast.localClientId\n\t) {\n\t\treturn {\n\t\t\trects: [],\n\t\t\tfirstBlock: null,\n\t\t\tlastBlock: null,\n\t\t\tfirstBlockClientId: null,\n\t\t};\n\t}\n\n\tconst allRects: SelectionRect[] = [];\n\n\t// First block: from start offset to end of block.\n\tconst startRects = getSelectionRects(\n\t\tfirstBlock,\n\t\tdocFirst.richTextOffset,\n\t\tNumber.MAX_SAFE_INTEGER,\n\t\toverlayContext.editorDocument,\n\t\toverlayContext.overlayRect\n\t);\n\tif ( startRects ) {\n\t\tallRects.push( ...startRects );\n\t}\n\n\t// Intermediate blocks: full content.\n\tconst intermediateBlocks = getBlocksBetween(\n\t\tdocFirst.localClientId,\n\t\tdocLast.localClientId,\n\t\toverlayContext.editorDocument\n\t);\n\tfor ( const intermediateBlock of intermediateBlocks ) {\n\t\tconst rects = getFullBlockSelectionRects(\n\t\t\tintermediateBlock,\n\t\t\toverlayContext.editorDocument,\n\t\t\toverlayContext.overlayRect\n\t\t);\n\t\tallRects.push( ...rects );\n\t}\n\n\t// Last block: from 0 to end offset.\n\tconst endRects = getSelectionRects(\n\t\tlastBlock,\n\t\t0,\n\t\tdocLast.richTextOffset,\n\t\toverlayContext.editorDocument,\n\t\toverlayContext.overlayRect\n\t);\n\tif ( endRects ) {\n\t\tallRects.push( ...endRects );\n\t}\n\n\treturn {\n\t\trects: allRects,\n\t\tfirstBlock,\n\t\tlastBlock,\n\t\tfirstBlockClientId: docFirst.localClientId,\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/components/collaborators-overlay/cursor-dom-utils.cjs

@@ -0,0 +1,243 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/collaborators-overlay/cursor-dom-utils.ts
+var cursor_dom_utils_exports = {};
+__export(cursor_dom_utils_exports, {
+  findInnerBlockOffset: () => findInnerBlockOffset,
+  getBlocksBetween: () => getBlocksBetween,
+  getCursorPosition: () => getCursorPosition,
+  getFullBlockSelectionRects: () => getFullBlockSelectionRects,
+  getSelectionRects: () => getSelectionRects,
+  isNodeBefore: () => isNodeBefore
+});
+module.exports = __toCommonJS(cursor_dom_utils_exports);
+var MAX_NODE_OFFSET_COUNT = 500;
+var getCursorPosition = (absolutePositionIndex, blockElement, editorDocument, overlayRect) => {
+  if (absolutePositionIndex === null || !blockElement) {
+    return null;
+  }
+  return getOffsetPositionInBlock(
+    blockElement,
+    absolutePositionIndex,
+    editorDocument,
+    overlayRect
+  ) ?? null;
+};
+var getOffsetPositionInBlock = (blockElement, charOffset, editorDocument, overlayRect) => {
+  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 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) {
+    const view = editorDocument.defaultView ?? window;
+    cursorHeight = parseInt(view.getComputedStyle(blockElement).lineHeight, 10) || blockRect.height;
+  }
+  return {
+    x: cursorX,
+    y: cursorY,
+    height: cursorHeight
+  };
+};
+var getSelectionRects = (blockElement, startOffset, endOffset, editorDocument, overlayRect) => {
+  let normalizedStart = startOffset;
+  let normalizedEnd = endOffset;
+  if (normalizedStart > normalizedEnd) {
+    [normalizedStart, normalizedEnd] = [normalizedEnd, normalizedStart];
+  }
+  const startPos = findInnerBlockOffset(
+    blockElement,
+    normalizedStart,
+    editorDocument
+  );
+  const endPos = findInnerBlockOffset(
+    blockElement,
+    normalizedEnd,
+    editorDocument
+  );
+  const range = editorDocument.createRange();
+  try {
+    range.setStart(startPos.node, startPos.offset);
+    range.setEnd(endPos.node, endPos.offset);
+  } catch {
+    return null;
+  }
+  const clientRects = range.getClientRects();
+  const rects = [];
+  for (const rect of clientRects) {
+    if (rect.width === 0 && rect.height === 0) {
+      continue;
+    }
+    const x = rect.left - overlayRect.left;
+    const y = rect.top - overlayRect.top;
+    const isDuplicate = rects.some(
+      (r) => r.x === x && r.y === y && r.width === rect.width && r.height === rect.height
+    );
+    if (isDuplicate) {
+      continue;
+    }
+    rects.push({
+      x,
+      y,
+      width: rect.width,
+      height: rect.height
+    });
+  }
+  return rects.length > 0 ? rects : null;
+};
+var getFullBlockSelectionRects = (blockElement, editorDocument, overlayRect) => {
+  const range = editorDocument.createRange();
+  range.selectNodeContents(blockElement);
+  const clientRects = range.getClientRects();
+  const rects = [];
+  for (const rect of clientRects) {
+    if (rect.width === 0 && rect.height === 0) {
+      continue;
+    }
+    rects.push({
+      x: rect.left - overlayRect.left,
+      y: rect.top - overlayRect.top,
+      width: rect.width,
+      height: rect.height
+    });
+  }
+  if (rects.length === 0) {
+    const blockRect = blockElement.getBoundingClientRect();
+    if (blockRect.width > 0 && blockRect.height > 0) {
+      rects.push({
+        x: blockRect.left - overlayRect.left,
+        y: blockRect.top - overlayRect.top,
+        width: blockRect.width,
+        height: blockRect.height
+      });
+    }
+  }
+  return rects;
+};
+var getBlocksBetween = (startBlockId, endBlockId, editorDocument) => {
+  const allBlocks = editorDocument.querySelectorAll("[data-block]");
+  let startIndex = -1;
+  let endIndex = -1;
+  for (let i = 0; i < allBlocks.length; i++) {
+    const blockId = allBlocks[i].getAttribute("data-block");
+    if (blockId === startBlockId) {
+      startIndex = i;
+    }
+    if (blockId === endBlockId) {
+      endIndex = i;
+    }
+  }
+  if (startIndex === -1 || endIndex === -1) {
+    return [];
+  }
+  if (startIndex > endIndex) {
+    [startIndex, endIndex] = [endIndex, startIndex];
+  }
+  const result = [];
+  for (let i = startIndex + 1; i < endIndex; i++) {
+    result.push(allBlocks[i]);
+  }
+  return result;
+};
+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 };
+        }
+        currentOffset += 1;
+        continue;
+      } else {
+        continue;
+      }
+    }
+    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 };
+};
+var isNodeBefore = (a, b) => a.compareDocumentPosition(b) === Node.DOCUMENT_POSITION_FOLLOWING;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  findInnerBlockOffset,
+  getBlocksBetween,
+  getCursorPosition,
+  getFullBlockSelectionRects,
+  getSelectionRects,
+  isNodeBefore
+});
+//# sourceMappingURL=cursor-dom-utils.cjs.map

package/build/components/collaborators-overlay/cursor-dom-utils.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/cursor-dom-utils.ts"],
+  "sourcesContent": ["export interface SelectionRect {\n\tx: number;\n\ty: number;\n\twidth: number;\n\theight: number;\n}\n\nexport interface CursorCoords {\n\tx: number;\n\ty: number;\n\theight: number;\n}\n\nconst MAX_NODE_OFFSET_COUNT = 500;\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 blockElement          - The block element (or null if deleted)\n * @param editorDocument        - The editor document\n * @param overlayRect           - Pre-computed bounding rect of the overlay element\n * @return The position of the cursor\n */\nexport const getCursorPosition = (\n\tabsolutePositionIndex: number | null,\n\tblockElement: HTMLElement | null,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\n): CursorCoords | null => {\n\tif ( absolutePositionIndex === null || ! 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\toverlayRect\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 overlayRect    - Pre-computed bounding rect of the overlay element\n * @return The position of the cursor\n */\nconst getOffsetPositionInBlock = (\n\tblockElement: HTMLElement,\n\tcharOffset: number,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\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 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\tconst view = editorDocument.defaultView ?? window;\n\t\tcursorHeight =\n\t\t\tparseInt( view.getComputedStyle( blockElement ).lineHeight, 10 ) ||\n\t\t\tblockRect.height;\n\t}\n\n\treturn {\n\t\tx: cursorX,\n\t\ty: cursorY,\n\t\theight: cursorHeight,\n\t};\n};\n\n/**\n * Computes selection highlight rectangles for a text range within a single block.\n *\n * @param blockElement   - The block element\n * @param startOffset    - Start character offset within the block\n * @param endOffset      - End character offset within the block\n * @param editorDocument - The editor document\n * @param overlayRect    - Pre-computed bounding rect of the overlay element\n * @return Array of selection rectangles relative to the overlay, or null on failure\n */\nexport const getSelectionRects = (\n\tblockElement: HTMLElement,\n\tstartOffset: number,\n\tendOffset: number,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\n): SelectionRect[] | null => {\n\t// Normalize direction.\n\tlet normalizedStart = startOffset;\n\tlet normalizedEnd = endOffset;\n\tif ( normalizedStart > normalizedEnd ) {\n\t\t[ normalizedStart, normalizedEnd ] = [ normalizedEnd, normalizedStart ];\n\t}\n\n\tconst startPos = findInnerBlockOffset(\n\t\tblockElement,\n\t\tnormalizedStart,\n\t\teditorDocument\n\t);\n\tconst endPos = findInnerBlockOffset(\n\t\tblockElement,\n\t\tnormalizedEnd,\n\t\teditorDocument\n\t);\n\n\tconst range = editorDocument.createRange();\n\ttry {\n\t\trange.setStart( startPos.node, startPos.offset );\n\t\trange.setEnd( endPos.node, endPos.offset );\n\t} catch {\n\t\treturn null;\n\t}\n\n\tconst clientRects = range.getClientRects();\n\tconst rects: SelectionRect[] = [];\n\n\tfor ( const rect of clientRects ) {\n\t\tif ( rect.width === 0 && rect.height === 0 ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst x = rect.left - overlayRect.left;\n\t\tconst y = rect.top - overlayRect.top;\n\n\t\t// Range.getClientRects() can return duplicate rects at inline\n\t\t// formatting boundaries (e.g. <em>, <strong>). Skip exact matches.\n\t\tconst isDuplicate = rects.some(\n\t\t\t( r ) =>\n\t\t\t\tr.x === x &&\n\t\t\t\tr.y === y &&\n\t\t\t\tr.width === rect.width &&\n\t\t\t\tr.height === rect.height\n\t\t);\n\t\tif ( isDuplicate ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\trects.push( {\n\t\t\tx,\n\t\t\ty,\n\t\t\twidth: rect.width,\n\t\t\theight: rect.height,\n\t\t} );\n\t}\n\n\treturn rects.length > 0 ? rects : null;\n};\n\n/**\n * Computes selection highlight rectangles for the full content of a block.\n * Used for intermediate blocks in a multi-block selection.\n *\n * @param blockElement   - The block element\n * @param editorDocument - The editor document\n * @param overlayRect    - Pre-computed bounding rect of the overlay element\n * @return Array of selection rectangles relative to the overlay\n */\nexport const getFullBlockSelectionRects = (\n\tblockElement: HTMLElement,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\n): SelectionRect[] => {\n\tconst range = editorDocument.createRange();\n\trange.selectNodeContents( blockElement );\n\tconst clientRects = range.getClientRects();\n\tconst rects: SelectionRect[] = [];\n\n\tfor ( const rect of clientRects ) {\n\t\tif ( rect.width === 0 && rect.height === 0 ) {\n\t\t\tcontinue;\n\t\t}\n\t\trects.push( {\n\t\t\tx: rect.left - overlayRect.left,\n\t\t\ty: rect.top - overlayRect.top,\n\t\t\twidth: rect.width,\n\t\t\theight: rect.height,\n\t\t} );\n\t}\n\n\t// Fallback: if getClientRects returned nothing, use the block's bounding rect.\n\tif ( rects.length === 0 ) {\n\t\tconst blockRect = blockElement.getBoundingClientRect();\n\t\tif ( blockRect.width > 0 && blockRect.height > 0 ) {\n\t\t\trects.push( {\n\t\t\t\tx: blockRect.left - overlayRect.left,\n\t\t\t\ty: blockRect.top - overlayRect.top,\n\t\t\t\twidth: blockRect.width,\n\t\t\t\theight: blockRect.height,\n\t\t\t} );\n\t\t}\n\t}\n\n\treturn rects;\n};\n\n/**\n * Finds all block elements between two blocks in DOM order (exclusive of start and end).\n *\n * @param startBlockId   - The clientId of the start block\n * @param endBlockId     - The clientId of the end block\n * @param editorDocument - The editor document\n * @return Array of intermediate block HTMLElements in document order\n */\nexport const getBlocksBetween = (\n\tstartBlockId: string,\n\tendBlockId: string,\n\teditorDocument: Document\n): HTMLElement[] => {\n\tconst allBlocks =\n\t\teditorDocument.querySelectorAll< HTMLElement >( '[data-block]' );\n\n\tlet startIndex = -1;\n\tlet endIndex = -1;\n\n\tfor ( let i = 0; i < allBlocks.length; i++ ) {\n\t\tconst blockId = allBlocks[ i ].getAttribute( 'data-block' );\n\t\tif ( blockId === startBlockId ) {\n\t\t\tstartIndex = i;\n\t\t}\n\t\tif ( blockId === endBlockId ) {\n\t\t\tendIndex = i;\n\t\t}\n\t}\n\n\tif ( startIndex === -1 || endIndex === -1 ) {\n\t\treturn [];\n\t}\n\n\t// Normalize order.\n\tif ( startIndex > endIndex ) {\n\t\t[ startIndex, endIndex ] = [ endIndex, startIndex ];\n\t}\n\n\tconst result: HTMLElement[] = [];\n\tfor ( let i = startIndex + 1; i < endIndex; i++ ) {\n\t\tresult.push( allBlocks[ i ] );\n\t}\n\treturn result;\n};\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 */\nexport const 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\n/**\n * Check if node `a` precedes node `b` in document order.\n *\n * @param a - First node.\n * @param b - Second node.\n * @return True if `a` comes before `b`.\n */\nexport const isNodeBefore = ( a: Node, b: Node ): boolean =>\n\ta.compareDocumentPosition( b ) === Node.DOCUMENT_POSITION_FOLLOWING;\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -61,6 +61,12 @@ var OVERLAY_IFRAME_STYLES = `
 	box-shadow: ${import_collaborator_styles.ELEVATION_X_SMALL};
 	animation: collaborators-overlay-cursor-blink 1s infinite;
 }
+.collaborators-overlay-selection-rect {
+	position: absolute;
+	opacity: 0.15;
+	pointer-events: none;
+	border-radius: 2px;
+}
 
 /* Overlay-specific positioning applied to the Avatar cursor label. */
 .collaborators-overlay-user-label.editor-avatar {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/overlay-iframe-styles.ts"],
-  "sourcesContent": ["/**\n * CSS for the collaborators overlay \u2014 cursor indicators, block highlights,\n * and positioning of Avatar labels inside the editor canvas iframe.\n */\n\nimport {\n\tBORDER_WIDTH,\n\tBORDER_WIDTH_FOCUS_FALLBACK,\n\tELEVATION_X_SMALL,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const OVERLAY_IFRAME_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/* Cursor lines render below avatar labels across all users. The parent\n   .collaborators-overlay-user has no z-index so it does not create a\n   stacking context \u2014 children participate in the shared overlay context. */\n.collaborators-overlay-user-cursor {\n\tposition: absolute;\n\tz-index: 0;\n\twidth: ${ BORDER_WIDTH_FOCUS_FALLBACK };\n\tborder-radius: ${ BORDER_WIDTH };\n\toutline: ${ BORDER_WIDTH } solid ${ WHITE };\n\tbox-shadow: ${ ELEVATION_X_SMALL };\n\tanimation: collaborators-overlay-cursor-blink 1s infinite;\n}\n\n/* Overlay-specific positioning applied to the Avatar cursor label. */\n.collaborators-overlay-user-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translate(-11px, -100%);\n\tmargin-top: -${ GRID_UNIT_05 };\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n/* Avatar positioned above a highlighted block as a label. */\n.collaborators-overlay-block-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translateY(calc(-100% - ${ GRID_UNIT_10 }));\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, ${ BORDER_WIDTH_FOCUS_FALLBACK }) + ${ BORDER_WIDTH }) ${ WHITE }, 0 0 0 ${ BORDER_WIDTH } ${ WHITE }, ${ ELEVATION_X_SMALL };\n\tz-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n\t.collaborators-overlay-user-label,\n\t.collaborators-overlay-user-cursor {\n\t\tanimation: none;\n\t}\n}\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,iCAOO;AAEA,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UA+B1B,sDAA4B;AAAA,kBACpB,uCAAa;AAAA,YACnB,uCAAa,UAAW,gCAAM;AAAA,eAC3B,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBASjB,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCASS,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAiDgB,sDAA4B,OAAQ,uCAAa,KAAM,gCAAM,WAAY,uCAAa,IAAK,gCAAM,KAAM,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/**\n * CSS for the collaborators overlay \u2014 cursor indicators, block highlights,\n * and positioning of Avatar labels inside the editor canvas iframe.\n */\n\nimport {\n\tBORDER_WIDTH,\n\tBORDER_WIDTH_FOCUS_FALLBACK,\n\tELEVATION_X_SMALL,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const OVERLAY_IFRAME_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/* Cursor lines render below avatar labels across all users. The parent\n   .collaborators-overlay-user has no z-index so it does not create a\n   stacking context \u2014 children participate in the shared overlay context. */\n.collaborators-overlay-user-cursor {\n\tposition: absolute;\n\tz-index: 0;\n\twidth: ${ BORDER_WIDTH_FOCUS_FALLBACK };\n\tborder-radius: ${ BORDER_WIDTH };\n\toutline: ${ BORDER_WIDTH } solid ${ WHITE };\n\tbox-shadow: ${ ELEVATION_X_SMALL };\n\tanimation: collaborators-overlay-cursor-blink 1s infinite;\n}\n.collaborators-overlay-selection-rect {\n\tposition: absolute;\n\topacity: 0.15;\n\tpointer-events: none;\n\tborder-radius: 2px;\n}\n\n/* Overlay-specific positioning applied to the Avatar cursor label. */\n.collaborators-overlay-user-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translate(-11px, -100%);\n\tmargin-top: -${ GRID_UNIT_05 };\n\tpointer-events: auto;\n\toverflow: visible;\n\twidth: max-content;\n}\n/* Avatar positioned above a highlighted block as a label. */\n.collaborators-overlay-block-label.editor-avatar {\n\tposition: absolute;\n\tz-index: 1;\n\ttransform: translateY(calc(-100% - ${ GRID_UNIT_10 }));\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, ${ BORDER_WIDTH_FOCUS_FALLBACK }) + ${ BORDER_WIDTH }) ${ WHITE }, 0 0 0 ${ BORDER_WIDTH } ${ WHITE }, ${ ELEVATION_X_SMALL };\n\tz-index: 1;\n}\n@media (prefers-reduced-motion: reduce) {\n\t.collaborators-overlay-user-label,\n\t.collaborators-overlay-user-cursor {\n\t\tanimation: none;\n\t}\n}\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,iCAOO;AAEA,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UA+B1B,sDAA4B;AAAA,kBACpB,uCAAa;AAAA,YACnB,uCAAa,UAAW,gCAAM;AAAA,eAC3B,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAejB,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCASS,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAiDgB,sDAA4B,OAAQ,uCAAa,KAAM,gCAAM,WAAY,uCAAa,IAAK,gCAAM,KAAM,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }