@atlaskit/editor-core 201.2.0 → 201.2.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-core
 
+## 201.2.1
+
+### Patch Changes
+
+- [#162942](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162942)
+  [`f7eedf81e6de4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f7eedf81e6de4) -
+  Refactor ReactEditorViewNext to avoid unnecessary call of functions on re-render and mark
+  `useNativeCollabPlugin` FeatureFlag as deprecated.
+- Updated dependencies
+
 ## 201.2.0
 
 ### Minor Changes

package/dist/cjs/composable-editor/core-editor.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CoreEditor = CoreEditor;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -26,13 +27,11 @@ var _useMeasureEditorMountTime = _interopRequireDefault(require("./hooks/useMeas
 var _useMemoEditorProps = _interopRequireDefault(require("./hooks/useMemoEditorProps"));
 var _useProviderFactory = _interopRequireDefault(require("./hooks/useProviderFactory"));
 var _sendDurationAnalytics = _interopRequireDefault(require("./utils/sendDurationAnalytics"));
-/**
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * Editor wrapper that deals with the lifecycle logic of the editor
  */
@@ -53,7 +52,10 @@ function Editor(passedProps) {
     (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)(data);
   }, [createAnalyticsEvent]);
   var getFeatureFlagsFromRef = (0, _react.useCallback)(function () {
-    return (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(propsRef.current);
+    var _propsRef$current$col, _propsRef$current$col2;
+    return _objectSpread(_objectSpread({}, (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(propsRef.current.featureFlags)), {}, {
+      useNativeCollabPlugin: Boolean(typeof ((_propsRef$current$col = propsRef.current.collabEdit) === null || _propsRef$current$col === void 0 ? void 0 : _propsRef$current$col.useNativePlugin) === 'boolean' ? !!((_propsRef$current$col2 = propsRef.current.collabEdit) !== null && _propsRef$current$col2 !== void 0 && _propsRef$current$col2.useNativePlugin) : false)
+    });
   }, []);
   var onEditorCreated = (0, _react.useCallback)(function (instance) {
     var _propsRef$current = propsRef.current,

package/dist/cjs/composable-editor/editor-internal.js

@@ -55,7 +55,7 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     // noop all analytic events, even if a handler is still passed.
     analyticsHandler: undefined
   });
-  var featureFlags = (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props);
+  var featureFlags = (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.featureFlags);
 
   // Render tracking is firing too many events in Jira so we are disabling them for now. See - https://product-fabric.atlassian.net/browse/ED-25616
   var renderTrackingEnabled = !(0, _platformFeatureFlags.fg)('platform_editor_disable_rerender_tracking_jira');

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

@@ -66,7 +66,6 @@ var useDispatchTransaction = exports.useDispatchTransaction = function useDispat
           });
         });
       }
-      return newEditorState;
     } else {
       var invalidNodes = nodes.filter(function (node) {
         return !(0, _validateNodes.validNode)(node);

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

@@ -8,7 +8,7 @@ var _react = require("react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _countNodes = require("@atlaskit/editor-common/count-nodes");
 var _pluginPerformanceObserver = require("../../utils/performance/plugin-performance-observer");
-var usePluginPerformanceObserver = exports.usePluginPerformanceObserver = function usePluginPerformanceObserver(editorState, pluginInjectionAPI, dispatchAnalyticsEvent) {
+var usePluginPerformanceObserver = exports.usePluginPerformanceObserver = function usePluginPerformanceObserver(getEditorState, pluginInjectionAPI, dispatchAnalyticsEvent) {
   var onPluginObservation = (0, _react.useCallback)(function (report) {
     var _pluginInjectionAPI$c;
     dispatchAnalyticsEvent({
@@ -22,24 +22,25 @@ var usePluginPerformanceObserver = exports.usePluginPerformanceObserver = functi
     });
   }, [dispatchAnalyticsEvent, pluginInjectionAPI]);
   var getPluginNames = (0, _react.useCallback)(function () {
-    var _editorState$current;
+    var _getEditorState;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (_editorState$current = editorState.current) === null || _editorState$current === void 0 ? void 0 : _editorState$current.plugins.map(function (p) {
+    return (_getEditorState = getEditorState()) === null || _getEditorState === void 0 ? void 0 : _getEditorState.plugins.map(function (p) {
       return p.key;
     });
-  }, [editorState]);
+  }, [getEditorState]);
   var pluginPerformanceObserver = (0, _react.useMemo)(function () {
+    var state = getEditorState();
     return new _pluginPerformanceObserver.PluginPerformanceObserver(function (report) {
       return onPluginObservation(report);
     }).withPlugins(function () {
       return getPluginNames();
     }).withNodeCounts(function () {
-      return editorState.current ? (0, _countNodes.countNodes)(editorState.current) : {
+      return state ? (0, _countNodes.countNodes)(state) : {
         nodeCount: {},
         extensionNodeCount: {}
       };
     });
-  }, [onPluginObservation, getPluginNames, editorState]);
+  }, [onPluginObservation, getPluginNames, getEditorState]);
   (0, _react.useLayoutEffect)(function () {
     return function () {
       pluginPerformanceObserver.disconnect();

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

@@ -137,7 +137,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
       // 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.featureFlags = (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(_this.props.editorProps);
+      _this.featureFlags = (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(_this.props.editorProps.featureFlags);
       _this.editorState = _this.createEditorState({
         props: _this.props,
         doc: doc,
@@ -477,7 +477,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
     }).withNodeCounts(function () {
       return _this.countNodes();
     });
-    _this.featureFlags = (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(_this.props.editorProps);
+    _this.featureFlags = (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(_this.props.editorProps.featureFlags);
     var featureFlagsEnabled = _this.featureFlags ? (0, _normalizeFeatureFlags.getEnabledFeatureFlagKeys)(_this.featureFlags) : [];
 
     // This needs to be before initialising editorState because
@@ -586,7 +586,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
         portalProviderAPI: props.portalProviderAPI,
         nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-        featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.editorProps),
+        featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.editorProps.featureFlags),
         getIntl: function getIntl() {
           return _this2.props.intl;
         }

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

@@ -50,7 +50,10 @@ function ReactEditorView(props) {
   var preset = props.preset,
     _props$editorProps = props.editorProps,
     nextAppearance = _props$editorProps.appearance,
-    disabled = _props$editorProps.disabled;
+    disabled = _props$editorProps.disabled,
+    editorPropFeatureFlags = _props$editorProps.featureFlags,
+    errorReporterHandler = _props$editorProps.errorReporterHandler,
+    defaultValue = _props$editorProps.defaultValue;
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     editorAPI = _useState2[0],
@@ -76,7 +79,9 @@ function ReactEditorView(props) {
     onEditorViewStateUpdatedCallbacks: []
   });
   var contentTransformer = (0, _react.useRef)(undefined);
-  var featureFlags = (0, _react.useRef)((0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.editorProps));
+  var featureFlags = (0, _react.useMemo)(function () {
+    return (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(editorPropFeatureFlags);
+  }, [editorPropFeatureFlags]);
   var getEditorState = (0, _react.useCallback)(function () {
     var _viewRef$current;
     return (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.state;
@@ -87,7 +92,9 @@ function ReactEditorView(props) {
   var dispatch = (0, _react.useMemo)(function () {
     return (0, _eventDispatcher.createDispatch)(eventDispatcher);
   }, [eventDispatcher]);
-  var errorReporter = (0, _react.useRef)((0, _createEditor.createErrorReporter)(props.editorProps.errorReporterHandler));
+  var errorReporter = (0, _react.useMemo)(function () {
+    return (0, _createEditor.createErrorReporter)(errorReporterHandler);
+  }, [errorReporterHandler]);
   var handleAnalyticsEvent = (0, _react.useCallback)(function (payload) {
     (0, _analytics.fireAnalyticsEvent)(props.createAnalyticsEvent)(payload);
   }, [props.createAnalyticsEvent]);
@@ -104,22 +111,6 @@ function ReactEditorView(props) {
   (0, _react.useLayoutEffect)(function () {
     setEditorAPI(pluginInjectionAPI.current.api());
   }, []);
-  var blur = (0, _react.useCallback)(function () {
-    if (!viewRef.current) {
-      return;
-    }
-    if (viewRef.current.dom instanceof HTMLElement && viewRef.current.hasFocus()) {
-      viewRef.current.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.
-    // @ts-expect-error
-    var sel = viewRef.current.root.getSelection();
-    if (sel) {
-      sel.removeAllRanges();
-    }
-  }, []);
   var createEditorState = (0, _react.useCallback)(function (options) {
     var _api$editorViewMode;
     var schema;
@@ -151,14 +142,14 @@ function ReactEditorView(props) {
     var plugins = (0, _createEditor.createPMPlugins)({
       schema: schema,
       dispatch: dispatch,
-      errorReporter: errorReporter.current,
+      errorReporter: errorReporter,
       editorConfig: config.current,
       eventDispatcher: eventDispatcher,
       providerFactory: options.props.providerFactory,
       portalProviderAPI: props.portalProviderAPI,
       nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      featureFlags: featureFlags.current,
+      featureFlags: featureFlags,
       getIntl: function getIntl() {
         return props.intl;
       }
@@ -200,7 +191,38 @@ function ReactEditorView(props) {
       doc: doc,
       selection: patchedSelection
     });
-  }, [props.intl, props.portalProviderAPI, props.nodeViewPortalProviderAPI, props.editorProps, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  }, [errorReporter, featureFlags, props.intl, props.portalProviderAPI, props.nodeViewPortalProviderAPI, props.editorProps, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  var initialEditorState = (0, _react.useMemo)(function () {
+    return createEditorState({
+      props: props,
+      doc: defaultValue,
+      // ED-4759: Don't set selection at end for full-page editor - should be at start.
+      selectionAtStart: (0, _isFullPage.isFullPage)(nextAppearance)
+    });
+  },
+  // This is only used for the initial state - afterwards we will have `viewRef` available for use
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var getCurrentEditorState = (0, _react.useCallback)(function () {
+    var _viewRef$current$stat, _viewRef$current2;
+    return (_viewRef$current$stat = (_viewRef$current2 = viewRef.current) === null || _viewRef$current2 === void 0 ? void 0 : _viewRef$current2.state) !== null && _viewRef$current$stat !== void 0 ? _viewRef$current$stat : initialEditorState;
+  }, [initialEditorState]);
+  var blur = (0, _react.useCallback)(function () {
+    if (!viewRef.current) {
+      return;
+    }
+    if (viewRef.current.dom instanceof HTMLElement && viewRef.current.hasFocus()) {
+      viewRef.current.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.
+    // @ts-expect-error
+    var sel = viewRef.current.root.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+  }, []);
   var resetEditorState = (0, _react.useCallback)(function (_ref) {
     var _props$editorProps$on, _props$editorProps2;
     var doc = _ref.doc,
@@ -213,14 +235,12 @@ function ReactEditorView(props) {
     // 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.
     blur();
-    featureFlags.current = (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.editorProps);
     var newEditorState = createEditorState({
       props: props,
       doc: doc,
       resetting: true,
       selectionAtStart: !shouldScrollToBottom
     });
-    editorState.current = newEditorState;
     viewRef.current.updateState(newEditorState);
     (_props$editorProps$on = (_props$editorProps2 = props.editorProps).onChange) === null || _props$editorProps$on === void 0 || _props$editorProps$on.call(_props$editorProps2, viewRef.current, {
       source: 'local'
@@ -235,7 +255,7 @@ function ReactEditorView(props) {
       actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
       attributes: {
         platform: _analytics.PLATFORMS.WEB,
-        featureFlags: featureFlags.current ? (0, _normalizeFeatureFlags.getEnabledFeatureFlagKeys)(featureFlags.current) : []
+        featureFlags: featureFlags ? (0, _normalizeFeatureFlags.getEnabledFeatureFlagKeys)(featureFlags) : []
       },
       eventType: _analytics.EVENT_TYPE.UI
     });
@@ -262,9 +282,9 @@ function ReactEditorView(props) {
       }
       if (viewRef.current) {
         // Destroy the state if the Editor is being unmounted
-        var _editorState = viewRef.current.state;
-        _editorState.plugins.forEach(function (plugin) {
-          var state = plugin.getState(_editorState);
+        var editorState = viewRef.current.state;
+        editorState.plugins.forEach(function (plugin) {
+          var state = plugin.getState(editorState);
           if (state && state.destroy) {
             state.destroy();
           }
@@ -285,18 +305,18 @@ function ReactEditorView(props) {
     blur();
     var editorPlugins = (0, _createPluginsList.default)(props.preset, props.editorProps, pluginInjectionAPI.current);
     config.current = (0, _createEditor.processPluginsList)(editorPlugins);
-    var state = editorState.current;
+    var state = viewRef.current.state;
     var plugins = (0, _createEditor.createPMPlugins)({
       schema: state.schema,
       dispatch: dispatch,
-      errorReporter: errorReporter.current,
+      errorReporter: errorReporter,
       editorConfig: config.current,
       eventDispatcher: eventDispatcher,
       providerFactory: props.providerFactory,
       portalProviderAPI: props.portalProviderAPI,
       nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.editorProps),
+      featureFlags: featureFlags,
       getIntl: function getIntl() {
         return props.intl;
       }
@@ -311,7 +331,7 @@ function ReactEditorView(props) {
     return viewRef.current.update(_objectSpread(_objectSpread({}, viewRef.current.props), {}, {
       state: newState
     }));
-  }, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  }, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch, errorReporter, featureFlags]);
   var onEditorViewUpdated = (0, _react.useCallback)(function (_ref2) {
     var _config$current;
     var originalTransaction = _ref2.originalTransaction,
@@ -353,16 +373,13 @@ function ReactEditorView(props) {
   });
   var getDirectEditorProps = (0, _react.useCallback)(function (state) {
     return {
-      state: state || editorState.current,
+      state: state !== null && state !== void 0 ? state : getCurrentEditorState(),
       dispatchTransaction: function dispatchTransaction(tr) {
         // Block stale transactions:
         // Prevent runtime exeptions from async transactions that would attempt to
         // update the DOM after React has unmounted the Editor.
         if (canDispatchTransactions.current) {
-          var newState = _dispatchTransaction(viewRef.current, tr);
-          if (newState) {
-            editorState.current = newState;
-          }
+          _dispatchTransaction(viewRef.current, tr);
         }
       },
       // Disables the contentEditable attribute of the editor if the editor is disabled
@@ -373,7 +390,7 @@ function ReactEditorView(props) {
         'data-gramm': 'false'
       }
     };
-  }, [_dispatchTransaction, disabled]);
+  }, [_dispatchTransaction, disabled, getCurrentEditorState]);
   var createEditorView = (0, _react.useCallback)(function (node) {
     (0, _measureRender.measureRender)(_measureEnum.default.PROSEMIRROR_RENDERED, function (_ref3) {
       var duration = _ref3.duration,
@@ -500,13 +517,7 @@ function ReactEditorView(props) {
     }
   }, [disabled, shouldFocus, previousDisabledState]);
   (0, _useFireFullWidthEvent.useFireFullWidthEvent)(nextAppearance, dispatchAnalyticsEvent);
-  var editorState = (0, _react.useRef)(createEditorState({
-    props: props,
-    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)
-  }));
-  (0, _usePluginPerformanceObserver.usePluginPerformanceObserver)(editorState, pluginInjectionAPI, dispatchAnalyticsEvent);
+  (0, _usePluginPerformanceObserver.usePluginPerformanceObserver)(getCurrentEditorState, pluginInjectionAPI, dispatchAnalyticsEvent);
   var editor = (0, _react.useMemo)(function () {
     return createEditor(props.editorProps.assistiveLabel, props.editorProps.assistiveDescribedBy);
   },

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

@@ -39,7 +39,7 @@ function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent
     typeAhead: {
       isMobile: false
     },
-    featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props),
+    featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.featureFlags),
     paste: {
       cardOptions: cardOptions,
       sanitizePrivateContent: props.sanitizePrivateContent

package/dist/cjs/create-editor/create-universal-preset.js

@@ -19,7 +19,7 @@ function createUniversalPreset(_ref) {
     appearance: props.appearance,
     props: (0, _createPluginsList.getDefaultPresetOptionsFromEditorProps)(props),
     initialPluginConfiguration: initialPluginConfiguration,
-    featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props),
+    featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.featureFlags),
     prevAppearance: prevProps === null || prevProps === void 0 ? void 0 : prevProps.appearance
   });
   return withDangerouslyAppendPlugins(preset)((_props$dangerouslyApp = props.dangerouslyAppendPlugins) === null || _props$dangerouslyApp === void 0 ? void 0 : _props$dangerouslyApp.__plugins);

package/dist/cjs/create-editor/feature-flags-from-props.js

@@ -31,18 +31,16 @@ function getSpellCheck(featureFlags) {
  * Transforms EditorProps to an FeatureFlags object,
  * which is used by both current and archv3 editors.
  */
-function createFeatureFlagsFromProps(props) {
-  var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4, _props$featureFlags5, _props$featureFlags6, _props$featureFlags7, _props$featureFlags8, _props$featureFlags9, _props$featureFlags10, _props$featureFlags11, _props$featureFlags12, _props$collabEdit, _props$collabEdit2;
-  var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(props.featureFlags);
+function createFeatureFlagsFromProps(featureFlags) {
+  var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags);
   return _objectSpread(_objectSpread({}, normalizedFeatureFlags), {}, {
     catchAllTracking: false,
-    showAvatarGroupAsPlugin: Boolean(typeof ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.showAvatarGroupAsPlugin) === 'boolean' ? !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.showAvatarGroupAsPlugin) : false),
-    errorBoundaryDocStructure: Boolean(typeof ((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.useErrorBoundaryDocStructure) === 'boolean' ? !!((_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.useErrorBoundaryDocStructure) : false),
-    synchronyErrorDocStructure: Boolean(typeof ((_props$featureFlags5 = props.featureFlags) === null || _props$featureFlags5 === void 0 ? void 0 : _props$featureFlags5.synchronyErrorDocStructure) === 'boolean' ? !!((_props$featureFlags6 = props.featureFlags) !== null && _props$featureFlags6 !== void 0 && _props$featureFlags6.synchronyErrorDocStructure) : false),
-    enableViewUpdateSubscription: Boolean(typeof ((_props$featureFlags7 = props.featureFlags) === null || _props$featureFlags7 === void 0 ? void 0 : _props$featureFlags7.enableViewUpdateSubscription) === 'boolean' ? !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.enableViewUpdateSubscription) : false),
-    collabAvatarScroll: Boolean(typeof ((_props$featureFlags9 = props.featureFlags) === null || _props$featureFlags9 === void 0 ? void 0 : _props$featureFlags9.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags10 = props.featureFlags) !== null && _props$featureFlags10 !== void 0 && _props$featureFlags10.collabAvatarScroll) : false),
-    twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags11 = props.featureFlags) === null || _props$featureFlags11 === void 0 ? void 0 : _props$featureFlags11.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags12 = props.featureFlags) !== null && _props$featureFlags12 !== void 0 && _props$featureFlags12.twoLineEditorToolbar) : false),
-    useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
-    disableSpellcheckByBrowser: getSpellCheck(props.featureFlags)
+    showAvatarGroupAsPlugin: Boolean(typeof (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showAvatarGroupAsPlugin) === 'boolean' ? !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.showAvatarGroupAsPlugin) : false),
+    errorBoundaryDocStructure: Boolean(typeof (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.useErrorBoundaryDocStructure) === 'boolean' ? !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.useErrorBoundaryDocStructure) : false),
+    synchronyErrorDocStructure: Boolean(typeof (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.synchronyErrorDocStructure) === 'boolean' ? !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.synchronyErrorDocStructure) : false),
+    enableViewUpdateSubscription: Boolean(typeof (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.enableViewUpdateSubscription) === 'boolean' ? !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.enableViewUpdateSubscription) : false),
+    collabAvatarScroll: Boolean(typeof (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.collabAvatarScroll) === 'boolean' ? !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.collabAvatarScroll) : false),
+    twoLineEditorToolbar: Boolean(typeof (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.twoLineEditorToolbar) === 'boolean' ? !!(featureFlags !== null && featureFlags !== void 0 && featureFlags.twoLineEditorToolbar) : false),
+    disableSpellcheckByBrowser: getSpellCheck(featureFlags)
   });
 }

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "201.2.0";
+var version = exports.version = "201.2.1";

package/dist/es2019/composable-editor/core-editor.js

@@ -44,7 +44,11 @@ function Editor(passedProps) {
     fireAnalyticsEvent(createAnalyticsEvent)(data);
   }, [createAnalyticsEvent]);
   const getFeatureFlagsFromRef = useCallback(() => {
-    return createFeatureFlagsFromProps(propsRef.current);
+    var _propsRef$current$col, _propsRef$current$col2;
+    return {
+      ...createFeatureFlagsFromProps(propsRef.current.featureFlags),
+      useNativeCollabPlugin: Boolean(typeof ((_propsRef$current$col = propsRef.current.collabEdit) === null || _propsRef$current$col === void 0 ? void 0 : _propsRef$current$col.useNativePlugin) === 'boolean' ? !!((_propsRef$current$col2 = propsRef.current.collabEdit) !== null && _propsRef$current$col2 !== void 0 && _propsRef$current$col2.useNativePlugin) : false)
+    };
   }, []);
   const onEditorCreated = useCallback(instance => {
     const {

package/dist/es2019/composable-editor/editor-internal.js

@@ -49,7 +49,7 @@ export const EditorInternal = /*#__PURE__*/memo(({
     // noop all analytic events, even if a handler is still passed.
     analyticsHandler: undefined
   };
-  const featureFlags = createFeatureFlagsFromProps(props);
+  const featureFlags = createFeatureFlagsFromProps(props.featureFlags);
 
   // Render tracking is firing too many events in Jira so we are disabling them for now. See - https://product-fabric.atlassian.net/browse/ED-25616
   const renderTrackingEnabled = !fg('platform_editor_disable_rerender_tracking_jira');

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

@@ -62,7 +62,6 @@ export const useDispatchTransaction = ({
           });
         });
       }
-      return newEditorState;
     } else {
       const invalidNodes = nodes.filter(node => !validNode(node)).map(node => getDocStructure(node, {
         compact: true

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

@@ -2,7 +2,7 @@ import { useCallback, useLayoutEffect, useMemo } from 'react';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { countNodes } from '@atlaskit/editor-common/count-nodes';
 import { PluginPerformanceObserver } from '../../utils/performance/plugin-performance-observer';
-export const usePluginPerformanceObserver = (editorState, pluginInjectionAPI, dispatchAnalyticsEvent) => {
+export const usePluginPerformanceObserver = (getEditorState, pluginInjectionAPI, dispatchAnalyticsEvent) => {
   const onPluginObservation = useCallback(report => {
     var _pluginInjectionAPI$c, _pluginInjectionAPI$c2, _pluginInjectionAPI$c3, _pluginInjectionAPI$c4;
     dispatchAnalyticsEvent({
@@ -16,14 +16,17 @@ export const usePluginPerformanceObserver = (editorState, pluginInjectionAPI, di
     });
   }, [dispatchAnalyticsEvent, pluginInjectionAPI]);
   const getPluginNames = useCallback(() => {
-    var _editorState$current;
+    var _getEditorState;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (_editorState$current = editorState.current) === null || _editorState$current === void 0 ? void 0 : _editorState$current.plugins.map(p => p.key);
-  }, [editorState]);
-  const pluginPerformanceObserver = useMemo(() => new PluginPerformanceObserver(report => onPluginObservation(report)).withPlugins(() => getPluginNames()).withNodeCounts(() => editorState.current ? countNodes(editorState.current) : {
-    nodeCount: {},
-    extensionNodeCount: {}
-  }), [onPluginObservation, getPluginNames, editorState]);
+    return (_getEditorState = getEditorState()) === null || _getEditorState === void 0 ? void 0 : _getEditorState.plugins.map(p => p.key);
+  }, [getEditorState]);
+  const pluginPerformanceObserver = useMemo(() => {
+    const state = getEditorState();
+    return new PluginPerformanceObserver(report => onPluginObservation(report)).withPlugins(() => getPluginNames()).withNodeCounts(() => state ? countNodes(state) : {
+      nodeCount: {},
+      extensionNodeCount: {}
+    });
+  }, [onPluginObservation, getPluginNames, getEditorState]);
   useLayoutEffect(() => {
     return () => {
       pluginPerformanceObserver.disconnect();

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

@@ -128,7 +128,7 @@ export class ReactEditorView extends React.Component {
       // 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.featureFlags = createFeatureFlagsFromProps(this.props.editorProps);
+      this.featureFlags = createFeatureFlagsFromProps(this.props.editorProps.featureFlags);
       this.editorState = this.createEditorState({
         props: this.props,
         doc: doc,
@@ -459,7 +459,7 @@ export class ReactEditorView extends React.Component {
     this.dispatch = createDispatch(this.eventDispatcher);
     this.errorReporter = createErrorReporter(props.editorProps.errorReporterHandler);
     this.pluginPerformanceObserver = new PluginPerformanceObserver(report => this.onPluginObservation(report)).withPlugins(() => this.getPluginNames()).withNodeCounts(() => this.countNodes());
-    this.featureFlags = createFeatureFlagsFromProps(this.props.editorProps);
+    this.featureFlags = createFeatureFlagsFromProps(this.props.editorProps.featureFlags);
     const featureFlagsEnabled = this.featureFlags ? getEnabledFeatureFlagKeys(this.featureFlags) : [];
 
     // This needs to be before initialising editorState because
@@ -542,7 +542,7 @@ export class ReactEditorView extends React.Component {
       portalProviderAPI: props.portalProviderAPI,
       nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
       dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-      featureFlags: createFeatureFlagsFromProps(props.editorProps),
+      featureFlags: createFeatureFlagsFromProps(props.editorProps.featureFlags),
       getIntl: () => this.props.intl
     });
     const newState = state.reconfigure({