@atlaskit/editor-core 201.1.4 → 201.1.6

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

@@ -0,0 +1,538 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _v = _interopRequireDefault(require("uuid/v4"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
+var _measureRender = require("@atlaskit/editor-common/performance/measure-render");
+var _navigation = require("@atlaskit/editor-common/performance/navigation");
+var _preset = require("@atlaskit/editor-common/preset");
+var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
+var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
+var _state2 = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _useProviders = require("../composable-editor/hooks/useProviders");
+var _eventDispatcher = require("../event-dispatcher");
+var _getNodesCount = require("../utils/getNodesCount");
+var _isFullPage = require("../utils/is-full-page");
+var _RenderTracking = require("../utils/performance/components/RenderTracking");
+var _measureEnum = _interopRequireDefault(require("../utils/performance/measure-enum"));
+var _consts = require("./consts");
+var _createEditor = require("./create-editor");
+var _createPluginsList = _interopRequireDefault(require("./create-plugins-list"));
+var _createSchema = require("./create-schema");
+var _featureFlagsFromProps = require("./feature-flags-from-props");
+var _messages = require("./messages");
+var _getUAPrefix = require("./ReactEditorView/getUAPrefix");
+var _handleEditorFocus = require("./ReactEditorView/handleEditorFocus");
+var _useDispatchTransaction = require("./ReactEditorView/useDispatchTransaction");
+var _useFireFullWidthEvent = require("./ReactEditorView/useFireFullWidthEvent");
+var _usePluginPerformanceObserver = require("./ReactEditorView/usePluginPerformanceObserver");
+var _ReactEditorViewContext = _interopRequireDefault(require("./ReactEditorViewContext"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+var EDIT_AREA_ID = 'ak-editor-textarea';
+function ReactEditorView(props) {
+  var _media, _linking, _props$render, _props$render2;
+  var preset = props.preset,
+    _props$editorProps = props.editorProps,
+    nextAppearance = _props$editorProps.appearance,
+    disabled = _props$editorProps.disabled;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    editorAPI = _useState2[0],
+    setEditorAPI = _useState2[1];
+  var editorRef = (0, _react.useRef)(null);
+  var viewRef = (0, _react.useRef)();
+  var focusTimeoutId = (0, _react.useRef)();
+  // ProseMirror is instantiated prior to the initial React render cycle,
+  // so we allow transactions by default, to avoid discarding the initial one.
+  var canDispatchTransactions = (0, _react.useRef)(true);
+  var editorId = (0, _react.useRef)((0, _v.default)());
+  var eventDispatcher = (0, _react.useMemo)(function () {
+    return new _eventDispatcher.EventDispatcher();
+  }, []);
+  var config = (0, _react.useRef)({
+    nodes: [],
+    marks: [],
+    pmPlugins: [],
+    contentComponents: [],
+    pluginHooks: [],
+    primaryToolbarComponents: [],
+    secondaryToolbarComponents: [],
+    onEditorViewStateUpdatedCallbacks: []
+  });
+  var contentTransformer = (0, _react.useRef)(undefined);
+  var featureFlags = (0, _react.useRef)((0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.editorProps));
+  var getEditorState = (0, _react.useCallback)(function () {
+    var _viewRef$current;
+    return (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.state;
+  }, []);
+  var getEditorView = (0, _react.useCallback)(function () {
+    return viewRef.current;
+  }, []);
+  var dispatch = (0, _react.useMemo)(function () {
+    return (0, _eventDispatcher.createDispatch)(eventDispatcher);
+  }, [eventDispatcher]);
+  var errorReporter = (0, _react.useRef)((0, _createEditor.createErrorReporter)(props.editorProps.errorReporterHandler));
+  var handleAnalyticsEvent = (0, _react.useCallback)(function (payload) {
+    (0, _analytics.fireAnalyticsEvent)(props.createAnalyticsEvent)(payload);
+  }, [props.createAnalyticsEvent]);
+  var dispatchAnalyticsEvent = (0, _react.useCallback)(function (payload) {
+    var dispatch = (0, _eventDispatcher.createDispatch)(eventDispatcher);
+    dispatch(_analytics2.analyticsEventKey, {
+      payload: payload
+    });
+  }, [eventDispatcher]);
+  var pluginInjectionAPI = (0, _react.useRef)(new _preset.EditorPluginInjectionAPI({
+    getEditorState: getEditorState,
+    getEditorView: getEditorView
+  }));
+  (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;
+    if (viewRef.current) {
+      if (options.resetting) {
+        /**
+         * ReactEditorView currently does NOT handle dynamic schema,
+         * We are reusing the existing schema, and rely on #reconfigureState
+         * to update `this.config`
+         */
+        schema = viewRef.current.state.schema;
+      } else {
+        /**
+         * There's presently a number of issues with changing the schema of a
+         * editor inflight. A significant issue is that we lose the ability
+         * to keep track of a user's history as the internal plugin state
+         * keeps a list of Steps to undo/redo (which are tied to the schema).
+         * Without a good way to do work around this, we prevent this for now.
+         */
+        // eslint-disable-next-line no-console
+        console.warn('The editor does not support changing the schema dynamically.');
+        return viewRef.current.state;
+      }
+    } else {
+      config.current = (0, _createEditor.processPluginsList)((0, _createPluginsList.default)(options.props.preset, props.editorProps, pluginInjectionAPI.current));
+      schema = (0, _createSchema.createSchema)(config.current);
+    }
+    var contentTransformerProvider = options.props.editorProps.contentTransformerProvider;
+    var plugins = (0, _createEditor.createPMPlugins)({
+      schema: schema,
+      dispatch: dispatch,
+      errorReporter: errorReporter.current,
+      editorConfig: config.current,
+      eventDispatcher: eventDispatcher,
+      providerFactory: options.props.providerFactory,
+      portalProviderAPI: props.portalProviderAPI,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      featureFlags: featureFlags.current,
+      getIntl: function getIntl() {
+        return props.intl;
+      }
+    });
+    contentTransformer.current = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
+    var api = pluginInjectionAPI.current.api();
+
+    // If we have a doc prop, we need to process it into a PMNode
+    var doc;
+    if (options.doc) {
+      // if the collabEdit API is set, skip this validation due to potential pm validation errors
+      // from docs that end up with invalid marks after processing (See #hot-111702 for more details)
+      if ((api === null || api === void 0 ? void 0 : api.collabEdit) !== undefined && (0, _platformFeatureFlags.fg)('editor_load_conf_collab_docs_without_checks')) {
+        doc = (0, _processRawValue.processRawValueWithoutTransformation)(schema, options.doc);
+      } else {
+        doc = (0, _processRawValue.processRawValue)(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, contentTransformer.current, dispatchAnalyticsEvent);
+      }
+    }
+    var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
+    var selection;
+    if (doc) {
+      if (isViewMode) {
+        var emptySelection = new _state2.TextSelection(doc.resolve(0));
+        return _state2.EditorState.create({
+          schema: schema,
+          plugins: plugins,
+          doc: doc,
+          selection: emptySelection
+        });
+      } else {
+        selection = options.selectionAtStart ? _state2.Selection.atStart(doc) : _state2.Selection.atEnd(doc);
+      }
+    }
+    // Workaround for ED-3507: When media node is the last element, scrollIntoView throws an error
+    var patchedSelection = selection ? _state2.Selection.findFrom(selection.$head, -1, true) || undefined : undefined;
+    return _state2.EditorState.create({
+      schema: schema,
+      plugins: plugins,
+      doc: doc,
+      selection: patchedSelection
+    });
+  }, [props.intl, props.portalProviderAPI, props.editorProps, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  var resetEditorState = (0, _react.useCallback)(function (_ref) {
+    var _props$editorProps$on, _props$editorProps2;
+    var doc = _ref.doc,
+      shouldScrollToBottom = _ref.shouldScrollToBottom;
+    if (!viewRef.current) {
+      return;
+    }
+
+    // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
+    // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
+    // nodes that haven't been re-rendered to the document yet.
+    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'
+    });
+  }, [blur, createEditorState, props]);
+
+  // Initialise phase
+  // Using constructor hook so we setup and dispatch analytics before anything else
+  (0, _hooks.useConstructor)(function () {
+    dispatchAnalyticsEvent({
+      action: _analytics.ACTION.STARTED,
+      actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+      attributes: {
+        platform: _analytics.PLATFORMS.WEB,
+        featureFlags: featureFlags.current ? (0, _normalizeFeatureFlags.getEnabledFeatureFlagKeys)(featureFlags.current) : []
+      },
+      eventType: _analytics.EVENT_TYPE.UI
+    });
+    // Transaction dispatching is already enabled by default prior to
+    // mounting, but we reset it here, just in case the editor view
+    // instance is ever recycled (mounted again after unmounting) with
+    // the same key.
+    // Although storing mounted state is an anti-pattern in React,
+    // we do so here so that we can intercept and abort asynchronous
+    // ProseMirror transactions when a dismount is imminent.
+    canDispatchTransactions.current = true;
+    // This needs to be before initialising editorState because
+    // we dispatch analytics events in plugin initialisation
+    eventDispatcher.on(_analytics2.analyticsEventKey, handleAnalyticsEvent);
+    eventDispatcher.on('resetEditorState', resetEditorState);
+  });
+
+  // Cleanup
+  (0, _react.useLayoutEffect)(function () {
+    return function () {
+      var focusTimeoutIdCurrent = focusTimeoutId.current;
+      if (focusTimeoutIdCurrent) {
+        clearTimeout(focusTimeoutIdCurrent);
+      }
+      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);
+          if (state && state.destroy) {
+            state.destroy();
+          }
+        });
+      }
+      eventDispatcher.destroy();
+      // this.view will be destroyed when React unmounts in handleEditorViewRef
+    };
+  }, [eventDispatcher]);
+  var reconfigureState = (0, _react.useCallback)(function (props) {
+    if (!viewRef.current) {
+      return;
+    }
+
+    // We cannot currently guarentee when all the portals will have re-rendered during a reconfigure
+    // so we blur here to stop ProseMirror from trying to apply selection to detached nodes or
+    // nodes that haven't been re-rendered to the document yet.
+    blur();
+    var editorPlugins = (0, _createPluginsList.default)(props.preset, props.editorProps, pluginInjectionAPI.current);
+    config.current = (0, _createEditor.processPluginsList)(editorPlugins);
+    var state = editorState.current;
+    var plugins = (0, _createEditor.createPMPlugins)({
+      schema: state.schema,
+      dispatch: dispatch,
+      errorReporter: errorReporter.current,
+      editorConfig: config.current,
+      eventDispatcher: eventDispatcher,
+      providerFactory: props.providerFactory,
+      portalProviderAPI: props.portalProviderAPI,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      featureFlags: (0, _featureFlagsFromProps.createFeatureFlagsFromProps)(props.editorProps),
+      getIntl: function getIntl() {
+        return props.intl;
+      }
+    });
+    var newState = state.reconfigure({
+      plugins: plugins
+    });
+
+    // need to update the state first so when the view builds the nodeviews it is
+    // using the latest plugins
+    viewRef.current.updateState(newState);
+    return viewRef.current.update(_objectSpread(_objectSpread({}, viewRef.current.props), {}, {
+      state: newState
+    }));
+  }, [blur, dispatchAnalyticsEvent, eventDispatcher, dispatch]);
+  var onEditorViewUpdated = (0, _react.useCallback)(function (_ref2) {
+    var _config$current;
+    var originalTransaction = _ref2.originalTransaction,
+      transactions = _ref2.transactions,
+      oldEditorState = _ref2.oldEditorState,
+      newEditorState = _ref2.newEditorState;
+    pluginInjectionAPI.current.onEditorViewUpdated({
+      newEditorState: newEditorState,
+      oldEditorState: oldEditorState
+    });
+    (_config$current = config.current) === null || _config$current === void 0 || _config$current.onEditorViewStateUpdatedCallbacks.forEach(function (entry) {
+      entry.callback({
+        originalTransaction: originalTransaction,
+        transactions: transactions,
+        oldEditorState: oldEditorState,
+        newEditorState: newEditorState
+      });
+    });
+  }, []);
+  var _dispatchTransaction = (0, _useDispatchTransaction.useDispatchTransaction)({
+    onChange: props.editorProps.onChange,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    onEditorViewUpdated: onEditorViewUpdated
+  });
+
+  // TODO: Remove these when we deprecate these props from editor-props - smartLinks is unfortunately still used in some places, we can sidestep this problem if we move everyone across to ComposableEditor and deprecate Editor
+  var UNSAFE_cards = props.editorProps.UNSAFE_cards;
+  var smartLinks = props.editorProps.smartLinks;
+
+  // Temporary to replace provider factory while migration to `ComposableEditor` occurs
+  (0, _useProviders.useProviders)({
+    editorApi: editorAPI,
+    contextIdentifierProvider: props.editorProps.contextIdentifierProvider,
+    mediaProvider: (_media = props.editorProps.media) === null || _media === void 0 ? void 0 : _media.provider,
+    cardProvider: ((_linking = props.editorProps.linking) === null || _linking === void 0 || (_linking = _linking.smartLinks) === null || _linking === void 0 ? void 0 : _linking.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider,
+    emojiProvider: props.editorProps.emojiProvider,
+    autoformattingProvider: props.editorProps.autoformattingProvider,
+    taskDecisionProvider: props.editorProps.taskDecisionProvider
+  });
+  var getDirectEditorProps = (0, _react.useCallback)(function (state) {
+    return {
+      state: state || editorState.current,
+      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;
+          }
+        }
+      },
+      // Disables the contentEditable attribute of the editor if the editor is disabled
+      editable: function editable(_state) {
+        return !disabled;
+      },
+      attributes: {
+        'data-gramm': 'false'
+      }
+    };
+  }, [_dispatchTransaction, disabled]);
+  var createEditorView = (0, _react.useCallback)(function (node) {
+    (0, _measureRender.measureRender)(_measureEnum.default.PROSEMIRROR_RENDERED, function (_ref3) {
+      var duration = _ref3.duration,
+        startTime = _ref3.startTime,
+        distortedDuration = _ref3.distortedDuration;
+      var proseMirrorRenderedSeverity = (0, _analytics2.getAnalyticsEventSeverity)(duration, _consts.PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, _consts.PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD);
+      if (viewRef.current) {
+        var _pluginInjectionAPI$c;
+        var nodes = (0, _getNodesCount.getNodesCount)(viewRef.current.state.doc);
+        var ttfb = (0, _navigation.getResponseEndTime)();
+        var contextIdentifier = (_pluginInjectionAPI$c = pluginInjectionAPI.current.api().base) === null || _pluginInjectionAPI$c === void 0 ? void 0 : _pluginInjectionAPI$c.sharedState.currentState();
+        dispatchAnalyticsEvent({
+          action: _analytics.ACTION.PROSEMIRROR_RENDERED,
+          actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+          attributes: {
+            duration: duration,
+            startTime: startTime,
+            nodes: nodes,
+            ttfb: ttfb,
+            severity: proseMirrorRenderedSeverity,
+            objectId: contextIdentifier === null || contextIdentifier === void 0 ? void 0 : contextIdentifier.objectId,
+            distortedDuration: distortedDuration
+          },
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL
+        });
+      }
+    });
+
+    // Creates the editor-view from this.editorState. If an editor has been mounted
+    // previously, this will contain the previous state of the editor.
+    var view = new _view.EditorView({
+      mount: node
+    }, getDirectEditorProps());
+    viewRef.current = view;
+    pluginInjectionAPI.current.onEditorViewUpdated({
+      newEditorState: viewRef.current.state,
+      oldEditorState: undefined
+    });
+    return view;
+  }, [getDirectEditorProps, dispatchAnalyticsEvent]);
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    _ = _useState4[0],
+    setEditorView = _useState4[1];
+  var onEditorCreated = props.onEditorCreated,
+    onEditorDestroyed = props.onEditorDestroyed,
+    shouldFocus = props.editorProps.shouldFocus;
+  var handleEditorViewRef = (0, _react.useCallback)(function (node) {
+    if (!viewRef.current && node) {
+      var view = createEditorView(node);
+      onEditorCreated({
+        view: view,
+        config: config.current,
+        eventDispatcher: eventDispatcher,
+        transformer: contentTransformer.current
+      });
+      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);
+    } 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
+      // create the new EditorView
+      onEditorDestroyed({
+        view: viewRef.current,
+        config: config.current,
+        eventDispatcher: eventDispatcher,
+        transformer: contentTransformer.current
+      });
+      var wasAnalyticsDisconnected = !eventDispatcher.has(_analytics2.analyticsEventKey, handleAnalyticsEvent);
+      // If we disabled event listening for some reason we should re-enable it temporarily while we destroy
+      // the view for any analytics that occur there.
+      if (wasAnalyticsDisconnected) {
+        eventDispatcher.on(_analytics2.analyticsEventKey, handleAnalyticsEvent);
+        viewRef.current.destroy(); // Destroys the dom node & all node views
+        eventDispatcher.off(_analytics2.analyticsEventKey, handleAnalyticsEvent);
+      } else {
+        viewRef.current.destroy(); // Destroys the dom node & all node views
+      }
+      viewRef.current = undefined;
+    }
+  }, [createEditorView, handleAnalyticsEvent, onEditorDestroyed, onEditorCreated, shouldFocus, eventDispatcher]);
+  var createEditor = (0, _react.useCallback)(function (assistiveLabel, assistiveDescribedBy) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: (0, _getUAPrefix.getUAPrefix)(),
+      key: "ProseMirror",
+      ref: handleEditorViewRef,
+      "aria-label": assistiveLabel || props.intl.formatMessage(_messages.editorMessages.editorAssistiveLabel)
+      // setting aria-multiline to true when not mobile appearance.
+      //  because somehow mobile tests are failing when it set.
+      //  don't know why that is happening.
+      // Created https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-1675
+      //  to investigate further.
+      ,
+      "aria-multiline": true,
+      role: "textbox",
+      id: EDIT_AREA_ID,
+      "aria-describedby": assistiveDescribedBy,
+      "data-editor-id": editorId.current
+    });
+  }, [handleEditorViewRef, props.intl]);
+  var previousPreset = (0, _hooks.usePreviousState)(preset);
+  (0, _react.useLayoutEffect)(function () {
+    if (previousPreset && previousPreset !== preset) {
+      reconfigureState(props);
+    }
+  }, [reconfigureState, previousPreset, preset, props]);
+  var previousDisabledState = (0, _hooks.usePreviousState)(disabled);
+  (0, _react.useLayoutEffect)(function () {
+    if (viewRef.current && previousDisabledState !== disabled) {
+      // Disables the contentEditable attribute of the editor if the editor is disabled
+      viewRef.current.setProps({
+        editable: function editable(_state) {
+          return !disabled;
+        }
+      });
+      if (!disabled && shouldFocus) {
+        focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(viewRef.current);
+      }
+    }
+  }, [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);
+  var editor = (0, _react.useMemo)(function () {
+    return 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
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.editorProps.assistiveLabel, props.editorProps.assistiveDescribedBy]);
+  return /*#__PURE__*/_react.default.createElement(_ReactEditorViewContext.default.Provider, {
+    value: {
+      editorRef: editorRef,
+      editorView: viewRef.current,
+      popupsMountPoint: props.editorProps.popupsMountPoint
+    }
+  }, /*#__PURE__*/_react.default.createElement(_RenderTracking.RenderTracking, {
+    componentProps: props,
+    action: _analytics.ACTION.RE_RENDERED,
+    actionSubject: _analytics.ACTION_SUBJECT.REACT_EDITOR_VIEW,
+    handleAnalyticsEvent: handleAnalyticsEvent,
+    useShallow: true
+  }), props.render ? (_props$render = (_props$render2 = props.render) === null || _props$render2 === void 0 ? void 0 : _props$render2.call(props, {
+    editor: editor,
+    view: viewRef.current,
+    config: config.current,
+    eventDispatcher: eventDispatcher,
+    transformer: contentTransformer.current,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorRef: editorRef,
+    editorAPI: editorAPI
+  })) !== null && _props$render !== void 0 ? _props$render : editor : editor);
+}
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(ReactEditorView);

