@atlaskit/editor-core 201.1.5 → 201.1.7

package/dist/esm/create-editor/ReactEditorView/useDispatchTransaction.js

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
+import { getDocStructure } from '@atlaskit/editor-common/core-utils';
+import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
+import { findChangedNodesFromTransaction } from '../../utils/findChangedNodesFromTransaction';
+import { freezeUnsafeTransactionProperties } from '../../utils/performance/safer-transactions';
+import { EVENT_NAME_ON_CHANGE } from '../../utils/performance/track-transactions';
+import { validateNodes, validNode } from '../../utils/validateNodes';
+export var useDispatchTransaction = function useDispatchTransaction(_ref) {
+  var onChange = _ref.onChange,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    onEditorViewUpdated = _ref.onEditorViewUpdated;
+  // We need to have a ref to the latest `onChange` since the `dispatchTransaction` gets captured
+  var onChangeRef = useRef(onChange);
+  useEffect(function () {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  var dispatchTransaction = useCallback(function (view, unsafeTransaction) {
+    if (!view) {
+      return;
+    }
+    var nodes = findChangedNodesFromTransaction(unsafeTransaction);
+    var changedNodesValid = validateNodes(nodes);
+    var transaction = new Proxy(unsafeTransaction, freezeUnsafeTransactionProperties({
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginKey: 'unknown-reacteditorview'
+    }));
+    if (changedNodesValid) {
+      var oldEditorState = view.state;
+
+      // go ahead and update the state now we know the transaction is good
+      var _view$state$applyTran = view.state.applyTransaction(transaction),
+        newEditorState = _view$state$applyTran.state,
+        transactions = _view$state$applyTran.transactions;
+      if (newEditorState === oldEditorState) {
+        return;
+      }
+      view.updateState(newEditorState);
+      onEditorViewUpdated({
+        originalTransaction: transaction,
+        transactions: transactions,
+        oldEditorState: oldEditorState,
+        newEditorState: newEditorState
+      });
+      if (onChangeRef.current && transaction.docChanged) {
+        var source = transaction.getMeta('isRemote') ? 'remote' : 'local';
+        startMeasure(EVENT_NAME_ON_CHANGE);
+        onChangeRef.current(view, {
+          source: source
+        });
+        stopMeasure(EVENT_NAME_ON_CHANGE, function (duration, startTime) {
+          dispatchAnalyticsEvent({
+            action: ACTION.ON_CHANGE_CALLBACK,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              duration: duration,
+              startTime: startTime
+            }
+          });
+        });
+      }
+      return newEditorState;
+    } else {
+      var invalidNodes = nodes.filter(function (node) {
+        return !validNode(node);
+      }).map(function (node) {
+        return getDocStructure(node, {
+          compact: true
+        });
+      });
+      dispatchAnalyticsEvent({
+        action: ACTION.DISPATCHED_INVALID_TRANSACTION,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          analyticsEventPayloads: getAnalyticsEventsFromTransaction(transaction),
+          invalidNodes: invalidNodes
+        }
+      });
+    }
+  }, [dispatchAnalyticsEvent, onEditorViewUpdated]);
+  return dispatchTransaction;
+};

package/dist/esm/create-editor/ReactEditorView/useFireFullWidthEvent.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { formatFullWidthAppearance } from './formatFullWidthAppearance';
+export var useFireFullWidthEvent = function useFireFullWidthEvent(appearance, dispatchAnalyticsEvent) {
+  var previousAppearance = usePreviousState(appearance);
+  useEffect(function () {
+    if (appearance !== previousAppearance) {
+      if (appearance === 'full-width' || previousAppearance === 'full-width') {
+        dispatchAnalyticsEvent({
+          action: ACTION.CHANGED_FULL_WIDTH_MODE,
+          actionSubject: ACTION_SUBJECT.EDITOR,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            previousMode: formatFullWidthAppearance(previousAppearance),
+            newMode: formatFullWidthAppearance(appearance)
+          }
+        });
+      }
+    }
+  }, [appearance, previousAppearance, dispatchAnalyticsEvent]);
+};

package/dist/esm/create-editor/ReactEditorView/usePluginPerformanceObserver.js

@@ -0,0 +1,42 @@
+import { useCallback, useLayoutEffect, useMemo } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { countNodes } from '@atlaskit/editor-common/count-nodes';
+import { PluginPerformanceObserver } from '../../utils/performance/plugin-performance-observer';
+export var usePluginPerformanceObserver = function usePluginPerformanceObserver(editorState, pluginInjectionAPI, dispatchAnalyticsEvent) {
+  var onPluginObservation = useCallback(function (report) {
+    var _pluginInjectionAPI$c;
+    dispatchAnalyticsEvent({
+      action: ACTION.TRANSACTION_DISPATCHED,
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        report: report,
+        participants: ((_pluginInjectionAPI$c = pluginInjectionAPI.current) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.api().collabEdit) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.sharedState.currentState()) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.participants) === null || _pluginInjectionAPI$c === void 0 ? void 0 : _pluginInjectionAPI$c.size()) || 1
+      }
+    });
+  }, [dispatchAnalyticsEvent, pluginInjectionAPI]);
+  var getPluginNames = useCallback(function () {
+    var _editorState$current;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (_editorState$current = editorState.current) === null || _editorState$current === void 0 ? void 0 : _editorState$current.plugins.map(function (p) {
+      return p.key;
+    });
+  }, [editorState]);
+  var pluginPerformanceObserver = useMemo(function () {
+    return new PluginPerformanceObserver(function (report) {
+      return onPluginObservation(report);
+    }).withPlugins(function () {
+      return getPluginNames();
+    }).withNodeCounts(function () {
+      return editorState.current ? countNodes(editorState.current) : {
+        nodeCount: {},
+        extensionNodeCount: {}
+      };
+    });
+  }, [onPluginObservation, getPluginNames, editorState]);
+  useLayoutEffect(function () {
+    return function () {
+      pluginPerformanceObserver.disconnect();
+    };
+  }, [pluginPerformanceObserver]);
+};

package/dist/esm/create-editor/ReactEditorView.js

@@ -647,7 +647,8 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props$render, _this$props$render2, _this$props;
-      var renderTrackingEnabled = true;
+      // Render tracking is firing too many events in Jira so we are disabling them for now. See - https://product-fabric.atlassian.net/browse/ED-25616
+      var renderTrackingEnabled = !fg('platform_editor_disable_rerender_tracking_jira');
       var useShallow = true;
       return /*#__PURE__*/React.createElement(ReactEditorViewContext.Provider, {
         value: {