@atlaskit/editor-core 197.11.1 → 197.13.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-core
 
+## 197.13.0
+
+### Minor Changes
+
+- [#144103](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144103)
+  [`fa7b54fa5353e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fa7b54fa5353e) -
+  Remove the use of usePresetContext in editor-core
+
+## 197.12.0
+
+### Minor Changes
+
+- [#144047](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144047)
+  [`0e77caf52a59d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e77caf52a59d) -
+  add new full page toolbar breakpoints
+- [#145317](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145317)
+  [`ecfdb14f93474`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ecfdb14f93474) -
+  Add appearance prop for FullPageEditor so that it can be re-used for full-width mode.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 197.11.1
 
 ### Patch Changes

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

@@ -12,6 +12,7 @@ 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"));
@@ -142,7 +143,15 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
 });
 function ReactEditorViewContextWrapper(props) {
   var _props$editorProps$me, _props$editorProps$li;
+  // deprecated, unable to be FF due to hook usage
   var setInternalEditorAPI = (0, _context.useSetPresetContext)();
+  var presetContextEditorAPI = (0, _context.usePresetContext)();
+
+  // new way of storing the editorApi when FF platform_editor_remove_use_preset_context is enabled
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    editorAPI = _useState2[0],
+    setEditorAPI = _useState2[1];
 
   /**
    * We use the context to retrieve the editorAPI
@@ -152,16 +161,21 @@ function ReactEditorViewContextWrapper(props) {
    * so we should also set the value for the `EditorContext` that is used in
    * `EditorInternal`.
    */
-  var setEditorAPI = (0, _react.useCallback)(
+  var setPresetContextEditorAPI = (0, _react.useCallback)(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (api) {
-    setInternalEditorAPI === null || setInternalEditorAPI === void 0 || setInternalEditorAPI(api);
-  }, [setInternalEditorAPI]);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context')) {
+      setEditorAPI(api);
+    } else {
+      setInternalEditorAPI === null || setInternalEditorAPI === void 0 || setInternalEditorAPI(api);
+    }
+  }, [setInternalEditorAPI, setEditorAPI]);
 
   // 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;
   (0, _useProviders.useProviders)({
+    editorApi: (0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context') ? editorAPI : presetContextEditorAPI,
     contextIdentifierProvider: props.editorProps.contextIdentifierProvider,
     mediaProvider: (_props$editorProps$me = props.editorProps.media) === null || _props$editorProps$me === void 0 ? void 0 : _props$editorProps$me.provider,
     cardProvider: ((_props$editorProps$li = props.editorProps.linking) === null || _props$editorProps$li === void 0 || (_props$editorProps$li = _props$editorProps$li.smartLinks) === null || _props$editorProps$li === void 0 ? void 0 : _props$editorProps$li.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider,
@@ -169,6 +183,7 @@ function ReactEditorViewContextWrapper(props) {
     autoformattingProvider: props.editorProps.autoformattingProvider
   });
   return (0, _react2.jsx)(_ReactEditorView.default, (0, _extends2.default)({}, props, {
-    setEditorApi: setEditorAPI
+    editorAPI: editorAPI,
+    setEditorApi: setPresetContextEditorAPI
   }));
 }

package/dist/cjs/composable-editor/hooks/useProviders.js

@@ -9,7 +9,6 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _context2 = require("../../presets/context");
 /**
  * This hook is used to replace the old approach of using the `providerFactory`.
  *
@@ -19,12 +18,12 @@ var _context2 = require("../../presets/context");
  * In the future ideally consumers implement this behaviour themselves.
  */
 var useProviders = exports.useProviders = function useProviders(_ref) {
-  var contextIdentifierProvider = _ref.contextIdentifierProvider,
+  var editorApi = _ref.editorApi,
+    contextIdentifierProvider = _ref.contextIdentifierProvider,
     mediaProvider = _ref.mediaProvider,
     cardProvider = _ref.cardProvider,
     emojiProvider = _ref.emojiProvider,
     autoformattingProvider = _ref.autoformattingProvider;
-  var editorApi = (0, _context2.usePresetContext)();
   (0, _react.useEffect)(function () {
     function setProvider() {
       return _setProvider.apply(this, arguments);

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

@@ -769,6 +769,31 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
       var renderTracking = (_this$props$editorPro10 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro10 === void 0 || (_this$props$editorPro10 = _this$props$editorPro10.renderTracking) === null || _this$props$editorPro10 === void 0 ? void 0 : _this$props$editorPro10.reactEditorView;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context')) {
+        var _this$props$render, _this$props$render2, _this$props;
+        return /*#__PURE__*/_react.default.createElement(_ReactEditorViewContext.default.Provider, {
+          value: {
+            editorRef: this.editorRef,
+            editorView: this.view,
+            popupsMountPoint: this.props.editorProps.popupsMountPoint
+          }
+        }, renderTrackingEnabled && /*#__PURE__*/_react.default.createElement(_RenderTracking.RenderTracking, {
+          componentProps: this.props,
+          action: _analytics.ACTION.RE_RENDERED,
+          actionSubject: _analytics.ACTION_SUBJECT.REACT_EDITOR_VIEW,
+          handleAnalyticsEvent: this.handleAnalyticsEvent,
+          useShallow: useShallow
+        }), this.props.render ? (_this$props$render = (_this$props$render2 = (_this$props = this.props).render) === null || _this$props$render2 === void 0 ? void 0 : _this$props$render2.call(_this$props, {
+          editor: this.editor,
+          view: this.view,
+          config: this.config,
+          eventDispatcher: this.eventDispatcher,
+          transformer: this.contentTransformer,
+          dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+          editorRef: this.editorRef,
+          editorAPI: this.props.editorAPI
+        })) !== null && _this$props$render !== void 0 ? _this$props$render : this.editor : this.editor);
+      }
       return /*#__PURE__*/_react.default.createElement(_ReactEditorViewContext.default.Provider, {
         value: {
           editorRef: this.editorRef,

package/dist/cjs/editor-appearances/FullPageEditor.js

@@ -20,8 +20,9 @@ var _FullPage = _interopRequireDefault(require("../ui/Appearance/FullPage"));
  * @returns Editor component
  */
 function FullPageEditor(props) {
+  var _props$appearance;
   return /*#__PURE__*/_react.default.createElement(_coreEditor.CoreEditor, (0, _extends2.default)({}, props, {
-    appearance: "full-page",
+    appearance: (_props$appearance = props.appearance) !== null && _props$appearance !== void 0 ? _props$appearance : 'full-page',
     AppearanceComponent: _FullPage.default
   }));
 }

package/dist/cjs/editor-appearances/FullWidthEditor.js

@@ -18,6 +18,7 @@ var _FullPage = _interopRequireDefault(require("../ui/Appearance/FullPage"));
  *
  * @param props FullWidthEditorProps
  * @returns Editor component
+ * @deprecated In favour of `FullPageEditor` with appearance "full-width"
  */
 function FullWidthEditor(props) {
   return /*#__PURE__*/_react.default.createElement(_coreEditor.CoreEditor, (0, _extends2.default)({}, props, {

package/dist/cjs/presets/universal.js

@@ -223,10 +223,7 @@ function createUniversalPresetInternal(_ref) {
     tableSelectorSupported: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableSelector) && isFullPage,
     nativeStatusSupported: !statusMenuDisabled,
     showElementBrowserLink: props.elementBrowser && props.elementBrowser.showModal || false,
-    // @ts-ignore
-    // For platform_editor_element_level_templates experiment only
-    // clean up ticket ED-24873
-    UNSAFE_editorAppearance: appearance
+    appearance: appearance
   }]).maybeAdd([_beforePrimaryToolbar.beforePrimaryToolbarPlugin, {
     beforePrimaryToolbarComponents: // @ts-expect-error 2339: Property 'before' does not exist on type 'PrimaryToolbarComponents'.
     (_props$primaryToolbar = props.primaryToolbarComponents) === null || _props$primaryToolbar === void 0 ? void 0 : _props$primaryToolbar.before

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -17,6 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ContentStyles = require("../ContentStyles");
 var _PluginSlot = _interopRequireDefault(require("../PluginSlot"));
 var _WithFlash = _interopRequireDefault(require("../WithFlash"));
@@ -85,6 +86,8 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
         pluginHooks = _this$props.pluginHooks,
         featureFlags = _this$props.featureFlags;
       var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
+      var _useSharedPluginState = (0, _hooks.useSharedPluginState)(_this.props.editorAPI, ['editorViewMode']),
+        editorViewModeState = _useSharedPluginState.editorViewModeState;
       return (0, _react2.jsx)(_WithFlash.default, {
         animate: maxContentSizeReached
       }, (0, _react2.jsx)("div", {
@@ -107,7 +110,8 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
         className: "ak-editor-content-area",
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        viewMode: (0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context') ? editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode : undefined
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
         editorView: editorView,
         editorActions: editorActions,
@@ -142,8 +146,8 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
 function RenderWithPluginState(_ref3) {
   var renderChrome = _ref3.renderChrome,
     editorAPI = _ref3.editorAPI;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['maxContentSize']),
-    maxContentSizeState = _useSharedPluginState.maxContentSizeState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(editorAPI, ['maxContentSize']),
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
   return (0, _react2.jsx)(_react.Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState
   }));

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -85,10 +85,11 @@ var secondaryToolbarStyles = (0, _react2.css)({
 var appearance = 'comment';
 var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['media', 'maxContentSize', 'primaryToolbar']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['media', 'maxContentSize', 'primaryToolbar', 'editorViewMode']),
     mediaState = _useSharedPluginState.mediaState,
     maxContentSizeState = _useSharedPluginState.maxContentSizeState,
-    primaryToolbarState = _useSharedPluginState.primaryToolbarState;
+    primaryToolbarState = _useSharedPluginState.primaryToolbarState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
   var intl = (0, _reactIntlNext.useIntl)();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,
@@ -218,7 +219,8 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
       className: (0, _classnames.default)('ak-editor-content-area', {
         'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
       }),
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      viewMode: (0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context') ? editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode : undefined
     }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
       editorView: editorView,
       editorActions: editorActions,

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -118,6 +118,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     wrapperElement: (_wrapperElementRef$cu = wrapperElementRef === null || wrapperElementRef === void 0 ? void 0 : wrapperElementRef.current) !== null && _wrapperElementRef$cu !== void 0 ? _wrapperElementRef$cu : null,
     pluginHooks: props.pluginHooks,
     featureFlags: props.featureFlags,
-    isEditorToolbarHidden: isEditorToolbarHidden
+    isEditorToolbarHidden: isEditorToolbarHidden,
+    viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
   })));
 };

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -60,7 +60,8 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   , {
     className: "fabric-editor-popup-scroll-parent",
     featureFlags: props.featureFlags,
-    ref: scrollContainerRef
+    ref: scrollContainerRef,
+    viewMode: (0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context') ? props === null || props === void 0 ? void 0 : props.viewMode : undefined
   }, (0, _react2.jsx)(_Addon.ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled

package/dist/cjs/ui/ContentStyles/index.js

@@ -101,15 +101,14 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
     var editorAPI = (0, _context.usePresetContext)();
     var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['editorViewMode']),
       editorViewModeState = _useSharedPluginState.editorViewModeState;
-    var viewMode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
     var memoizedStyle = (0, _react.useMemo)(function () {
       return contentStyles({
         theme: theme,
         colorMode: colorMode,
         featureFlags: featureFlags,
-        viewMode: viewMode
+        viewMode: (0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
       });
-    }, [theme, colorMode, featureFlags, viewMode]);
+    }, [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode]);
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       (0, _react2.jsx)("div", {

package/dist/cjs/ui/EditorContext/index.js

@@ -13,6 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = _interopRequireDefault(require("../../actions"));
 var _context = require("../../presets/context");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
@@ -41,9 +42,15 @@ var LegacyEditorContext = exports.default = /*#__PURE__*/function (_React$Compon
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(EditorContext.Provider, {
-        value: this.getChildContext()
-      }, /*#__PURE__*/_react.default.createElement(_context.PresetContextProvider, null, this.props.children));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_remove_use_preset_context')) {
+        return /*#__PURE__*/_react.default.createElement(EditorContext.Provider, {
+          value: this.getChildContext()
+        }, this.props.children);
+      } else {
+        return /*#__PURE__*/_react.default.createElement(EditorContext.Provider, {
+          value: this.getChildContext()
+        }, /*#__PURE__*/_react.default.createElement(_context.PresetContextProvider, null, this.props.children));
+      }
     }
   }]);
   return LegacyEditorContext;

package/dist/cjs/ui/Toolbar/toolbar-size.js

@@ -4,8 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.widthToToolbarSize = exports.toolbarSizeToWidth = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _isFullPage = require("../../utils/is-full-page");
 var _types = require("./types");
+var toolbarSizesFullPageNext = [{
+  width: _types.ToolbarWidthsFullPageNext.XXL,
+  size: _types.ToolbarSize.XXL
+}, {
+  width: _types.ToolbarWidthsFullPageNext.XL,
+  size: _types.ToolbarSize.XL
+}, {
+  width: _types.ToolbarWidthsFullPageNext.L,
+  size: _types.ToolbarSize.L
+}, {
+  width: _types.ToolbarWidthsFullPageNext.M,
+  size: _types.ToolbarSize.M
+}, {
+  width: _types.ToolbarWidthsFullPageNext.S,
+  size: _types.ToolbarSize.S
+}];
+
 // Toolbar sizes for full page editor a little bit different, because it has more buttons e.g. actions button...
 var toolbarSizesFullPage = [{
   width: _types.ToolbarWidthsFullPage.XXL,
@@ -40,7 +58,7 @@ var toolbarSizes = [{
   size: _types.ToolbarSize.S
 }];
 var toolbarSizesForAppearance = function toolbarSizesForAppearance(appearance) {
-  return (0, _isFullPage.isFullPage)(appearance) ? toolbarSizesFullPage : toolbarSizes;
+  return (0, _isFullPage.isFullPage)(appearance) ? (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes') ? toolbarSizesFullPageNext : toolbarSizesFullPage : toolbarSizes;
 };
 var toolbarSizeToWidth = exports.toolbarSizeToWidth = function toolbarSizeToWidth(toolbarSize, appearance) {
   return (toolbarSizesForAppearance(appearance).find(function (_ref) {

package/dist/cjs/ui/Toolbar/types.js

@@ -21,4 +21,10 @@ Object.defineProperty(exports, "ToolbarWidthsFullPage", {
     return _types.ToolbarWidthsFullPage;
   }
 });
+Object.defineProperty(exports, "ToolbarWidthsFullPageNext", {
+  enumerable: true,
+  get: function get() {
+    return _types.ToolbarWidthsFullPageNext;
+  }
+});
 var _types = require("@atlaskit/editor-common/types");

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

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

@@ -3,17 +3,18 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, memo, useCallback } from 'react';
+import { Fragment, memo, useCallback, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 { ContextAdapter } from '../nodeviews/context-adapter';
-import { useSetPresetContext } from '../presets/context';
+import { usePresetContext, useSetPresetContext } from '../presets/context';
 import EditorContext from '../ui/EditorContext';
 import { IntlProviderIfMissingWrapper } from '../ui/IntlProviderIfMissingWrapper/IntlProviderIfMissingWrapper';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
@@ -134,7 +135,12 @@ export const EditorInternal = /*#__PURE__*/memo(({
 });
 function ReactEditorViewContextWrapper(props) {
   var _props$editorProps$me, _props$editorProps$li, _props$editorProps$li2;
+  // deprecated, unable to be FF due to hook usage
   const setInternalEditorAPI = useSetPresetContext();
+  const presetContextEditorAPI = usePresetContext();
+
+  // new way of storing the editorApi when FF platform_editor_remove_use_preset_context is enabled
+  const [editorAPI, setEditorAPI] = useState(undefined);
 
   /**
    * We use the context to retrieve the editorAPI
@@ -144,16 +150,21 @@ function ReactEditorViewContextWrapper(props) {
    * so we should also set the value for the `EditorContext` that is used in
    * `EditorInternal`.
    */
-  const setEditorAPI = useCallback(
+  const setPresetContextEditorAPI = useCallback(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   api => {
-    setInternalEditorAPI === null || setInternalEditorAPI === void 0 ? void 0 : setInternalEditorAPI(api);
-  }, [setInternalEditorAPI]);
+    if (fg('platform_editor_remove_use_preset_context')) {
+      setEditorAPI(api);
+    } else {
+      setInternalEditorAPI === null || setInternalEditorAPI === void 0 ? void 0 : setInternalEditorAPI(api);
+    }
+  }, [setInternalEditorAPI, setEditorAPI]);
 
   // 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
   const UNSAFE_cards = props.editorProps.UNSAFE_cards;
   const smartLinks = props.editorProps.smartLinks;
   useProviders({
+    editorApi: fg('platform_editor_remove_use_preset_context') ? editorAPI : presetContextEditorAPI,
     contextIdentifierProvider: props.editorProps.contextIdentifierProvider,
     mediaProvider: (_props$editorProps$me = props.editorProps.media) === null || _props$editorProps$me === void 0 ? void 0 : _props$editorProps$me.provider,
     cardProvider: ((_props$editorProps$li = props.editorProps.linking) === null || _props$editorProps$li === void 0 ? void 0 : (_props$editorProps$li2 = _props$editorProps$li.smartLinks) === null || _props$editorProps$li2 === void 0 ? void 0 : _props$editorProps$li2.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider,
@@ -161,6 +172,7 @@ function ReactEditorViewContextWrapper(props) {
     autoformattingProvider: props.editorProps.autoformattingProvider
   });
   return jsx(ReactEditorView, _extends({}, props, {
-    setEditorApi: setEditorAPI
+    editorAPI: editorAPI,
+    setEditorApi: setPresetContextEditorAPI
   }));
 }

package/dist/es2019/composable-editor/hooks/useProviders.js

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { usePresetContext } from '../../presets/context';
 /**
  * This hook is used to replace the old approach of using the `providerFactory`.
  *
@@ -10,13 +9,13 @@ import { usePresetContext } from '../../presets/context';
  * In the future ideally consumers implement this behaviour themselves.
  */
 export const useProviders = ({
+  editorApi,
   contextIdentifierProvider,
   mediaProvider,
   cardProvider,
   emojiProvider,
   autoformattingProvider
 }) => {
-  const editorApi = usePresetContext();
   useEffect(() => {
     async function setProvider() {
       var _editorApi$core, _editorApi$contextIde;

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

@@ -712,6 +712,31 @@ export class ReactEditorView extends React.Component {
     const renderTracking = (_this$props$editorPro14 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro14 === void 0 ? void 0 : (_this$props$editorPro15 = _this$props$editorPro14.renderTracking) === null || _this$props$editorPro15 === void 0 ? void 0 : _this$props$editorPro15.reactEditorView;
     const renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
     const useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
+    if (fg('platform_editor_remove_use_preset_context')) {
+      var _this$props$render, _this$props$render2, _this$props;
+      return /*#__PURE__*/React.createElement(ReactEditorViewContext.Provider, {
+        value: {
+          editorRef: this.editorRef,
+          editorView: this.view,
+          popupsMountPoint: this.props.editorProps.popupsMountPoint
+        }
+      }, renderTrackingEnabled && /*#__PURE__*/React.createElement(RenderTracking, {
+        componentProps: this.props,
+        action: ACTION.RE_RENDERED,
+        actionSubject: ACTION_SUBJECT.REACT_EDITOR_VIEW,
+        handleAnalyticsEvent: this.handleAnalyticsEvent,
+        useShallow: useShallow
+      }), this.props.render ? (_this$props$render = (_this$props$render2 = (_this$props = this.props).render) === null || _this$props$render2 === void 0 ? void 0 : _this$props$render2.call(_this$props, {
+        editor: this.editor,
+        view: this.view,
+        config: this.config,
+        eventDispatcher: this.eventDispatcher,
+        transformer: this.contentTransformer,
+        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+        editorRef: this.editorRef,
+        editorAPI: this.props.editorAPI
+      })) !== null && _this$props$render !== void 0 ? _this$props$render : this.editor : this.editor);
+    }
     return /*#__PURE__*/React.createElement(ReactEditorViewContext.Provider, {
       value: {
         editorRef: this.editorRef,
@@ -727,8 +752,8 @@ export class ReactEditorView extends React.Component {
     }), this.props.render ? /*#__PURE__*/React.createElement(EditorAPIContext.Consumer, null, ({
       editorApi
     }) => {
-      var _this$props$render, _this$props$render2, _this$props;
-      return (_this$props$render = (_this$props$render2 = (_this$props = this.props).render) === null || _this$props$render2 === void 0 ? void 0 : _this$props$render2.call(_this$props, {
+      var _this$props$render3, _this$props$render4, _this$props2;
+      return (_this$props$render3 = (_this$props$render4 = (_this$props2 = this.props).render) === null || _this$props$render4 === void 0 ? void 0 : _this$props$render4.call(_this$props2, {
         editor: this.editor,
         view: this.view,
         config: this.config,
@@ -737,7 +762,7 @@ export class ReactEditorView extends React.Component {
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
         editorRef: this.editorRef,
         editorAPI: editorApi
-      })) !== null && _this$props$render !== void 0 ? _this$props$render : this.editor;
+      })) !== null && _this$props$render3 !== void 0 ? _this$props$render3 : this.editor;
     }) : this.editor);
   }
 }

package/dist/es2019/editor-appearances/FullPageEditor.js

@@ -13,8 +13,9 @@ import FullPage from '../ui/Appearance/FullPage';
  * @returns Editor component
  */
 export function FullPageEditor(props) {
+  var _props$appearance;
   return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {
-    appearance: "full-page",
+    appearance: (_props$appearance = props.appearance) !== null && _props$appearance !== void 0 ? _props$appearance : 'full-page',
     AppearanceComponent: FullPage
   }));
 }

package/dist/es2019/editor-appearances/FullWidthEditor.js

@@ -11,6 +11,7 @@ import FullPage from '../ui/Appearance/FullPage';
  *
  * @param props FullWidthEditorProps
  * @returns Editor component
+ * @deprecated In favour of `FullPageEditor` with appearance "full-width"
  */
 export function FullWidthEditor(props) {
   return /*#__PURE__*/React.createElement(CoreEditor, _extends({}, props, {

package/dist/es2019/presets/universal.js

@@ -223,10 +223,7 @@ export default function createUniversalPresetInternal({
     tableSelectorSupported: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableSelector) && isFullPage,
     nativeStatusSupported: !statusMenuDisabled,
     showElementBrowserLink: props.elementBrowser && props.elementBrowser.showModal || false,
-    // @ts-ignore
-    // For platform_editor_element_level_templates experiment only
-    // clean up ticket ED-24873
-    UNSAFE_editorAppearance: appearance
+    appearance
   }]).maybeAdd([beforePrimaryToolbarPlugin, {
     beforePrimaryToolbarComponents: // @ts-expect-error 2339: Property 'before' does not exist on type 'PrimaryToolbarComponents'.
     (_props$primaryToolbar = props.primaryToolbarComponents) === null || _props$primaryToolbar === void 0 ? void 0 : _props$primaryToolbar.before

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -9,6 +9,7 @@ import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createEditorContentStyle } from '../ContentStyles';
 import PluginSlot from '../PluginSlot';
 import WithFlash from '../WithFlash';
@@ -64,6 +65,9 @@ export default class Editor extends React.Component {
         featureFlags
       } = this.props;
       const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
+      const {
+        editorViewModeState
+      } = useSharedPluginState(this.props.editorAPI, ['editorViewMode']);
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
@@ -84,7 +88,8 @@ export default class Editor extends React.Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
         className: "ak-editor-content-area",
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        viewMode: fg('platform_editor_remove_use_preset_context') ? editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode : undefined
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -78,8 +78,9 @@ export const CommentEditorWithIntl = props => {
   const {
     mediaState,
     maxContentSizeState,
-    primaryToolbarState
-  } = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar']);
+    primaryToolbarState,
+    editorViewModeState
+  } = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar', 'editorViewMode']);
   const intl = useIntl();
   const {
     editorDOMElement,
@@ -204,7 +205,8 @@ export const CommentEditorWithIntl = props => {
       className: classnames('ak-editor-content-area', {
         'less-margin': width < akEditorMobileBreakoutPoint
       }),
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      viewMode: fg('platform_editor_remove_use_preset_context') ? editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode : undefined
     }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
       editorView: editorView,
       editorActions: editorActions,

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -100,6 +100,7 @@ export const FullPageEditor = props => {
     wrapperElement: (_wrapperElementRef$cu = wrapperElementRef === null || wrapperElementRef === void 0 ? void 0 : wrapperElementRef.current) !== null && _wrapperElementRef$cu !== void 0 ? _wrapperElementRef$cu : null,
     pluginHooks: props.pluginHooks,
     featureFlags: props.featureFlags,
-    isEditorToolbarHidden: isEditorToolbarHidden
+    isEditorToolbarHidden: isEditorToolbarHidden,
+    viewMode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
   })));
 };

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -48,7 +48,8 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
   , {
     className: "fabric-editor-popup-scroll-parent",
     featureFlags: props.featureFlags,
-    ref: scrollContainerRef
+    ref: scrollContainerRef,
+    viewMode: fg('platform_editor_remove_use_preset_context') ? props === null || props === void 0 ? void 0 : props.viewMode : undefined
   }, jsx(ClickAreaBlock, {
     editorView: props.editorView,
     editorDisabled: props.disabled

package/dist/es2019/ui/ContentStyles/index.js

@@ -372,13 +372,12 @@ export const createEditorContentStyle = styles => {
     const {
       editorViewModeState
     } = useSharedPluginState(editorAPI, ['editorViewMode']);
-    const viewMode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
     const memoizedStyle = useMemo(() => contentStyles({
       theme,
       colorMode,
       featureFlags,
-      viewMode
-    }), [theme, colorMode, featureFlags, viewMode]);
+      viewMode: fg('platform_editor_remove_use_preset_context') ? props.viewMode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+    }), [theme, colorMode, featureFlags, editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, props.viewMode]);
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       jsx("div", {