package/dist/cjs/presets/universal.js

@@ -207,7 +207,8 @@ function createUniversalPresetInternal(_ref) {
   // @ts-expect-error 2322: Type 'false | PlaceholderTextOptions | undefined'
   props.allowTemplatePlaceholders !== true ? props.allowTemplatePlaceholders : {}], Boolean(props.allowTemplatePlaceholders)).maybeAdd([_layout.layoutPlugin, _objectSpread(_objectSpread({}, (0, _typeof2.default)(props.allowLayouts) === 'object' ? props.allowLayouts : {}), {}, {
     useLongPressSelection: false,
-    UNSAFE_allowSingleColumnLayout: (0, _typeof2.default)(props.allowLayouts) === 'object' ? props.allowLayouts.UNSAFE_allowSingleColumnLayout : undefined
+    UNSAFE_allowSingleColumnLayout: (0, _typeof2.default)(props.allowLayouts) === 'object' ? props.allowLayouts.UNSAFE_allowSingleColumnLayout : undefined,
+    editorAppearance: appearance
   })], Boolean(props.allowLayouts)).maybeAdd([_card.cardPlugin, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props.UNSAFE_cards), props.smartLinks), (_props$linking = props.linking) === null || _props$linking === void 0 ? void 0 : _props$linking.smartLinks), {}, {
     fullWidthMode: appearance === 'full-width',
     linkPicker: (_props$linking2 = props.linking) === null || _props$linking2 === void 0 ? void 0 : _props$linking2.linkPicker,

package/dist/cjs/ui/Addon/click-area-helper.js

@@ -113,6 +113,5 @@ var outsideProsemirrorEditorClickHandler = function outsideProsemirrorEditorClic
     dispatch(tr);
   }
   view.focus();
