@atlaskit/editor-core/dist/esm/composable-editor/editor-inp-metrics.js

A package contains Atlassian editor core functionality

import { useEffect } from 'react';
import debounce from 'lodash/debounce';
import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
import { ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
import { setupINPTracking } from '@atlaskit/editor-performance-metrics/inp';
import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
export var EditorINPMetrics = function EditorINPMetrics() {
  var analyticsEvents = useAnalyticsEvents();

  // onMount lifecycle hook
  useEffect(function () {
    var cleanupFn;
    var cleanupIdleCallback = createIdleCallback(function () {
      cleanupFn = setupINPTracking(function (_ref) {
        var value = _ref.value;
        var interaction = getActiveInteraction();
        var ufoName = interaction === null || interaction === void 0 ? void 0 : interaction.ufoName;
        sendAnalytics(analyticsEvents.createAnalyticsEvent, value, ufoName);
      });
    });

    // Cleanup function that will be called when the component unmounts
    return function () {
      var _cleanupFn;
      cleanupIdleCallback();
      (_cleanupFn = cleanupFn) === null || _cleanupFn === void 0 || _cleanupFn();
    };
    // Using hook as mount lifecycle hook.
    // We do not need to set dependency on analyticsEvents since we are using the analyticsEvents object reference
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // This component doesn't render anything
  return null;
};
var sendAnalytics = debounce(function (createAnalyticsEvent, value, ufoName) {
  fireAnalyticsEvent(createAnalyticsEvent)({
    payload: {
      // @ts-expect-error Temporary data
      action: 'inp',
      actionSubject: ACTION_SUBJECT.EDITOR,
      eventType: EVENT_TYPE.TRACK,
      attributes: {
        inp: value,
        ufoName: ufoName
      }
    }
  });
}, 1000, {
  trailing: true
});
var createIdleCallback = function createIdleCallback(callback) {
  if (typeof window.requestIdleCallback === 'function') {
    var _id = window.requestIdleCallback(callback);
    return function () {
      return window.cancelIdleCallback(_id);
    };
  }
  // Fallback to setTimeout with 0 delay if requestIdleCallback is not available
  var id = window.setTimeout(callback, 0);
  return function () {
    return window.clearTimeout(id);
  };
};