@atlaskit/editor-core 150.0.0 → 151.0.0

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

@@ -38,6 +38,8 @@ var _reactIntl = require("react-intl");
 
 var _editorCommon = require("@atlaskit/editor-common");
 
+var _ufo = require("@atlaskit/editor-common/ufo");
+
 var _eventDispatcher = require("../event-dispatcher");
 
 var _utils = require("../utils");
@@ -148,7 +150,12 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
       return _analytics.FULL_WIDTH_MODE.FIXED_WIDTH;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "reconfigureState", function (props) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
@@ -156,9 +163,49 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       // nodes that haven't been re-rendered to the document yet.
 
 
+      _this.blur();
+
+      _this.featureFlags = (0, _featureFlagsFromProps.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'
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
       }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _createEditor.processPluginsList)(_this.getPlugins(props.editorProps, _this.props.editorProps, _this.props.createAnalyticsEvent));
       var state = _this.editorState;
@@ -197,7 +244,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       (0, _analytics.fireAnalyticsEvent)(_this.props.createAnalyticsEvent)(payload);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
@@ -212,9 +259,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
       _this.config = (0, _createEditor.processPluginsList)(_this.getPlugins(options.props.editorProps, undefined, options.props.createAnalyticsEvent));
       var schema = (0, _createSchema.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 = (0, _createEditor.createPMPlugins)({
         schema: schema,
         dispatch: _this.dispatch,
@@ -234,15 +279,14 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       _this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       var doc;
 
-      if (options.replaceDoc) {
-        doc = (0, _utils.processRawValue)(schema, defaultValue, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+      if (options.doc) {
+        doc = (0, _utils.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 = (0, _isFullPage.isFullPage)(options.props.editorProps.appearance) ? _prosemirrorState.Selection.atStart(doc) : _prosemirrorState.Selection.atEnd(doc);
+        selection = options.selectionAtStart ? _prosemirrorState.Selection.atStart(doc) : _prosemirrorState.Selection.atEnd(doc);
       } // Workaround for ED-3507: When media node is the last element, scrollIntoView throws an error
 
 
@@ -254,11 +298,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         selection: patchedSelection
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEditorViewStateUpdated", function (_ref) {
-      var originalTransaction = _ref.originalTransaction,
-          transactions = _ref.transactions,
-          oldEditorState = _ref.oldEditorState,
-          newEditorState = _ref.newEditorState;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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) {
@@ -303,6 +347,13 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           stopMeasure = _this$transactionTrac.stopMeasure;
 
       startMeasure(_trackTransactions.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(_ufo.EditorExperience.interaction);
+      }
+
       var nodes = (0, _nodes.findChangedNodesFromTransaction)(transaction);
       var changedNodesValid = (0, _nodes.validateNodes)(nodes);
 
@@ -315,7 +366,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
             editorState = _this$view$state$appl.state,
             transactions = _this$view$state$appl.transactions;
 
-        stopMeasure(_trackTransactions.EVENT_NAME_STATE_APPLY);
+        stopMeasure(_trackTransactions.EVENT_NAME_STATE_APPLY, function (duration, startTime) {
+          var _this$experienceStore2;
+
+          (_this$experienceStore2 = _this.experienceStore) === null || _this$experienceStore2 === void 0 ? void 0 : _this$experienceStore2.mark(_ufo.EditorExperience.interaction, 'stateApply', startTime + duration);
+        });
 
         _this.trackValidTransactions();
 
@@ -327,7 +382,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
         _this.view.updateState(editorState);
 
-        stopMeasure(_trackTransactions.EVENT_NAME_UPDATE_STATE);
+        stopMeasure(_trackTransactions.EVENT_NAME_UPDATE_STATE, function (duration, startTime) {
+          var _this$experienceStore3;
+
+          (_this$experienceStore3 = _this.experienceStore) === null || _this$experienceStore3 === void 0 ? void 0 : _this$experienceStore3.mark(_ufo.EditorExperience.interaction, 'viewUpdateState', startTime + duration);
+        });
         startMeasure(_trackTransactions.EVENT_NAME_VIEW_STATE_UPDATED);
 
         _this.onEditorViewStateUpdated({
@@ -337,7 +396,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           newEditorState: editorState
         });
 
-        stopMeasure(_trackTransactions.EVENT_NAME_VIEW_STATE_UPDATED);
+        stopMeasure(_trackTransactions.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(_ufo.EditorExperience.interaction, 'onEditorViewStateUpdated', startTime + duration);
+        });
 
         if (_this.props.editorProps.onChange && transaction.docChanged) {
           var source = transaction.getMeta('isRemote') ? 'remote' : 'local';
@@ -348,9 +411,11 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           });
 
           stopMeasure(_trackTransactions.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(_ufo.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;
             }
 
@@ -367,7 +432,15 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         }
 
         _this.editorState = editorState;
+        stopMeasure(_trackTransactions.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(_ufo.EditorExperience.interaction, 'dispatchTransaction', startTime + duration);
+          (_this$experienceStore7 = _this.experienceStore) === null || _this$experienceStore7 === void 0 ? void 0 : _this$experienceStore7.success(_ufo.EditorExperience.interaction);
+        });
       } else {
+        var _this$experienceStore8;
+
         var invalidNodes = nodes.filter(function (node) {
           return !(0, _nodes.validNode)(node);
         }).map(function (node) {
@@ -385,9 +458,12 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
             invalidNodes: invalidNodes
           }
         });
-      }
 
-      stopMeasure(_trackTransactions.EVENT_NAME_DISPATCH_TRANSACTION);
+        (_this$experienceStore8 = _this.experienceStore) === null || _this$experienceStore8 === void 0 ? void 0 : _this$experienceStore8.fail(_ufo.EditorExperience.interaction, {
+          reason: 'invalid transaction',
+          invalidNodes: invalidNodes.toString()
+        });
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDirectEditorProps", function (state) {
       return {
@@ -411,14 +487,17 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createEditorView", function (node) {
       (0, _editorCommon.measureRender)(_measureEnum.default.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' && (0, _editorCommon.shouldForceTracking)();
         _this.proseMirrorRenderedSeverity = !!forceSeverityTracking || proseMirrorRenderedTracking !== null && proseMirrorRenderedTracking !== void 0 && proseMirrorRenderedTracking.trackSeverity ? (0, _editorCommon.getAnalyticsEventSeverity)(duration, (_proseMirrorRenderedT = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityNormalThreshold) !== null && _proseMirrorRenderedT !== void 0 ? _proseMirrorRenderedT : _consts.PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, (_proseMirrorRenderedT2 = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityDegradedThreshold) !== null && _proseMirrorRenderedT2 !== void 0 ? _proseMirrorRenderedT2 : _consts.PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD) : undefined;
 
         if (_this.view) {
-          var _getContextIdentifier;
+          var _getContextIdentifier, _this$experienceStore9, _this$experienceStore10;
+
+          var nodes = (0, _document.getNodesCount)(_this.view.state.doc);
+          var ttfb = (0, _editorCommon.getResponseEndTime)();
 
           _this.dispatchAnalyticsEvent({
             action: _analytics.ACTION.PROSEMIRROR_RENDERED,
@@ -426,13 +505,19 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
             attributes: {
               duration: duration,
               startTime: startTime,
-              nodes: (0, _document.getNodesCount)(_this.view.state.doc),
-              ttfb: (0, _editorCommon.getResponseEndTime)(),
+              nodes: nodes,
+              ttfb: ttfb,
               severity: _this.proseMirrorRenderedSeverity,
               objectId: (_getContextIdentifier = (0, _contextIdentifier.getContextIdentifier)(_this.editorState)) === null || _getContextIdentifier === void 0 ? void 0 : _getContextIdentifier.objectId
             },
             eventType: _analytics.EVENT_TYPE.OPERATIONAL
           });
+
+          (_this$experienceStore9 = _this.experienceStore) === null || _this$experienceStore9 === void 0 ? void 0 : _this$experienceStore9.mark(_ufo.EditorExperience.loadEditor, _analytics.ACTION.PROSEMIRROR_RENDERED, startTime + duration);
+          (_this$experienceStore10 = _this.experienceStore) === null || _this$experienceStore10 === void 0 ? void 0 : _this$experienceStore10.addMetadata(_ufo.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.
@@ -454,8 +539,27 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
           transformer: _this.contentTransformer
         });
 
+        if (_this.featureFlags.ufo) {
+          _this.reliabilityInterval = window.setInterval(function () {
+            var reliabilityEvent = {
+              action: _analytics.ACTION.UFO_SESSION_COMPLETE,
+              actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+              attributes: {
+                interval: _ufo.RELIABILITY_INTERVAL
+              },
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
+            };
+
+            _this.dispatchAnalyticsEvent(reliabilityEvent);
+          }, _ufo.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 = _ufo.ExperienceStore.getInstance(view);
         } // Force React to re-render so consumers get a reference to the editor view
 
 
@@ -520,10 +624,14 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
     _this.eventDispatcher.on(_editorCommon.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: (0, _isFullPage.isFullPage)(_props.editorProps.appearance)
     });
 
     _this.dispatchAnalyticsEvent({
@@ -544,9 +652,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
       };
     }
@@ -639,6 +747,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) {
@@ -655,6 +768,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
 
       this.eventDispatcher.off(_editorCommon.analyticsEventKey, this.handleAnalyticsEvent);
+      this.eventDispatcher.off('resetEditorState', this.resetEditorState);
     } // Helper to allow tests to inject plugins directly
 
   }, {
@@ -674,9 +788,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.default.createElement(_react.default.Fragment, null, renderTrackingEnabled && /*#__PURE__*/_react.default.createElement(_useComponentRendererTracking.RenderTracking, {

package/dist/cjs/create-editor/create-plugins-list.js

@@ -85,7 +85,8 @@ function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent) {
       allowInlineCursorTarget: !isMobile,
       allowScrollGutter: getScrollGutterOptions(props),
       inputTracking: inputTracking,
-      browserFreezeTracking: (_props$performanceTra2 = props.performanceTracking) === null || _props$performanceTra2 === void 0 ? void 0 : _props$performanceTra2.bFreezeTracking
+      browserFreezeTracking: (_props$performanceTra2 = props.performanceTracking) === null || _props$performanceTra2 === void 0 ? void 0 : _props$performanceTra2.bFreezeTracking,
+      ufo: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props).ufo
     },
     blockType: {
       lastNodeMustBeParagraph: appearance === 'comment' || appearance === 'chromeless',
@@ -296,7 +297,8 @@ function createPluginsList(props, prevProps, createAnalyticsEvent) {
   if (props.allowPanel) {
     preset.add([_plugins.panelPlugin, {
       useLongPressSelection: false,
-      UNSAFE_allowCustomPanel: props.allowPanel.UNSAFE_allowCustomPanel
+      UNSAFE_allowCustomPanel: props.allowPanel.UNSAFE_allowCustomPanel,
+      UNSAFE_allowCustomPanelEdit: props.allowPanel.UNSAFE_allowCustomPanelEdit
     }]);
   }
 

package/dist/cjs/editor.js

@@ -43,6 +43,8 @@ var _versionWrapper = require("./version-wrapper");
 
 var _editorCommon = require("@atlaskit/editor-common");
 
+var _ufo = require("@atlaskit/editor-common/ufo");
+
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
@@ -87,6 +89,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(Editor);
 
   function Editor(props, context) {
+    var _props$performanceTra, _props$performanceTra2, _props$featureFlags;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, Editor);
@@ -128,11 +132,16 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     _this.trackEditorActions(_this.editorActions, props);
 
     _this.editorSessionId = (0, _v.default)();
+    _this.startTime = performance.now();
     (0, _editorCommon.startMeasure)(_measureEnum.default.EDITOR_MOUNTED);
 
-    if (props.performanceTracking && props.performanceTracking.ttiTracking && props.performanceTracking.ttiTracking.enabled) {
+    if ((_props$performanceTra = props.performanceTracking) !== null && _props$performanceTra !== void 0 && (_props$performanceTra2 = _props$performanceTra.ttiTracking) !== null && _props$performanceTra2 !== void 0 && _props$performanceTra2.enabled || (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.ufo) {
+      var _props$performanceTra5, _props$performanceTra6, _props$performanceTra7, _props$performanceTra8;
+
       (0, _editorCommon.measureTTI)(function (tti, ttiFromInvocation, canceled) {
-        if (_this.createAnalyticsEvent) {
+        var _props$performanceTra3, _props$performanceTra4, _props$featureFlags2;
+
+        if ((_props$performanceTra3 = props.performanceTracking) !== null && _props$performanceTra3 !== void 0 && (_props$performanceTra4 = _props$performanceTra3.ttiTracking) !== null && _props$performanceTra4 !== void 0 && _props$performanceTra4.enabled && _this.createAnalyticsEvent) {
           var _ttiTracking;
 
           var ttiEvent = {
@@ -165,7 +174,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 
           (0, _analytics.fireAnalyticsEvent)(_this.createAnalyticsEvent)(ttiEvent);
         }
-      }, props.performanceTracking.ttiTracking.ttiIdleThreshold, props.performanceTracking.ttiTracking.ttiCancelTimeout);
+
+        if ((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.ufo) {
+          var _this$experienceStore, _this$experienceStore2;
+
+          (_this$experienceStore = _this.experienceStore) === null || _this$experienceStore === void 0 ? void 0 : _this$experienceStore.mark(_ufo.EditorExperience.loadEditor, _analytics.ACTION.EDITOR_TTI, tti);
+          (_this$experienceStore2 = _this.experienceStore) === null || _this$experienceStore2 === void 0 ? void 0 : _this$experienceStore2.success(_ufo.EditorExperience.loadEditor);
+        }
+      }, (_props$performanceTra5 = props.performanceTracking) === null || _props$performanceTra5 === void 0 ? void 0 : (_props$performanceTra6 = _props$performanceTra5.ttiTracking) === null || _props$performanceTra6 === void 0 ? void 0 : _props$performanceTra6.ttiIdleThreshold, (_props$performanceTra7 = props.performanceTracking) === null || _props$performanceTra7 === void 0 ? void 0 : (_props$performanceTra8 = _props$performanceTra7.ttiTracking) === null || _props$performanceTra8 === void 0 ? void 0 : _props$performanceTra8.ttiCancelTimeout);
     }
 
     var _extensionProvider = _this.prepareExtensionProvider(props.extensionProviders);
@@ -211,21 +227,29 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props2, _this$props2$performa, _this$props2$performa2;
+      var _this$props2, _this$props2$performa, _this$props2$performa2, _this$props$featureFl;
 
       this.unregisterEditorFromActions();
       this.providerFactory.destroy();
       (0, _editorCommon.clearMeasure)(_measureEnum.default.EDITOR_MOUNTED);
       ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$performa = _this$props2.performanceTracking) === null || _this$props2$performa === void 0 ? void 0 : (_this$props2$performa2 = _this$props2$performa.onEditorReadyCallbackTracking) === null || _this$props2$performa2 === void 0 ? void 0 : _this$props2$performa2.enabled) && (0, _editorCommon.clearMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK);
+
+      if ((_this$props$featureFl = this.props.featureFlags) !== null && _this$props$featureFl !== void 0 && _this$props$featureFl.ufo) {
+        var _this$experienceStore3;
+
+        (_this$experienceStore3 = this.experienceStore) === null || _this$experienceStore3 === void 0 ? void 0 : _this$experienceStore3.abortAll({
+          reason: 'editor component unmounted'
+        });
+      }
     }
   }, {
     key: "trackEditorActions",
     value: function trackEditorActions(editorActions, props) {
-      var _props$performanceTra,
-          _props$performanceTra2,
+      var _props$performanceTra9,
+          _props$performanceTra10,
           _this3 = this;
 
-      if (props !== null && props !== void 0 && (_props$performanceTra = props.performanceTracking) !== null && _props$performanceTra !== void 0 && (_props$performanceTra2 = _props$performanceTra.contentRetrievalTracking) !== null && _props$performanceTra2 !== void 0 && _props$performanceTra2.enabled) {
+      if (props !== null && props !== void 0 && (_props$performanceTra9 = props.performanceTracking) !== null && _props$performanceTra9 !== void 0 && (_props$performanceTra10 = _props$performanceTra9.contentRetrievalTracking) !== null && _props$performanceTra10 !== void 0 && _props$performanceTra10.enabled) {
         var DEFAULT_SAMPLING_RATE = 100;
         var getValue = editorActions.getValue.bind(editorActions);
 
@@ -246,7 +270,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         if (!getValueTracked) {
           var getValueWithTracking = /*#__PURE__*/function () {
             var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-              var _props$performanceTra3, _props$performanceTra4, _props$performanceTra5, value, _props$performanceTra6, _props$performanceTra7, _props$performanceTra8, _props$performanceTra9, _props$performanceTra10;
+              var _props$performanceTra11, _props$performanceTra12, _props$performanceTra13, value, _props$performanceTra14, _props$performanceTra15, _props$performanceTra16, _props$performanceTra17, _props$performanceTra18;
 
               return _regenerator.default.wrap(function _callee$(_context) {
                 while (1) {
@@ -259,7 +283,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                     case 3:
                       value = _context.sent;
 
-                      if (samplingCounters.success === ((_props$performanceTra3 = props === null || props === void 0 ? void 0 : (_props$performanceTra4 = props.performanceTracking) === null || _props$performanceTra4 === void 0 ? void 0 : (_props$performanceTra5 = _props$performanceTra4.contentRetrievalTracking) === null || _props$performanceTra5 === void 0 ? void 0 : _props$performanceTra5.successSamplingRate) !== null && _props$performanceTra3 !== void 0 ? _props$performanceTra3 : DEFAULT_SAMPLING_RATE)) {
+                      if (samplingCounters.success === ((_props$performanceTra11 = props === null || props === void 0 ? void 0 : (_props$performanceTra12 = props.performanceTracking) === null || _props$performanceTra12 === void 0 ? void 0 : (_props$performanceTra13 = _props$performanceTra12.contentRetrievalTracking) === null || _props$performanceTra13 === void 0 ? void 0 : _props$performanceTra13.successSamplingRate) !== null && _props$performanceTra11 !== void 0 ? _props$performanceTra11 : DEFAULT_SAMPLING_RATE)) {
                         _this3.handleAnalyticsEvent({
                           payload: {
                             action: _analytics.ACTION.EDITOR_CONTENT_RETRIEVAL_PERFORMED,
@@ -281,7 +305,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                       _context.prev = 9;
                       _context.t0 = _context["catch"](0);
 
-                      if (samplingCounters.failure === ((_props$performanceTra6 = props === null || props === void 0 ? void 0 : (_props$performanceTra7 = props.performanceTracking) === null || _props$performanceTra7 === void 0 ? void 0 : (_props$performanceTra8 = _props$performanceTra7.contentRetrievalTracking) === null || _props$performanceTra8 === void 0 ? void 0 : _props$performanceTra8.failureSamplingRate) !== null && _props$performanceTra6 !== void 0 ? _props$performanceTra6 : DEFAULT_SAMPLING_RATE)) {
+                      if (samplingCounters.failure === ((_props$performanceTra14 = props === null || props === void 0 ? void 0 : (_props$performanceTra15 = props.performanceTracking) === null || _props$performanceTra15 === void 0 ? void 0 : (_props$performanceTra16 = _props$performanceTra15.contentRetrievalTracking) === null || _props$performanceTra16 === void 0 ? void 0 : _props$performanceTra16.failureSamplingRate) !== null && _props$performanceTra14 !== void 0 ? _props$performanceTra14 : DEFAULT_SAMPLING_RATE)) {
                         _this3.handleAnalyticsEvent({
                           payload: {
                             action: _analytics.ACTION.EDITOR_CONTENT_RETRIEVAL_PERFORMED,
@@ -289,7 +313,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                             attributes: {
                               success: false,
                               errorInfo: _context.t0.toString(),
-                              errorStack: props !== null && props !== void 0 && (_props$performanceTra9 = props.performanceTracking) !== null && _props$performanceTra9 !== void 0 && (_props$performanceTra10 = _props$performanceTra9.contentRetrievalTracking) !== null && _props$performanceTra10 !== void 0 && _props$performanceTra10.reportErrorStack ? _context.t0.stack : undefined
+                              errorStack: props !== null && props !== void 0 && (_props$performanceTra17 = props.performanceTracking) !== null && _props$performanceTra17 !== void 0 && (_props$performanceTra18 = _props$performanceTra17.contentRetrievalTracking) !== null && _props$performanceTra18 !== void 0 && _props$performanceTra18.reportErrorStack ? _context.t0.stack : undefined
                             },
                             eventType: _analytics.EVENT_TYPE.OPERATIONAL
                           }
@@ -324,14 +348,22 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onEditorCreated",
     value: function onEditorCreated(instance) {
+      var _this$props$featureFl2;
+
       this.registerEditorForActions(instance.view, instance.eventDispatcher, instance.transformer);
 
+      if ((_this$props$featureFl2 = this.props.featureFlags) !== null && _this$props$featureFl2 !== void 0 && _this$props$featureFl2.ufo) {
+        this.experienceStore = _ufo.ExperienceStore.getInstance(instance.view);
+        this.experienceStore.start(_ufo.EditorExperience.loadEditor, this.startTime);
+      }
+
       if (this.props.onEditorReady) {
-        var _this$props3, _this$props3$performa, _this$props3$performa2, _this$props4, _this$props4$performa, _this$props4$performa2;
+        var _this$props3, _this$props3$performa, _this$props3$performa2, _this$props$featureFl3;
 
-        ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$performa = _this$props3.performanceTracking) === null || _this$props3$performa === void 0 ? void 0 : (_this$props3$performa2 = _this$props3$performa.onEditorReadyCallbackTracking) === null || _this$props3$performa2 === void 0 ? void 0 : _this$props3$performa2.enabled) && (0, _editorCommon.startMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK);
+        var measureEditorReady = ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$performa = _this$props3.performanceTracking) === null || _this$props3$performa === void 0 ? void 0 : (_this$props3$performa2 = _this$props3$performa.onEditorReadyCallbackTracking) === null || _this$props3$performa2 === void 0 ? void 0 : _this$props3$performa2.enabled) || ((_this$props$featureFl3 = this.props.featureFlags) === null || _this$props$featureFl3 === void 0 ? void 0 : _this$props$featureFl3.ufo);
+        measureEditorReady && (0, _editorCommon.startMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK);
         this.props.onEditorReady(this.editorActions);
-        ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$performa = _this$props4.performanceTracking) === null || _this$props4$performa === void 0 ? void 0 : (_this$props4$performa2 = _this$props4$performa.onEditorReadyCallbackTracking) === null || _this$props4$performa2 === void 0 ? void 0 : _this$props4$performa2.enabled) && (0, _editorCommon.stopMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK, this.sendDurationAnalytics(_analytics.ACTION.ON_EDITOR_READY_CALLBACK));
+        measureEditorReady && (0, _editorCommon.stopMeasure)(_measureEnum.default.ON_EDITOR_READY_CALLBACK, this.sendDurationAnalytics(_analytics.ACTION.ON_EDITOR_READY_CALLBACK));
       }
     }
   }, {
@@ -339,28 +371,57 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     value: function sendDurationAnalytics(action) {
       var _this4 = this;
 
-      return function (duration, startTime) {
-        if (_this4.createAnalyticsEvent) {
-          var fireMounted = function fireMounted(objectId) {
-            (0, _analytics.fireAnalyticsEvent)(_this4.createAnalyticsEvent)({
-              payload: {
-                action: action,
-                actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-                attributes: {
-                  duration: duration,
-                  startTime: startTime,
-                  objectId: objectId
-                },
-                eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      return /*#__PURE__*/function () {
+        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(duration, startTime) {
+          var _this4$props$featureF;
+
+          var contextIdentifier, objectId, _this4$experienceStor, _this4$experienceStor2;
+
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  _context2.next = 2;
+                  return _this4.props.contextIdentifierProvider;
+
+                case 2:
+                  contextIdentifier = _context2.sent;
+                  objectId = contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId;
+
+                  if (_this4.createAnalyticsEvent) {
+                    (0, _analytics.fireAnalyticsEvent)(_this4.createAnalyticsEvent)({
+                      payload: {
+                        action: action,
+                        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+                        attributes: {
+                          duration: duration,
+                          startTime: startTime,
+                          objectId: objectId
+                        },
+                        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+                      }
+                    });
+                  }
+
+                  if ((_this4$props$featureF = _this4.props.featureFlags) !== null && _this4$props$featureF !== void 0 && _this4$props$featureF.ufo) {
+                    (_this4$experienceStor = _this4.experienceStore) === null || _this4$experienceStor === void 0 ? void 0 : _this4$experienceStor.mark(_ufo.EditorExperience.loadEditor, action, startTime + duration);
+                    (_this4$experienceStor2 = _this4.experienceStore) === null || _this4$experienceStor2 === void 0 ? void 0 : _this4$experienceStor2.addMetadata(_ufo.EditorExperience.loadEditor, {
+                      objectId: objectId
+                    });
+                  }
+
+                case 6:
+                case "end":
+                  return _context2.stop();
               }
-            });
-          };
+            }
+          }, _callee2);
+        }));
 
-          Promise.resolve(_this4.props.contextIdentifierProvider).then(function (p) {
-            fireMounted(p === null || p === void 0 ? void 0 : p.objectId);
-          }, fireMounted);
-        }
-      };
+        return function (_x, _x2) {
+          return _ref2.apply(this, arguments);
+        };
+      }();
     }
   }, {
     key: "deprecationWarnings",
@@ -519,14 +580,14 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                 onEditorDestroyed: _this5.onEditorDestroyed,
                 allowAnalyticsGASV3: _this5.props.allowAnalyticsGASV3,
                 disabled: _this5.props.disabled,
-                render: function render(_ref2) {
+                render: function render(_ref3) {
                   var _this5$props$featureF, _this5$props$featureF2;
 
-                  var editor = _ref2.editor,
-                      view = _ref2.view,
-                      eventDispatcher = _ref2.eventDispatcher,
-                      config = _ref2.config,
-                      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
+                  var editor = _ref3.editor,
+                      view = _ref3.view,
+                      eventDispatcher = _ref3.eventDispatcher,
+                      config = _ref3.config,
+                      dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
                   return /*#__PURE__*/_react.default.createElement(_editorCommon.BaseTheme, {
                     dynamicTextSizing: _this5.props.allowDynamicTextSizing && _this5.props.appearance !== 'full-width',
                     baseFontSize: _this5.getBaseFontSize()

package/dist/cjs/labs/next/presets/cxhtml.js

@@ -46,7 +46,8 @@ function useCXHTMLPreset(_ref) {
     }
   }]);
   preset.add([_plugins.panelPlugin, {
-    UNSAFE_allowCustomPanel: true
+    UNSAFE_allowCustomPanel: true,
+    UNSAFE_allowCustomPanelEdit: true
   }]);
   preset.add(_plugins.listPlugin);
   preset.add(_plugins.textColorPlugin);