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

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

@@ -0,0 +1,61 @@
+// packages/editor/src/components/collaborators-overlay/cursor-registry.ts
+function highlightCursor(element, duration) {
+  element.classList.add("collaborators-overlay-cursor-highlighted");
+  setTimeout(() => {
+    element.classList.remove("collaborators-overlay-cursor-highlighted");
+  }, duration);
+}
+function createCursorRegistry() {
+  const cursorMap = /* @__PURE__ */ new Map();
+  return {
+    /**
+     * Register a cursor element when it's created.
+     *
+     * @param clientId - The clientId of the cursor to register.
+     * @param element  - The cursor element to register.
+     */
+    registerCursor(clientId, element) {
+      cursorMap.set(clientId, element);
+    },
+    /**
+     * Unregister a cursor element when it's removed.
+     *
+     * @param clientId - The clientId of the cursor to unregister.
+     */
+    unregisterCursor(clientId) {
+      cursorMap.delete(clientId);
+    },
+    /**
+     * Scroll to a cursor by clientId.
+     *
+     * @param clientId - The clientId of the cursor to scroll to.
+     * @param options  - The options for the scroll.
+     * @return true if cursor was found and scrolled to, false otherwise.
+     */
+    scrollToCursor(clientId, options) {
+      const cursorElement = cursorMap.get(clientId);
+      if (!cursorElement) {
+        return false;
+      }
+      cursorElement.scrollIntoView({
+        behavior: options?.behavior ?? "smooth",
+        block: options?.block ?? "center",
+        inline: options?.inline ?? "nearest"
+      });
+      if (options?.highlightDuration) {
+        highlightCursor(cursorElement, options.highlightDuration);
+      }
+      return true;
+    },
+    /**
+     * Clear the registry.
+     */
+    removeAll() {
+      cursorMap.clear();
+    }
+  };
+}
+export {
+  createCursorRegistry
+};
+//# sourceMappingURL=cursor-registry.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collaborators-overlay/cursor-registry.ts"],
+  "sourcesContent": ["interface ScrollToCursorOptions {\n\tbehavior?: ScrollBehavior;\n\tblock?: ScrollLogicalPosition;\n\tinline?: ScrollLogicalPosition;\n\thighlightDuration?: number;\n}\n\n/**\n * Cursor Registry\n * ===\n * This registry stores references to cursor elements so that we can access them\n * in different parts of the component tree. This would more ideally be solved\n * with React context or state in the awareness store, but:\n *\n * 1. EditorPresence and BlockCanvasCover slot/fill break context propagation. We\n *    don't currently have a way to provide context to both the slot and fill.\n * 2. Storing pointers to the cursor elements in the awareness store might be a\n *    better solution, but would require broader refactoring.\n *\n * For now, we create a single instance of this registry and pass it down to the\n * components that need it. It's important that we create a single instance and\n * not a new instance per component or render; use useState with a lazy\n * initializer to accomplish this.\n */\n\nfunction highlightCursor( element: HTMLElement, duration: number ): void {\n\telement.classList.add( 'collaborators-overlay-cursor-highlighted' );\n\n\tsetTimeout( () => {\n\t\telement.classList.remove( 'collaborators-overlay-cursor-highlighted' );\n\t}, duration );\n}\n\nexport function createCursorRegistry() {\n\tconst cursorMap = new Map< number, HTMLElement >();\n\n\treturn {\n\t\t/**\n\t\t * Register a cursor element when it's created.\n\t\t *\n\t\t * @param clientId - The clientId of the cursor to register.\n\t\t * @param element  - The cursor element to register.\n\t\t */\n\t\tregisterCursor( clientId: number, element: HTMLElement ): void {\n\t\t\tcursorMap.set( clientId, element );\n\t\t},\n\n\t\t/**\n\t\t * Unregister a cursor element when it's removed.\n\t\t *\n\t\t * @param clientId - The clientId of the cursor to unregister.\n\t\t */\n\t\tunregisterCursor( clientId: number ): void {\n\t\t\tcursorMap.delete( clientId );\n\t\t},\n\n\t\t/**\n\t\t * Scroll to a cursor by clientId.\n\t\t *\n\t\t * @param clientId - The clientId of the cursor to scroll to.\n\t\t * @param options  - The options for the scroll.\n\t\t * @return true if cursor was found and scrolled to, false otherwise.\n\t\t */\n\t\tscrollToCursor(\n\t\t\tclientId: number,\n\t\t\toptions?: ScrollToCursorOptions\n\t\t): boolean {\n\t\t\tconst cursorElement = cursorMap.get( clientId );\n\n\t\t\tif ( ! cursorElement ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tcursorElement.scrollIntoView( {\n\t\t\t\tbehavior: options?.behavior ?? 'smooth',\n\t\t\t\tblock: options?.block ?? 'center',\n\t\t\t\tinline: options?.inline ?? 'nearest',\n\t\t\t} );\n\n\t\t\tif ( options?.highlightDuration ) {\n\t\t\t\thighlightCursor( cursorElement, options.highlightDuration );\n\t\t\t}\n\n\t\t\treturn true;\n\t\t},\n\n\t\t/**\n\t\t * Clear the registry.\n\t\t */\n\t\tremoveAll(): void {\n\t\t\tcursorMap.clear();\n\t\t},\n\t};\n}\n\nexport type CursorRegistry = ReturnType< typeof createCursorRegistry >;\n"],
+  "mappings": ";AAyBA,SAAS,gBAAiB,SAAsB,UAAyB;AACxE,UAAQ,UAAU,IAAK,0CAA2C;AAElE,aAAY,MAAM;AACjB,YAAQ,UAAU,OAAQ,0CAA2C;AAAA,EACtE,GAAG,QAAS;AACb;AAEO,SAAS,uBAAuB;AACtC,QAAM,YAAY,oBAAI,IAA2B;AAEjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAON,eAAgB,UAAkB,SAA6B;AAC9D,gBAAU,IAAK,UAAU,OAAQ;AAAA,IAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,iBAAkB,UAAyB;AAC1C,gBAAU,OAAQ,QAAS;AAAA,IAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,eACC,UACA,SACU;AACV,YAAM,gBAAgB,UAAU,IAAK,QAAS;AAE9C,UAAK,CAAE,eAAgB;AACtB,eAAO;AAAA,MACR;AAEA,oBAAc,eAAgB;AAAA,QAC7B,UAAU,SAAS,YAAY;AAAA,QAC/B,OAAO,SAAS,SAAS;AAAA,QACzB,QAAQ,SAAS,UAAU;AAAA,MAC5B,CAAE;AAEF,UAAK,SAAS,mBAAoB;AACjC,wBAAiB,eAAe,QAAQ,iBAAkB;AAAA,MAC3D;AAEA,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAKA,YAAkB;AACjB,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD;AACD;",
+  "names": []
+}

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

@@ -4,7 +4,11 @@ import { unlock } from "../../lock-unlock.mjs";
 import { Overlay } from "./overlay.mjs";
 import { jsx } from "react/jsx-runtime";
 var { BlockCanvasCover } = unlock(privateApis);
-function CollaboratorsOverlay({ postId, postType }) {
+function CollaboratorsOverlay({
+  postId,
+  postType,
+  cursorRegistry
+}) {
   return /* @__PURE__ */ jsx(BlockCanvasCover.Fill, { children: ({
     containerRef
   }) => /* @__PURE__ */ jsx(
@@ -12,7 +16,8 @@ function CollaboratorsOverlay({ postId, postType }) {
     {
       blockEditorDocument: containerRef.current?.ownerDocument,
       postId,
-      postType
+      postType,
+      cursorRegistry
     }
   ) });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collaborators-overlay/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error No exported types\nimport { privateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { Overlay } from './overlay';\n\nconst { BlockCanvasCover } = unlock( privateApis );\n\ninterface Props {\n\tpostId: number | null;\n\tpostType: string | null;\n}\n\n/**\n * Collaborators Overlay component\n * @param props          - The props for the CollaboratorsOverlay component\n * @param props.postId   - The ID of the post\n * @param props.postType - The type of the post\n * @return The CollaboratorsOverlay component\n */\nexport function CollaboratorsOverlay( { postId, postType }: Props ) {\n\treturn (\n\t\t<BlockCanvasCover.Fill>\n\t\t\t{ ( {\n\t\t\t\tcontainerRef,\n\t\t\t}: {\n\t\t\t\tcontainerRef: React.MutableRefObject< HTMLElement | null >;\n\t\t\t} ) => (\n\t\t\t\t<Overlay\n\t\t\t\t\tblockEditorDocument={ containerRef.current?.ownerDocument }\n\t\t\t\t\tpostId={ postId }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</BlockCanvasCover.Fill>\n\t);\n}\n"],
-  "mappings": ";AAIA,SAAS,mBAAmB;AAK5B,SAAS,cAAc;AACvB,SAAS,eAAe;AAwBpB;AAtBJ,IAAM,EAAE,iBAAiB,IAAI,OAAQ,WAAY;AAc1C,SAAS,qBAAsB,EAAE,QAAQ,SAAS,GAAW;AACnE,SACC,oBAAC,iBAAiB,MAAjB,EACE,WAAE;AAAA,IACH;AAAA,EACD,MAGC;AAAA,IAAC;AAAA;AAAA,MACA,qBAAsB,aAAa,SAAS;AAAA,MAC5C;AAAA,MACA;AAAA;AAAA,EACD,GAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error No exported types\nimport { privateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { Overlay } from './overlay';\nimport { type CursorRegistry } from './cursor-registry';\n\nconst { BlockCanvasCover } = unlock( privateApis );\n\ninterface Props {\n\tpostId: number | null;\n\tpostType: string | null;\n\tcursorRegistry?: CursorRegistry;\n}\n\n/**\n * Collaborators Overlay component\n * @param props                - The props for the CollaboratorsOverlay component\n * @param props.postId         - The ID of the post\n * @param props.postType       - The type of the post\n * @param props.cursorRegistry - The shared cursor registry\n * @return The CollaboratorsOverlay component\n */\nexport function CollaboratorsOverlay( {\n\tpostId,\n\tpostType,\n\tcursorRegistry,\n}: Props ) {\n\treturn (\n\t\t<BlockCanvasCover.Fill>\n\t\t\t{ ( {\n\t\t\t\tcontainerRef,\n\t\t\t}: {\n\t\t\t\tcontainerRef: React.MutableRefObject< HTMLElement | null >;\n\t\t\t} ) => (\n\t\t\t\t<Overlay\n\t\t\t\t\tblockEditorDocument={ containerRef.current?.ownerDocument }\n\t\t\t\t\tpostId={ postId }\n\t\t\t\t\tpostType={ postType }\n\t\t\t\t\tcursorRegistry={ cursorRegistry }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</BlockCanvasCover.Fill>\n\t);\n}\n"],
+  "mappings": ";AAIA,SAAS,mBAAmB;AAK5B,SAAS,cAAc;AACvB,SAAS,eAAe;AA+BpB;AA5BJ,IAAM,EAAE,iBAAiB,IAAI,OAAQ,WAAY;AAgB1C,SAAS,qBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACD,GAAW;AACV,SACC,oBAAC,iBAAiB,MAAjB,EACE,WAAE;AAAA,IACH;AAAA,EACD,MAGC;AAAA,IAAC;AAAA;AAAA,MACA,qBAAsB,aAAa,SAAS;AAAA,MAC5C;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GAEF;AAEF;",
   "names": []
 }

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

@@ -0,0 +1,130 @@
+// packages/editor/src/components/collaborators-overlay/overlay-iframe-styles.ts
+import {
+  BORDER_WIDTH,
+  BORDER_WIDTH_FOCUS_FALLBACK,
+  ELEVATION_X_SMALL,
+  GRID_UNIT_05,
+  GRID_UNIT_10,
+  WHITE
+} from "./collaborator-styles.mjs";
+var OVERLAY_IFRAME_STYLES = `
+.block-canvas-cover {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	z-index: 20000;
+}
+.block-canvas-cover .collaborators-overlay-full {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.block-canvas-cover .collaborators-overlay-fixed {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+}
+.collaborators-overlay-user {
+	position: absolute;
+}
+/* Cursor lines render below avatar labels across all users. The parent
+   .collaborators-overlay-user has no z-index so it does not create a
+   stacking context \u2014 children participate in the shared overlay context. */
+.collaborators-overlay-user-cursor {
+	position: absolute;
+	z-index: 0;
+	width: ${BORDER_WIDTH_FOCUS_FALLBACK};
+	border-radius: ${BORDER_WIDTH};
+	outline: ${BORDER_WIDTH} solid ${WHITE};
+	box-shadow: ${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 {
+	position: absolute;
+	z-index: 1;
+	transform: translate(-11px, -100%);
+	margin-top: -${GRID_UNIT_05};
+	pointer-events: auto;
+	overflow: visible;
+	width: max-content;
+}
+/* Avatar positioned above a highlighted block as a label. */
+.collaborators-overlay-block-label.editor-avatar {
+	position: absolute;
+	z-index: 1;
+	transform: translateY(calc(-100% - ${GRID_UNIT_10}));
+	pointer-events: auto;
+	overflow: visible;
+	width: max-content;
+}
+
+@keyframes collaborators-overlay-cursor-blink {
+	0%, 45% { opacity: 1; }
+	55%, 95% { opacity: 0; }
+	100% { opacity: 1; }
+}
+.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-cursor {
+	animation: collaborators-overlay-cursor-highlight 0.6s ease-in-out 3;
+}
+.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-label {
+	animation: collaborators-overlay-label-highlight 0.6s ease-in-out 3;
+}
+@keyframes collaborators-overlay-cursor-highlight {
+	0%, 100% {
+		transform: scale(1);
+		filter: drop-shadow(0 0 0 transparent);
+	}
+	50% {
+		transform: scale(1.2);
+		filter: drop-shadow(0 0 8px currentColor);
+	}
+}
+@keyframes collaborators-overlay-label-highlight {
+	0%, 100% {
+		transform: translate(-11px, -100%) scale(1);
+		filter: drop-shadow(0 0 0 transparent);
+	}
+	50% {
+		transform: translate(-11px, -100%) scale(1.1);
+		filter: drop-shadow(0 0 6px currentColor);
+	}
+}
+.block-editor-block-list__block.is-collaborator-selected:not(:focus)::after {
+	content: "";
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	outline-color: var(--collaborator-outline-color);
+	outline-style: solid;
+	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	outline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+	box-shadow: inset 0 0 0 calc((var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${WHITE}, 0.7);
+	z-index: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+	.collaborators-overlay-user-label,
+	.collaborators-overlay-user-cursor {
+		animation: none;
+	}
+}
+`;
+export {
+  OVERLAY_IFRAME_STYLES
+};
+//# sourceMappingURL=overlay-iframe-styles.mjs.map

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

@@ -0,0 +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.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) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 0.5px) rgba(${ WHITE }, 0.7);\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": ";AAKA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;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,2BAA4B;AAAA,kBACpB,YAAa;AAAA,YACnB,YAAa,UAAW,KAAM;AAAA,eAC3B,iBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAejB,YAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCASS,YAAa;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,qIAiDkF,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -1,257 +1,159 @@
 // packages/editor/src/components/collaborators-overlay/overlay.tsx
-import { privateApis as componentsPrivateApis } from "@wordpress/components";
 import { useResizeObserver, useMergeRefs } from "@wordpress/compose";
-import { useEffect, useState } from "@wordpress/element";
-import { unlock } from "../../lock-unlock.mjs";
+import { useCallback, useEffect, useRef, useState } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import Avatar from "../collaborators-presence/avatar/index.mjs";
+import { AVATAR_IFRAME_STYLES } from "./avatar-iframe-styles.mjs";
+import { OVERLAY_IFRAME_STYLES } from "./overlay-iframe-styles.mjs";
+import { setDelayedInterval } from "./timing-utils.mjs";
 import { useBlockHighlighting } from "./use-block-highlighting.mjs";
 import { useRenderCursors } from "./use-render-cursors.mjs";
-import { ELEVATION_X_SMALL } from "./collaborator-styles.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-var { Avatar } = unlock(componentsPrivateApis);
-var COLLABORATORS_OVERLAY_STYLES = `
-.block-canvas-cover {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	z-index: 20000;
-}
-.block-canvas-cover .collaborators-overlay-full {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-.block-canvas-cover .collaborators-overlay-fixed {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-}
-.collaborators-overlay-user {
-	position: absolute;
-}
-.collaborators-overlay-user-cursor {
-	position: absolute;
-	width: 2px;
-	border-radius: 1px;
-	outline: 1px solid #fff;
-	box-shadow: ${ELEVATION_X_SMALL};
-	animation: collaborators-overlay-cursor-blink 1s infinite;
-}
-
-/* \u2500\u2500 Avatar component (compiled from packages/components/src/avatar/styles.scss) \u2500\u2500 */
-.components-avatar {
-	display: inline-flex;
-	align-items: center;
-	border-radius: 9999px;
-	overflow: clip;
-	flex-shrink: 0;
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff, ${ELEVATION_X_SMALL};
-}
-.components-avatar__image {
-	box-sizing: border-box;
-	position: relative;
-	width: 32px;
-	height: 32px;
-	border-radius: 9999px;
-	border: 0;
-	background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-	overflow: clip;
-	flex-shrink: 0;
-	font-size: 0;
-	color: #fff;
-}
-.is-small > .components-avatar__image {
-	width: 24px;
-	height: 24px;
-}
-.has-src > .components-avatar__image {
-	background-image: var(--components-avatar-url);
-	background-size: cover;
-	background-position: center;
-}
-.has-avatar-border-color > .components-avatar__image {
-	border: var(--wp-admin-border-width-focus, 2px) solid var(--components-avatar-outline-color);
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;
-	background-clip: padding-box;
-}
-.components-avatar:not(.has-src) > .components-avatar__image {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 11px;
-	font-weight: 499;
-	border: 0;
-	box-shadow: none;
-	background-clip: border-box;
-}
-.components-avatar:not(.has-src).has-avatar-border-color > .components-avatar__image {
-	background-color: var(--components-avatar-outline-color);
-}
-.components-avatar__name {
-	font-size: 13px;
-	line-height: 20px;
-	color: #fff;
-	min-width: 0;
-	padding-bottom: 2px;
-	overflow: hidden;
-	opacity: 0;
-	white-space: nowrap;
-	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
-}
-.components-avatar.has-badge {
-	display: inline-grid;
-	grid-template-columns: min-content 0fr;
-	column-gap: 0;
-	padding-inline-end: 0;
-	transition:
-		grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),
-		padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
-}
-.components-avatar.has-badge:hover {
-	grid-template-columns: min-content 1fr;
-	column-gap: 4px;
-	padding-inline-end: 8px;
-	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge:hover .components-avatar__name {
-	opacity: 1;
-	transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
-}
-.components-avatar.has-badge.has-avatar-border-color {
-	background-color: var(--components-avatar-outline-color);
-}
-/* \u2500\u2500 end Avatar \u2500\u2500 */
-
-/* Overlay-specific positioning applied to the Avatar cursor label. */
-.collaborators-overlay-user-label.components-avatar {
-	position: absolute;
-	transform: translate(-11px, -100%);
-	margin-top: -4px;
-	pointer-events: auto;
-	overflow: visible;
-	width: max-content;
-}
-
-@keyframes collaborators-overlay-cursor-blink {
-	0%, 45% { opacity: 1; }
-	55%, 95% { opacity: 0; }
-	100% { opacity: 1; }
-}
-.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-cursor {
-	animation: collaborators-overlay-cursor-highlight 0.6s ease-in-out 3;
-}
-.collaborators-overlay-cursor-highlighted .collaborators-overlay-user-label {
-	animation: collaborators-overlay-label-highlight 0.6s ease-in-out 3;
-}
-@keyframes collaborators-overlay-cursor-highlight {
-	0%, 100% {
-		transform: scale(1);
-		filter: drop-shadow(0 0 0 transparent);
-	}
-	50% {
-		transform: scale(1.2);
-		filter: drop-shadow(0 0 8px currentColor);
-	}
-}
-@keyframes collaborators-overlay-label-highlight {
-	0%, 100% {
-		transform: translate(-11px, -100%) scale(1);
-		filter: drop-shadow(0 0 0 transparent);
-	}
-	50% {
-		transform: translate(-11px, -100%) scale(1.1);
-		filter: drop-shadow(0 0 6px currentColor);
-	}
-}
-.block-editor-block-list__block.is-collaborator-selected:not(:focus)::after {
-	content: "";
-	position: absolute;
-	pointer-events: none;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	outline-color: var(--collaborator-outline-color);
-	outline-style: solid;
-	outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	outline-offset: calc(-1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
-	box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, ${ELEVATION_X_SMALL};
-	z-index: 1;
-}
-@media (prefers-reduced-motion: reduce) {
-	.components-avatar.has-badge,
-	.components-avatar__name,
-	.collaborators-overlay-user-label,
-	.collaborators-overlay-user-cursor {
-		transition: none;
-		animation: none;
-	}
-}
-`;
+var RERENDER_DELAY_MS = 500;
+var CURSOR_REDRAW_INTERVAL_MS = 1e4;
 function Overlay({
   blockEditorDocument,
   postId,
-  postType
+  postType,
+  cursorRegistry
 }) {
   const [overlayElement, setOverlayElement] = useState(null);
   const { cursors, rerenderCursorsAfterDelay } = useRenderCursors(
     overlayElement,
     blockEditorDocument ?? null,
     postId ?? null,
-    postType ?? null
+    postType ?? null,
+    RERENDER_DELAY_MS
+  );
+  const { highlights, rerenderHighlightsAfterDelay } = useBlockHighlighting(
+    overlayElement,
+    blockEditorDocument ?? null,
+    postId ?? null,
+    postType ?? null,
+    RERENDER_DELAY_MS
   );
-  const resizeObserverRef = useResizeObserver(rerenderCursorsAfterDelay);
-  useEffect(rerenderCursorsAfterDelay, [rerenderCursorsAfterDelay]);
+  const onResize = useCallback(() => {
+    rerenderCursorsAfterDelay();
+    rerenderHighlightsAfterDelay();
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  const resizeObserverRef = useResizeObserver(onResize);
+  useEffect(() => {
+    const cleanupCursors = rerenderCursorsAfterDelay();
+    const cleanupHighlights = rerenderHighlightsAfterDelay();
+    return () => {
+      cleanupCursors();
+      cleanupHighlights();
+    };
+  }, [rerenderCursorsAfterDelay, rerenderHighlightsAfterDelay]);
+  useEffect(() => {
+    if (cursors.length === 0) {
+      return;
+    }
+    return setDelayedInterval(
+      rerenderCursorsAfterDelay,
+      CURSOR_REDRAW_INTERVAL_MS
+    );
+  }, [cursors.length, rerenderCursorsAfterDelay]);
   const mergedRef = useMergeRefs([
     setOverlayElement,
     resizeObserverRef
   ]);
-  useBlockHighlighting(
-    blockEditorDocument ?? null,
-    postId ?? null,
-    postType ?? null
+  const cursorRefsMap = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!cursorRegistry) {
+      return;
+    }
+    const refs = cursorRefsMap.current;
+    const currentIds = new Set(cursors.map((c) => c.clientId));
+    for (const id of refs.keys()) {
+      if (!currentIds.has(id)) {
+        cursorRegistry.unregisterCursor(id);
+        refs.delete(id);
+      }
+    }
+    for (const [id, el] of refs.entries()) {
+      cursorRegistry.registerCursor(id, el);
+    }
+    return () => cursorRegistry.removeAll();
+  }, [cursors, cursorRegistry]);
+  const setCursorRef = useCallback(
+    (clientId) => (el) => {
+      if (el) {
+        cursorRefsMap.current.set(clientId, el);
+      } else {
+        cursorRefsMap.current.delete(clientId);
+      }
+    },
+    []
   );
   return /* @__PURE__ */ jsxs("div", { className: "collaborators-overlay-full", ref: mergedRef, children: [
-    /* @__PURE__ */ jsx("style", { children: COLLABORATORS_OVERLAY_STYLES }),
-    cursors.map((cursor) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "collaborators-overlay-user",
-        style: {
-          left: `${cursor.x}px`,
-          top: `${cursor.y}px`
+    /* @__PURE__ */ jsx("style", { children: AVATAR_IFRAME_STYLES + OVERLAY_IFRAME_STYLES }),
+    cursors.map((cursor) => /* @__PURE__ */ jsxs("div", { children: [
+      cursor.selectionRects?.map((rect, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "collaborators-overlay-selection-rect",
+          style: {
+            left: `${rect.x}px`,
+            top: `${rect.y}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            backgroundColor: cursor.color
+          }
         },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "collaborators-overlay-user-cursor",
-              style: {
-                backgroundColor: cursor.color,
-                height: `${cursor.height}px`
+        `${cursor.clientId}-sel-${index}`
+      )),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setCursorRef(cursor.clientId),
+          className: "collaborators-overlay-user",
+          style: {
+            left: `${cursor.x}px`,
+            top: `${cursor.y}px`
+          },
+          children: [
+            !cursor.isMe && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "collaborators-overlay-user-cursor",
+                style: {
+                  backgroundColor: cursor.color,
+                  height: `${cursor.height}px`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                className: "collaborators-overlay-user-label",
+                variant: "badge",
+                size: "small",
+                src: cursor.avatarUrl,
+                name: cursor.userName,
+                label: cursor.isMe ? __("You") : void 0,
+                borderColor: cursor.color
               }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              className: "collaborators-overlay-user-label",
-              badge: true,
-              size: "small",
-              src: cursor.avatarUrl,
-              name: cursor.userName,
-              borderColor: cursor.color
-            }
-          )
-        ]
+            )
+          ]
+        }
+      )
+    ] }, cursor.clientId)),
+    highlights.map((highlight) => /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        className: "collaborators-overlay-block-label",
+        variant: "badge",
+        size: "small",
+        src: highlight.avatarUrl,
+        name: highlight.userName,
+        borderColor: highlight.color,
+        style: {
+          left: `${highlight.x}px`,
+          top: `${highlight.y}px`
+        }
       },
-      cursor.clientId
+      highlight.blockId
     ))
   ] });
 }