@atlaskit/editor-core 201.2.0 → 201.2.1

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

@@ -37,7 +37,10 @@ function ReactEditorView(props) {
     preset,
     editorProps: {
       appearance: nextAppearance,
-      disabled
+      disabled,
+      featureFlags: editorPropFeatureFlags,
+      errorReporterHandler,
+      defaultValue
     }
   } = props;
   const [editorAPI, setEditorAPI] = useState(undefined);
@@ -60,14 +63,14 @@ function ReactEditorView(props) {
     onEditorViewStateUpdatedCallbacks: []
   });
   const contentTransformer = useRef(undefined);
-  const featureFlags = useRef(createFeatureFlagsFromProps(props.editorProps));
+  const featureFlags = useMemo(() => createFeatureFlagsFromProps(editorPropFeatureFlags), [editorPropFeatureFlags]);
   const getEditorState = useCallback(() => {
     var _viewRef$current;
     return (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.state;
   }, []);
   const getEditorView = useCallback(() => viewRef.current, []);
   const dispatch = useMemo(() => createDispatch(eventDispatcher), [eventDispatcher]);
-  const errorReporter = useRef(createErrorReporter(props.editorProps.errorReporterHandler));
+  const errorReporter = useMemo(() => createErrorReporter(errorReporterHandler), [errorReporterHandler]);
   const handleAnalyticsEvent = useCallback(payload => {
     fireAnalyticsEvent(props.createAnalyticsEvent)(payload);
   }, [props.createAnalyticsEvent]);
@@ -84,22 +87,6 @@ function ReactEditorView(props) {
   useLayoutEffect(() => {
     setEditorAPI(pluginInjectionAPI.current.api());
   }, []);
-  const blur = useCallback(() => {
-    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
-    const sel = viewRef.current.root.getSelection();
-    if (sel) {
-      sel.removeAllRanges();
-    }
-  }, []);
   const createEditorState = useCallback(options => {
     var _api$editorViewMode;
     let schema;
@@ -133,14 +120,14 @@ function ReactEditorView(props) {
     const plugins = createPMPlugins({
       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,
       getIntl: () => props.intl
     });
     contentTransformer.current = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
@@ -180,7 +167,36 @@ function ReactEditorView(props) {
       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]);
+  const initialEditorState = useMemo(() => createEditorState({
+    props,
+    doc: defaultValue,
+    // ED-4759: Don't set selection at end for full-page editor - should be at start.
+    selectionAtStart: 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
+  []);
+  const getCurrentEditorState = useCallback(() => {
+    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]);
+  const blur = useCallback(() => {
+    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
+    const sel = viewRef.current.root.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+    }
+  }, []);
   const resetEditorState = useCallback(({
     doc,
     shouldScrollToBottom
@@ -194,14 +210,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 = createFeatureFlagsFromProps(props.editorProps);
     const newEditorState = createEditorState({
       props: props,
       doc: doc,
       resetting: true,
       selectionAtStart: !shouldScrollToBottom
     });
-    editorState.current = newEditorState;
     viewRef.current.updateState(newEditorState);
     (_props$editorProps$on = (_props$editorProps = props.editorProps).onChange) === null || _props$editorProps$on === void 0 ? void 0 : _props$editorProps$on.call(_props$editorProps, viewRef.current, {
       source: 'local'
@@ -216,7 +230,7 @@ function ReactEditorView(props) {
       actionSubject: ACTION_SUBJECT.EDITOR,
       attributes: {
         platform: PLATFORMS.WEB,
-        featureFlags: featureFlags.current ? getEnabledFeatureFlagKeys(featureFlags.current) : []
+        featureFlags: featureFlags ? getEnabledFeatureFlagKeys(featureFlags) : []
       },
       eventType: EVENT_TYPE.UI
     });
@@ -266,18 +280,18 @@ function ReactEditorView(props) {
     blur();
     const editorPlugins = createPluginsList(props.preset, props.editorProps, pluginInjectionAPI.current);
     config.current = processPluginsList(editorPlugins);
-    const state = editorState.current;
+    const state = viewRef.current.state;
     const plugins = 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: createFeatureFlagsFromProps(props.editorProps),
+      featureFlags,
       getIntl: () => props.intl
     });
     const newState = state.reconfigure({
@@ -291,7 +305,7 @@ function ReactEditorView(props) {
       ...viewRef.current.props,
       state: newState
     });
-  }, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  }, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch, errorReporter, featureFlags]);
   const onEditorViewUpdated = useCallback(({
     originalTransaction,
     transactions,
@@ -334,16 +348,13 @@ function ReactEditorView(props) {
   });
   const getDirectEditorProps = useCallback(state => {
     return {
-      state: state || editorState.current,
+      state: state !== null && state !== void 0 ? state : getCurrentEditorState(),
       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) {
-          const 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
@@ -352,7 +363,7 @@ function ReactEditorView(props) {
         'data-gramm': 'false'
       }
     };
-  }, [dispatchTransaction, disabled]);
+  }, [dispatchTransaction, disabled, getCurrentEditorState]);
   const createEditorView = useCallback(node => {
     measureRender(measurements.PROSEMIRROR_RENDERED, ({
       duration,
@@ -479,13 +490,7 @@ function ReactEditorView(props) {
     }
   }, [disabled, shouldFocus, previousDisabledState]);
   useFireFullWidthEvent(nextAppearance, dispatchAnalyticsEvent);
-  const editorState = useRef(createEditorState({
-    props,
-    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)
-  }));
-  usePluginPerformanceObserver(editorState, pluginInjectionAPI, dispatchAnalyticsEvent);
+  usePluginPerformanceObserver(getCurrentEditorState, pluginInjectionAPI, dispatchAnalyticsEvent);
   const editor = useMemo(() => createEditor(props.editorProps.assistiveLabel, props.editorProps.assistiveDescribedBy),
   // `createEditor` changes a little too frequently - we don't want to recreate the editor view in this case
   // We should follow-up

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

@@ -28,7 +28,7 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     typeAhead: {
       isMobile: false
     },
-    featureFlags: createFeatureFlagsFromProps(props),
+    featureFlags: createFeatureFlagsFromProps(props.featureFlags),
     paste: {
       cardOptions,
       sanitizePrivateContent: props.sanitizePrivateContent

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

@@ -14,7 +14,7 @@ export function createUniversalPreset({
     appearance: props.appearance,
     props: getDefaultPresetOptionsFromEditorProps(props),
     initialPluginConfiguration: initialPluginConfiguration,
-    featureFlags: createFeatureFlagsFromProps(props),
+    featureFlags: 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/es2019/create-editor/feature-flags-from-props.js

@@ -20,19 +20,17 @@ function getSpellCheck(featureFlags) {
  * Transforms EditorProps to an FeatureFlags object,
  * which is used by both current and archv3 editors.
  */
-export 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;
-  const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
+export function createFeatureFlagsFromProps(featureFlags) {
+  const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags);
   return {
     ...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/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "201.2.0";
+export const version = "201.2.1";

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

@@ -1,4 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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
@@ -45,7 +48,10 @@ function Editor(passedProps) {
     fireAnalyticsEvent(createAnalyticsEvent)(data);
   }, [createAnalyticsEvent]);
   var getFeatureFlagsFromRef = useCallback(function () {
-    return createFeatureFlagsFromProps(propsRef.current);
+    var _propsRef$current$col, _propsRef$current$col2;
+    return _objectSpread(_objectSpread({}, 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 = useCallback(function (instance) {
     var _propsRef$current = propsRef.current,

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

@@ -51,7 +51,7 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
     // noop all analytic events, even if a handler is still passed.
     analyticsHandler: undefined
   });
-  var featureFlags = createFeatureFlagsFromProps(props);
+  var 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
   var renderTrackingEnabled = !fg('platform_editor_disable_rerender_tracking_jira');

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

@@ -60,7 +60,6 @@ export var useDispatchTransaction = function useDispatchTransaction(_ref) {
           });
         });
       }
-      return newEditorState;
     } else {
       var invalidNodes = nodes.filter(function (node) {
         return !validNode(node);

package/dist/esm/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 var usePluginPerformanceObserver = function usePluginPerformanceObserver(editorState, pluginInjectionAPI, dispatchAnalyticsEvent) {
+export var usePluginPerformanceObserver = function usePluginPerformanceObserver(getEditorState, pluginInjectionAPI, dispatchAnalyticsEvent) {
   var onPluginObservation = useCallback(function (report) {
     var _pluginInjectionAPI$c;
     dispatchAnalyticsEvent({
@@ -16,24 +16,25 @@ export var usePluginPerformanceObserver = function usePluginPerformanceObserver(
     });
   }, [dispatchAnalyticsEvent, pluginInjectionAPI]);
   var getPluginNames = 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 = useMemo(function () {
+    var state = getEditorState();
     return new PluginPerformanceObserver(function (report) {
       return onPluginObservation(report);
     }).withPlugins(function () {
       return getPluginNames();
     }).withNodeCounts(function () {
-      return editorState.current ? countNodes(editorState.current) : {
+      return state ? countNodes(state) : {
         nodeCount: {},
         extensionNodeCount: {}
       };
     });
-  }, [onPluginObservation, getPluginNames, editorState]);
+  }, [onPluginObservation, getPluginNames, getEditorState]);
   useLayoutEffect(function () {
     return function () {
       pluginPerformanceObserver.disconnect();

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

@@ -130,7 +130,7 @@ export var ReactEditorView = /*#__PURE__*/function (_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,
@@ -470,7 +470,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     }).withNodeCounts(function () {
       return _this.countNodes();
     });
-    _this.featureFlags = createFeatureFlagsFromProps(_this.props.editorProps);
+    _this.featureFlags = createFeatureFlagsFromProps(_this.props.editorProps.featureFlags);
     var featureFlagsEnabled = _this.featureFlags ? getEnabledFeatureFlagKeys(_this.featureFlags) : [];
 
     // This needs to be before initialising editorState because
@@ -579,7 +579,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         portalProviderAPI: props.portalProviderAPI,
         nodeViewPortalProviderAPI: props.nodeViewPortalProviderAPI,
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-        featureFlags: createFeatureFlagsFromProps(props.editorProps),
+        featureFlags: createFeatureFlagsFromProps(props.editorProps.featureFlags),
         getIntl: function getIntl() {
           return _this2.props.intl;
         }

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

@@ -40,7 +40,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 = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     editorAPI = _useState2[0],
@@ -66,7 +69,9 @@ function ReactEditorView(props) {
     onEditorViewStateUpdatedCallbacks: []
   });
   var contentTransformer = useRef(undefined);
-  var featureFlags = useRef(createFeatureFlagsFromProps(props.editorProps));
+  var featureFlags = useMemo(function () {
+    return createFeatureFlagsFromProps(editorPropFeatureFlags);
+  }, [editorPropFeatureFlags]);
   var getEditorState = useCallback(function () {
     var _viewRef$current;
     return (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.state;
@@ -77,7 +82,9 @@ function ReactEditorView(props) {
   var dispatch = useMemo(function () {
     return createDispatch(eventDispatcher);
   }, [eventDispatcher]);
-  var errorReporter = useRef(createErrorReporter(props.editorProps.errorReporterHandler));
+  var errorReporter = useMemo(function () {
+    return createErrorReporter(errorReporterHandler);
+  }, [errorReporterHandler]);
   var handleAnalyticsEvent = useCallback(function (payload) {
     fireAnalyticsEvent(props.createAnalyticsEvent)(payload);
   }, [props.createAnalyticsEvent]);
@@ -94,22 +101,6 @@ function ReactEditorView(props) {
   useLayoutEffect(function () {
     setEditorAPI(pluginInjectionAPI.current.api());
   }, []);
-  var blur = 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 = useCallback(function (options) {
     var _api$editorViewMode;
     var schema;
@@ -141,14 +132,14 @@ function ReactEditorView(props) {
     var plugins = 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;
       }
@@ -190,7 +181,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 = 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: 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 = 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 = 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 = useCallback(function (_ref) {
     var _props$editorProps$on, _props$editorProps2;
     var doc = _ref.doc,
@@ -203,14 +225,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 = 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'
@@ -225,7 +245,7 @@ function ReactEditorView(props) {
       actionSubject: ACTION_SUBJECT.EDITOR,
       attributes: {
         platform: PLATFORMS.WEB,
-        featureFlags: featureFlags.current ? getEnabledFeatureFlagKeys(featureFlags.current) : []
+        featureFlags: featureFlags ? getEnabledFeatureFlagKeys(featureFlags) : []
       },
       eventType: EVENT_TYPE.UI
     });
@@ -252,9 +272,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();
           }
@@ -275,18 +295,18 @@ function ReactEditorView(props) {
     blur();
     var editorPlugins = createPluginsList(props.preset, props.editorProps, pluginInjectionAPI.current);
     config.current = processPluginsList(editorPlugins);
-    var state = editorState.current;
+    var state = viewRef.current.state;
     var plugins = 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: createFeatureFlagsFromProps(props.editorProps),
+      featureFlags: featureFlags,
       getIntl: function getIntl() {
         return props.intl;
       }
@@ -301,7 +321,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 = useCallback(function (_ref2) {
     var _config$current;
     var originalTransaction = _ref2.originalTransaction,
@@ -343,16 +363,13 @@ function ReactEditorView(props) {
   });
   var getDirectEditorProps = 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
@@ -363,7 +380,7 @@ function ReactEditorView(props) {
         'data-gramm': 'false'
       }
     };
-  }, [_dispatchTransaction, disabled]);
+  }, [_dispatchTransaction, disabled, getCurrentEditorState]);
   var createEditorView = useCallback(function (node) {
     measureRender(measurements.PROSEMIRROR_RENDERED, function (_ref3) {
       var duration = _ref3.duration,
@@ -490,13 +507,7 @@ function ReactEditorView(props) {
     }
   }, [disabled, shouldFocus, previousDisabledState]);
   useFireFullWidthEvent(nextAppearance, dispatchAnalyticsEvent);
-  var editorState = 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: isFullPage(props.editorProps.appearance)
-  }));
-  usePluginPerformanceObserver(editorState, pluginInjectionAPI, dispatchAnalyticsEvent);
+  usePluginPerformanceObserver(getCurrentEditorState, pluginInjectionAPI, dispatchAnalyticsEvent);
   var editor = useMemo(function () {
     return createEditor(props.editorProps.assistiveLabel, props.editorProps.assistiveDescribedBy);
   },

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

@@ -30,7 +30,7 @@ export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEve
     typeAhead: {
       isMobile: false
     },
-    featureFlags: createFeatureFlagsFromProps(props),
+    featureFlags: createFeatureFlagsFromProps(props.featureFlags),
     paste: {
       cardOptions: cardOptions,
       sanitizePrivateContent: props.sanitizePrivateContent

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

@@ -13,7 +13,7 @@ export function createUniversalPreset(_ref) {
     appearance: props.appearance,
     props: getDefaultPresetOptionsFromEditorProps(props),
     initialPluginConfiguration: initialPluginConfiguration,
-    featureFlags: createFeatureFlagsFromProps(props),
+    featureFlags: 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/esm/create-editor/feature-flags-from-props.js

@@ -24,18 +24,16 @@ function getSpellCheck(featureFlags) {
  * Transforms EditorProps to an FeatureFlags object,
  * which is used by both current and archv3 editors.
  */
-export 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 = normalizeFeatureFlags(props.featureFlags);
+export function createFeatureFlagsFromProps(featureFlags) {
+  var normalizedFeatureFlags = 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)
   });
 }