-  event.stopPropagation();
   event.preventDefault();
 };

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

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

@@ -9,9 +9,11 @@ import { Fragment, memo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ACTION, ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { usePortalProvider } from '@atlaskit/editor-common/portal';
+import { fg } from '@atlaskit/platform-feature-flags';
 import ErrorBoundary from '../create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from-props';
 import ReactEditorView from '../create-editor/ReactEditorView';
+import ReactEditorViewNext from '../create-editor/ReactEditorViewNext';
 import { ContextAdapter } from '../nodeviews/context-adapter';
 import EditorContext from '../ui/EditorContext';
 import { IntlProviderIfMissingWrapper } from '../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
@@ -67,7 +69,7 @@ export const EditorInternal = /*#__PURE__*/memo(({
     css: editorContainerStyles
   }, jsx(EditorContext, {
     editorActions: editorActions
-  }, jsx(ContextAdapter, null, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, jsx(ReactEditorViewContextWrapper, {
+  }, jsx(ContextAdapter, null, jsx(IntlProviderIfMissingWrapper, null, jsx(Fragment, null, fg('platform_editor_react_editor_view_react_18') ? jsx(ReactEditorViewNext, {
     editorProps: overriddenEditorProps,
     createAnalyticsEvent: createAnalyticsEvent,
     portalProviderAPI: portalProviderAPI,
@@ -122,6 +124,61 @@ export const EditorInternal = /*#__PURE__*/memo(({
         pluginHooks: config.pluginHooks
       }));
     }
+  }) : jsx(ReactEditorViewContextWrapper, {
+    editorProps: overriddenEditorProps,
+    createAnalyticsEvent: createAnalyticsEvent,
+    portalProviderAPI: portalProviderAPI,
+    providerFactory: providerFactory,
+    onEditorCreated: onEditorCreated,
+    onEditorDestroyed: onEditorDestroyed,
+    disabled: props.disabled,
+    preset: preset,
+    render: ({
+      editor,
+      view,
+      eventDispatcher,
+      config,
+      dispatchAnalyticsEvent,
+      editorRef,
+      editorAPI
+    }) => {
+      var _props$featureFlags3, _props$featureFlags4;
+      return jsx(BaseThemeWrapper, {
+        baseFontSize: getBaseFontSize(props.appearance)
+      }, 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
+      }));
+    }
   }), jsx(PortalRenderer, null))))))));
 });
 function ReactEditorViewContextWrapper(props) {

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

@@ -0,0 +1,7 @@
+import { FULL_WIDTH_MODE } from '@atlaskit/editor-common/analytics';
+export const formatFullWidthAppearance = appearance => {
+  if (appearance === 'full-width') {
+    return FULL_WIDTH_MODE.FULL_WIDTH;
+  }
+  return FULL_WIDTH_MODE.FIXED_WIDTH;
+};

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

@@ -0,0 +1,13 @@
+import { browser } from '@atlaskit/editor-common/browser';
+export function getUAPrefix() {
+  if (browser.chrome) {
+    return 'ua-chrome';
+  } else if (browser.ie) {
+    return 'ua-ie';
+  } else if (browser.gecko) {
+    return 'ua-firefox';
+  } else if (browser.safari) {
+    return 'ua-safari';
+  }
+  return '';
+}