@atlaskit/editor-core 150.0.1 → 151.1.0

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

@@ -8,6 +8,10 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -16,6 +20,7 @@ import React from 'react';
 import uuid from 'uuid';
 import memoizeOne from 'memoize-one';
 import { sniffUserBrowserExtensions } from '@atlaskit/editor-common';
+import { ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../plugins/analytics';
 import { editorAnalyticsChannel } from '../plugins/analytics/consts';
 import { getFeatureFlags } from '../plugins/feature-flags-context';
@@ -26,16 +31,12 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
 
   var _super = _createSuper(ErrorBoundaryWithEditorView);
 
-  function ErrorBoundaryWithEditorView() {
+  function ErrorBoundaryWithEditorView(props) {
     var _this;
 
     _classCallCheck(this, ErrorBoundaryWithEditorView);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "browserExtensions", undefined);
 
@@ -51,102 +52,138 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
       return getFeatureFlags(editorView.state);
     }));
 
-    _defineProperty(_assertThisInitialized(_this), "fireAnalytics", function (analyticsErrorPayload) {
-      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
-
-      _this.getProductName().then(function (product) {
-        if (createAnalyticsEvent) {
-          var error = analyticsErrorPayload.error,
-              errorInfo = analyticsErrorPayload.errorInfo,
-              errorStack = analyticsErrorPayload.errorStack;
-          var sharedId = uuid();
-          var event = {
-            action: ACTION.EDITOR_CRASHED,
-            actionSubject: ACTION_SUBJECT.EDITOR,
-            eventType: EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              product: product,
-              browserInfo: window && window.navigator && window.navigator.userAgent ? window.navigator.userAgent : 'unknown',
-              error: error,
-              errorInfo: errorInfo,
-              errorId: sharedId,
-              browserExtensions: _this.browserExtensions
-            }
-          }; // Add doc structure if the feature flag is on
+    _defineProperty(_assertThisInitialized(_this), "sendErrorData", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(analyticsErrorPayload) {
+        var product, error, errorInfo, errorStack, sharedId, attributes, _this$experienceStore;
 
-          if (_this.featureFlags.errorBoundaryDocStructure && _this.props.editorView) {
-            event.attributes.docStructure = getDocStructure(_this.props.editorView.state.doc, {
-              compact: true
-            });
-          }
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return _this.getProductName();
+
+              case 2:
+                product = _context.sent;
+                error = analyticsErrorPayload.error, errorInfo = analyticsErrorPayload.errorInfo, errorStack = analyticsErrorPayload.errorStack;
+                sharedId = uuid();
+                attributes = {
+                  product: product,
+                  browserInfo: window && window.navigator && window.navigator.userAgent ? window.navigator.userAgent : 'unknown',
+                  error: error,
+                  errorInfo: errorInfo,
+                  errorId: sharedId,
+                  browserExtensions: _this.browserExtensions,
+                  docStructure: _this.featureFlags.errorBoundaryDocStructure && _this.props.editorView ? getDocStructure(_this.props.editorView.state.doc, {
+                    compact: true
+                  }) : undefined
+                };
+
+                _this.fireAnalyticsEvent({
+                  action: ACTION.EDITOR_CRASHED,
+                  actionSubject: ACTION_SUBJECT.EDITOR,
+                  eventType: EVENT_TYPE.OPERATIONAL,
+                  attributes: attributes
+                });
+
+                _this.fireAnalyticsEvent({
+                  action: ACTION.EDITOR_CRASHED_ADDITIONAL_INFORMATION,
+                  actionSubject: ACTION_SUBJECT.EDITOR,
+                  eventType: EVENT_TYPE.OPERATIONAL,
+                  attributes: {
+                    errorStack: errorStack,
+                    errorId: sharedId
+                  }
+                });
+
+                if (_this.featureFlags.ufo && _this.props.editorView) {
+                  (_this$experienceStore = _this.experienceStore) === null || _this$experienceStore === void 0 ? void 0 : _this$experienceStore.failAll(_objectSpread(_objectSpread({}, _this.getExperienceMetadata(attributes)), {}, {
+                    errorStack: errorStack
+                  }));
+                }
 
-          createAnalyticsEvent(event).fire(editorAnalyticsChannel);
-          createAnalyticsEvent({
-            action: ACTION.EDITOR_CRASHED_ADDITIONAL_INFORMATION,
-            actionSubject: ACTION_SUBJECT.EDITOR,
-            eventType: EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              errorStack: errorStack,
-              errorId: sharedId
+              case 9:
+              case "end":
+                return _context.stop();
             }
-          }).fire(editorAnalyticsChannel);
-        } else {
-          // eslint-disable-next-line no-console
-          console.error('Editor Error Boundary: Missing `createAnalyticsEvent` prop.', {
-            channel: editorAnalyticsChannel,
-            product: product,
-            error: analyticsErrorPayload
-          });
-        }
-      }).catch(function (e) {
-        // eslint-disable-next-line no-console
-        console.error('Failed to resolve product name from contextIdentifierProvider.', e);
-      });
-    });
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
 
