@atlaskit/editor-core 201.1.5 → 201.1.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 201.1.6
+
+### Patch Changes
+
+- [#158291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158291)
+  [`f485597c02e9a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f485597c02e9a) -
+  Refactoring the core editor component to remove unsafe methods for React 18.
+- [#158691](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158691)
+  [`70ef661bbbb4d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70ef661bbbb4d) -
+  Update feature flag to gate
+- Updated dependencies
+
 ## 201.1.5
 
 ### Patch Changes

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

@@ -12,9 +12,11 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _portal = require("@atlaskit/editor-common/portal");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ErrorBoundary = _interopRequireDefault(require("../create-editor/ErrorBoundary"));
 var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props");
 var _ReactEditorView = _interopRequireDefault(require("../create-editor/ReactEditorView"));
+var _ReactEditorViewNext = _interopRequireDefault(require("../create-editor/ReactEditorViewNext"));
 var _contextAdapter = require("../nodeviews/context-adapter");
 var _EditorContext = _interopRequireDefault(require("../ui/EditorContext"));
 var _IntlProviderIfMissingWrapper = require("../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper");
@@ -76,7 +78,7 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
     css: editorContainerStyles
   }, (0, _react2.jsx)(_EditorContext.default, {
     editorActions: editorActions
-  }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ReactEditorViewContextWrapper, {
+  }, (0, _react2.jsx)(_contextAdapter.ContextAdapter, null, (0, _react2.jsx)(_IntlProviderIfMissingWrapper.IntlProviderIfMissingWrapper, null, (0, _react2.jsx)(_react.Fragment, null, (0, _platformFeatureFlags.fg)('platform_editor_react_editor_view_react_18') ? (0, _react2.jsx)(_ReactEditorViewNext.default, {
     editorProps: overriddenEditorProps,
     createAnalyticsEvent: createAnalyticsEvent,
     portalProviderAPI: portalProviderAPI,
@@ -130,6 +132,60 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         pluginHooks: config.pluginHooks
       }));
     }
+  }) : (0, _react2.jsx)(ReactEditorViewContextWrapper, {
+    editorProps: overriddenEditorProps,
+    createAnalyticsEvent: createAnalyticsEvent,
+    portalProviderAPI: portalProviderAPI,
+    providerFactory: providerFactory,
+    onEditorCreated: onEditorCreated,
+    onEditorDestroyed: onEditorDestroyed,
+    disabled: props.disabled,
+    preset: preset,
+    render: function render(_ref3) {
+      var _props$featureFlags3, _props$featureFlags4;
+      var editor = _ref3.editor,
+        view = _ref3.view,
+        eventDispatcher = _ref3.eventDispatcher,
+        config = _ref3.config,
+        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+        editorRef = _ref3.editorRef,
+        editorAPI = _ref3.editorAPI;
+      return (0, _react2.jsx)(_BaseThemeWrapper.BaseThemeWrapper, {
+        baseFontSize: (0, _getBaseFontSize.getBaseFontSize)(props.appearance)
+      }, (0, _react2.jsx)(AppearanceComponent, {
+        innerRef: editorRef,
+        editorAPI: editorAPI,
+        appearance: props.appearance,
+        disabled: props.disabled,
+        editorActions: editorActions,
+        editorDOMElement: editor,
+        editorView: view,
+        providerFactory: providerFactory,
+        eventDispatcher: eventDispatcher,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        maxHeight: props.maxHeight,
+        minHeight: props.minHeight,
+        onSave: props.onSave ? handleSave : undefined,
+        onCancel: props.onCancel,
+        popupsMountPoint: props.popupsMountPoint,
+        popupsBoundariesElement: props.popupsBoundariesElement,
+        popupsScrollableElement: props.popupsScrollableElement,
+        contentComponents: config.contentComponents,
+        primaryToolbarComponents: config.primaryToolbarComponents,
+        primaryToolbarIconBefore: props.primaryToolbarIconBefore,
+        secondaryToolbarComponents: config.secondaryToolbarComponents,
+        customContentComponents: props.contentComponents,
+        customPrimaryToolbarComponents: props.primaryToolbarComponents,
+        customSecondaryToolbarComponents: props.secondaryToolbarComponents,
+        contextPanel: props.contextPanel,
+        collabEdit: props.collabEdit,
+        persistScrollGutter: props.persistScrollGutter,
+        enableToolbarMinWidth: ((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.toolbarMinWidthOverflow) != null ? !!((_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.toolbarMinWidthOverflow) : props.allowUndoRedoButtons,
+        useStickyToolbar: props.useStickyToolbar,
+        featureFlags: featureFlags,
+        pluginHooks: config.pluginHooks
+      }));
+    }
   }), (0, _react2.jsx)(PortalRenderer, null))))))));
 });
 function ReactEditorViewContextWrapper(props) {

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatFullWidthAppearance = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var formatFullWidthAppearance = exports.formatFullWidthAppearance = function formatFullWidthAppearance(appearance) {
+  if (appearance === 'full-width') {
+    return _analytics.FULL_WIDTH_MODE.FULL_WIDTH;
+  }
+  return _analytics.FULL_WIDTH_MODE.FIXED_WIDTH;
+};

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUAPrefix = getUAPrefix;
+var _browser = require("@atlaskit/editor-common/browser");
+function getUAPrefix() {
+  if (_browser.browser.chrome) {
+    return 'ua-chrome';
+  } else if (_browser.browser.ie) {
+    return 'ua-ie';
+  } else if (_browser.browser.gecko) {
+    return 'ua-firefox';
+  } else if (_browser.browser.safari) {
+    return 'ua-safari';
+  }
+  return '';
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleEditorFocus = handleEditorFocus;
+var _state = require("@atlaskit/editor-prosemirror/state");
+function handleEditorFocus(view) {
+  if (view.hasFocus()) {
+    return;
+  }
+  return window.setTimeout(function () {
+    if (view.hasFocus()) {
+      return;
+    }
+    if (!window.getSelection) {
+      view.focus();
+      return;
+    }
+    var domSelection = window.getSelection();
+    if (!domSelection || domSelection.rangeCount === 0) {
+      view.focus();
+      return;
+    }
+    var range = domSelection.getRangeAt(0);
+    // if selection is outside editor focus and exit
+    if (range.startContainer.contains(view.dom)) {
+      view.focus();
+      return;
+    }
+    // set cursor/selection and focus
+    var anchor = view.posAtDOM(range.startContainer, range.startOffset);
+    var head = view.posAtDOM(range.endContainer, range.endOffset);
+    // if anchor or head < 0 focus and exit
+    if (anchor < 0 || head < 0) {
+      view.focus();
+      return;
+    }
+    var selection = _state.TextSelection.create(view.state.doc, anchor, head);
+    var tr = view.state.tr.setSelection(selection);
+    view.dispatch(tr);
+    view.focus();
+  }, 0);
+}

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDispatchTransaction = void 0;
+var _react = require("react");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
+var _findChangedNodesFromTransaction = require("../../utils/findChangedNodesFromTransaction");
+var _saferTransactions = require("../../utils/performance/safer-transactions");
+var _trackTransactions = require("../../utils/performance/track-transactions");
+var _validateNodes = require("../../utils/validateNodes");
+var useDispatchTransaction = exports.useDispatchTransaction = function useDispatchTransaction(_ref) {
+  var onChange = _ref.onChange,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    onEditorViewUpdated = _ref.onEditorViewUpdated;
+  // We need to have a ref to the latest `onChange` since the `dispatchTransaction` gets captured
+  var onChangeRef = (0, _react.useRef)(onChange);
+  (0, _react.useEffect)(function () {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  var dispatchTransaction = (0, _react.useCallback)(function (view, unsafeTransaction) {
+    if (!view) {
+      return;
+    }
+    var nodes = (0, _findChangedNodesFromTransaction.findChangedNodesFromTransaction)(unsafeTransaction);
+    var changedNodesValid = (0, _validateNodes.validateNodes)(nodes);
+    var transaction = new Proxy(unsafeTransaction, (0, _saferTransactions.freezeUnsafeTransactionProperties)({
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginKey: 'unknown-reacteditorview'
+    }));
+    if (changedNodesValid) {
+      var oldEditorState = view.state;
+
+      // go ahead and update the state now we know the transaction is good
+      var _view$state$applyTran = view.state.applyTransaction(transaction),
+        newEditorState = _view$state$applyTran.state,
+        transactions = _view$state$applyTran.transactions;
+      if (newEditorState === oldEditorState) {
+        return;
+      }
+      view.updateState(newEditorState);
+      onEditorViewUpdated({
+        originalTransaction: transaction,
+        transactions: transactions,
+        oldEditorState: oldEditorState,
+        newEditorState: newEditorState
+      });
+      if (onChangeRef.current && transaction.docChanged) {
+        var source = transaction.getMeta('isRemote') ? 'remote' : 'local';
+        (0, _performanceMeasures.startMeasure)(_trackTransactions.EVENT_NAME_ON_CHANGE);
+        onChangeRef.current(view, {
+          source: source
+        });
+        (0, _performanceMeasures.stopMeasure)(_trackTransactions.EVENT_NAME_ON_CHANGE, function (duration, startTime) {
+          dispatchAnalyticsEvent({
+            action: _analytics.ACTION.ON_CHANGE_CALLBACK,
+            actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              duration: duration,
+              startTime: startTime
+            }
+          });
+        });
+      }
+      return newEditorState;
+    } else {
+      var invalidNodes = nodes.filter(function (node) {
+        return !(0, _validateNodes.validNode)(node);
+      }).map(function (node) {
+        return (0, _coreUtils.getDocStructure)(node, {
+          compact: true
+        });
+      });
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.DISPATCHED_INVALID_TRANSACTION,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          analyticsEventPayloads: (0, _analytics.getAnalyticsEventsFromTransaction)(transaction),
+          invalidNodes: invalidNodes
+        }
+      });
+    }
+  }, [dispatchAnalyticsEvent, onEditorViewUpdated]);
+  return dispatchTransaction;
+};

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFireFullWidthEvent = void 0;
+var _react = require("react");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _formatFullWidthAppearance = require("./formatFullWidthAppearance");
+var useFireFullWidthEvent = exports.useFireFullWidthEvent = function useFireFullWidthEvent(appearance, dispatchAnalyticsEvent) {
+  var previousAppearance = (0, _hooks.usePreviousState)(appearance);
+  (0, _react.useEffect)(function () {
+    if (appearance !== previousAppearance) {
+      if (appearance === 'full-width' || previousAppearance === 'full-width') {
+        dispatchAnalyticsEvent({
+          action: _analytics.ACTION.CHANGED_FULL_WIDTH_MODE,
+          actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            previousMode: (0, _formatFullWidthAppearance.formatFullWidthAppearance)(previousAppearance),
+            newMode: (0, _formatFullWidthAppearance.formatFullWidthAppearance)(appearance)
+          }
+        });
+      }
+    }
+  }, [appearance, previousAppearance, dispatchAnalyticsEvent]);
+};

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePluginPerformanceObserver = void 0;
+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 onPluginObservation = (0, _react.useCallback)(function (report) {
+    var _pluginInjectionAPI$c;
+    dispatchAnalyticsEvent({
+      action: _analytics.ACTION.TRANSACTION_DISPATCHED,
+      actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+      eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        report: report,
+        participants: ((_pluginInjectionAPI$c = pluginInjectionAPI.current) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.api().collabEdit) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.sharedState.currentState()) === null || _pluginInjectionAPI$c === void 0 || (_pluginInjectionAPI$c = _pluginInjectionAPI$c.participants) === null || _pluginInjectionAPI$c === void 0 ? void 0 : _pluginInjectionAPI$c.size()) || 1
+      }
+    });
+  }, [dispatchAnalyticsEvent, pluginInjectionAPI]);
+  var getPluginNames = (0, _react.useCallback)(function () {
+    var _editorState$current;
+    // 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 p.key;
+    });
+  }, [editorState]);
+  var pluginPerformanceObserver = (0, _react.useMemo)(function () {
+    return new _pluginPerformanceObserver.PluginPerformanceObserver(function (report) {
+      return onPluginObservation(report);
+    }).withPlugins(function () {
+      return getPluginNames();
+    }).withNodeCounts(function () {
+      return editorState.current ? (0, _countNodes.countNodes)(editorState.current) : {
+        nodeCount: {},
+        extensionNodeCount: {}
+      };
+    });
+  }, [onPluginObservation, getPluginNames, editorState]);
+  (0, _react.useLayoutEffect)(function () {
+    return function () {
+      pluginPerformanceObserver.disconnect();
+    };
+  }, [pluginPerformanceObserver]);
+};