@atlaskit/editor-core 203.11.13 → 203.11.14

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-core
 
+## 203.11.14
+
+### Patch Changes
+
+- [#107453](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107453)
+  [`2cdb4872aa8e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cdb4872aa8e0) -
+  EDF-2233: Fix autofocus in React 18 Concurrent Rendering mode - fix is behind
+  platform_editor_react_18_autofocus_fix.
+
 ## 203.11.13
 
 ### Patch Changes

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

@@ -1,15 +1,30 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleEditorFocus = handleEditorFocus;
+var _react = _interopRequireDefault(require("react"));
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function handleEditorFocus(view) {
   if (view !== null && view !== void 0 && view.hasFocus()) {
     return;
   }
-  return window.setTimeout(function () {
+
+  /**
+   * If startTransition is available (in React 18),
+   * don't use setTimeout as startTransition will be used in ReactEditorViewNext.
+   * setTimeout(fn, 0) will not defer the focus reliably in React 18 with
+   * concurrent rendering.
+   */
+  var react16OnlySetTimeout = _react.default !== null && _react.default !== void 0 && _react.default.startTransition && (0, _platformFeatureFlags.fg)('platform_editor_react_18_autofocus_fix') ? function (fn) {
+    return fn();
+  } : function (fn) {
+    return window.setTimeout(fn, 0);
+  };
+  return react16OnlySetTimeout(function () {
     if (view !== null && view !== void 0 && view.hasFocus()) {
       return;
     }
@@ -42,5 +57,5 @@ function handleEditorFocus(view) {
       view.dispatch(tr);
       view.focus();
     }
-  }, 0);
+  });
 }

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

@@ -451,11 +451,17 @@ function ReactEditorView(props) {
   }, [getDirectEditorProps, dispatchAnalyticsEvent]);
   var _useState3 = (0, _react.useState)(undefined),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    _ = _useState4[0],
+    editorView = _useState4[0],
     setEditorView = _useState4[1];
   var onEditorCreated = props.onEditorCreated,
     onEditorDestroyed = props.onEditorDestroyed,
     shouldFocus = props.editorProps.shouldFocus;
+  (0, _react.useLayoutEffect)(function () {
+    var _editorView$props$edi, _editorView$props;
+    if (shouldFocus && editorView !== null && editorView !== void 0 && (_editorView$props$edi = (_editorView$props = editorView.props).editable) !== null && _editorView$props$edi !== void 0 && _editorView$props$edi.call(_editorView$props, editorView.state) && (0, _platformFeatureFlags.fg)('platform_editor_react_18_autofocus_fix')) {
+      focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(editorView);
+    }
+  }, [editorView, shouldFocus]);
   var handleEditorViewRef = (0, _react.useCallback)(function (node) {
     if (!viewRef.current && node) {
       var view = createEditorView(node);
@@ -465,12 +471,27 @@ function ReactEditorView(props) {
         eventDispatcher: eventDispatcher,
         transformer: contentTransformer.current
       });
-      if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
-        focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(view);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_autofocus_fix')) {
+        var _startTransition;
+        /**
+         * Defer using startTransition when it is available (in React 18) to fix
+         * autofocus bug where React 18's concurrent rendering mode interferes with
+         * setTimeout used in handleEditorFocus, causing autofocus to break.
+         */
+        var react18OnlyStartTransition = (_startTransition = _react.default === null || _react.default === void 0 ? void 0 : _react.default.startTransition) !== null && _startTransition !== void 0 ? _startTransition : function (fn) {
+          return fn();
+        };
+        react18OnlyStartTransition(function () {
+          // Force React to re-render so consumers get a reference to the editor view
+          setEditorView(view);
+        });
+      } else {
+        if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
+          focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(view);
+        }
+        // Force React to re-render so consumers get a reference to the editor view
+        setEditorView(view);
       }
-
-      // Force React to re-render so consumers get a reference to the editor view
-      setEditorView(view);
     } else if (viewRef.current && !node) {
       // When the appearance is changed, React will call handleEditorViewRef with node === null
       // to destroy the old EditorView, before calling this method again with node === div to

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 = "203.11.13";
+var version = exports.version = "203.11.14";

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

@@ -1,9 +1,19 @@
+import React from 'react';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 export function handleEditorFocus(view) {
   if (view !== null && view !== void 0 && view.hasFocus()) {
     return;
   }
-  return window.setTimeout(() => {
+
+  /**
+   * If startTransition is available (in React 18),
+   * don't use setTimeout as startTransition will be used in ReactEditorViewNext.
+   * setTimeout(fn, 0) will not defer the focus reliably in React 18 with
+   * concurrent rendering.
+   */
+  const react16OnlySetTimeout = React !== null && React !== void 0 && React.startTransition && fg('platform_editor_react_18_autofocus_fix') ? fn => fn() : fn => window.setTimeout(fn, 0);
+  return react16OnlySetTimeout(() => {
     if (view !== null && view !== void 0 && view.hasFocus()) {
       return;
     }
@@ -36,5 +46,5 @@ export function handleEditorFocus(view) {
       view.dispatch(tr);
       view.focus();
     }
-  }, 0);
+  });
 }

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

@@ -422,7 +422,7 @@ export function ReactEditorView(props) {
     });
     return view;
   }, [getDirectEditorProps, dispatchAnalyticsEvent]);
-  const [_, setEditorView] = useState(undefined);
+  const [editorView, setEditorView] = useState(undefined);
   const {
     onEditorCreated,
     onEditorDestroyed,
@@ -430,6 +430,12 @@ export function ReactEditorView(props) {
       shouldFocus
     }
   } = props;
+  useLayoutEffect(() => {
+    var _editorView$props$edi, _editorView$props;
+    if (shouldFocus && editorView !== null && editorView !== void 0 && (_editorView$props$edi = (_editorView$props = editorView.props).editable) !== null && _editorView$props$edi !== void 0 && _editorView$props$edi.call(_editorView$props, editorView.state) && fg('platform_editor_react_18_autofocus_fix')) {
+      focusTimeoutId.current = handleEditorFocus(editorView);
+    }
+  }, [editorView, shouldFocus]);
   const handleEditorViewRef = useCallback(node => {
     if (!viewRef.current && node) {
       const view = createEditorView(node);
@@ -439,12 +445,25 @@ export function ReactEditorView(props) {
         eventDispatcher: eventDispatcher,
         transformer: contentTransformer.current
       });
-      if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
-        focusTimeoutId.current = handleEditorFocus(view);
+      if (fg('platform_editor_react_18_autofocus_fix')) {
+        var _startTransition;
+        /**
+         * Defer using startTransition when it is available (in React 18) to fix
+         * autofocus bug where React 18's concurrent rendering mode interferes with
+         * setTimeout used in handleEditorFocus, causing autofocus to break.
+         */
+        const react18OnlyStartTransition = (_startTransition = React === null || React === void 0 ? void 0 : React.startTransition) !== null && _startTransition !== void 0 ? _startTransition : fn => fn();
+        react18OnlyStartTransition(() => {
+          // Force React to re-render so consumers get a reference to the editor view
+          setEditorView(view);
+        });
+      } else {
+        if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
+          focusTimeoutId.current = handleEditorFocus(view);
+        }
+        // Force React to re-render so consumers get a reference to the editor view
+        setEditorView(view);
       }
-
-      // Force React to re-render so consumers get a reference to the editor view
-      setEditorView(view);
     } else if (viewRef.current && !node) {
       // When the appearance is changed, React will call handleEditorViewRef with node === null
       // to destroy the old EditorView, before calling this method again with node === div to

package/dist/es2019/version-wrapper.js

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

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

@@ -1,9 +1,23 @@
+import React from 'react';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 export function handleEditorFocus(view) {
   if (view !== null && view !== void 0 && view.hasFocus()) {
     return;
   }
-  return window.setTimeout(function () {
+
+  /**
+   * If startTransition is available (in React 18),
+   * don't use setTimeout as startTransition will be used in ReactEditorViewNext.
+   * setTimeout(fn, 0) will not defer the focus reliably in React 18 with
+   * concurrent rendering.
+   */
+  var react16OnlySetTimeout = React !== null && React !== void 0 && React.startTransition && fg('platform_editor_react_18_autofocus_fix') ? function (fn) {
+    return fn();
+  } : function (fn) {
+    return window.setTimeout(fn, 0);
+  };
+  return react16OnlySetTimeout(function () {
     if (view !== null && view !== void 0 && view.hasFocus()) {
       return;
     }
@@ -36,5 +50,5 @@ export function handleEditorFocus(view) {
       view.dispatch(tr);
       view.focus();
     }
-  }, 0);
+  });
 }

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

@@ -440,11 +440,17 @@ export function ReactEditorView(props) {
   }, [getDirectEditorProps, dispatchAnalyticsEvent]);
   var _useState3 = useState(undefined),
     _useState4 = _slicedToArray(_useState3, 2),
-    _ = _useState4[0],
+    editorView = _useState4[0],
     setEditorView = _useState4[1];
   var onEditorCreated = props.onEditorCreated,
     onEditorDestroyed = props.onEditorDestroyed,
     shouldFocus = props.editorProps.shouldFocus;
+  useLayoutEffect(function () {
+    var _editorView$props$edi, _editorView$props;
+    if (shouldFocus && editorView !== null && editorView !== void 0 && (_editorView$props$edi = (_editorView$props = editorView.props).editable) !== null && _editorView$props$edi !== void 0 && _editorView$props$edi.call(_editorView$props, editorView.state) && fg('platform_editor_react_18_autofocus_fix')) {
+      focusTimeoutId.current = handleEditorFocus(editorView);
+    }
+  }, [editorView, shouldFocus]);
   var handleEditorViewRef = useCallback(function (node) {
     if (!viewRef.current && node) {
       var view = createEditorView(node);
@@ -454,12 +460,27 @@ export function ReactEditorView(props) {
         eventDispatcher: eventDispatcher,
         transformer: contentTransformer.current
       });
-      if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
-        focusTimeoutId.current = handleEditorFocus(view);
+      if (fg('platform_editor_react_18_autofocus_fix')) {
+        var _startTransition;
+        /**
+         * Defer using startTransition when it is available (in React 18) to fix
+         * autofocus bug where React 18's concurrent rendering mode interferes with
+         * setTimeout used in handleEditorFocus, causing autofocus to break.
+         */
+        var react18OnlyStartTransition = (_startTransition = React === null || React === void 0 ? void 0 : React.startTransition) !== null && _startTransition !== void 0 ? _startTransition : function (fn) {
+          return fn();
+        };
+        react18OnlyStartTransition(function () {
+          // Force React to re-render so consumers get a reference to the editor view
+          setEditorView(view);
+        });
+      } else {
+        if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
+          focusTimeoutId.current = handleEditorFocus(view);
+        }
+        // Force React to re-render so consumers get a reference to the editor view
+        setEditorView(view);
       }
-
-      // Force React to re-render so consumers get a reference to the editor view
-      setEditorView(view);
     } else if (viewRef.current && !node) {
       // When the appearance is changed, React will call handleEditorViewRef with node === null
       // to destroy the old EditorView, before calling this method again with node === div to

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "203.11.13";
+export var version = "203.11.14";

package/dist/types/create-editor/ReactEditorView/handleEditorFocus.d.ts

@@ -1,2 +1,2 @@
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare function handleEditorFocus(view: EditorView | null): number | undefined;
+export declare function handleEditorFocus(view: EditorView | undefined): number | undefined | void;

package/dist/types-ts4.5/create-editor/ReactEditorView/handleEditorFocus.d.ts

@@ -1,2 +1,2 @@
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare function handleEditorFocus(view: EditorView | null): number | undefined;
+export declare function handleEditorFocus(view: EditorView | undefined): number | undefined | void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "203.11.13",
+	"version": "203.11.14",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -103,7 +103,7 @@
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/adf-schema-json": "^1.22.0",
 		"@atlassian/feature-flags-test-utils": "*",
-		"@atlassian/search-provider": "3.0.27",
+		"@atlassian/search-provider": "3.0.28",
 		"@emotion/jest": "^11.8.0",
 		"@storybook/addon-knobs": "^6.4.0",
 		"@testing-library/react": "^12.1.5",
@@ -407,6 +407,9 @@
 		"platform_editor_nested_tables_paste_dupe_fix": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_editor_react_18_autofocus_fix": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {