@atlaskit/react-ufo 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.2.3
+
+### Patch Changes
+
+- [#163513](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163513)
+  [`740148acc161b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/740148acc161b) -
+  add feature flag override support for Criterion
+
+## 2.2.2
+
+### Patch Changes
+
+- [#160261](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160261)
+  [`f147e45fb1a5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f147e45fb1a5a) -
+  Extends VC90 detector to include editor lazy node view accomodations
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/cjs/vc/vc-observer/observers/editor-lnv/index.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorLnvHandler = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var placeholderDataKey = 'editorLnvPlaceholder'; // data-editor-lnv-placeholder
+var replaceDataKey = 'editorLnvPlaceholderReplace'; // data-editor-lnv-placeholder-replace
+var EditorLnvHandler = exports.EditorLnvHandler = /*#__PURE__*/function () {
+  function EditorLnvHandler() {
+    var _this = this;
+    (0, _classCallCheck2.default)(this, EditorLnvHandler);
+    (0, _defineProperty2.default)(this, "placeholders", new Map());
+    (0, _defineProperty2.default)(this, "getSizeCallbacks", new Map());
+    (0, _defineProperty2.default)(this, "isAddedPlaceholderMatchingSizeCallbacks", new Map());
+    (0, _defineProperty2.default)(this, "isAddedReplaceMatchingSizeCallbacks", new Map());
+    (0, _defineProperty2.default)(this, "intersectionObserverCallback", function (_ref) {
+      var _target$dataset, _target$dataset2;
+      var target = _ref.target,
+        boundingClientRect = _ref.boundingClientRect;
+      _this.intersectionObserver.unobserve(target);
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      var placeholderId = (_target$dataset = target.dataset) === null || _target$dataset === void 0 ? void 0 : _target$dataset[placeholderDataKey];
+      if (placeholderId && _this.getSizeCallbacks.has(placeholderId)) {
+        var _resolve = _this.getSizeCallbacks.get(placeholderId);
+        _this.getSizeCallbacks.delete(placeholderId);
+        if (!_resolve) {
+          return;
+        }
+        _resolve({
+          x: boundingClientRect.x,
+          y: boundingClientRect.y,
+          width: boundingClientRect.width,
+          height: boundingClientRect.height
+        });
+        return;
+      }
+      if (placeholderId && _this.isAddedPlaceholderMatchingSizeCallbacks.has(placeholderId)) {
+        var _resolve2 = _this.isAddedPlaceholderMatchingSizeCallbacks.get(placeholderId);
+        _this.isAddedPlaceholderMatchingSizeCallbacks.delete(placeholderId);
+        if (!_resolve2) {
+          return;
+        }
+        var placeholder = _this.placeholders.get(placeholderId);
+        if (!placeholder) {
+          _resolve2(false);
+          return;
+        }
+        _resolve2(_this.areRectsSameSize(placeholder, boundingClientRect));
+        return;
+      }
+      var replaceId = (_target$dataset2 = target.dataset) === null || _target$dataset2 === void 0 ? void 0 : _target$dataset2[replaceDataKey];
+      if (replaceId && _this.isAddedReplaceMatchingSizeCallbacks.has(replaceId)) {
+        var _resolve3 = _this.isAddedReplaceMatchingSizeCallbacks.get(replaceId);
+        _this.isAddedReplaceMatchingSizeCallbacks.delete(replaceId);
+        if (!_resolve3) {
+          return;
+        }
+        var _placeholder = _this.placeholders.get(replaceId);
+        if (!_placeholder) {
+          _resolve3(false);
+          return;
+        }
+        _this.placeholders.delete(replaceId);
+        _resolve3(_this.areRectsSameSize(_placeholder, boundingClientRect));
+        return;
+      }
+    });
+    this.intersectionObserver = new IntersectionObserver(function (entries) {
+      return entries.filter(function (entry) {
+        return entry.intersectionRatio > 0;
+      }).forEach(_this.intersectionObserverCallback);
+    });
+  }
+  (0, _createClass2.default)(EditorLnvHandler, [{
+    key: "shouldHandleAddedNode",
+    value: function shouldHandleAddedNode(el) {
+      var _el$dataset, _el$dataset2;
+      return ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset[placeholderDataKey]) || ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2[replaceDataKey]);
+    }
+  }, {
+    key: "handleAddedNode",
+    value: function handleAddedNode(el) {
+      var _el$dataset3, _el$dataset4;
+      // If it placeholder does not already exist, add it to the map
+      var placeholderId = (_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3[placeholderDataKey];
+      if (placeholderId) {
+        return this.handleAddedPlaceholderNode(el, placeholderId);
+      }
+      var replaceId = (_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4[replaceDataKey];
+      if (replaceId) {
+        return this.handleAddedReplaceNode(el, replaceId);
+      }
+      return Promise.resolve({
+        shouldIgnore: false
+      });
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.placeholders.clear();
+      this.intersectionObserver.disconnect();
+    }
+  }, {
+    key: "handleAddedPlaceholderNode",
+    value: function handleAddedPlaceholderNode(el, placeholderId) {
+      if (this.isExistingPlaceholder(placeholderId)) {
+        return this.isAddedPlaceholderMatchingSize(el, placeholderId).then(function (isMatching) {
+          return {
+            shouldIgnore: isMatching
+          };
+        });
+      }
+      return this.registerPlaceholder(el, placeholderId).then(function () {
+        return {
+          shouldIgnore: false
+        };
+      });
+    }
+  }, {
+    key: "handleAddedReplaceNode",
+    value: function handleAddedReplaceNode(el, placeholderId) {
+      if (this.isExistingPlaceholder(placeholderId)) {
+        return this.isAddedReplaceMatchingSize(el, placeholderId).then(function (isMatching) {
+          return {
+            shouldIgnore: isMatching
+          };
+        });
+      }
+      return Promise.resolve({
+        shouldIgnore: false
+      });
+    }
+  }, {
+    key: "isExistingPlaceholder",
+    value: function isExistingPlaceholder(placeholderId) {
+      return this.placeholders.has(placeholderId);
+    }
+  }, {
+    key: "registerPlaceholder",
+    value: function registerPlaceholder(el, placeholderId) {
+      var _this2 = this;
+      return this.getSize(el, placeholderId).then(function (size) {
+        _this2.placeholders.set(placeholderId, size);
+      });
+    }
+  }, {
+    key: "getSize",
+    value: function getSize(el, placeholderId) {
+      var _this3 = this;
+      return new Promise(function (resolve) {
+        _this3.getSizeCallbacks.set(placeholderId, resolve);
+        _this3.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "isAddedPlaceholderMatchingSize",
+    value: function isAddedPlaceholderMatchingSize(el, placeholderId) {
+      var _this4 = this;
+      return new Promise(function (resolve) {
+        _this4.isAddedPlaceholderMatchingSizeCallbacks.set(placeholderId, resolve);
+        _this4.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "isAddedReplaceMatchingSize",
+    value: function isAddedReplaceMatchingSize(el, placeholderId) {
+      var _this5 = this;
+      return new Promise(function (resolve) {
+        _this5.isAddedReplaceMatchingSizeCallbacks.set(placeholderId, resolve);
+        _this5.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "areRectsSameSize",
+    value: function areRectsSameSize(a, b) {
+      return Math.abs(a.width - b.width) < 1 && Math.abs(a.height - b.height) < 1;
+    }
+  }]);
+  return EditorLnvHandler;
+}();

package/dist/cjs/vc/vc-observer/observers/editor-lnv/test-utils.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createMockIntersectionObserver = createMockIntersectionObserver;
+exports.createPlaceholderElement = createPlaceholderElement;
+exports.createReplaceElement = createReplaceElement;
+exports.handleElements = handleElements;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function createPlaceholderElement(id) {
+  var el = document.createElement('div');
+  el.dataset.editorLnvPlaceholder = id;
+  return el;
+}
+function createReplaceElement(id) {
+  var el = document.createElement('div');
+  el.dataset.editorLnvPlaceholderReplace = id;
+  return el;
+}
+function handleElements(elements, handler, observerCallback, callback) {
+  var _elements = (0, _toArray2.default)(elements),
+    first = _elements[0],
+    rest = _elements.slice(1);
+  handler.handleAddedNode(first.element).then(function (result) {
+    if (!rest.length) {
+      // Recursion terminating condition
+      callback(result);
+    } else {
+      // Recursively handle the rest of the elements
+      handleElements(rest, handler, observerCallback, callback);
+    }
+  });
+  observerCallback([{
+    target: first.element,
+    boundingClientRect: first.rect
+  }]);
+}
+function createMockIntersectionObserver(cbRef) {
+  return /*#__PURE__*/function () {
+    function _class(fn) {
+      (0, _classCallCheck2.default)(this, _class);
+      cbRef.current = function (entries) {
+        return fn(entries.map(function (entry) {
+          return _objectSpread(_objectSpread({}, entry), {}, {
+            intersectionRatio: 1
+          });
+        }));
+      };
+    }
+    (0, _createClass2.default)(_class, [{
+      key: "observe",
+      value: function observe() {}
+    }, {
+      key: "unobserve",
+      value: function unobserve() {}
+    }, {
+      key: "disconnect",
+      value: function disconnect() {}
+    }]);
+    return _class;
+  }();
+}

package/dist/cjs/vc/vc-observer/observers/index.js

@@ -9,7 +9,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _vcUtils = require("../media-wrapper/vc-utils");
+var _editorLnv = require("./editor-lnv");
 var _ssrPlaceholders = require("./ssr-placeholders");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -59,6 +61,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
     this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers();
+    this.editorLnvHandler = new _editorLnv.EditorLnvHandler();
   }
   (0, _createClass2.default)(Observers, [{
     key: "isBrowserSupported",
@@ -95,6 +98,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
       this.callbacks = new Set();
       this.ssr.reactRootElement = null;
       this.ssrPlaceholderHandler.clear();
+      this.editorLnvHandler.clear();
     }
   }, {
     key: "getTotalTime",
@@ -168,6 +172,15 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
                   });
                   return;
                 }
+                if ((0, _platformFeatureFlags.fg)('platform_editor_ed-25557_lnv_add_ssr_placeholder')) {
+                  if (_this2.editorLnvHandler.shouldHandleAddedNode(node)) {
+                    _this2.editorLnvHandler.handleAddedNode(node).then(function (_ref) {
+                      var shouldIgnore = _ref.shouldIgnore;
+                      _this2.observeElement(node, mutation, 'html', shouldIgnore ? 'editor-lazy-node-view' : ignoreReason);
+                    });
+                    return;
+                  }
+                }
                 _this2.observeElement(node, mutation, 'html', ignoreReason);
               }
               if (node instanceof Text && node.parentElement != null) {
@@ -264,10 +277,10 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
       var _this3 = this;
       return this.isBrowserSupported() ? new IntersectionObserver(function (entries) {
         _this3.measureStart();
-        entries.forEach(function (_ref) {
-          var isIntersecting = _ref.isIntersecting,
-            ir = _ref.intersectionRect,
-            target = _ref.target;
+        entries.forEach(function (_ref2) {
+          var isIntersecting = _ref2.isIntersecting,
+            ir = _ref2.intersectionRect,
+            target = _ref2.target;
           var data = _this3.observedMutations.get(target);
           _this3.observedMutations.delete(target);
           if (isIntersecting && ir.width > 0 && ir.height > 0) {

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -40,7 +40,6 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           _this.callbacks.delete(staticKey);
         }
       } else {
-        // react component check
         var key = target.dataset.ssrPlaceholderReplace || '';
         var _resolve2 = _this.reactValidateCallbacks.get(key);
         if (!_resolve2) {

package/dist/es2019/vc/vc-observer/observers/editor-lnv/index.js

@@ -0,0 +1,140 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const placeholderDataKey = 'editorLnvPlaceholder'; // data-editor-lnv-placeholder
+const replaceDataKey = 'editorLnvPlaceholderReplace'; // data-editor-lnv-placeholder-replace
+
+export class EditorLnvHandler {
+  constructor() {
+    _defineProperty(this, "placeholders", new Map());
+    _defineProperty(this, "getSizeCallbacks", new Map());
+    _defineProperty(this, "isAddedPlaceholderMatchingSizeCallbacks", new Map());
+    _defineProperty(this, "isAddedReplaceMatchingSizeCallbacks", new Map());
+    _defineProperty(this, "intersectionObserverCallback", ({
+      target,
+      boundingClientRect
+    }) => {
+      var _target$dataset, _target$dataset2;
+      this.intersectionObserver.unobserve(target);
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      const placeholderId = (_target$dataset = target.dataset) === null || _target$dataset === void 0 ? void 0 : _target$dataset[placeholderDataKey];
+      if (placeholderId && this.getSizeCallbacks.has(placeholderId)) {
+        const resolve = this.getSizeCallbacks.get(placeholderId);
+        this.getSizeCallbacks.delete(placeholderId);
+        if (!resolve) {
+          return;
+        }
+        resolve({
+          x: boundingClientRect.x,
+          y: boundingClientRect.y,
+          width: boundingClientRect.width,
+          height: boundingClientRect.height
+        });
+        return;
+      }
+      if (placeholderId && this.isAddedPlaceholderMatchingSizeCallbacks.has(placeholderId)) {
+        const resolve = this.isAddedPlaceholderMatchingSizeCallbacks.get(placeholderId);
+        this.isAddedPlaceholderMatchingSizeCallbacks.delete(placeholderId);
+        if (!resolve) {
+          return;
+        }
+        const placeholder = this.placeholders.get(placeholderId);
+        if (!placeholder) {
+          resolve(false);
+          return;
+        }
+        resolve(this.areRectsSameSize(placeholder, boundingClientRect));
+        return;
+      }
+      const replaceId = (_target$dataset2 = target.dataset) === null || _target$dataset2 === void 0 ? void 0 : _target$dataset2[replaceDataKey];
+      if (replaceId && this.isAddedReplaceMatchingSizeCallbacks.has(replaceId)) {
+        const resolve = this.isAddedReplaceMatchingSizeCallbacks.get(replaceId);
+        this.isAddedReplaceMatchingSizeCallbacks.delete(replaceId);
+        if (!resolve) {
+          return;
+        }
+        const placeholder = this.placeholders.get(replaceId);
+        if (!placeholder) {
+          resolve(false);
+          return;
+        }
+        this.placeholders.delete(replaceId);
+        resolve(this.areRectsSameSize(placeholder, boundingClientRect));
+        return;
+      }
+    });
+    this.intersectionObserver = new IntersectionObserver(entries => entries.filter(entry => entry.intersectionRatio > 0).forEach(this.intersectionObserverCallback));
+  }
+  shouldHandleAddedNode(el) {
+    var _el$dataset, _el$dataset2;
+    return ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset[placeholderDataKey]) || ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2[replaceDataKey]);
+  }
+  handleAddedNode(el) {
+    var _el$dataset3, _el$dataset4;
+    // If it placeholder does not already exist, add it to the map
+    const placeholderId = (_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3[placeholderDataKey];
+    if (placeholderId) {
+      return this.handleAddedPlaceholderNode(el, placeholderId);
+    }
+    const replaceId = (_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4[replaceDataKey];
+    if (replaceId) {
+      return this.handleAddedReplaceNode(el, replaceId);
+    }
+    return Promise.resolve({
+      shouldIgnore: false
+    });
+  }
+  clear() {
+    this.placeholders.clear();
+    this.intersectionObserver.disconnect();
+  }
+  handleAddedPlaceholderNode(el, placeholderId) {
+    if (this.isExistingPlaceholder(placeholderId)) {
+      return this.isAddedPlaceholderMatchingSize(el, placeholderId).then(isMatching => ({
+        shouldIgnore: isMatching
+      }));
+    }
+    return this.registerPlaceholder(el, placeholderId).then(() => ({
+      shouldIgnore: false
+    }));
+  }
+  handleAddedReplaceNode(el, placeholderId) {
+    if (this.isExistingPlaceholder(placeholderId)) {
+      return this.isAddedReplaceMatchingSize(el, placeholderId).then(isMatching => ({
+        shouldIgnore: isMatching
+      }));
+    }
+    return Promise.resolve({
+      shouldIgnore: false
+    });
+  }
+  isExistingPlaceholder(placeholderId) {
+    return this.placeholders.has(placeholderId);
+  }
+  registerPlaceholder(el, placeholderId) {
+    return this.getSize(el, placeholderId).then(size => {
+      this.placeholders.set(placeholderId, size);
+    });
+  }
+  getSize(el, placeholderId) {
+    return new Promise(resolve => {
+      this.getSizeCallbacks.set(placeholderId, resolve);
+      this.intersectionObserver.observe(el);
+    });
+  }
+  isAddedPlaceholderMatchingSize(el, placeholderId) {
+    return new Promise(resolve => {
+      this.isAddedPlaceholderMatchingSizeCallbacks.set(placeholderId, resolve);
+      this.intersectionObserver.observe(el);
+    });
+  }
+  isAddedReplaceMatchingSize(el, placeholderId) {
+    return new Promise(resolve => {
+      this.isAddedReplaceMatchingSizeCallbacks.set(placeholderId, resolve);
+      this.intersectionObserver.observe(el);
+    });
+  }
+  areRectsSameSize(a, b) {
+    return Math.abs(a.width - b.width) < 1 && Math.abs(a.height - b.height) < 1;
+  }
+}

package/dist/es2019/vc/vc-observer/observers/editor-lnv/test-utils.js

@@ -0,0 +1,41 @@
+export function createPlaceholderElement(id) {
+  const el = document.createElement('div');
+  el.dataset.editorLnvPlaceholder = id;
+  return el;
+}
+export function createReplaceElement(id) {
+  const el = document.createElement('div');
+  el.dataset.editorLnvPlaceholderReplace = id;
+  return el;
+}
+export function handleElements(elements, handler, observerCallback, callback) {
+  const [first, ...rest] = elements;
+  handler.handleAddedNode(first.element).then(result => {
+    if (!rest.length) {
+      // Recursion terminating condition
+      callback(result);
+    } else {
+      // Recursively handle the rest of the elements
+      handleElements(rest, handler, observerCallback, callback);
+    }
+  });
+  observerCallback([{
+    target: first.element,
+    boundingClientRect: first.rect
+  }]);
+}
+export function createMockIntersectionObserver(cbRef) {
+  return class {
+    constructor(fn) {
+      cbRef.current = entries => fn(entries.map(entry => {
+        return {
+          ...entry,
+          intersectionRatio: 1
+        };
+      }));
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+}

package/dist/es2019/vc/vc-observer/observers/index.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
+import { EditorLnvHandler } from './editor-lnv';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 const state = {
   normal: 1,
@@ -45,6 +47,7 @@ export class Observers {
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
     this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
+    this.editorLnvHandler = new EditorLnvHandler();
   }
   isBrowserSupported() {
     return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';
@@ -75,6 +78,7 @@ export class Observers {
     this.callbacks = new Set();
     this.ssr.reactRootElement = null;
     this.ssrPlaceholderHandler.clear();
+    this.editorLnvHandler.clear();
   }
   getTotalTime() {
     return this.totalTime;
@@ -135,6 +139,16 @@ export class Observers {
                 });
                 return;
               }
+              if (fg('platform_editor_ed-25557_lnv_add_ssr_placeholder')) {
+                if (this.editorLnvHandler.shouldHandleAddedNode(node)) {
+                  this.editorLnvHandler.handleAddedNode(node).then(({
+                    shouldIgnore
+                  }) => {
+                    this.observeElement(node, mutation, 'html', shouldIgnore ? 'editor-lazy-node-view' : ignoreReason);
+                  });
+                  return;
+                }
+              }
               this.observeElement(node, mutation, 'html', ignoreReason);
             }
             if (node instanceof Text && node.parentElement != null) {

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -30,7 +30,6 @@ export class SSRPlaceholderHandlers {
           this.callbacks.delete(staticKey);
         }
       } else {
-        // react component check
         const key = target.dataset.ssrPlaceholderReplace || '';
         const resolve = this.reactValidateCallbacks.get(key);
         if (!resolve) {

package/dist/esm/vc/vc-observer/observers/editor-lnv/index.js

@@ -0,0 +1,181 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var placeholderDataKey = 'editorLnvPlaceholder'; // data-editor-lnv-placeholder
+var replaceDataKey = 'editorLnvPlaceholderReplace'; // data-editor-lnv-placeholder-replace
+
+export var EditorLnvHandler = /*#__PURE__*/function () {
+  function EditorLnvHandler() {
+    var _this = this;
+    _classCallCheck(this, EditorLnvHandler);
+    _defineProperty(this, "placeholders", new Map());
+    _defineProperty(this, "getSizeCallbacks", new Map());
+    _defineProperty(this, "isAddedPlaceholderMatchingSizeCallbacks", new Map());
+    _defineProperty(this, "isAddedReplaceMatchingSizeCallbacks", new Map());
+    _defineProperty(this, "intersectionObserverCallback", function (_ref) {
+      var _target$dataset, _target$dataset2;
+      var target = _ref.target,
+        boundingClientRect = _ref.boundingClientRect;
+      _this.intersectionObserver.unobserve(target);
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      var placeholderId = (_target$dataset = target.dataset) === null || _target$dataset === void 0 ? void 0 : _target$dataset[placeholderDataKey];
+      if (placeholderId && _this.getSizeCallbacks.has(placeholderId)) {
+        var _resolve = _this.getSizeCallbacks.get(placeholderId);
+        _this.getSizeCallbacks.delete(placeholderId);
+        if (!_resolve) {
+          return;
+        }
+        _resolve({
+          x: boundingClientRect.x,
+          y: boundingClientRect.y,
+          width: boundingClientRect.width,
+          height: boundingClientRect.height
+        });
+        return;
+      }
+      if (placeholderId && _this.isAddedPlaceholderMatchingSizeCallbacks.has(placeholderId)) {
+        var _resolve2 = _this.isAddedPlaceholderMatchingSizeCallbacks.get(placeholderId);
+        _this.isAddedPlaceholderMatchingSizeCallbacks.delete(placeholderId);
+        if (!_resolve2) {
+          return;
+        }
+        var placeholder = _this.placeholders.get(placeholderId);
+        if (!placeholder) {
+          _resolve2(false);
+          return;
+        }
+        _resolve2(_this.areRectsSameSize(placeholder, boundingClientRect));
+        return;
+      }
+      var replaceId = (_target$dataset2 = target.dataset) === null || _target$dataset2 === void 0 ? void 0 : _target$dataset2[replaceDataKey];
+      if (replaceId && _this.isAddedReplaceMatchingSizeCallbacks.has(replaceId)) {
+        var _resolve3 = _this.isAddedReplaceMatchingSizeCallbacks.get(replaceId);
+        _this.isAddedReplaceMatchingSizeCallbacks.delete(replaceId);
+        if (!_resolve3) {
+          return;
+        }
+        var _placeholder = _this.placeholders.get(replaceId);
+        if (!_placeholder) {
+          _resolve3(false);
+          return;
+        }
+        _this.placeholders.delete(replaceId);
+        _resolve3(_this.areRectsSameSize(_placeholder, boundingClientRect));
+        return;
+      }
+    });
+    this.intersectionObserver = new IntersectionObserver(function (entries) {
+      return entries.filter(function (entry) {
+        return entry.intersectionRatio > 0;
+      }).forEach(_this.intersectionObserverCallback);
+    });
+  }
+  _createClass(EditorLnvHandler, [{
+    key: "shouldHandleAddedNode",
+    value: function shouldHandleAddedNode(el) {
+      var _el$dataset, _el$dataset2;
+      return ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset[placeholderDataKey]) || ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2[replaceDataKey]);
+    }
+  }, {
+    key: "handleAddedNode",
+    value: function handleAddedNode(el) {
+      var _el$dataset3, _el$dataset4;
+      // If it placeholder does not already exist, add it to the map
+      var placeholderId = (_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3[placeholderDataKey];
+      if (placeholderId) {
+        return this.handleAddedPlaceholderNode(el, placeholderId);
+      }
+      var replaceId = (_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4[replaceDataKey];
+      if (replaceId) {
+        return this.handleAddedReplaceNode(el, replaceId);
+      }
+      return Promise.resolve({
+        shouldIgnore: false
+      });
+    }
+  }, {
+    key: "clear",
+    value: function clear() {
+      this.placeholders.clear();
+      this.intersectionObserver.disconnect();
+    }
+  }, {
+    key: "handleAddedPlaceholderNode",
+    value: function handleAddedPlaceholderNode(el, placeholderId) {
+      if (this.isExistingPlaceholder(placeholderId)) {
+        return this.isAddedPlaceholderMatchingSize(el, placeholderId).then(function (isMatching) {
+          return {
+            shouldIgnore: isMatching
+          };
+        });
+      }
+      return this.registerPlaceholder(el, placeholderId).then(function () {
+        return {
+          shouldIgnore: false
+        };
+      });
+    }
+  }, {
+    key: "handleAddedReplaceNode",
+    value: function handleAddedReplaceNode(el, placeholderId) {
+      if (this.isExistingPlaceholder(placeholderId)) {
+        return this.isAddedReplaceMatchingSize(el, placeholderId).then(function (isMatching) {
+          return {
+            shouldIgnore: isMatching
+          };
+        });
+      }
+      return Promise.resolve({
+        shouldIgnore: false
+      });
+    }
+  }, {
+    key: "isExistingPlaceholder",
+    value: function isExistingPlaceholder(placeholderId) {
+      return this.placeholders.has(placeholderId);
+    }
+  }, {
+    key: "registerPlaceholder",
+    value: function registerPlaceholder(el, placeholderId) {
+      var _this2 = this;
+      return this.getSize(el, placeholderId).then(function (size) {
+        _this2.placeholders.set(placeholderId, size);
+      });
+    }
+  }, {
+    key: "getSize",
+    value: function getSize(el, placeholderId) {
+      var _this3 = this;
+      return new Promise(function (resolve) {
+        _this3.getSizeCallbacks.set(placeholderId, resolve);
+        _this3.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "isAddedPlaceholderMatchingSize",
+    value: function isAddedPlaceholderMatchingSize(el, placeholderId) {
+      var _this4 = this;
+      return new Promise(function (resolve) {
+        _this4.isAddedPlaceholderMatchingSizeCallbacks.set(placeholderId, resolve);
+        _this4.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "isAddedReplaceMatchingSize",
+    value: function isAddedReplaceMatchingSize(el, placeholderId) {
+      var _this5 = this;
+      return new Promise(function (resolve) {
+        _this5.isAddedReplaceMatchingSizeCallbacks.set(placeholderId, resolve);
+        _this5.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "areRectsSameSize",
+    value: function areRectsSameSize(a, b) {
+      return Math.abs(a.width - b.width) < 1 && Math.abs(a.height - b.height) < 1;
+    }
+  }]);
+  return EditorLnvHandler;
+}();

package/dist/esm/vc/vc-observer/observers/editor-lnv/test-utils.js

@@ -0,0 +1,59 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _toArray from "@babel/runtime/helpers/toArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+export function createPlaceholderElement(id) {
+  var el = document.createElement('div');
+  el.dataset.editorLnvPlaceholder = id;
+  return el;
+}
+export function createReplaceElement(id) {
+  var el = document.createElement('div');
+  el.dataset.editorLnvPlaceholderReplace = id;
+  return el;
+}
+export function handleElements(elements, handler, observerCallback, callback) {
+  var _elements = _toArray(elements),
+    first = _elements[0],
+    rest = _elements.slice(1);
+  handler.handleAddedNode(first.element).then(function (result) {
+    if (!rest.length) {
+      // Recursion terminating condition
+      callback(result);
+    } else {
+      // Recursively handle the rest of the elements
+      handleElements(rest, handler, observerCallback, callback);
+    }
+  });
+  observerCallback([{
+    target: first.element,
+    boundingClientRect: first.rect
+  }]);
+}
+export function createMockIntersectionObserver(cbRef) {
+  return /*#__PURE__*/function () {
+    function _class(fn) {
+      _classCallCheck(this, _class);
+      cbRef.current = function (entries) {
+        return fn(entries.map(function (entry) {
+          return _objectSpread(_objectSpread({}, entry), {}, {
+            intersectionRatio: 1
+          });
+        }));
+      };
+    }
+    _createClass(_class, [{
+      key: "observe",
+      value: function observe() {}
+    }, {
+      key: "unobserve",
+      value: function unobserve() {}
+    }, {
+      key: "disconnect",
+      value: function disconnect() {}
+    }]);
+    return _class;
+  }();
+}

package/dist/esm/vc/vc-observer/observers/index.js

@@ -7,7 +7,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
+import { EditorLnvHandler } from './editor-lnv';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 var state = {
   normal: 1,
@@ -52,6 +54,7 @@ export var Observers = /*#__PURE__*/function () {
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
     this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
+    this.editorLnvHandler = new EditorLnvHandler();
   }
   _createClass(Observers, [{
     key: "isBrowserSupported",
@@ -88,6 +91,7 @@ export var Observers = /*#__PURE__*/function () {
       this.callbacks = new Set();
       this.ssr.reactRootElement = null;
       this.ssrPlaceholderHandler.clear();
+      this.editorLnvHandler.clear();
     }
   }, {
     key: "getTotalTime",
@@ -161,6 +165,15 @@ export var Observers = /*#__PURE__*/function () {
                   });
                   return;
                 }
+                if (fg('platform_editor_ed-25557_lnv_add_ssr_placeholder')) {
+                  if (_this2.editorLnvHandler.shouldHandleAddedNode(node)) {
+                    _this2.editorLnvHandler.handleAddedNode(node).then(function (_ref) {
+                      var shouldIgnore = _ref.shouldIgnore;
+                      _this2.observeElement(node, mutation, 'html', shouldIgnore ? 'editor-lazy-node-view' : ignoreReason);
+                    });
+                    return;
+                  }
+                }
                 _this2.observeElement(node, mutation, 'html', ignoreReason);
               }
               if (node instanceof Text && node.parentElement != null) {
@@ -257,10 +270,10 @@ export var Observers = /*#__PURE__*/function () {
       var _this3 = this;
       return this.isBrowserSupported() ? new IntersectionObserver(function (entries) {
         _this3.measureStart();
-        entries.forEach(function (_ref) {
-          var isIntersecting = _ref.isIntersecting,
-            ir = _ref.intersectionRect,
-            target = _ref.target;
+        entries.forEach(function (_ref2) {
+          var isIntersecting = _ref2.isIntersecting,
+            ir = _ref2.intersectionRect,
+            target = _ref2.target;
           var data = _this3.observedMutations.get(target);
           _this3.observedMutations.delete(target);
           if (isIntersecting && ir.width > 0 && ir.height > 0) {

package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -33,7 +33,6 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           _this.callbacks.delete(staticKey);
         }
       } else {
-        // react component check
         var key = target.dataset.ssrPlaceholderReplace || '';
         var _resolve2 = _this.reactValidateCallbacks.get(key);
         if (!_resolve2) {

package/dist/types/common/vc/types.d.ts

@@ -35,7 +35,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | '';
 export type ComponentsLogEntry = {
     targetName: string;
     __debug__element: WeakRef<Element> | null;

package/dist/types/interaction-metrics/index.d.ts

@@ -60,6 +60,8 @@ declare global {
             addFeatureFlagAccessed?: (flagName: string, flagValue: FeatureFlagValue) => void;
             addUFOHold?: (id: string, name: string, labelStack: string, startTime: number) => void;
             removeUFOHold?: (id: string) => void;
+            getFeatureFlagOverride?: (flagName: string) => boolean | undefined;
+            getExperimentValueOverride?: <T>(experimentName: string, parameterName: string) => T;
         };
     }
 }

package/dist/types/vc/vc-observer/observers/editor-lnv/index.d.ts

@@ -0,0 +1,24 @@
+type HandlerResult = {
+    shouldIgnore: boolean;
+};
+export declare class EditorLnvHandler {
+    private placeholders;
+    private intersectionObserver;
+    private getSizeCallbacks;
+    private isAddedPlaceholderMatchingSizeCallbacks;
+    private isAddedReplaceMatchingSizeCallbacks;
+    constructor();
+    shouldHandleAddedNode(el: HTMLElement): string | undefined;
+    handleAddedNode(el: HTMLElement): Promise<HandlerResult>;
+    clear(): void;
+    private handleAddedPlaceholderNode;
+    private handleAddedReplaceNode;
+    private isExistingPlaceholder;
+    private registerPlaceholder;
+    private getSize;
+    private isAddedPlaceholderMatchingSize;
+    private isAddedReplaceMatchingSize;
+    private areRectsSameSize;
+    private intersectionObserverCallback;
+}
+export {};

package/dist/types/vc/vc-observer/observers/editor-lnv/test-utils.d.ts

@@ -0,0 +1,35 @@
+import type { EditorLnvHandler } from './index';
+type MockIntersectionObserverEntry = {
+    target: HTMLElement;
+    boundingClientRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export type MockIntersectionObserverCallback = (entries: MockIntersectionObserverEntry[]) => void;
+export type MockIntersectionObserverCallbackRef = {
+    current: MockIntersectionObserverCallback | null;
+};
+export declare function createPlaceholderElement(id: string): HTMLDivElement;
+export declare function createReplaceElement(id: string): HTMLDivElement;
+export declare function handleElements(elements: {
+    element: HTMLElement;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}[], handler: EditorLnvHandler, observerCallback: MockIntersectionObserverCallback, callback: (result: {
+    shouldIgnore: boolean;
+}) => void): void;
+export declare function createMockIntersectionObserver(cbRef: MockIntersectionObserverCallbackRef): {
+    new (fn: MockIntersectionObserverCallback): {
+        observe(): void;
+        unobserve(): void;
+        disconnect(): void;
+    };
+};
+export {};

package/dist/types/vc/vc-observer/observers/index.d.ts

@@ -19,6 +19,7 @@ export declare class Observers implements BrowserObservers {
     private totalTime;
     private _startMeasureTimestamp;
     private ssrPlaceholderHandler;
+    private editorLnvHandler;
     private ssr;
     private selectorConfig;
     constructor(opts: ConstructorOptions);

package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -1,3 +1,9 @@
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export declare class SSRPlaceholderHandlers {
     private staticPlaceholders;
     private callbacks;
@@ -11,13 +17,9 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderIgnored(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
-    getSize(el: HTMLElement): Promise<unknown>;
+    getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
-    hasSameSizePosition(rect: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    } | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }
+export {};

package/dist/types-ts4.5/common/vc/types.d.ts

@@ -35,7 +35,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | '';
 export type ComponentsLogEntry = {
     targetName: string;
     __debug__element: WeakRef<Element> | null;

package/dist/types-ts4.5/interaction-metrics/index.d.ts

@@ -60,6 +60,8 @@ declare global {
             addFeatureFlagAccessed?: (flagName: string, flagValue: FeatureFlagValue) => void;
             addUFOHold?: (id: string, name: string, labelStack: string, startTime: number) => void;
             removeUFOHold?: (id: string) => void;
+            getFeatureFlagOverride?: (flagName: string) => boolean | undefined;
+            getExperimentValueOverride?: <T>(experimentName: string, parameterName: string) => T;
         };
     }
 }

package/dist/types-ts4.5/vc/vc-observer/observers/editor-lnv/index.d.ts

@@ -0,0 +1,24 @@
+type HandlerResult = {
+    shouldIgnore: boolean;
+};
+export declare class EditorLnvHandler {
+    private placeholders;
+    private intersectionObserver;
+    private getSizeCallbacks;
+    private isAddedPlaceholderMatchingSizeCallbacks;
+    private isAddedReplaceMatchingSizeCallbacks;
+    constructor();
+    shouldHandleAddedNode(el: HTMLElement): string | undefined;
+    handleAddedNode(el: HTMLElement): Promise<HandlerResult>;
+    clear(): void;
+    private handleAddedPlaceholderNode;
+    private handleAddedReplaceNode;
+    private isExistingPlaceholder;
+    private registerPlaceholder;
+    private getSize;
+    private isAddedPlaceholderMatchingSize;
+    private isAddedReplaceMatchingSize;
+    private areRectsSameSize;
+    private intersectionObserverCallback;
+}
+export {};

package/dist/types-ts4.5/vc/vc-observer/observers/editor-lnv/test-utils.d.ts

@@ -0,0 +1,35 @@
+import type { EditorLnvHandler } from './index';
+type MockIntersectionObserverEntry = {
+    target: HTMLElement;
+    boundingClientRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export type MockIntersectionObserverCallback = (entries: MockIntersectionObserverEntry[]) => void;
+export type MockIntersectionObserverCallbackRef = {
+    current: MockIntersectionObserverCallback | null;
+};
+export declare function createPlaceholderElement(id: string): HTMLDivElement;
+export declare function createReplaceElement(id: string): HTMLDivElement;
+export declare function handleElements(elements: {
+    element: HTMLElement;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}[], handler: EditorLnvHandler, observerCallback: MockIntersectionObserverCallback, callback: (result: {
+    shouldIgnore: boolean;
+}) => void): void;
+export declare function createMockIntersectionObserver(cbRef: MockIntersectionObserverCallbackRef): {
+    new (fn: MockIntersectionObserverCallback): {
+        observe(): void;
+        unobserve(): void;
+        disconnect(): void;
+    };
+};
+export {};

package/dist/types-ts4.5/vc/vc-observer/observers/index.d.ts

@@ -19,6 +19,7 @@ export declare class Observers implements BrowserObservers {
     private totalTime;
     private _startMeasureTimestamp;
     private ssrPlaceholderHandler;
+    private editorLnvHandler;
     private ssr;
     private selectorConfig;
     constructor(opts: ConstructorOptions);

package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -1,3 +1,9 @@
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export declare class SSRPlaceholderHandlers {
     private staticPlaceholders;
     private callbacks;
@@ -11,13 +17,9 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderIgnored(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
-    getSize(el: HTMLElement): Promise<unknown>;
+    getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
-    hasSameSizePosition(rect: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    } | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "2.2.1",
+	"version": "2.2.3",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -122,5 +122,10 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_ed-25557_lnv_add_ssr_placeholder": {
+			"type": "boolean"
+		}
 	}
 }