-    _defineProperty(_assertThisInitialized(_this), "getProductName", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    _defineProperty(_assertThisInitialized(_this), "getProductName", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var contextIdentifierProvider, context;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
               contextIdentifierProvider = _this.props.contextIdentifierProvider;
 
               if (!contextIdentifierProvider) {
-                _context.next = 7;
+                _context2.next = 7;
                 break;
               }
 
-              _context.next = 4;
+              _context2.next = 4;
               return contextIdentifierProvider;
 
             case 4:
-              context = _context.sent;
+              context = _context2.sent;
 
               if (!context.product) {
-                _context.next = 7;
+                _context2.next = 7;
                 break;
               }
 
-              return _context.abrupt("return", context.product);
+              return _context2.abrupt("return", context.product);
 
             case 7:
-              return _context.abrupt("return", 'atlaskit');
+              return _context2.abrupt("return", 'atlaskit');
 
             case 8:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     })));
 
+    _defineProperty(_assertThisInitialized(_this), "fireAnalyticsEvent", function (event) {
+      var _this$props$createAna, _this$props;
+
+      (_this$props$createAna = (_this$props = _this.props).createAnalyticsEvent) === null || _this$props$createAna === void 0 ? void 0 : _this$props$createAna.call(_this$props, event).fire(editorAnalyticsChannel);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getExperienceMetadata", function (attributes) {
+      var _attributes$browserEx;
+
+      return {
+        browserInfo: attributes.browserInfo,
+        error: attributes.error.toString(),
+        errorInfo: {
+          componentStack: attributes.errorInfo.componentStack
+        },
+        errorId: attributes.errorId,
+        browserExtensions: (_attributes$browserEx = attributes.browserExtensions) === null || _attributes$browserEx === void 0 ? void 0 : _attributes$browserEx.toString(),
+        docStructure: attributes.docStructure
+      };
+    });
+
+    if (props.editorView) {
+      _this.experienceStore = ExperienceStore.getInstance(props.editorView);
+    }
+
     return _this;
   }
 
   _createClass(ErrorBoundaryWithEditorView, [{
     key: "featureFlags",
-    get: function get() {
+    get: // Memoizing this as react alternative suggestion of https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
+    function get() {
       return this.getFeatureFlags(this.props.editorView);
     }
   }, {
@@ -154,13 +191,11 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
     value: function componentDidCatch(error, errorInfo) {
       var _this2 = this;
 
-      // Log the error
-      this.fireAnalytics({
+      this.sendErrorData({
         error: error.toString(),
         errorInfo: errorInfo,
         errorStack: error.stack
-      }); //
-      // // Update state to allow a re-render to attempt graceful recovery (in the event that
+      }); // // Update state to allow a re-render to attempt graceful recovery (in the event that
       // // the error was caused by a race condition or is intermittent)
 
       this.setState({
@@ -180,12 +215,12 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
   }, {
     key: "componentDidMount",
     value: function () {
-      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
-                _context2.next = 2;
+                _context3.next = 2;
                 return sniffUserBrowserExtensions({
                   extensions: ['grammarly'],
                   async: true,
@@ -193,14 +228,14 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
                 });
 
               case 2:
-                this.browserExtensions = _context2.sent;
+                this.browserExtensions = _context3.sent;
 
               case 3:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
 
       function componentDidMount() {

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

@@ -22,6 +22,7 @@ import { EditorState, Selection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { intlShape } from 'react-intl';
 import { browser, getAnalyticsEventSeverity, getResponseEndTime, measureRender, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common';
+import { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { processRawValue } from '../utils';
 import { RenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
@@ -111,7 +112,12 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       return FULL_WIDTH_MODE.FIXED_WIDTH;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "reconfigureState", function (props) {
+    _defineProperty(_assertThisInitialized(_this), "resetEditorState", function (_ref) {
+      var _this$props$editorPro, _this$props$editorPro2;
+
+      var doc = _ref.doc,
+          shouldScrollToBottom = _ref.shouldScrollToBottom;
+
       if (!_this.view) {
         return;
       } // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
@@ -119,9 +125,51 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       // nodes that haven't been re-rendered to the document yet.
 
 
+      _this.blur();
+
+      _this.featureFlags = createFeatureFlagsFromProps(_this.props.editorProps);
+      _this.editorState = _this.createEditorState({
+        props: _this.props,
+        context: _this.context,
+        doc: doc,
+        resetting: true,
+        selectionAtStart: !shouldScrollToBottom
+      });
+
+      _this.view.updateState(_this.editorState);
+
+      (_this$props$editorPro = (_this$props$editorPro2 = _this.props.editorProps).onChange) === null || _this$props$editorPro === void 0 ? void 0 : _this$props$editorPro.call(_this$props$editorPro2, _this.view, {
+        source: 'local'
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "blur", function () {
+      if (!_this.view) {
+        return;
+      }
+
       if (_this.view.dom instanceof HTMLElement && _this.view.hasFocus()) {
         _this.view.dom.blur();
+      } // The selectionToDOM method uses the document selection to determine currently selected node
+      // We need to mimic blurring this as it seems doing the above is not enough.
+
+
+      var sel = _this.view.root.getSelection();
+
+      if (sel) {
+        sel.removeAllRanges();
       }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "reconfigureState", function (props) {
+      if (!_this.view) {
+        return;
+      } // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
+      // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
+      // nodes that haven't been re-rendered to the document yet.
+
+
+      _this.blur();
 
       _this.config = processPluginsList(_this.getPlugins(props.editorProps, _this.props.editorProps, _this.props.createAnalyticsEvent));
       var state = _this.editorState;
@@ -162,7 +210,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "createEditorState", function (options) {
-      if (_this.view) {
+      if (_this.view && !options.resetting) {
         /**
          * There's presently a number of issues with changing the schema of a
          * editor inflight. A significant issue is that we lose the ability
@@ -177,9 +225,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
       _this.config = processPluginsList(_this.getPlugins(options.props.editorProps, undefined, options.props.createAnalyticsEvent));
       var schema = createSchema(_this.config);
-      var _options$props$editor = options.props.editorProps,
-          contentTransformerProvider = _options$props$editor.contentTransformerProvider,
-          defaultValue = _options$props$editor.defaultValue;
+      var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
       var plugins = createPMPlugins({
         schema: schema,
         dispatch: _this.dispatch,
@@ -199,15 +245,14 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       _this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       var doc;
 
-      if (options.replaceDoc) {
-        doc = processRawValue(schema, defaultValue, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+      if (options.doc) {
+        doc = processRawValue(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
       }
 
       var selection;
 
       if (doc) {
-        // ED-4759: Don't set selection at end for full-page editor - should be at start.
-        selection = isFullPage(options.props.editorProps.appearance) ? Selection.atStart(doc) : Selection.atEnd(doc);
+        selection = options.selectionAtStart ? Selection.atStart(doc) : Selection.atEnd(doc);
       } // Workaround for ED-3507: When media node is the last element, scrollIntoView throws an error
 
 
@@ -220,11 +265,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onEditorViewStateUpdated", function (_ref) {
-      var originalTransaction = _ref.originalTransaction,
-          transactions = _ref.transactions,
-          oldEditorState = _ref.oldEditorState,
-          newEditorState = _ref.newEditorState;
+    _defineProperty(_assertThisInitialized(_this), "onEditorViewStateUpdated", function (_ref2) {
+      var originalTransaction = _ref2.originalTransaction,
+          transactions = _ref2.transactions,
+          oldEditorState = _ref2.oldEditorState,
+          newEditorState = _ref2.newEditorState;
       var trackinEnabled = _this.transactionTracking.enabled;
 
       _this.config.onEditorViewStateUpdatedCallbacks.forEach(function (entry) {
@@ -270,6 +315,13 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           stopMeasure = _this$transactionTrac.stopMeasure;
 
       startMeasure(EVENT_NAME_DISPATCH_TRANSACTION);
+
+      if (_this.transactionTracker.shouldTrackTransaction(_this.transactionTracking)) {
+        var _this$experienceStore;
+
+        (_this$experienceStore = _this.experienceStore) === null || _this$experienceStore === void 0 ? void 0 : _this$experienceStore.start(EditorExperience.interaction);
+      }
+
       var nodes = findChangedNodesFromTransaction(transaction);
       var changedNodesValid = validateNodes(nodes);
 
@@ -282,7 +334,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
             editorState = _this$view$state$appl.state,
             transactions = _this$view$state$appl.transactions;
 
-        stopMeasure(EVENT_NAME_STATE_APPLY);
+        stopMeasure(EVENT_NAME_STATE_APPLY, function (duration, startTime) {
+          var _this$experienceStore2;
+
+          (_this$experienceStore2 = _this.experienceStore) === null || _this$experienceStore2 === void 0 ? void 0 : _this$experienceStore2.mark(EditorExperience.interaction, 'stateApply', startTime + duration);
+        });
 
         _this.trackValidTransactions();
 
@@ -294,7 +350,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
         _this.view.updateState(editorState);
 
-        stopMeasure(EVENT_NAME_UPDATE_STATE);
+        stopMeasure(EVENT_NAME_UPDATE_STATE, function (duration, startTime) {
+          var _this$experienceStore3;
+
+          (_this$experienceStore3 = _this.experienceStore) === null || _this$experienceStore3 === void 0 ? void 0 : _this$experienceStore3.mark(EditorExperience.interaction, 'viewUpdateState', startTime + duration);
+        });
         startMeasure(EVENT_NAME_VIEW_STATE_UPDATED);
 
         _this.onEditorViewStateUpdated({
@@ -304,7 +364,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           newEditorState: editorState
         });
 
-        stopMeasure(EVENT_NAME_VIEW_STATE_UPDATED);
+        stopMeasure(EVENT_NAME_VIEW_STATE_UPDATED, function (duration, startTime) {
+          var _this$experienceStore4;
+
+          (_this$experienceStore4 = _this.experienceStore) === null || _this$experienceStore4 === void 0 ? void 0 : _this$experienceStore4.mark(EditorExperience.interaction, 'onEditorViewStateUpdated', startTime + duration);
+        });
 
         if (_this.props.editorProps.onChange && transaction.docChanged) {
           var source = transaction.getMeta('isRemote') ? 'remote' : 'local';
@@ -315,9 +379,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           });
 
           stopMeasure(EVENT_NAME_ON_CHANGE, function (duration, startTime) {
-            var _this$props$editorPro, _this$props$editorPro2;
+            var _this$experienceStore5, _this$props$editorPro3, _this$props$editorPro4;
+
+            (_this$experienceStore5 = _this.experienceStore) === null || _this$experienceStore5 === void 0 ? void 0 : _this$experienceStore5.mark(EditorExperience.interaction, 'onChange', startTime + duration);
 
-            if (((_this$props$editorPro = _this.props.editorProps.performanceTracking) === null || _this$props$editorPro === void 0 ? void 0 : (_this$props$editorPro2 = _this$props$editorPro.onChangeCallbackTracking) === null || _this$props$editorPro2 === void 0 ? void 0 : _this$props$editorPro2.enabled) !== true) {
+            if (((_this$props$editorPro3 = _this.props.editorProps.performanceTracking) === null || _this$props$editorPro3 === void 0 ? void 0 : (_this$props$editorPro4 = _this$props$editorPro3.onChangeCallbackTracking) === null || _this$props$editorPro4 === void 0 ? void 0 : _this$props$editorPro4.enabled) !== true) {
               return;
             }
 
@@ -334,7 +400,15 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         }
 
         _this.editorState = editorState;
+        stopMeasure(EVENT_NAME_DISPATCH_TRANSACTION, function (duration, startTime) {
+          var _this$experienceStore6, _this$experienceStore7;
+
+          (_this$experienceStore6 = _this.experienceStore) === null || _this$experienceStore6 === void 0 ? void 0 : _this$experienceStore6.mark(EditorExperience.interaction, 'dispatchTransaction', startTime + duration);
+          (_this$experienceStore7 = _this.experienceStore) === null || _this$experienceStore7 === void 0 ? void 0 : _this$experienceStore7.success(EditorExperience.interaction);
+        });
       } else {
+        var _this$experienceStore8;
+
         var invalidNodes = nodes.filter(function (node) {
           return !validNode(node);
         }).map(function (node) {
@@ -352,9 +426,12 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
             invalidNodes: invalidNodes
           }
         });
-      }
 
-      stopMeasure(EVENT_NAME_DISPATCH_TRANSACTION);
+        (_this$experienceStore8 = _this.experienceStore) === null || _this$experienceStore8 === void 0 ? void 0 : _this$experienceStore8.fail(EditorExperience.interaction, {
+          reason: 'invalid transaction',
+          invalidNodes: invalidNodes.toString()
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "getDirectEditorProps", function (state) {
@@ -380,14 +457,17 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "createEditorView", function (node) {
       measureRender(measurements.PROSEMIRROR_RENDERED, function (duration, startTime) {
-        var _this$props$editorPro3, _this$props$editorPro4, _proseMirrorRenderedT, _proseMirrorRenderedT2;
+        var _this$props$editorPro5, _this$props$editorPro6, _proseMirrorRenderedT, _proseMirrorRenderedT2;
 
-        var proseMirrorRenderedTracking = (_this$props$editorPro3 = _this.props.editorProps) === null || _this$props$editorPro3 === void 0 ? void 0 : (_this$props$editorPro4 = _this$props$editorPro3.performanceTracking) === null || _this$props$editorPro4 === void 0 ? void 0 : _this$props$editorPro4.proseMirrorRenderedTracking;
+        var proseMirrorRenderedTracking = (_this$props$editorPro5 = _this.props.editorProps) === null || _this$props$editorPro5 === void 0 ? void 0 : (_this$props$editorPro6 = _this$props$editorPro5.performanceTracking) === null || _this$props$editorPro6 === void 0 ? void 0 : _this$props$editorPro6.proseMirrorRenderedTracking;
         var forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined' && shouldForceTracking();
         _this.proseMirrorRenderedSeverity = !!forceSeverityTracking || proseMirrorRenderedTracking !== null && proseMirrorRenderedTracking !== void 0 && proseMirrorRenderedTracking.trackSeverity ? getAnalyticsEventSeverity(duration, (_proseMirrorRenderedT = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityNormalThreshold) !== null && _proseMirrorRenderedT !== void 0 ? _proseMirrorRenderedT : PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, (_proseMirrorRenderedT2 = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityDegradedThreshold) !== null && _proseMirrorRenderedT2 !== void 0 ? _proseMirrorRenderedT2 : PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD) : undefined;
 
         if (_this.view) {
-          var _getContextIdentifier;
+          var _getContextIdentifier, _this$experienceStore9, _this$experienceStore10;
+
+          var nodes = getNodesCount(_this.view.state.doc);
+          var ttfb = getResponseEndTime();
 
           _this.dispatchAnalyticsEvent({
             action: ACTION.PROSEMIRROR_RENDERED,
@@ -395,13 +475,19 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
             attributes: {
               duration: duration,
               startTime: startTime,
-              nodes: getNodesCount(_this.view.state.doc),
-              ttfb: getResponseEndTime(),
+              nodes: nodes,
+              ttfb: ttfb,
               severity: _this.proseMirrorRenderedSeverity,
               objectId: (_getContextIdentifier = getContextIdentifier(_this.editorState)) === null || _getContextIdentifier === void 0 ? void 0 : _getContextIdentifier.objectId
             },
             eventType: EVENT_TYPE.OPERATIONAL
           });
+
+          (_this$experienceStore9 = _this.experienceStore) === null || _this$experienceStore9 === void 0 ? void 0 : _this$experienceStore9.mark(EditorExperience.loadEditor, ACTION.PROSEMIRROR_RENDERED, startTime + duration);
+          (_this$experienceStore10 = _this.experienceStore) === null || _this$experienceStore10 === void 0 ? void 0 : _this$experienceStore10.addMetadata(EditorExperience.loadEditor, {
+            nodes: nodes,
+            ttfb: ttfb
+          });
         }
       }); // Creates the editor-view from this.editorState. If an editor has been mounted
       // previously, this will contain the previous state of the editor.
@@ -424,8 +510,27 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           transformer: _this.contentTransformer
         });
 
+        if (_this.featureFlags.ufo) {
+          _this.reliabilityInterval = window.setInterval(function () {
+            var reliabilityEvent = {
+              action: ACTION.UFO_SESSION_COMPLETE,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: {
+                interval: RELIABILITY_INTERVAL
+              },
+              eventType: EVENT_TYPE.OPERATIONAL
+            };
+
+            _this.dispatchAnalyticsEvent(reliabilityEvent);
+          }, RELIABILITY_INTERVAL);
+        }
+
         if (_this.props.editorProps.shouldFocus && view.props.editable && view.props.editable(view.state)) {
           _this.focusTimeoutId = handleEditorFocus(view);
+        }
+
+        if (_this.featureFlags.ufo) {
+          _this.experienceStore = ExperienceStore.getInstance(view);
         } // Force React to re-render so consumers get a reference to the editor view
 
 
@@ -493,10 +598,14 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
     _this.eventDispatcher.on(analyticsEventKey, _this.handleAnalyticsEvent);
 
+    _this.eventDispatcher.on('resetEditorState', _this.resetEditorState);
+
     _this.editorState = _this.createEditorState({
       props: _props,
       context: context,
-      replaceDoc: true
+      doc: _props.editorProps.defaultValue,
+      // ED-4759: Don't set selection at end for full-page editor - should be at start.
+      selectionAtStart: isFullPage(_props.editorProps.appearance)
     });
 
     _this.dispatchAnalyticsEvent({
@@ -517,9 +626,9 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     get: // ProseMirror is instantiated prior to the initial React render cycle,
     // so we allow transactions by default, to avoid discarding the initial one.
     function get() {
-      var _this$props$editorPro5, _this$props$editorPro6;
+      var _this$props$editorPro7, _this$props$editorPro8;
 
-      return (_this$props$editorPro5 = (_this$props$editorPro6 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro6 === void 0 ? void 0 : _this$props$editorPro6.transactionTracking) !== null && _this$props$editorPro5 !== void 0 ? _this$props$editorPro5 : {
+      return (_this$props$editorPro7 = (_this$props$editorPro8 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro8 === void 0 ? void 0 : _this$props$editorPro8.transactionTracking) !== null && _this$props$editorPro7 !== void 0 ? _this$props$editorPro7 : {
         enabled: false
       };
     }
@@ -612,6 +721,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       this.canDispatchTransactions = false;
       this.eventDispatcher.destroy();
       clearTimeout(this.focusTimeoutId);
+
+      if (this.reliabilityInterval) {
+        clearInterval(this.reliabilityInterval);
+      }
+
       this.pluginPerformanceObserver.disconnect();
 
       if (this.view) {
@@ -628,6 +742,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
 
       this.eventDispatcher.off(analyticsEventKey, this.handleAnalyticsEvent);
+      this.eventDispatcher.off('resetEditorState', this.resetEditorState);
     } // Helper to allow tests to inject plugins directly
 
   }, {
@@ -647,9 +762,9 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$editorPro7, _this$props$editorPro8;
+      var _this$props$editorPro9, _this$props$editorPro10;
 
-      var renderTracking = (_this$props$editorPro7 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro7 === void 0 ? void 0 : (_this$props$editorPro8 = _this$props$editorPro7.renderTracking) === null || _this$props$editorPro8 === void 0 ? void 0 : _this$props$editorPro8.reactEditorView;
+      var renderTracking = (_this$props$editorPro9 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro9 === void 0 ? void 0 : (_this$props$editorPro10 = _this$props$editorPro9.renderTracking) === null || _this$props$editorPro10 === void 0 ? void 0 : _this$props$editorPro10.reactEditorView;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
       return /*#__PURE__*/React.createElement(React.Fragment, null, renderTrackingEnabled && /*#__PURE__*/React.createElement(RenderTracking, {