@atlaskit/editor-core 150.0.0 → 151.0.0

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

@@ -5,6 +5,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';
@@ -97,7 +98,12 @@ export default class ReactEditorView extends React.Component {
       return FULL_WIDTH_MODE.FIXED_WIDTH;
     });
 
-    _defineProperty(this, "reconfigureState", props => {
+    _defineProperty(this, "resetEditorState", ({
+      doc,
+      shouldScrollToBottom
+    }) => {
+      var _this$props$editorPro3, _this$props$editorPro4;
+
       if (!this.view) {
         return;
       } // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
@@ -105,10 +111,48 @@ export default class ReactEditorView extends 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$editorPro3 = (_this$props$editorPro4 = this.props.editorProps).onChange) === null || _this$props$editorPro3 === void 0 ? void 0 : _this$props$editorPro3.call(_this$props$editorPro4, this.view, {
+        source: 'local'
+      });
+    });
+
+    _defineProperty(this, "blur", () => {
+      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.
+
+
+      const sel = this.view.root.getSelection();
+
+      if (sel) {
+        sel.removeAllRanges();
       }
+    });
+
+    _defineProperty(this, "reconfigureState", 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));
       const state = this.editorState;
       const plugins = createPMPlugins({
@@ -145,7 +189,7 @@ export default class ReactEditorView extends React.Component {
     });
 
     _defineProperty(this, "createEditorState", 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
@@ -161,8 +205,7 @@ export default class ReactEditorView extends React.Component {
       this.config = processPluginsList(this.getPlugins(options.props.editorProps, undefined, options.props.createAnalyticsEvent));
       const schema = createSchema(this.config);
       const {
-        contentTransformerProvider,
-        defaultValue
+        contentTransformerProvider
       } = options.props.editorProps;
       const plugins = createPMPlugins({
         schema,
@@ -181,15 +224,14 @@ export default class ReactEditorView extends React.Component {
       this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       let 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);
       }
 
       let 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
 
 
@@ -254,6 +296,13 @@ export default class ReactEditorView extends React.Component {
         stopMeasure
       } = this.transactionTracker.getMeasureHelpers(this.transactionTracking);
       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);
+      }
+
       const nodes = findChangedNodesFromTransaction(transaction);
       const changedNodesValid = validateNodes(nodes);
 
@@ -265,7 +314,11 @@ export default class ReactEditorView extends React.Component {
           state: editorState,
           transactions
         } = this.view.state.applyTransaction(transaction);
-        stopMeasure(EVENT_NAME_STATE_APPLY);
+        stopMeasure(EVENT_NAME_STATE_APPLY, (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();
 
         if (editorState === oldEditorState) {
@@ -274,7 +327,11 @@ export default class ReactEditorView extends React.Component {
 
         startMeasure(EVENT_NAME_UPDATE_STATE);
         this.view.updateState(editorState);
-        stopMeasure(EVENT_NAME_UPDATE_STATE);
+        stopMeasure(EVENT_NAME_UPDATE_STATE, (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({
           originalTransaction: transaction,
@@ -282,7 +339,11 @@ export default class ReactEditorView extends React.Component {
           oldEditorState,
           newEditorState: editorState
         });
-        stopMeasure(EVENT_NAME_VIEW_STATE_UPDATED);
+        stopMeasure(EVENT_NAME_VIEW_STATE_UPDATED, (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) {
           const source = transaction.getMeta('isRemote') ? 'remote' : 'local';
@@ -291,9 +352,11 @@ export default class ReactEditorView extends React.Component {
             source
           });
           stopMeasure(EVENT_NAME_ON_CHANGE, (duration, startTime) => {
-            var _this$props$editorPro3, _this$props$editorPro4;
+            var _this$experienceStore5, _this$props$editorPro5, _this$props$editorPro6;
+
+            (_this$experienceStore5 = this.experienceStore) === null || _this$experienceStore5 === void 0 ? void 0 : _this$experienceStore5.mark(EditorExperience.interaction, 'onChange', startTime + duration);
 
-            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) {
+            if (((_this$props$editorPro5 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro5 === void 0 ? void 0 : (_this$props$editorPro6 = _this$props$editorPro5.onChangeCallbackTracking) === null || _this$props$editorPro6 === void 0 ? void 0 : _this$props$editorPro6.enabled) !== true) {
               return;
             }
 
@@ -310,7 +373,15 @@ export default class ReactEditorView extends React.Component {
         }
 
         this.editorState = editorState;
+        stopMeasure(EVENT_NAME_DISPATCH_TRANSACTION, (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;
+
         const invalidNodes = nodes.filter(node => !validNode(node)).map(node => getDocStructure(node, {
           compact: true
         }));
@@ -323,9 +394,11 @@ export default class ReactEditorView extends React.Component {
             invalidNodes
           }
         });
+        (_this$experienceStore8 = this.experienceStore) === null || _this$experienceStore8 === void 0 ? void 0 : _this$experienceStore8.fail(EditorExperience.interaction, {
+          reason: 'invalid transaction',
+          invalidNodes: invalidNodes.toString()
+        });
       }
-
-      stopMeasure(EVENT_NAME_DISPATCH_TRANSACTION);
     });
 
     _defineProperty(this, "getDirectEditorProps", state => {
@@ -349,28 +422,35 @@ export default class ReactEditorView extends React.Component {
 
     _defineProperty(this, "createEditorView", node => {
       measureRender(measurements.PROSEMIRROR_RENDERED, (duration, startTime) => {
-        var _this$props$editorPro5, _this$props$editorPro6, _proseMirrorRenderedT, _proseMirrorRenderedT2;
+        var _this$props$editorPro7, _this$props$editorPro8, _proseMirrorRenderedT, _proseMirrorRenderedT2;
 
-        const 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;
+        const proseMirrorRenderedTracking = (_this$props$editorPro7 = this.props.editorProps) === null || _this$props$editorPro7 === void 0 ? void 0 : (_this$props$editorPro8 = _this$props$editorPro7.performanceTracking) === null || _this$props$editorPro8 === void 0 ? void 0 : _this$props$editorPro8.proseMirrorRenderedTracking;
         const 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;
 
+          const nodes = getNodesCount(this.view.state.doc);
+          const ttfb = getResponseEndTime();
           this.dispatchAnalyticsEvent({
             action: ACTION.PROSEMIRROR_RENDERED,
             actionSubject: ACTION_SUBJECT.EDITOR,
             attributes: {
               duration,
               startTime,
-              nodes: getNodesCount(this.view.state.doc),
-              ttfb: getResponseEndTime(),
+              nodes,
+              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,
+            ttfb
+          });
         }
       }); // Creates the editor-view from this.editorState. If an editor has been mounted
       // previously, this will contain the previous state of the editor.
@@ -391,8 +471,26 @@ export default class ReactEditorView extends React.Component {
           transformer: this.contentTransformer
         });
 
+        if (this.featureFlags.ufo) {
+          this.reliabilityInterval = window.setInterval(() => {
+            const 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
 
 
@@ -447,10 +545,13 @@ export default class ReactEditorView extends React.Component {
 
 
     this.eventDispatcher.on(analyticsEventKey, this.handleAnalyticsEvent);
+    this.eventDispatcher.on('resetEditorState', this.resetEditorState);
     this.editorState = this.createEditorState({
       props: _props,
       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({
       action: ACTION.STARTED,
@@ -538,6 +639,11 @@ export default class ReactEditorView extends React.Component {
     this.canDispatchTransactions = false;
     this.eventDispatcher.destroy();
     clearTimeout(this.focusTimeoutId);
+
+    if (this.reliabilityInterval) {
+      clearInterval(this.reliabilityInterval);
+    }
+
     this.pluginPerformanceObserver.disconnect();
 
     if (this.view) {
@@ -554,6 +660,7 @@ export default class ReactEditorView extends React.Component {
 
 
     this.eventDispatcher.off(analyticsEventKey, this.handleAnalyticsEvent);
+    this.eventDispatcher.off('resetEditorState', this.resetEditorState);
   } // Helper to allow tests to inject plugins directly
 
 
@@ -571,9 +678,9 @@ export default class ReactEditorView extends React.Component {
   }
 
   render() {
-    var _this$props$editorPro7, _this$props$editorPro8;
+    var _this$props$editorPro9, _this$props$editorPro10;
 
-    const 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;
+    const 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;
     const renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
     const useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
     return /*#__PURE__*/React.createElement(React.Fragment, null, renderTrackingEnabled && /*#__PURE__*/React.createElement(RenderTracking, {

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

@@ -57,7 +57,8 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
       allowInlineCursorTarget: !isMobile,
       allowScrollGutter: getScrollGutterOptions(props),
       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: createFeatureFlagsFromProps(props).ufo
     },
     blockType: {
       lastNodeMustBeParagraph: appearance === 'comment' || appearance === 'chromeless',
@@ -271,7 +272,8 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
   if (props.allowPanel) {
     preset.add([panelPlugin, {
       useLongPressSelection: false,
-      UNSAFE_allowCustomPanel: props.allowPanel.UNSAFE_allowCustomPanel
+      UNSAFE_allowCustomPanel: props.allowPanel.UNSAFE_allowCustomPanel,
+      UNSAFE_allowCustomPanelEdit: props.allowPanel.UNSAFE_allowCustomPanelEdit
     }]);
   }
 

package/dist/es2019/editor.js

@@ -7,6 +7,7 @@ import memoizeOne from 'memoize-one';
 import uuid from 'uuid/v4';
 import { name, version } from './version-wrapper';
 import { ProviderFactory, BaseTheme, getAnalyticsAppearance, WithCreateAnalyticsEvent, startMeasure, stopMeasure, clearMeasure, measureTTI, getTTISeverity, combineExtensionProviders, WidthProvider } from '@atlaskit/editor-common';
+import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricEditorAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import { getUiComponent } from './create-editor';
@@ -27,6 +28,8 @@ const WidthProviderFullHeight = styled(WidthProvider)`
 `;
 export default class Editor extends React.Component {
   constructor(props, context) {
+    var _props$performanceTra, _props$performanceTra2, _props$featureFlags;
+
     super(props);
 
     _defineProperty(this, "prepareExtensionProvider", memoizeOne(extensionProviders => {
@@ -64,11 +67,16 @@ export default class Editor extends React.Component {
     this.editorActions = (context || {}).editorActions || new EditorActions();
     this.trackEditorActions(this.editorActions, props);
     this.editorSessionId = uuid();
+    this.startTime = performance.now();
     startMeasure(measurements.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;
+
       measureTTI((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;
 
           const ttiEvent = {
@@ -101,7 +109,14 @@ export default class Editor extends React.Component {
 
           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(EditorExperience.loadEditor, ACTION.EDITOR_TTI, tti);
+          (_this$experienceStore2 = this.experienceStore) === null || _this$experienceStore2 === void 0 ? void 0 : _this$experienceStore2.success(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);
     }
 
     const _extensionProvider = this.prepareExtensionProvider(props.extensionProviders);
@@ -139,18 +154,26 @@ export default class Editor extends React.Component {
   }
 
   componentWillUnmount() {
-    var _this$props, _this$props$performan, _this$props$performan2;
+    var _this$props, _this$props$performan, _this$props$performan2, _this$props$featureFl;
 
     this.unregisterEditorFromActions();
     this.providerFactory.destroy();
     clearMeasure(measurements.EDITOR_MOUNTED);
     ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : (_this$props$performan = _this$props.performanceTracking) === null || _this$props$performan === void 0 ? void 0 : (_this$props$performan2 = _this$props$performan.onEditorReadyCallbackTracking) === null || _this$props$performan2 === void 0 ? void 0 : _this$props$performan2.enabled) && clearMeasure(measurements.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'
+      });
+    }
   }
 
   trackEditorActions(editorActions, props) {
-    var _props$performanceTra, _props$performanceTra2;
+    var _props$performanceTra9, _props$performanceTra10;
 
-    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) {
       const DEFAULT_SAMPLING_RATE = 100;
       const getValue = editorActions.getValue.bind(editorActions);
 
@@ -174,11 +197,11 @@ export default class Editor extends React.Component {
       if (!getValueTracked) {
         const getValueWithTracking = async () => {
           try {
-            var _props$performanceTra3, _props$performanceTra4, _props$performanceTra5;
+            var _props$performanceTra11, _props$performanceTra12, _props$performanceTra13;
 
             const value = await getValue();
 
-            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)) {
               this.handleAnalyticsEvent({
                 payload: {
                   action: ACTION.EDITOR_CONTENT_RETRIEVAL_PERFORMED,
@@ -195,10 +218,10 @@ export default class Editor extends React.Component {
             samplingCounters.success++;
             return value;
           } catch (err) {
-            var _props$performanceTra6, _props$performanceTra7, _props$performanceTra8;
+            var _props$performanceTra14, _props$performanceTra15, _props$performanceTra16;
 
-            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)) {
-              var _props$performanceTra9, _props$performanceTra10;
+            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)) {
+              var _props$performanceTra17, _props$performanceTra18;
 
               this.handleAnalyticsEvent({
                 payload: {
@@ -207,7 +230,7 @@ export default class Editor extends React.Component {
                   attributes: {
                     success: false,
                     errorInfo: err.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 ? err.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 ? err.stack : undefined
                   },
                   eventType: EVENT_TYPE.OPERATIONAL
                 }
@@ -229,38 +252,54 @@ export default class Editor extends React.Component {
   }
 
   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 = ExperienceStore.getInstance(instance.view);
+      this.experienceStore.start(EditorExperience.loadEditor, this.startTime);
+    }
+
     if (this.props.onEditorReady) {
-      var _this$props2, _this$props2$performa, _this$props2$performa2, _this$props3, _this$props3$performa, _this$props3$performa2;
+      var _this$props2, _this$props2$performa, _this$props2$performa2, _this$props$featureFl3;
 
-      ((_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) && startMeasure(measurements.ON_EDITOR_READY_CALLBACK);
+      const measureEditorReady = ((_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) || ((_this$props$featureFl3 = this.props.featureFlags) === null || _this$props$featureFl3 === void 0 ? void 0 : _this$props$featureFl3.ufo);
+      measureEditorReady && startMeasure(measurements.ON_EDITOR_READY_CALLBACK);
       this.props.onEditorReady(this.editorActions);
-      ((_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) && stopMeasure(measurements.ON_EDITOR_READY_CALLBACK, this.sendDurationAnalytics(ACTION.ON_EDITOR_READY_CALLBACK));
+      measureEditorReady && stopMeasure(measurements.ON_EDITOR_READY_CALLBACK, this.sendDurationAnalytics(ACTION.ON_EDITOR_READY_CALLBACK));
     }
   }
 
   sendDurationAnalytics(action) {
-    return (duration, startTime) => {
+    return async (duration, startTime) => {
+      var _this$props$featureFl4;
+
+      const contextIdentifier = await this.props.contextIdentifierProvider;
+      const objectId = contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId;
+
       if (this.createAnalyticsEvent) {
-        const fireMounted = objectId => {
-          fireAnalyticsEvent(this.createAnalyticsEvent)({
-            payload: {
-              action,
-              actionSubject: ACTION_SUBJECT.EDITOR,
-              attributes: {
-                duration,
-                startTime,
-                objectId
-              },
-              eventType: EVENT_TYPE.OPERATIONAL
-            }
-          });
-        };
+        fireAnalyticsEvent(this.createAnalyticsEvent)({
+          payload: {
+            action,
+            actionSubject: ACTION_SUBJECT.EDITOR,
+            attributes: {
+              duration,
+              startTime,
+              objectId
+            },
+            eventType: EVENT_TYPE.OPERATIONAL
+          }
+        });
+      }
+
+      if ((_this$props$featureFl4 = this.props.featureFlags) !== null && _this$props$featureFl4 !== void 0 && _this$props$featureFl4.ufo) {
+        var _this$experienceStore4, _this$experienceStore5;
 
-        Promise.resolve(this.props.contextIdentifierProvider).then(p => {
-          fireMounted(p === null || p === void 0 ? void 0 : p.objectId);
-        }, fireMounted);
+        (_this$experienceStore4 = this.experienceStore) === null || _this$experienceStore4 === void 0 ? void 0 : _this$experienceStore4.mark(EditorExperience.loadEditor, action, startTime + duration);
+        (_this$experienceStore5 = this.experienceStore) === null || _this$experienceStore5 === void 0 ? void 0 : _this$experienceStore5.addMetadata(EditorExperience.loadEditor, {
+          objectId
+        });
       }
     };
   }
@@ -417,7 +456,7 @@ export default class Editor extends React.Component {
             config,
             dispatchAnalyticsEvent
           }) => {
-            var _this$props$featureFl, _this$props$featureFl2;
+            var _this$props$featureFl5, _this$props$featureFl6;
 
             return /*#__PURE__*/React.createElement(BaseTheme, {
               dynamicTextSizing: this.props.allowDynamicTextSizing && this.props.appearance !== 'full-width',
@@ -449,7 +488,7 @@ export default class Editor extends React.Component {
               collabEdit: this.props.collabEdit,
               allowAnnotation: !!this.props.annotationProviders,
               persistScrollGutter: this.props.persistScrollGutter,
-              enableToolbarMinWidth: ((_this$props$featureFl = this.props.featureFlags) === null || _this$props$featureFl === void 0 ? void 0 : _this$props$featureFl.toolbarMinWidthOverflow) != null ? !!((_this$props$featureFl2 = this.props.featureFlags) !== null && _this$props$featureFl2 !== void 0 && _this$props$featureFl2.toolbarMinWidthOverflow) : this.props.UNSAFE_allowUndoRedoButtons,
+              enableToolbarMinWidth: ((_this$props$featureFl5 = this.props.featureFlags) === null || _this$props$featureFl5 === void 0 ? void 0 : _this$props$featureFl5.toolbarMinWidthOverflow) != null ? !!((_this$props$featureFl6 = this.props.featureFlags) !== null && _this$props$featureFl6 !== void 0 && _this$props$featureFl6.toolbarMinWidthOverflow) : this.props.UNSAFE_allowUndoRedoButtons,
               useStickyToolbar: this.props.useStickyToolbar,
               featureFlags: featureFlags
             }));

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

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

package/dist/es2019/plugins/analytics/types/enums.js

@@ -94,6 +94,7 @@ export let ACTION;
   ACTION["ON_EDITOR_READY_CALLBACK"] = "onEditorReadyCallback";
   ACTION["ON_CHANGE_CALLBACK"] = "onChangeCalled";
   ACTION["REMOVE_ICON"] = "removedIcon";
+  ACTION["UFO_SESSION_COMPLETE"] = "ufoSessionComplete";
 })(ACTION || (ACTION = {}));
 
 export let INPUT_METHOD;
@@ -234,8 +235,9 @@ export let ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["LINK"] = "link";
   ACTION_SUBJECT_ID["LINK_PREVIEW"] = "linkPreview";
   ACTION_SUBJECT_ID["MEDIA"] = "media";
-  ACTION_SUBJECT_ID["MEDIA_SINGLE"] = "mediaSingle";
   ACTION_SUBJECT_ID["MEDIA_GROUP"] = "mediaGroup";
+  ACTION_SUBJECT_ID["MEDIA_INLINE"] = "mediaInline";
+  ACTION_SUBJECT_ID["MEDIA_SINGLE"] = "mediaSingle";
   ACTION_SUBJECT_ID["MEDIA_LINK"] = "mediaLink";
   ACTION_SUBJECT_ID["MENTION"] = "mention";
   ACTION_SUBJECT_ID["NESTED_EXPAND"] = "nestedExpand";

package/dist/es2019/plugins/base/index.js

@@ -43,10 +43,11 @@ const basePlugin = options => ({
     }, {
       name: 'frozenEditor',
       plugin: ({
-        dispatchAnalyticsEvent,
-        providerFactory
+        dispatchAnalyticsEvent
       }) => {
-        return options && options.inputTracking && options.inputTracking.enabled ? frozenEditor(dispatchAnalyticsEvent, options.inputTracking, options.browserFreezeTracking) : undefined;
+        var _options$inputTrackin;
+
+        return options !== null && options !== void 0 && (_options$inputTrackin = options.inputTracking) !== null && _options$inputTrackin !== void 0 && _options$inputTrackin.enabled || options !== null && options !== void 0 && options.ufo ? frozenEditor(dispatchAnalyticsEvent, options.inputTracking, options.browserFreezeTracking, options.ufo) : undefined;
       }
     }, {
       name: 'decorationPlugin',