@atlaskit/editor-core 197.12.0 → 197.13.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 197.13.1
+
+### Patch Changes
+
+- [#145587](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145587)
+  [`fc390fa3a6b2a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fc390fa3a6b2a) -
+  [ux] Fix Editor toolbar overflow issue for new icons on small screen
+
+## 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

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/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/Comment/Toolbar.js

@@ -13,6 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject, _templateObject2, _templateObject3;
 /**
  * @jsxRuntime classic
@@ -23,11 +24,13 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(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; }
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-registration */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
   var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\talign-items: center;\n\tpadding: ", " ", " 0;\n\tdisplay: flex;\n\theight: auto;\n\tbackground-color: ", ";\n\tbox-shadow: none;\n\tpadding-left: ", ";\n\n\t& > div {\n\t\t> :first-child:not(style),\n\t\t> style:first-child + * {\n\t\t\tmargin-left: 0;\n\t\t}\n\t\t", "\n\t}\n\n\t.block-type-btn {\n\t\tpadding-left: 0;\n\t}\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\talign-items: center;\n\tpadding: ", " ", " 0;\n\tdisplay: flex;\n\theight: auto;\n\tbackground-color: ", ";\n\tbox-shadow: none;\n\tpadding-left: ", ";\n\n\t& > div {\n\t\t> :first-child:not(style),\n\t\t> style:first-child + * {\n\t\t\tmargin-left: 0;\n\t\t}\n\t\t", "\n\t}\n\n\t.block-type-btn {\n\t\tpadding-left: 0;\n\t}\n\n\t", "\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "), (0, _platformFeatureFlags.fg)('platform.design-system-team.enable-new-icons') && 'span svg { max-width: 100%; }');
 };
+/* eslint-enable @atlaskit/platform/ensure-feature-flag-registration */
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var stickyToolbarWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\tposition: relative;\n\tposition: sticky;\n\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\tpadding-bottom: ", ";\n\tz-index: ", ";\n\ttransition: box-shadow ease-in-out 0.2s;\n\t&.show-keyline {\n\t\tbox-shadow: 0 ", "px 0 0\n\t\t\t", ";\n\t}\n"])), "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorMenuZIndex, _editorSharedStyles.akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");

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/Appearance/FullPage/MainToolbar.js

@@ -27,6 +27,12 @@ var mainToolbarTwoLineStyle = function mainToolbarTwoLineStyle() {
     height: "calc(".concat(editorToolbarHeight, " * 2)")
   }));
 };
+var flexibleIconSize = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
 var mainToolbar = function mainToolbar() {
   var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
   return (0, _react.css)((0, _defineProperty2.default)({
@@ -53,7 +59,9 @@ var mainToolbar = function mainToolbar() {
     display: 'grid',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "calc(".concat(editorToolbarHeight, " * 2)")
-  }));
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/ui-styling-standard/no-unsafe-values
+  (0, _platformFeatureFlags.fg)('platform.design-system-team.enable-new-icons') && flexibleIconSize);
 };
 var mainToolbarStyle = exports.mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];

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/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.12.0";
+var version = exports.version = "197.13.1";

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/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/Comment/Toolbar.js

@@ -9,8 +9,10 @@ import React, { useEffect, 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 { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-registration */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 const mainToolbarWrapperStyle = (isTwoLineEditorToolbar = false) => css`
 	position: relative;
@@ -50,7 +52,10 @@ const mainToolbarWrapperStyle = (isTwoLineEditorToolbar = false) => css`
 	.block-type-btn {
 		padding-left: 0;
 	}
+
+	${fg('platform.design-system-team.enable-new-icons') && 'span svg { max-width: 100%; }'}
 `;
+/* eslint-enable @atlaskit/platform/ensure-feature-flag-registration */
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const stickyToolbarWrapperStyle = css`

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/Appearance/FullPage/MainToolbar.js

@@ -22,6 +22,12 @@ const mainToolbarTwoLineStyle = () => {
     }
   });
 };
+const flexibleIconSize = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
 const mainToolbar = () => {
   const editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
   return css({
@@ -50,7 +56,9 @@ const mainToolbar = () => {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: `calc(${editorToolbarHeight} * 2)`
     }
-  });
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/ui-styling-standard/no-unsafe-values
+  fg('platform.design-system-team.enable-new-icons') && flexibleIconSize);
 };
 export const mainToolbarStyle = (showKeyline, twoLineEditorToolbar) => [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
 

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", {

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { fg } from '@atlaskit/platform-feature-flags';
 import EditorActions from '../../actions';
 import { PresetContextProvider } from '../../presets/context';
 const EditorContext = /*#__PURE__*/React.createContext({});
@@ -16,9 +17,15 @@ export default class LegacyEditorContext extends React.Component {
     };
   }
   render() {
-    return /*#__PURE__*/React.createElement(EditorContext.Provider, {
-      value: this.getChildContext()
-    }, /*#__PURE__*/React.createElement(PresetContextProvider, null, this.props.children));
+    if (fg('platform_editor_remove_use_preset_context')) {
+      return /*#__PURE__*/React.createElement(EditorContext.Provider, {
+        value: this.getChildContext()
+      }, this.props.children);
+    } else {
+      return /*#__PURE__*/React.createElement(EditorContext.Provider, {
+        value: this.getChildContext()
+      }, /*#__PURE__*/React.createElement(PresetContextProvider, null, this.props.children));
+    }
   }
 }
 _defineProperty(LegacyEditorContext, "childContextTypes", {

package/dist/es2019/version-wrapper.js

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

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

@@ -7,17 +7,18 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @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';
@@ -138,7 +139,15 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
 });
 function ReactEditorViewContextWrapper(props) {
   var _props$editorProps$me, _props$editorProps$li;
+  // deprecated, unable to be FF due to hook usage
   var setInternalEditorAPI = useSetPresetContext();
+  var presetContextEditorAPI = usePresetContext();
+
+  // new way of storing the editorApi when FF platform_editor_remove_use_preset_context is enabled
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    editorAPI = _useState2[0],
+    setEditorAPI = _useState2[1];
 
   /**
    * We use the context to retrieve the editorAPI
@@ -148,16 +157,21 @@ function ReactEditorViewContextWrapper(props) {
    * so we should also set the value for the `EditorContext` that is used in
    * `EditorInternal`.
    */
-  var setEditorAPI = useCallback(
+  var setPresetContextEditorAPI = useCallback(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (api) {
-    setInternalEditorAPI === null || setInternalEditorAPI === void 0 || setInternalEditorAPI(api);
-  }, [setInternalEditorAPI]);
+    if (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;
   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 || (_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,
@@ -165,6 +179,7 @@ function ReactEditorViewContextWrapper(props) {
     autoformattingProvider: props.editorProps.autoformattingProvider
   });
   return jsx(ReactEditorView, _extends({}, props, {
-    setEditorApi: setEditorAPI
+    editorAPI: editorAPI,
+    setEditorApi: setPresetContextEditorAPI
   }));
 }

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

@@ -2,7 +2,6 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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`.
  *
@@ -12,12 +11,12 @@ import { usePresetContext } from '../../presets/context';
  * In the future ideally consumers implement this behaviour themselves.
  */
 export var 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 = usePresetContext();
   useEffect(function () {
     function setProvider() {
       return _setProvider.apply(this, arguments);

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

@@ -762,6 +762,31 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       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 (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,

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

@@ -17,6 +17,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';
@@ -78,6 +79,8 @@ var Editor = /*#__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 = useSharedPluginState(_this.props.editorAPI, ['editorViewMode']),
+        editorViewModeState = _useSharedPluginState.editorViewModeState;
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
@@ -100,7 +103,8 @@ var Editor = /*#__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: 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,
@@ -136,8 +140,8 @@ export { Editor as default };
 function RenderWithPluginState(_ref3) {
   var renderChrome = _ref3.renderChrome,
     editorAPI = _ref3.editorAPI;
-  var _useSharedPluginState = useSharedPluginState(editorAPI, ['maxContentSize']),
-    maxContentSizeState = _useSharedPluginState.maxContentSizeState;
+  var _useSharedPluginState2 = useSharedPluginState(editorAPI, ['maxContentSize']),
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
   return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState
   }));

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

@@ -74,10 +74,11 @@ var secondaryToolbarStyles = css({
 var appearance = 'comment';
 export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
-  var _useSharedPluginState = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar']),
+  var _useSharedPluginState = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar', 'editorViewMode']),
     mediaState = _useSharedPluginState.mediaState,
     maxContentSizeState = _useSharedPluginState.maxContentSizeState,
-    primaryToolbarState = _useSharedPluginState.primaryToolbarState;
+    primaryToolbarState = _useSharedPluginState.primaryToolbarState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
   var intl = useIntl();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,
@@ -207,7 +208,8 @@ export var CommentEditorWithIntl = function 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/esm/ui/Appearance/Comment/Toolbar.js

@@ -13,13 +13,16 @@ import React, { useEffect, 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 { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-registration */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
   var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\talign-items: center;\n\tpadding: ", " ", " 0;\n\tdisplay: flex;\n\theight: auto;\n\tbackground-color: ", ";\n\tbox-shadow: none;\n\tpadding-left: ", ";\n\n\t& > div {\n\t\t> :first-child:not(style),\n\t\t> style:first-child + * {\n\t\t\tmargin-left: 0;\n\t\t}\n\t\t", "\n\t}\n\n\t.block-type-btn {\n\t\tpadding-left: 0;\n\t}\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\talign-items: center;\n\tpadding: ", " ", " 0;\n\tdisplay: flex;\n\theight: auto;\n\tbackground-color: ", ";\n\tbox-shadow: none;\n\tpadding-left: ", ";\n\n\t& > div {\n\t\t> :first-child:not(style),\n\t\t> style:first-child + * {\n\t\t\tmargin-left: 0;\n\t\t}\n\t\t", "\n\t}\n\n\t.block-type-btn {\n\t\tpadding-left: 0;\n\t}\n\n\t", "\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-surface, white)", "var(--ds-space-250, 20px)", isTwoLineEditorToolbar && "\n        @media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n          flex-direction: column-reverse;\n          align-items: end;\n          display: flex;\n          justify-content: flex-end;\n        }\n\n        //make this more explicit for a toolbar\n        > *:nth-child(1) {\n          @media (max-width: ").concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px) {\n            > div:nth-child(2) {\n              justify-content: flex-end;\n              display: flex;\n            }\n          }\n        }\n    "), fg('platform.design-system-team.enable-new-icons') && 'span svg { max-width: 100%; }');
 };
+/* eslint-enable @atlaskit/platform/ensure-feature-flag-registration */
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var stickyToolbarWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t/* stylelint-disable declaration-block-no-duplicate-properties */\n\tposition: relative;\n\tposition: sticky;\n\t/* stylelint-enable declaration-block-no-duplicate-properties */\n\tpadding-bottom: ", ";\n\tz-index: ", ";\n\ttransition: box-shadow ease-in-out 0.2s;\n\t&.show-keyline {\n\t\tbox-shadow: 0 ", "px 0 0\n\t\t\t", ";\n\t}\n"])), "var(--ds-space-100, 8px)", akEditorMenuZIndex, akEditorToolbarKeylineHeight, "var(--ds-background-accent-gray-subtlest, #F1F2F4)");

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

@@ -107,6 +107,7 @@ export var 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/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -50,7 +50,8 @@ var Content = /*#__PURE__*/React.forwardRef(function (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/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -19,6 +19,12 @@ var mainToolbarTwoLineStyle = function mainToolbarTwoLineStyle() {
     height: "calc(".concat(editorToolbarHeight, " * 2)")
   }));
 };
+var flexibleIconSize = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& span svg': {
+    maxWidth: '100%'
+  }
+});
 var mainToolbar = function mainToolbar() {
   var editorToolbarHeight = FULL_PAGE_EDITOR_TOOLBAR_HEIGHT();
   return css(_defineProperty({
@@ -45,7 +51,9 @@ var mainToolbar = function mainToolbar() {
     display: 'grid',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "calc(".concat(editorToolbarHeight, " * 2)")
-  }));
+  }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/ui-styling-standard/no-unsafe-values
+  fg('platform.design-system-team.enable-new-icons') && flexibleIconSize);
 };
 export var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];

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

