@atlaskit/editor-core 150.0.1 → 151.1.0

package/dist/es2019/actions/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Node } from 'prosemirror-model';
-import { TextSelection, Selection } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
 import { toJSON } from '../utils';
 import { processRawValue, isEmptyDocument } from '../utils/document';
 import { getEditorValueWithMedia, __temporaryFixForConfigPanel } from '../utils/action';
@@ -171,35 +171,13 @@ export default class EditorActions {
       return false;
     }
 
-    const {
-      state
-    } = this.editorView;
-    const {
-      schema
-    } = state;
-    const content = processRawValue(schema, rawValue, undefined, undefined, this.contentTransformer, this.dispatchAnalyticsEvent);
-
-    if (!content) {
-      return false;
-    } // In case of replacing a whole document, we only need a content of a top level node e.g. document.
-
-
-    let tr = state.tr.replaceWith(0, state.doc.nodeSize - 2, content.content);
-
-    if (!shouldScrollToBottom && !tr.selectionSet) {
-      // Restore selection at start of document instead of the end.
-      tr.setSelection(Selection.atStart(tr.doc));
-    }
-
-    if (shouldScrollToBottom) {
-      tr = tr.scrollIntoView();
-    }
-
-    if (!shouldAddToHistory) {
-      tr.setMeta('addToHistory', false);
+    if (this.eventDispatcher) {
+      this.eventDispatcher.emit('resetEditorState', {
+        doc: rawValue,
+        shouldScrollToBottom
+      });
     }
 
-    this.editorView.dispatch(tr);
     return true;
   }
 

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

@@ -3,14 +3,20 @@ 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';
 import { getDocStructure } from '../utils/document-logger';
 import { WithEditorView } from './WithEditorView';
 export class ErrorBoundaryWithEditorView extends React.Component {
-  constructor(...args) {
-    super(...args);
+  // Memoizing this as react alternative suggestion of https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
+  get featureFlags() {
+    return this.getFeatureFlags(this.props.editorView);
+  }
+
+  constructor(props) {
+    super(props);
 
     _defineProperty(this, "browserExtensions", undefined);
 
@@ -26,60 +32,48 @@ export class ErrorBoundaryWithEditorView extends React.Component {
       return getFeatureFlags(editorView.state);
     }));
 
-    _defineProperty(this, "fireAnalytics", analyticsErrorPayload => {
+    _defineProperty(this, "sendErrorData", async analyticsErrorPayload => {
+      const product = await this.getProductName();
       const {
-        createAnalyticsEvent
-      } = this.props;
-      this.getProductName().then(product => {
-        if (createAnalyticsEvent) {
-          const {
-            error,
-            errorInfo,
-            errorStack
-          } = analyticsErrorPayload;
-          const sharedId = uuid();
-          const event = {
-            action: ACTION.EDITOR_CRASHED,
-            actionSubject: ACTION_SUBJECT.EDITOR,
-            eventType: EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              product,
-              browserInfo: window && window.navigator && window.navigator.userAgent ? window.navigator.userAgent : 'unknown',
-              error: error,
-              errorInfo,
-              errorId: sharedId,
-              browserExtensions: this.browserExtensions
-            }
-          }; // Add doc structure if the feature flag is on
-
-          if (this.featureFlags.errorBoundaryDocStructure && this.props.editorView) {
-            event.attributes.docStructure = getDocStructure(this.props.editorView.state.doc, {
-              compact: true
-            });
-          }
-
-          createAnalyticsEvent(event).fire(editorAnalyticsChannel);
-          createAnalyticsEvent({
-            action: ACTION.EDITOR_CRASHED_ADDITIONAL_INFORMATION,
-            actionSubject: ACTION_SUBJECT.EDITOR,
-            eventType: EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              errorStack,
-              errorId: sharedId
-            }
-          }).fire(editorAnalyticsChannel);
-        } else {
-          // eslint-disable-next-line no-console
-          console.error('Editor Error Boundary: Missing `createAnalyticsEvent` prop.', {
-            channel: editorAnalyticsChannel,
-            product,
-            error: analyticsErrorPayload
-          });
+        error,
+        errorInfo,
+        errorStack
+      } = analyticsErrorPayload;
+      const sharedId = uuid();
+      const attributes = {
+        product,
+        browserInfo: window && window.navigator && window.navigator.userAgent ? window.navigator.userAgent : 'unknown',
+        error: error,
+        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
+      });
+      this.fireAnalyticsEvent({
+        action: ACTION.EDITOR_CRASHED_ADDITIONAL_INFORMATION,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          errorStack,
+          errorId: sharedId
         }
-      }).catch(e => {
-        // eslint-disable-next-line no-console
-        console.error('Failed to resolve product name from contextIdentifierProvider.', e);
       });
+
+      if (this.featureFlags.ufo && this.props.editorView) {
+        var _this$experienceStore;
+
+        (_this$experienceStore = this.experienceStore) === null || _this$experienceStore === void 0 ? void 0 : _this$experienceStore.failAll({ ...this.getExperienceMetadata(attributes),
+          errorStack
+        });
+      }
     });
 
     _defineProperty(this, "getProductName", async () => {
@@ -97,20 +91,39 @@ export class ErrorBoundaryWithEditorView extends React.Component {
 
       return 'atlaskit';
     });
-  }
 
-  get featureFlags() {
-    return this.getFeatureFlags(this.props.editorView);
+    _defineProperty(this, "fireAnalyticsEvent", 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(this, "getExperienceMetadata", 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);
+    }
   }
 
   componentDidCatch(error, errorInfo) {
-    // Log the error
-    this.fireAnalytics({
+    this.sendErrorData({
       error: error.toString(),
       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({

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

@@ -1,4 +1,4 @@
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin } from '../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, helpDialogPlugin, imageUploadPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, listPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tablesPlugin, tasksAndDecisionsPlugin, textColorPlugin, cardPlugin, gridPlugin, statusPlugin, alignmentPlugin, indentationPlugin, analyticsPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, contextPanelPlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, codeBidiWarningPlugin } from '../plugins';
 import { isFullPage as fullPageCheck } from '../utils/is-full-page';
 import { GUTTER_SIZE_MOBILE_IN_PX } from '../plugins/base/pm-plugins/scroll-gutter';
 import { createFeatureFlagsFromProps } from '../plugins/feature-flags-context/feature-flags-from-props';
@@ -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
     }]);
   }
 
@@ -387,6 +389,10 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
     preset.add([viewUpdateSubscriptionPlugin]);
   }
 
+  if (featureFlags.codeBidiWarnings) {
+    preset.add(codeBidiWarningPlugin);
+  }
+
   const excludes = new Set();
 
   if (!isCodeBlockAllowed({