@atlaskit/editor-common/dist/es2019/react-node-view/onVisibleObserverFactory.js

A package that contains common classes and components for editor and renderer

// oxlint-disable-next-line @atlassian/no-restricted-imports

import memoize from 'lodash/memoize';
// Use this selector to set the intersection observer boundary for editor's inline node views
// If this does not exist, it will use the IntersectionObserver's default root
const INTERSECTION_OBSERVER_ROOT_SELECTOR = '[data-editor-scroll-container="true"]';
const INTERSECTION_OBSERVER_OPTIONS = {
  rootMargin: '0px 0px 100px 0px',
  threshold: 0
};

// Parameterized singleton
export const getOrCreateOnVisibleObserver = memoize(view => {
  const intersectionObserverOptions = {
    root: view.dom.closest(INTERSECTION_OBSERVER_ROOT_SELECTOR),
    ...INTERSECTION_OBSERVER_OPTIONS
  };
  const callbackMap = new WeakMap();
  const observer = new IntersectionObserver(entries => {
    entries.filter(entry => entry.isIntersecting) // Only process visible entries
    .map(entry => callbackMap.get(entry.target))
    // Invoke callbacks together to group browser rendering
    // Avoiding requestAnimationFrame to reduce visual flickering
    .forEach(cb => cb === null || cb === void 0 ? void 0 : cb());
  }, intersectionObserverOptions);
  return {
    observe: (el, callback) => {
      callbackMap.set(el, callback);
      observer.observe(el);
      return () => observer.unobserve(el);
    }
  };
});