@@ -93,15 +93,14 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
     var editorAPI = usePresetContext();
     var _useSharedPluginState = useSharedPluginState(editorAPI, ['editorViewMode']),
       editorViewModeState = _useSharedPluginState.editorViewModeState;
-    var viewMode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
     var memoizedStyle = useMemo(function () {
       return contentStyles({
         theme: theme,
         colorMode: colorMode,
         featureFlags: featureFlags,
-        viewMode: viewMode
+        viewMode: 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
       jsx("div", {

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

@@ -8,6 +8,7 @@ function _createSuper(t) { var r = _isNativeReflectConstruct(); return function
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import PropTypes from 'prop-types';
+import { fg } from '@atlaskit/platform-feature-flags';
 import EditorActions from '../../actions';
 import { PresetContextProvider } from '../../presets/context';
 var EditorContext = /*#__PURE__*/React.createContext({});
@@ -34,9 +35,15 @@ var LegacyEditorContext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(EditorContext.Provider, {
-        value: this.getChildContext()
-      }, /*#__PURE__*/React.createElement(PresetContextProvider, null, this.props.children));
+      if (fg('platform_editor_remove_use_preset_context')) {
+        return /*#__PURE__*/React.createElement(EditorContext.Provider, {
+          value: this.getChildContext()
+        }, this.props.children);
+      } else {
+        return /*#__PURE__*/React.createElement(EditorContext.Provider, {
+          value: this.getChildContext()
+        }, /*#__PURE__*/React.createElement(PresetContextProvider, null, this.props.children));
+      }
     }
   }]);
   return LegacyEditorContext;

package/dist/esm/version-wrapper.js

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

package/dist/types/composable-editor/hooks/useProviders.d.ts

@@ -1,6 +1,19 @@
 import type { AutoformattingProvider, CardProvider, ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
+import type { CardPlugin } from '@atlaskit/editor-plugins/card';
+import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugins/context-identifier';
+import { type CustomAutoformatPlugin } from '@atlaskit/editor-plugins/custom-autoformat';
+import { type EmojiPlugin } from '@atlaskit/editor-plugins/emoji';
+import type { MediaPlugin } from '@atlaskit/editor-plugins/media';
 import { type EmojiProvider } from '@atlaskit/emoji';
 interface UseProvidersProps {
+    editorApi: PublicPluginAPI<[
+        OptionalPlugin<ContextIdentifierPlugin>,
+        OptionalPlugin<MediaPlugin>,
+        OptionalPlugin<CardPlugin>,
+        OptionalPlugin<EmojiPlugin>,
+        OptionalPlugin<CustomAutoformatPlugin>
+    ]> | undefined;
     contextIdentifierProvider: Promise<ContextIdentifierProvider> | undefined;
     mediaProvider: Promise<MediaProvider> | undefined;
     cardProvider: Promise<CardProvider> | undefined;
@@ -15,5 +28,5 @@ interface UseProvidersProps {
  *
  * In the future ideally consumers implement this behaviour themselves.
  */
-export declare const useProviders: ({ contextIdentifierProvider, mediaProvider, cardProvider, emojiProvider, autoformattingProvider, }: UseProvidersProps) => void;
+export declare const useProviders: ({ editorApi, contextIdentifierProvider, mediaProvider, cardProvider, emojiProvider, autoformattingProvider, }: UseProvidersProps) => void;
 export {};

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

@@ -30,6 +30,7 @@ export interface EditorViewProps {
     portalProviderAPI: PortalProviderAPI;
     disabled?: boolean;
     experienceStore?: ExperienceStore;
+    editorAPI: PublicPluginAPI<any> | undefined;
     setEditorApi?: SetEditorAPI;
     render?: (props: {
         editor: JSX.Element;

package/dist/types/ui/Appearance/Chromeless.d.ts

@@ -5,9 +5,13 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type EditorViewModePlugin } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
 import type { EditorAppearanceComponentProps } from '../../types';
-type AppearanceProps = EditorAppearanceComponentProps<[OptionalPlugin<MaxContentSizePlugin>]>;
+type AppearanceProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<MaxContentSizePlugin>,
+    OptionalPlugin<EditorViewModePlugin>
+]>;
 export default class Editor extends React.Component<AppearanceProps> {
     static displayName: string;
     private appearance;

package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts

@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OptionalPlugin, PublicPluginAPI, ReactHookFactory } from '@atlaskit/editor-common/types';
 import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
+import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type EditorActions from '../../../actions';
 import type { EventDispatcher } from '../../../event-dispatcher';
@@ -34,6 +35,7 @@ interface FullPageEditorContentAreaProps {
     providerFactory: ProviderFactory;
     wrapperElement: HTMLElement | null;
     featureFlags?: FeatureFlags;
+    viewMode: ViewMode | undefined;
     isEditorToolbarHidden?: boolean;
 }
 export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";

package/dist/types-ts4.5/composable-editor/hooks/useProviders.d.ts

@@ -1,6 +1,19 @@
 import type { AutoformattingProvider, CardProvider, ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
+import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
+import type { CardPlugin } from '@atlaskit/editor-plugins/card';
+import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugins/context-identifier';
+import { type CustomAutoformatPlugin } from '@atlaskit/editor-plugins/custom-autoformat';
+import { type EmojiPlugin } from '@atlaskit/editor-plugins/emoji';
+import type { MediaPlugin } from '@atlaskit/editor-plugins/media';
 import { type EmojiProvider } from '@atlaskit/emoji';
 interface UseProvidersProps {
+    editorApi: PublicPluginAPI<[
+        OptionalPlugin<ContextIdentifierPlugin>,
+        OptionalPlugin<MediaPlugin>,
+        OptionalPlugin<CardPlugin>,
+        OptionalPlugin<EmojiPlugin>,
+        OptionalPlugin<CustomAutoformatPlugin>
+    ]> | undefined;
     contextIdentifierProvider: Promise<ContextIdentifierProvider> | undefined;
     mediaProvider: Promise<MediaProvider> | undefined;
     cardProvider: Promise<CardProvider> | undefined;
@@ -15,5 +28,5 @@ interface UseProvidersProps {
  *
  * In the future ideally consumers implement this behaviour themselves.
  */
-export declare const useProviders: ({ contextIdentifierProvider, mediaProvider, cardProvider, emojiProvider, autoformattingProvider, }: UseProvidersProps) => void;
+export declare const useProviders: ({ editorApi, contextIdentifierProvider, mediaProvider, cardProvider, emojiProvider, autoformattingProvider, }: UseProvidersProps) => void;
 export {};

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

@@ -30,6 +30,7 @@ export interface EditorViewProps {
     portalProviderAPI: PortalProviderAPI;
     disabled?: boolean;
     experienceStore?: ExperienceStore;
+    editorAPI: PublicPluginAPI<any> | undefined;
     setEditorApi?: SetEditorAPI;
     render?: (props: {
         editor: JSX.Element;

package/dist/types-ts4.5/ui/Appearance/Chromeless.d.ts

@@ -5,10 +5,12 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OptionalPlugin } from '@atlaskit/editor-common/types';
+import { type EditorViewModePlugin } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
 import type { EditorAppearanceComponentProps } from '../../types';
 type AppearanceProps = EditorAppearanceComponentProps<[
-    OptionalPlugin<MaxContentSizePlugin>
+    OptionalPlugin<MaxContentSizePlugin>,
+    OptionalPlugin<EditorViewModePlugin>
 ]>;
 export default class Editor extends React.Component<AppearanceProps> {
     static displayName: string;

package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts

@@ -9,6 +9,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { OptionalPlugin, PublicPluginAPI, ReactHookFactory } from '@atlaskit/editor-common/types';
 import { type ContextPanelPlugin } from '@atlaskit/editor-plugins/context-panel';
+import { type ViewMode } from '@atlaskit/editor-plugins/editor-viewmode';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type EditorActions from '../../../actions';
 import type { EventDispatcher } from '../../../event-dispatcher';
@@ -36,6 +37,7 @@ interface FullPageEditorContentAreaProps {
     providerFactory: ProviderFactory;
     wrapperElement: HTMLElement | null;
     featureFlags?: FeatureFlags;
+    viewMode: ViewMode | undefined;
     isEditorToolbarHidden?: boolean;
 }
 export declare const CONTENT_AREA_TEST_ID = "ak-editor-fp-content-area";

package/docs/0-intro.tsx

@@ -34,6 +34,7 @@ ${(<AtlassianInternalWarning />)}
   ## Usage
 
   ### [Legacy Editor](editor-core/docs/legacy-editor)
+  Note: The legacy editor is deprecated. There is an example to help with migration at https://atlaskit.atlassian.com/examples/editor/editor-core/legacy-editor-migrator
 
 
   ### Composable Editor

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "197.12.0",
+	"version": "197.13.1",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -87,7 +87,6 @@
 		"@atlaskit/collab-provider": "9.42.0",
 		"@atlaskit/editor-plugin-annotation": "1.19.8",
 		"@atlaskit/editor-plugin-card": "^3.2.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-list": "^3.8.0",
 		"@atlaskit/editor-plugin-paste": "^1.12.0",
 		"@atlaskit/editor-test-helpers": "*",
@@ -99,7 +98,7 @@
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/renderer": "^110.5.0",
-		"@atlaskit/smart-card": "^28.2.0",
+		"@atlaskit/smart-card": "^28.3.0",
 		"@atlaskit/synchrony-test-helpers": "^2.5.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/util-data-test": "^17.9.0",
@@ -285,6 +284,9 @@
 		},
 		"platform_editor_ssr_fix_block_controls": {
 			"type": "boolean"
+		},
+		"platform_editor_remove_use_preset_context": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {