@wordpress/editor 14.44.0 → 14.44.1-next.v.202604201441.0

package/build/components/collab-sidebar/add-comment.cjs

@@ -33,7 +33,6 @@ __export(add_comment_exports, {
   AddComment: () => AddComment
 });
 module.exports = __toCommonJS(add_comment_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_i18n = require("@wordpress/i18n");
 var import_data = require("@wordpress/data");
 var import_components = require("@wordpress/components");
@@ -41,18 +40,12 @@ var import_block_editor = require("@wordpress/block-editor");
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_comment_author_info = __toESM(require("./comment-author-info.cjs"));
 var import_comment_form = __toESM(require("./comment-form.cjs"));
+var import_floating_container = require("./floating-container.cjs");
 var import_utils = require("./utils.cjs");
 var import_store = require("../../store/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var { useBlockElement } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
-function AddComment({
-  onSubmit,
-  commentSidebarRef,
-  reflowComments = import_utils.noop,
-  isFloating = false,
-  y,
-  refs
-}) {
+function AddComment({ onSubmit, commentSidebarRef, floating }) {
   const { clientId } = (0, import_data.useSelect)((select) => {
     const { getSelectedBlockClientId } = select(import_block_editor.store);
     return {
@@ -75,23 +68,15 @@ function AddComment({
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_components.__experimentalVStack,
+    import_floating_container.FloatingContainer,
     {
-      className: (0, import_clsx.default)(
-        "editor-collab-sidebar-panel__thread is-selected",
-        {
-          "is-floating": isFloating
-        }
-      ),
+      floating,
+      className: "editor-collab-sidebar-panel__thread is-selected",
       spacing: "3",
       tabIndex: 0,
       "aria-label": (0, import_i18n.__)("New note"),
       role: "treeitem",
-      ref: isFloating ? refs.setFloating : void 0,
-      style: isFloating ? (
-        // Delay showing the floating note box until a Y position is known to prevent blink.
-        { top: y, opacity: !y ? 0 : void 0 }
-      ) : void 0,
+      style: floating ? { opacity: !floating.y ? 0 : void 0 } : void 0,
       onBlur: (event) => {
         if (!document.hasFocus()) {
           return;
@@ -113,7 +98,6 @@ function AddComment({
               (0, import_utils.focusCommentThread)(id, commentSidebarRef.current);
             },
             onCancel: unselectThread,
-            reflowComments,
             submitButtonText: (0, import_i18n.__)("Add note"),
             labelText: (0, import_i18n.__)("New note")
           }

package/build/components/collab-sidebar/add-comment.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/add-comment.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\nimport { focusCommentThread, noop } from './utils';\nimport { store as editorStore } from '../../store';\n\nconst { useBlockElement } = unlock( blockEditorPrivateApis );\n\nexport function AddComment( {\n\tonSubmit,\n\tcommentSidebarRef,\n\treflowComments = noop,\n\tisFloating = false,\n\ty,\n\trefs,\n} ) {\n\tconst { clientId } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlockClientId } = select( blockEditorStore );\n\t\treturn {\n\t\t\tclientId: getSelectedBlockClientId(),\n\t\t};\n\t}, [] );\n\tconst selectedNote = useSelect(\n\t\t( select ) => unlock( select( editorStore ) ).getSelectedNote(),\n\t\t[]\n\t);\n\tconst blockElement = useBlockElement( clientId );\n\tconst { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );\n\tconst { selectNote } = unlock( useDispatch( editorStore ) );\n\n\tconst unselectThread = () => {\n\t\tselectNote( undefined );\n\t\tblockElement?.focus();\n\t\ttoggleBlockSpotlight( clientId, false );\n\t};\n\n\tif ( selectedNote !== 'new' || ! clientId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName={ clsx(\n\t\t\t\t'editor-collab-sidebar-panel__thread is-selected',\n\t\t\t\t{\n\t\t\t\t\t'is-floating': isFloating,\n\t\t\t\t}\n\t\t\t) }\n\t\t\tspacing=\"3\"\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ __( 'New note' ) }\n\t\t\trole=\"treeitem\"\n\t\t\tref={ isFloating ? refs.setFloating : undefined }\n\t\t\tstyle={\n\t\t\t\tisFloating\n\t\t\t\t\t? // Delay showing the floating note box until a Y position is known to prevent blink.\n\t\t\t\t\t  { top: y, opacity: ! y ? 0 : undefined }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonBlur={ ( event ) => {\n\t\t\t\t// Don't deselect notes when the browser window/tab loses focus.\n\t\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( event.currentTarget.contains( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleBlockSpotlight( clientId, false );\n\t\t\t\tselectNote( undefined );\n\t\t\t} }\n\t\t>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\">\n\t\t\t\t<CommentAuthorInfo />\n\t\t\t</HStack>\n\t\t\t<CommentForm\n\t\t\t\tonSubmit={ async ( inputComment ) => {\n\t\t\t\t\tconst { id } = await onSubmit( { content: inputComment } );\n\t\t\t\t\tselectNote( id );\n\t\t\t\t\tfocusCommentThread( id, commentSidebarRef.current );\n\t\t\t\t} }\n\t\t\t\tonCancel={ unselectThread }\n\t\t\t\treflowComments={ reflowComments }\n\t\t\t\tsubmitButtonText={ __( 'Add note' ) }\n\t\t\t\tlabelText={ __( 'New note' ) }\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,kBAAmB;AACnB,kBAAuC;AACvC,wBAGO;AACP,0BAGO;AAKP,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AACxB,mBAAyC;AACzC,mBAAqC;AAqCnC;AAnCF,IAAM,EAAE,gBAAgB,QAAI,2BAAQ,oBAAAA,WAAuB;AAEpD,SAAS,WAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb;AAAA,EACA;AACD,GAAI;AACH,QAAM,EAAE,SAAS,QAAI,uBAAW,CAAE,WAAY;AAC7C,UAAM,EAAE,yBAAyB,IAAI,OAAQ,oBAAAC,KAAiB;AAC9D,WAAO;AAAA,MACN,UAAU,yBAAyB;AAAA,IACpC;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,mBAAe;AAAA,IACpB,CAAE,eAAY,2BAAQ,OAAQ,aAAAC,KAAY,CAAE,EAAE,gBAAgB;AAAA,IAC9D,CAAC;AAAA,EACF;AACA,QAAM,eAAe,gBAAiB,QAAS;AAC/C,QAAM,EAAE,qBAAqB,QAAI,+BAAQ,yBAAa,oBAAAD,KAAiB,CAAE;AACzE,QAAM,EAAE,WAAW,QAAI,+BAAQ,yBAAa,aAAAC,KAAY,CAAE;AAE1D,QAAM,iBAAiB,MAAM;AAC5B,eAAY,MAAU;AACtB,kBAAc,MAAM;AACpB,yBAAsB,UAAU,KAAM;AAAA,EACvC;AAEA,MAAK,iBAAiB,SAAS,CAAE,UAAW;AAC3C,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,eAAY,YAAAC;AAAA,QACX;AAAA,QACA;AAAA,UACC,eAAe;AAAA,QAChB;AAAA,MACD;AAAA,MACA,SAAQ;AAAA,MACR,UAAW;AAAA,MACX,kBAAa,gBAAI,UAAW;AAAA,MAC5B,MAAK;AAAA,MACL,KAAM,aAAa,KAAK,cAAc;AAAA,MACtC,OACC;AAAA;AAAA,QAEG,EAAE,KAAK,GAAG,SAAS,CAAE,IAAI,IAAI,OAAU;AAAA,UACvC;AAAA,MAEJ,QAAS,CAAE,UAAW;AAErB,YAAK,CAAE,SAAS,SAAS,GAAI;AAC5B;AAAA,QACD;AACA,YAAK,MAAM,cAAc,SAAU,MAAM,aAAc,GAAI;AAC1D;AAAA,QACD;AACA,6BAAsB,UAAU,KAAM;AACtC,mBAAY,MAAU;AAAA,MACvB;AAAA,MAEA;AAAA,oDAAC,kBAAAC,sBAAA,EAAO,WAAU,QAAO,SAAQ,KAChC,sDAAC,2BAAAC,SAAA,EAAkB,GACpB;AAAA,QACA;AAAA,UAAC,oBAAAC;AAAA,UAAA;AAAA,YACA,UAAW,OAAQ,iBAAkB;AACpC,oBAAM,EAAE,GAAG,IAAI,MAAM,SAAU,EAAE,SAAS,aAAa,CAAE;AACzD,yBAAY,EAAG;AACf,mDAAoB,IAAI,kBAAkB,OAAQ;AAAA,YACnD;AAAA,YACA,UAAW;AAAA,YACX;AAAA,YACA,sBAAmB,gBAAI,UAAW;AAAA,YAClC,eAAY,gBAAI,UAAW;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
-  "names": ["blockEditorPrivateApis", "blockEditorStore", "editorStore", "VStack", "clsx", "HStack", "CommentAuthorInfo", "CommentForm"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport {\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport CommentAuthorInfo from './comment-author-info';\nimport CommentForm from './comment-form';\nimport { FloatingContainer } from './floating-container';\nimport { focusCommentThread } from './utils';\nimport { store as editorStore } from '../../store';\n\nconst { useBlockElement } = unlock( blockEditorPrivateApis );\n\nexport function AddComment( { onSubmit, commentSidebarRef, floating } ) {\n\tconst { clientId } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlockClientId } = select( blockEditorStore );\n\t\treturn {\n\t\t\tclientId: getSelectedBlockClientId(),\n\t\t};\n\t}, [] );\n\tconst selectedNote = useSelect(\n\t\t( select ) => unlock( select( editorStore ) ).getSelectedNote(),\n\t\t[]\n\t);\n\tconst blockElement = useBlockElement( clientId );\n\tconst { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );\n\tconst { selectNote } = unlock( useDispatch( editorStore ) );\n\n\tconst unselectThread = () => {\n\t\tselectNote( undefined );\n\t\tblockElement?.focus();\n\t\ttoggleBlockSpotlight( clientId, false );\n\t};\n\n\tif ( selectedNote !== 'new' || ! clientId ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<FloatingContainer\n\t\t\tfloating={ floating }\n\t\t\tclassName=\"editor-collab-sidebar-panel__thread is-selected\"\n\t\t\tspacing=\"3\"\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ __( 'New note' ) }\n\t\t\trole=\"treeitem\"\n\t\t\tstyle={\n\t\t\t\tfloating ? { opacity: ! floating.y ? 0 : undefined } : undefined\n\t\t\t}\n\t\t\tonBlur={ ( event ) => {\n\t\t\t\t// Don't deselect notes when the browser window/tab loses focus.\n\t\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( event.currentTarget.contains( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleBlockSpotlight( clientId, false );\n\t\t\t\tselectNote( undefined );\n\t\t\t} }\n\t\t>\n\t\t\t<HStack alignment=\"left\" spacing=\"3\">\n\t\t\t\t<CommentAuthorInfo />\n\t\t\t</HStack>\n\t\t\t<CommentForm\n\t\t\t\tonSubmit={ async ( inputComment ) => {\n\t\t\t\t\tconst { id } = await onSubmit( { content: inputComment } );\n\t\t\t\t\tselectNote( id );\n\t\t\t\t\tfocusCommentThread( id, commentSidebarRef.current );\n\t\t\t\t} }\n\t\t\t\tonCancel={ unselectThread }\n\t\t\t\tsubmitButtonText={ __( 'Add note' ) }\n\t\t\t\tlabelText={ __( 'New note' ) }\n\t\t\t/>\n\t\t</FloatingContainer>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,kBAAuC;AACvC,wBAA+C;AAC/C,0BAGO;AAKP,yBAAuB;AACvB,iCAA8B;AAC9B,0BAAwB;AACxB,gCAAkC;AAClC,mBAAmC;AACnC,mBAAqC;AA8BnC;AA5BF,IAAM,EAAE,gBAAgB,QAAI,2BAAQ,oBAAAA,WAAuB;AAEpD,SAAS,WAAY,EAAE,UAAU,mBAAmB,SAAS,GAAI;AACvE,QAAM,EAAE,SAAS,QAAI,uBAAW,CAAE,WAAY;AAC7C,UAAM,EAAE,yBAAyB,IAAI,OAAQ,oBAAAC,KAAiB;AAC9D,WAAO;AAAA,MACN,UAAU,yBAAyB;AAAA,IACpC;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,mBAAe;AAAA,IACpB,CAAE,eAAY,2BAAQ,OAAQ,aAAAC,KAAY,CAAE,EAAE,gBAAgB;AAAA,IAC9D,CAAC;AAAA,EACF;AACA,QAAM,eAAe,gBAAiB,QAAS;AAC/C,QAAM,EAAE,qBAAqB,QAAI,+BAAQ,yBAAa,oBAAAD,KAAiB,CAAE;AACzE,QAAM,EAAE,WAAW,QAAI,+BAAQ,yBAAa,aAAAC,KAAY,CAAE;AAE1D,QAAM,iBAAiB,MAAM;AAC5B,eAAY,MAAU;AACtB,kBAAc,MAAM;AACpB,yBAAsB,UAAU,KAAM;AAAA,EACvC;AAEA,MAAK,iBAAiB,SAAS,CAAE,UAAW;AAC3C,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,UAAW;AAAA,MACX,kBAAa,gBAAI,UAAW;AAAA,MAC5B,MAAK;AAAA,MACL,OACC,WAAW,EAAE,SAAS,CAAE,SAAS,IAAI,IAAI,OAAU,IAAI;AAAA,MAExD,QAAS,CAAE,UAAW;AAErB,YAAK,CAAE,SAAS,SAAS,GAAI;AAC5B;AAAA,QACD;AACA,YAAK,MAAM,cAAc,SAAU,MAAM,aAAc,GAAI;AAC1D;AAAA,QACD;AACA,6BAAsB,UAAU,KAAM;AACtC,mBAAY,MAAU;AAAA,MACvB;AAAA,MAEA;AAAA,oDAAC,kBAAAC,sBAAA,EAAO,WAAU,QAAO,SAAQ,KAChC,sDAAC,2BAAAC,SAAA,EAAkB,GACpB;AAAA,QACA;AAAA,UAAC,oBAAAC;AAAA,UAAA;AAAA,YACA,UAAW,OAAQ,iBAAkB;AACpC,oBAAM,EAAE,GAAG,IAAI,MAAM,SAAU,EAAE,SAAS,aAAa,CAAE;AACzD,yBAAY,EAAG;AACf,mDAAoB,IAAI,kBAAkB,OAAQ;AAAA,YACnD;AAAA,YACA,UAAW;AAAA,YACX,sBAAmB,gBAAI,UAAW;AAAA,YAClC,eAAY,gBAAI,UAAW;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["blockEditorPrivateApis", "blockEditorStore", "editorStore", "HStack", "CommentAuthorInfo", "CommentForm"]
 }

package/build/components/collab-sidebar/board-store.cjs

@@ -0,0 +1,103 @@
+"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/collab-sidebar/board-store.js
+var board_store_exports = {};
+__export(board_store_exports, {
+  createBoardStore: () => createBoardStore
+});
+module.exports = __toCommonJS(board_store_exports);
+function createBoardStore() {
+  const listeners = /* @__PURE__ */ new Set();
+  const blockRefs = /* @__PURE__ */ new Map();
+  const floatingRefs = /* @__PURE__ */ new Map();
+  const idByElement = /* @__PURE__ */ new WeakMap();
+  const heights = {};
+  let snapshot = {};
+  function emit() {
+    snapshot = { ...heights };
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  const observer = new window.ResizeObserver((entries) => {
+    let changed = false;
+    for (const entry of entries) {
+      const id = idByElement.get(entry.target);
+      const newHeight = entry.borderBoxSize[0].blockSize;
+      if (heights[id] !== newHeight) {
+        heights[id] = newHeight;
+        changed = true;
+      }
+    }
+    if (changed) {
+      emit();
+    }
+  });
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          observer.disconnect();
+        }
+      };
+    },
+    getSnapshot() {
+      return snapshot;
+    },
+    registerThread(id, blockEl, floatingEl) {
+      blockRefs.set(id, blockEl);
+      const prev = floatingRefs.get(id);
+      if (prev && prev !== floatingEl) {
+        observer.unobserve(prev);
+        idByElement.delete(prev);
+      }
+      if (floatingEl) {
+        floatingRefs.set(id, floatingEl);
+        idByElement.set(floatingEl, id);
+        observer.observe(floatingEl);
+      }
+      emit();
+    },
+    unregisterThread(id) {
+      blockRefs.delete(id);
+      const prev = floatingRefs.get(id);
+      if (prev) {
+        observer.unobserve(prev);
+        idByElement.delete(prev);
+        floatingRefs.delete(id);
+      }
+      delete heights[id];
+    },
+    getBlockRects() {
+      return Object.fromEntries(
+        Array.from(blockRefs).flatMap(
+          ([id, el]) => el ? [[id, el.getBoundingClientRect()]] : []
+        )
+      );
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createBoardStore
+});
+//# sourceMappingURL=board-store.cjs.map

package/build/components/collab-sidebar/board-store.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/collab-sidebar/board-store.js"],
+  "sourcesContent": ["export function createBoardStore() {\n\tconst listeners = new Set();\n\tconst blockRefs = new Map();\n\tconst floatingRefs = new Map();\n\tconst idByElement = new WeakMap();\n\tconst heights = {};\n\tlet snapshot = {};\n\n\tfunction emit() {\n\t\tsnapshot = { ...heights };\n\t\tfor ( const listener of listeners ) {\n\t\t\tlistener();\n\t\t}\n\t}\n\n\tconst observer = new window.ResizeObserver( ( entries ) => {\n\t\tlet changed = false;\n\t\tfor ( const entry of entries ) {\n\t\t\tconst id = idByElement.get( entry.target );\n\t\t\tconst newHeight = entry.borderBoxSize[ 0 ].blockSize;\n\t\t\tif ( heights[ id ] !== newHeight ) {\n\t\t\t\theights[ id ] = newHeight;\n\t\t\t\tchanged = true;\n\t\t\t}\n\t\t}\n\t\tif ( changed ) {\n\t\t\temit();\n\t\t}\n\t} );\n\n\treturn {\n\t\tsubscribe( listener ) {\n\t\t\tlisteners.add( listener );\n\t\t\treturn () => {\n\t\t\t\tlisteners.delete( listener );\n\t\t\t\tif ( listeners.size === 0 ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\n\t\tgetSnapshot() {\n\t\t\treturn snapshot;\n\t\t},\n\n\t\tregisterThread( id, blockEl, floatingEl ) {\n\t\t\tblockRefs.set( id, blockEl );\n\n\t\t\tconst prev = floatingRefs.get( id );\n\t\t\tif ( prev && prev !== floatingEl ) {\n\t\t\t\tobserver.unobserve( prev );\n\t\t\t\tidByElement.delete( prev );\n\t\t\t}\n\t\t\tif ( floatingEl ) {\n\t\t\t\tfloatingRefs.set( id, floatingEl );\n\t\t\t\tidByElement.set( floatingEl, id );\n\t\t\t\tobserver.observe( floatingEl );\n\t\t\t}\n\n\t\t\temit();\n\t\t},\n\n\t\tunregisterThread( id ) {\n\t\t\tblockRefs.delete( id );\n\t\t\tconst prev = floatingRefs.get( id );\n\t\t\tif ( prev ) {\n\t\t\t\tobserver.unobserve( prev );\n\t\t\t\tidByElement.delete( prev );\n\t\t\t\tfloatingRefs.delete( id );\n\t\t\t}\n\t\t\tdelete heights[ id ];\n\t\t},\n\n\t\tgetBlockRects() {\n\t\t\t// Batch all rect reads before any writes to avoid layout thrashing.\n\t\t\treturn Object.fromEntries(\n\t\t\t\tArray.from( blockRefs ).flatMap( ( [ id, el ] ) =>\n\t\t\t\t\tel ? [ [ id, el.getBoundingClientRect() ] ] : []\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t};\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,SAAS,mBAAmB;AAClC,QAAM,YAAY,oBAAI,IAAI;AAC1B,QAAM,YAAY,oBAAI,IAAI;AAC1B,QAAM,eAAe,oBAAI,IAAI;AAC7B,QAAM,cAAc,oBAAI,QAAQ;AAChC,QAAM,UAAU,CAAC;AACjB,MAAI,WAAW,CAAC;AAEhB,WAAS,OAAO;AACf,eAAW,EAAE,GAAG,QAAQ;AACxB,eAAY,YAAY,WAAY;AACnC,eAAS;AAAA,IACV;AAAA,EACD;AAEA,QAAM,WAAW,IAAI,OAAO,eAAgB,CAAE,YAAa;AAC1D,QAAI,UAAU;AACd,eAAY,SAAS,SAAU;AAC9B,YAAM,KAAK,YAAY,IAAK,MAAM,MAAO;AACzC,YAAM,YAAY,MAAM,cAAe,CAAE,EAAE;AAC3C,UAAK,QAAS,EAAG,MAAM,WAAY;AAClC,gBAAS,EAAG,IAAI;AAChB,kBAAU;AAAA,MACX;AAAA,IACD;AACA,QAAK,SAAU;AACd,WAAK;AAAA,IACN;AAAA,EACD,CAAE;AAEF,SAAO;AAAA,IACN,UAAW,UAAW;AACrB,gBAAU,IAAK,QAAS;AACxB,aAAO,MAAM;AACZ,kBAAU,OAAQ,QAAS;AAC3B,YAAK,UAAU,SAAS,GAAI;AAC3B,mBAAS,WAAW;AAAA,QACrB;AAAA,MACD;AAAA,IACD;AAAA,IAEA,cAAc;AACb,aAAO;AAAA,IACR;AAAA,IAEA,eAAgB,IAAI,SAAS,YAAa;AACzC,gBAAU,IAAK,IAAI,OAAQ;AAE3B,YAAM,OAAO,aAAa,IAAK,EAAG;AAClC,UAAK,QAAQ,SAAS,YAAa;AAClC,iBAAS,UAAW,IAAK;AACzB,oBAAY,OAAQ,IAAK;AAAA,MAC1B;AACA,UAAK,YAAa;AACjB,qBAAa,IAAK,IAAI,UAAW;AACjC,oBAAY,IAAK,YAAY,EAAG;AAChC,iBAAS,QAAS,UAAW;AAAA,MAC9B;AAEA,WAAK;AAAA,IACN;AAAA,IAEA,iBAAkB,IAAK;AACtB,gBAAU,OAAQ,EAAG;AACrB,YAAM,OAAO,aAAa,IAAK,EAAG;AAClC,UAAK,MAAO;AACX,iBAAS,UAAW,IAAK;AACzB,oBAAY,OAAQ,IAAK;AACzB,qBAAa,OAAQ,EAAG;AAAA,MACzB;AACA,aAAO,QAAS,EAAG;AAAA,IACpB;AAAA,IAEA,gBAAgB;AAEf,aAAO,OAAO;AAAA,QACb,MAAM,KAAM,SAAU,EAAE;AAAA,UAAS,CAAE,CAAE,IAAI,EAAG,MAC3C,KAAK,CAAE,CAAE,IAAI,GAAG,sBAAsB,CAAE,CAAE,IAAI,CAAC;AAAA,QAChD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;",
+  "names": []
+}

package/build/components/collab-sidebar/comment-form.cjs

@@ -46,16 +46,11 @@ function CommentForm({
   onCancel,
   thread,
   submitButtonText,
-  labelText,
-  reflowComments = import_utils.noop
+  labelText
 }) {
   const [inputComment, setInputComment] = (0, import_element.useState)(
     thread?.content?.raw ?? ""
   );
-  const debouncedCommentUpdated = (0, import_compose.useDebounce)(reflowComments, 100);
-  const updateComment = (value) => {
-    setInputComment(value);
-  };
   const inputId = (0, import_compose.useInstanceId)(CommentForm, "comment-input");
   const isDisabled = inputComment === thread?.content?.raw || !(0, import_utils.sanitizeCommentString)(inputComment).length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -76,10 +71,7 @@ function CommentForm({
           {
             id: inputId,
             value: inputComment ?? "",
-            onChange: (comment) => {
-              updateComment(comment.target.value);
-              debouncedCommentUpdated();
-            },
+            onChange: (comment) => setInputComment(comment.target.value),
             rows: 1,
             maxRows: 20,
             onKeyDown: (event) => {

package/build/components/collab-sidebar/comment-form.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collab-sidebar/comment-form.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport TextareaAutosize from 'react-autosize-textarea';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tButton,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useInstanceId, useDebounce } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString, noop } from './utils';\n\nfunction CommentForm( {\n\tonSubmit,\n\tonCancel,\n\tthread,\n\tsubmitButtonText,\n\tlabelText,\n\treflowComments = noop,\n} ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tthread?.content?.raw ?? ''\n\t);\n\n\t// Regularly trigger a reflow as the user types since the textarea may grow or shrink.\n\tconst debouncedCommentUpdated = useDebounce( reflowComments, 100 );\n\n\tconst updateComment = ( value ) => {\n\t\tsetInputComment( value );\n\t};\n\n\tconst inputId = useInstanceId( CommentForm, 'comment-input' );\n\tconst isDisabled =\n\t\tinputComment === thread?.content?.raw ||\n\t\t! sanitizeCommentString( inputComment ).length;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel__comment-form\"\n\t\t\tspacing=\"4\"\n\t\t\tas=\"form\"\n\t\t\tonSubmit={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonSubmit( inputComment );\n\t\t\t\tsetInputComment( '' );\n\t\t\t} }\n\t\t>\n\t\t\t<VisuallyHidden as=\"label\" htmlFor={ inputId }>\n\t\t\t\t{ labelText ?? __( 'Note' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<TextareaAutosize\n\t\t\t\tid={ inputId }\n\t\t\t\tvalue={ inputComment ?? '' }\n\t\t\t\tonChange={ ( comment ) => {\n\t\t\t\t\tupdateComment( comment.target.value );\n\t\t\t\t\tdebouncedCommentUpdated();\n\t\t\t\t} }\n\t\t\t\trows={ 1 }\n\t\t\t\tmaxRows={ 20 }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tisKeyboardEvent.primary( event, 'Enter' ) &&\n\t\t\t\t\t\t! isDisabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.target.parentNode.requestSubmit();\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t// Passing event for reply forms.\n\t\t\t\t\t\tonCancel( event );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<HStack spacing=\"2\" justify=\"flex-end\" wrap>\n\t\t\t\t<Button size=\"compact\" variant=\"tertiary\" onClick={ onCancel }>\n\t\t\t\t\t<Truncate>{ __( 'Cancel' ) }</Truncate>\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t>\n\t\t\t\t\t<Truncate>{ submitButtonText }</Truncate>\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default CommentForm;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qCAA6B;AAK7B,qBAAyB;AACzB,wBAMO;AACP,kBAAmB;AACnB,qBAA2C;AAC3C,sBAAgC;AAKhC,mBAA4C;AAqCzC;AAnCH,SAAS,YAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAClB,GAAI;AACH,QAAM,CAAE,cAAc,eAAgB,QAAI;AAAA,IACzC,QAAQ,SAAS,OAAO;AAAA,EACzB;AAGA,QAAM,8BAA0B,4BAAa,gBAAgB,GAAI;AAEjE,QAAM,gBAAgB,CAAE,UAAW;AAClC,oBAAiB,KAAM;AAAA,EACxB;AAEA,QAAM,cAAU,8BAAe,aAAa,eAAgB;AAC5D,QAAM,aACL,iBAAiB,QAAQ,SAAS,OAClC,KAAE,oCAAuB,YAAa,EAAE;AAEzC,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,IAAG;AAAA,MACH,UAAW,CAAE,UAAW;AACvB,cAAM,eAAe;AACrB,iBAAU,YAAa;AACvB,wBAAiB,EAAG;AAAA,MACrB;AAAA,MAEA;AAAA,oDAAC,oCAAe,IAAG,SAAQ,SAAU,SAClC,2BAAa,gBAAI,MAAO,GAC3B;AAAA,QACA;AAAA,UAAC,+BAAAC;AAAA,UAAA;AAAA,YACA,IAAK;AAAA,YACL,OAAQ,gBAAgB;AAAA,YACxB,UAAW,CAAE,YAAa;AACzB,4BAAe,QAAQ,OAAO,KAAM;AACpC,sCAAwB;AAAA,YACzB;AAAA,YACA,MAAO;AAAA,YACP,SAAU;AAAA,YACV,WAAY,CAAE,UAAW;AACxB,kBACC,gCAAgB,QAAS,OAAO,OAAQ,KACxC,CAAE,YACD;AACD,sBAAM,OAAO,WAAW,cAAc;AAAA,cACvC;AAEA,kBAAK,MAAM,QAAQ,UAAW;AAC7B,sBAAM,eAAe;AAErB,yBAAU,KAAM;AAAA,cACjB;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,KAAI,SAAQ,YAAW,MAAI,MAC1C;AAAA,sDAAC,4BAAO,MAAK,WAAU,SAAQ,YAAW,SAAU,UACnD,sDAAC,kBAAAC,wBAAA,EAAW,8BAAI,QAAS,GAAG,GAC7B;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,wBAAsB;AAAA,cACtB,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAW;AAAA,cAEX,sDAAC,kBAAAA,wBAAA,EAAW,4BAAkB;AAAA;AAAA,UAC/B;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,uBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport TextareaAutosize from 'react-autosize-textarea';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tButton,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { sanitizeCommentString } from './utils';\n\nfunction CommentForm( {\n\tonSubmit,\n\tonCancel,\n\tthread,\n\tsubmitButtonText,\n\tlabelText,\n} ) {\n\tconst [ inputComment, setInputComment ] = useState(\n\t\tthread?.content?.raw ?? ''\n\t);\n\n\tconst inputId = useInstanceId( CommentForm, 'comment-input' );\n\tconst isDisabled =\n\t\tinputComment === thread?.content?.raw ||\n\t\t! sanitizeCommentString( inputComment ).length;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"editor-collab-sidebar-panel__comment-form\"\n\t\t\tspacing=\"4\"\n\t\t\tas=\"form\"\n\t\t\tonSubmit={ ( event ) => {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tonSubmit( inputComment );\n\t\t\t\tsetInputComment( '' );\n\t\t\t} }\n\t\t>\n\t\t\t<VisuallyHidden as=\"label\" htmlFor={ inputId }>\n\t\t\t\t{ labelText ?? __( 'Note' ) }\n\t\t\t</VisuallyHidden>\n\t\t\t<TextareaAutosize\n\t\t\t\tid={ inputId }\n\t\t\t\tvalue={ inputComment ?? '' }\n\t\t\t\tonChange={ ( comment ) =>\n\t\t\t\t\tsetInputComment( comment.target.value )\n\t\t\t\t}\n\t\t\t\trows={ 1 }\n\t\t\t\tmaxRows={ 20 }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tisKeyboardEvent.primary( event, 'Enter' ) &&\n\t\t\t\t\t\t! isDisabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.target.parentNode.requestSubmit();\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t// Passing event for reply forms.\n\t\t\t\t\t\tonCancel( event );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<HStack spacing=\"2\" justify=\"flex-end\" wrap>\n\t\t\t\t<Button size=\"compact\" variant=\"tertiary\" onClick={ onCancel }>\n\t\t\t\t\t<Truncate>{ __( 'Cancel' ) }</Truncate>\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t>\n\t\t\t\t\t<Truncate>{ submitButtonText }</Truncate>\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default CommentForm;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qCAA6B;AAK7B,qBAAyB;AACzB,wBAMO;AACP,kBAAmB;AACnB,qBAA8B;AAC9B,sBAAgC;AAKhC,mBAAsC;AA6BnC;AA3BH,SAAS,YAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,cAAc,eAAgB,QAAI;AAAA,IACzC,QAAQ,SAAS,OAAO;AAAA,EACzB;AAEA,QAAM,cAAU,8BAAe,aAAa,eAAgB;AAC5D,QAAM,aACL,iBAAiB,QAAQ,SAAS,OAClC,KAAE,oCAAuB,YAAa,EAAE;AAEzC,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,IAAG;AAAA,MACH,UAAW,CAAE,UAAW;AACvB,cAAM,eAAe;AACrB,iBAAU,YAAa;AACvB,wBAAiB,EAAG;AAAA,MACrB;AAAA,MAEA;AAAA,oDAAC,oCAAe,IAAG,SAAQ,SAAU,SAClC,2BAAa,gBAAI,MAAO,GAC3B;AAAA,QACA;AAAA,UAAC,+BAAAC;AAAA,UAAA;AAAA,YACA,IAAK;AAAA,YACL,OAAQ,gBAAgB;AAAA,YACxB,UAAW,CAAE,YACZ,gBAAiB,QAAQ,OAAO,KAAM;AAAA,YAEvC,MAAO;AAAA,YACP,SAAU;AAAA,YACV,WAAY,CAAE,UAAW;AACxB,kBACC,gCAAgB,QAAS,OAAO,OAAQ,KACxC,CAAE,YACD;AACD,sBAAM,OAAO,WAAW,cAAc;AAAA,cACvC;AAEA,kBAAK,MAAM,QAAQ,UAAW;AAC7B,sBAAM,eAAe;AAErB,yBAAU,KAAM;AAAA,cACjB;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,KAAI,SAAQ,YAAW,MAAI,MAC1C;AAAA,sDAAC,4BAAO,MAAK,WAAU,SAAQ,YAAW,SAAU,UACnD,sDAAC,kBAAAC,wBAAA,EAAW,8BAAI,QAAS,GAAG,GAC7B;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,wBAAsB;AAAA,cACtB,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAW;AAAA,cAEX,sDAAC,kBAAAA,wBAAA,EAAW,4BAAkB;AAAA;AAAA,UAC/B;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,uBAAQ;",
   "names": ["VStack", "TextareaAutosize", "HStack", "Truncate"]
 }

package/build/components/collab-sidebar/comments.cjs

@@ -48,6 +48,7 @@ var import_comment_author_info = __toESM(require("./comment-author-info.cjs"));
 var import_comment_form = __toESM(require("./comment-form.cjs"));
 var import_utils = require("./utils.cjs");
 var import_hooks = require("./hooks.cjs");
+var import_floating_container = require("./floating-container.cjs");
 var import_add_comment = require("./add-comment.cjs");
 var import_store = require("../../store/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -59,16 +60,9 @@ function Comments({
   onAddReply,
   onCommentDelete,
   commentSidebarRef,
-  reflowComments,
-  isFloating = false,
-  commentLastUpdated
+  isFloating = false
 }) {
-  const [heights, setHeights] = (0, import_element.useState)({});
-  const [boardOffsets, setBoardOffsets] = (0, import_element.useState)({});
-  const [blockRefs, setBlockRefs] = (0, import_element.useState)({});
-  const { setCanvasMinHeight, selectNote } = (0, import_lock_unlock.unlock)(
-    (0, import_data.useDispatch)(import_store.store)
-  );
+  const { selectNote } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
   const { selectBlock, toggleBlockSpotlight } = (0, import_lock_unlock.unlock)(
     (0, import_data.useDispatch)(import_block_editor.store)
   );
@@ -161,96 +155,13 @@ function Comments({
       selectNote(selectedNote);
     }
   }, [noteFocused, selectedNote, selectNote, commentSidebarRef]);
-  (0, import_element.useEffect)(() => {
-    const calculateAllOffsets = () => {
-      const offsets = {};
-      if (!isFloating) {
-        return { offsets, minHeight: 0 };
-      }
-      const selectedThreadIndex = threads.findIndex(
-        (t) => t.id === selectedNote
-      );
-      const breakIndex = selectedThreadIndex === -1 ? 0 : selectedThreadIndex;
-      const selectedThreadData = threads[breakIndex];
-      if (!selectedThreadData || !blockRefs[selectedThreadData.id]) {
-        return { offsets, minHeight: 0 };
-      }
-      let blockElement = blockRefs[selectedThreadData.id];
-      let blockRect = blockElement?.getBoundingClientRect();
-      const selectedThreadTop = blockRect?.top || 0;
-      const selectedThreadHeight = heights[selectedThreadData.id] || 0;
-      offsets[selectedThreadData.id] = -16;
-      let previousThreadData = {
-        threadTop: selectedThreadTop - 16,
-        threadHeight: selectedThreadHeight
-      };
-      for (let i = breakIndex + 1; i < threads.length; i++) {
-        const thread = threads[i];
-        if (!blockRefs[thread.id]) {
-          continue;
-        }
-        blockElement = blockRefs[thread.id];
-        blockRect = blockElement?.getBoundingClientRect();
-        const threadTop = blockRect?.top || 0;
-        const threadHeight = heights[thread.id] || 0;
-        let additionalOffset = -16;
-        const previousBottom = previousThreadData.threadTop + previousThreadData.threadHeight;
-        if (threadTop < previousBottom + 16) {
-          additionalOffset = previousBottom - threadTop + 20;
-        }
-        offsets[thread.id] = additionalOffset;
-        previousThreadData = {
-          threadTop: threadTop + additionalOffset,
-          threadHeight
-        };
-      }
-      let nextThreadData = {
-        threadTop: selectedThreadTop - 16
-      };
-      for (let i = selectedThreadIndex - 1; i >= 0; i--) {
-        const thread = threads[i];
-        if (!blockRefs[thread.id]) {
-          continue;
-        }
-        blockElement = blockRefs[thread.id];
-        blockRect = blockElement?.getBoundingClientRect();
-        const threadTop = blockRect?.top || 0;
-        const threadHeight = heights[thread.id] || 0;
-        let additionalOffset = -16;
-        const threadBottom = threadTop + threadHeight;
-        if (threadBottom > nextThreadData.threadTop) {
-          additionalOffset = nextThreadData.threadTop - threadTop - threadHeight - 20;
-        }
-        offsets[thread.id] = additionalOffset;
-        nextThreadData = {
-          threadTop: threadTop + additionalOffset
-        };
-      }
-      let editorMinHeight = 0;
-      const lastThread = threads[threads.length - 1];
-      if (blockRefs[lastThread.id]) {
-        const lastBlockElement = blockRefs[lastThread.id];
-        const lastBlockRect = lastBlockElement?.getBoundingClientRect();
-        const lastThreadTop = lastBlockRect?.top || 0;
-        const lastThreadHeight = heights[lastThread.id] || 0;
-        const lastThreadOffset = offsets[lastThread.id] || 0;
-        editorMinHeight = lastThreadTop + lastThreadHeight + lastThreadOffset + 32;
-      }
-      return { offsets, minHeight: editorMinHeight };
-    };
-    const { offsets: newOffsets, minHeight } = calculateAllOffsets();
-    if (Object.keys(newOffsets).length > 0) {
-      setBoardOffsets(newOffsets);
+  const { boardOffsets, registerThread, unregisterThread } = (0, import_hooks.useFloatingBoard)(
+    {
+      threads,
+      selectedNoteId: selectedNote,
+      isFloating
     }
-    setCanvasMinHeight(minHeight);
-  }, [
-    heights,
-    blockRefs,
-    isFloating,
-    threads,
-    selectedNote,
-    setCanvasMinHeight
-  ]);
+  );
   const handleThreadNavigation = (event, thread, isSelected) => {
     if (event.defaultPrevented) {
       return;
@@ -283,9 +194,6 @@ function Comments({
       );
     }
   };
-  const setBlockRef = (0, import_element.useCallback)((id, blockRef) => {
-    setBlockRefs((prev) => ({ ...prev, [id]: blockRef }));
-  }, []);
   const hasThreads = Array.isArray(threads) && threads.length > 0;
   if (!hasThreads && !isFloating) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -313,12 +221,11 @@ function Comments({
         onEditComment,
         isSelected: selectedNote === thread.id,
         commentSidebarRef,
-        reflowComments,
-        isFloating,
-        calculatedOffset: boardOffsets[thread.id] ?? 0,
-        setHeights,
-        setBlockRef,
-        commentLastUpdated,
+        floating: isFloating ? {
+          calculatedOffset: boardOffsets[thread.id] ?? 0,
+          registerThread,
+          unregisterThread
+        } : void 0,
         onKeyDown: (event) => handleThreadNavigation(
           event,
           thread,
@@ -336,22 +243,14 @@ function Thread({
   onCommentDelete,
   isSelected,
   commentSidebarRef,
-  reflowComments,
-  isFloating,
-  calculatedOffset,
-  setHeights,
-  setBlockRef,
-  commentLastUpdated,
+  floating,
   onKeyDown
 }) {
+  const isFloating = !!floating;
   const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = (0, import_lock_unlock.unlock)(
     (0, import_data.useDispatch)(import_block_editor.store)
   );
   const { selectNote } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
-  const selectedNote = (0, import_data.useSelect)(
-    (select) => (0, import_lock_unlock.unlock)(select(import_store.store)).getSelectedNote(),
-    []
-  );
   const relatedBlockElement = useBlockElement(thread.blockClientId);
   const debouncedToggleBlockHighlight = (0, import_compose.useDebounce)(
     toggleBlockHighlight,
@@ -359,11 +258,9 @@ function Thread({
   );
   const { y, refs } = (0, import_hooks.useFloatingThread)({
     thread,
-    calculatedOffset,
-    setHeights,
-    setBlockRef,
-    selectedThread: selectedNote,
-    commentLastUpdated
+    calculatedOffset: floating?.calculatedOffset ?? 0,
+    registerThread: floating?.registerThread,
+    unregisterThread: floating?.unregisterThread
   });
   const isKeyboardTabbingRef = (0, import_element.useRef)(false);
   const onMouseEnter = () => {
@@ -429,19 +326,16 @@ function Thread({
       {
         onSubmit: onAddReply,
         commentSidebarRef,
-        reflowComments,
-        isFloating,
-        y,
-        refs
+        floating: { y, refs }
       }
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_components.__experimentalVStack,
+    import_floating_container.FloatingContainer,
     {
+      floating: isFloating ? { y, refs } : void 0,
       className: (0, import_clsx.default)("editor-collab-sidebar-panel__thread", {
-        "is-selected": isSelected,
-        "is-floating": isFloating
+        "is-selected": isSelected
       }),
       id: `comment-thread-${thread.id}`,
       spacing: "3",
@@ -466,8 +360,6 @@ function Thread({
       role: "treeitem",
       "aria-label": ariaLabel,
       "aria-expanded": isSelected,
-      ref: isFloating ? refs.setFloating : void 0,
-      style: isFloating ? { top: y } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_components.Button,
@@ -505,8 +397,7 @@ function Thread({
                 }
               }
             },
-            onDelete: onCommentDelete,
-            reflowComments
+            onDelete: onCommentDelete
           }
         ),
         isSelected && allReplies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -516,8 +407,7 @@ function Thread({
             parent: thread,
             isExpanded: isSelected,
             onEdit: onEditComment,
-            onDelete: onCommentDelete,
-            reflowComments
+            onDelete: onCommentDelete
           },
           reply.id
         )),
@@ -552,8 +442,7 @@ function Thread({
             parent: thread,
             isExpanded: isSelected,
             onEdit: onEditComment,
-            onDelete: onCommentDelete,
-            reflowComments
+            onDelete: onCommentDelete
           }
         ),
         isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: "2", role: "treeitem", children: [
@@ -590,8 +479,7 @@ function Thread({
                 (0, import_i18n.__)("Reply to note %1$s by %2$s"),
                 thread.id,
                 thread.author_name
-              ),
-              reflowComments
+              )
             }
           ) })
         ] }),
@@ -612,14 +500,7 @@ function Thread({
     }
   );
 }
-var CommentBoard = ({
-  thread,
-  parent,
-  isExpanded,
-  onEdit,
-  onDelete,
-  reflowComments
-}) => {
+var CommentBoard = ({ thread, parent, isExpanded, onEdit, onDelete }) => {
   const [actionState, setActionState] = (0, import_element.useState)(false);
   const [showConfirmDialog, setShowConfirmDialog] = (0, import_element.useState)(false);
   const actionButtonRef = (0, import_element.useRef)(null);
@@ -767,8 +648,7 @@ var CommentBoard = ({
               (0, import_i18n.__)("Edit note %1$s by %2$s"),
               thread.id,
               thread.author_name
-            ),
-            reflowComments
+            )
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_element.RawHTML,