@atlaskit/editor-core 195.4.7 → 195.4.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 195.4.9
+
+### Patch Changes
+
+- [`01ab0e352a73e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/01ab0e352a73e) -
+  Decoupling editor appearances from preset context.
+
+## 195.4.8
+
+### Patch Changes
+
+- [#130260](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130260)
+  [`d338ce6e4ff6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d338ce6e4ff6e) -
+  [ux] Add padding to layout nodes to allow space for element controls
+- Updated dependencies
+
 ## 195.4.7
 
 ### Patch Changes

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

@@ -103,11 +103,13 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         eventDispatcher = _ref2.eventDispatcher,
         config = _ref2.config,
         dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-        editorRef = _ref2.editorRef;
+        editorRef = _ref2.editorRef,
+        editorAPI = _ref2.editorAPI;
       return (0, _react2.jsx)(_ui.BaseTheme, {
         baseFontSize: (0, _getBaseFontSize.getBaseFontSize)(props.appearance)
       }, (0, _react2.jsx)(Component, {
         innerRef: editorRef,
+        editorAPI: editorAPI,
         appearance: props.appearance,
         disabled: props.disabled,
         editorActions: editorActions,

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

@@ -27,6 +27,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _eventDispatcher = require("../event-dispatcher");
+var _context = require("../presets/context");
 var _document = require("../utils/document");
 var _isFullPage = require("../utils/is-full-page");
 var _RenderTracking = require("../utils/performance/components/RenderTracking");
@@ -773,7 +774,8 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
   }, {
     key: "render",
     value: function render() {
-      var _this$props$editorPro8;
+      var _this$props$editorPro8,
+        _this3 = this;
       var renderTracking = (_this$props$editorPro8 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro8 === void 0 || (_this$props$editorPro8 = _this$props$editorPro8.renderTracking) === null || _this$props$editorPro8 === void 0 ? void 0 : _this$props$editorPro8.reactEditorView;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
@@ -789,14 +791,19 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
         actionSubject: _analytics.ACTION_SUBJECT.REACT_EDITOR_VIEW,
         handleAnalyticsEvent: this.handleAnalyticsEvent,
         useShallow: useShallow
-      }), this.props.render ? this.props.render({
-        editor: this.editor,
-        view: this.view,
-        config: this.config,
-        eventDispatcher: this.eventDispatcher,
-        transformer: this.contentTransformer,
-        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-        editorRef: this.editorRef
+      }), this.props.render ? /*#__PURE__*/_react.default.createElement(_context.EditorAPIContext.Consumer, null, function (_ref4) {
+        var _this3$props$render, _this3$props$render2, _this3$props;
+        var editorApi = _ref4.editorApi;
+        return (_this3$props$render = (_this3$props$render2 = (_this3$props = _this3.props).render) === null || _this3$props$render2 === void 0 ? void 0 : _this3$props$render2.call(_this3$props, {
+          editor: _this3.editor,
+          view: _this3.view,
+          config: _this3.config,
+          eventDispatcher: _this3.eventDispatcher,
+          transformer: _this3.contentTransformer,
+          dispatchAnalyticsEvent: _this3.dispatchAnalyticsEvent,
+          editorRef: _this3.editorRef,
+          editorAPI: editorApi
+        })) !== null && _this3$props$render !== void 0 ? _this3$props$render : _this3.editor;
       }) : this.editor);
     }
   }]);

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

@@ -17,7 +17,6 @@ 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 _context = require("../../presets/context");
 var _ContentStyles = require("../ContentStyles");
 var _PluginSlot = _interopRequireDefault(require("../PluginSlot"));
 var _WithFlash = _interopRequireDefault(require("../WithFlash"));
@@ -132,6 +131,7 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return (0, _react2.jsx)(RenderWithPluginState, {
+        editorAPI: this.props.editorAPI,
         renderChrome: this.renderChrome
       });
     }
@@ -140,9 +140,9 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 (0, _defineProperty2.default)(Editor, "displayName", 'ChromelessEditorAppearance');
 function RenderWithPluginState(_ref3) {
-  var renderChrome = _ref3.renderChrome;
-  var api = (0, _context.usePresetContext)();
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['maxContentSize']),
+  var renderChrome = _ref3.renderChrome,
+    editorAPI = _ref3.editorAPI;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['maxContentSize']),
     maxContentSizeState = _useSharedPluginState.maxContentSizeState;
   return (0, _react2.jsx)(_react.Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState

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

@@ -23,7 +23,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _messages = _interopRequireDefault(require("../../../messages"));
-var _context = require("../../../presets/context");
 var _Addon = require("../../Addon");
 var _ContentStyles = require("../../ContentStyles");
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
@@ -86,12 +85,13 @@ var secondaryToolbarStyles = (0, _react2.css)({
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-025, 2px)")
 });
 var appearance = 'comment';
-var Editor = function Editor(props) {
-  var api = (0, _context.usePresetContext)();
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['media', 'maxContentSize', 'primaryToolbar']),
+var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEditorWithIntl(props) {
+  var editorAPI = props.editorAPI;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['media', 'maxContentSize', 'primaryToolbar']),
     mediaState = _useSharedPluginState.mediaState,
     maxContentSizeState = _useSharedPluginState.maxContentSizeState,
     primaryToolbarState = _useSharedPluginState.primaryToolbarState;
+  var intl = (0, _reactIntlNext.useIntl)();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,
     editorActions = props.editorActions,
@@ -112,7 +112,6 @@ var Editor = function Editor(props) {
     onCancel = props.onCancel,
     disabled = props.disabled,
     dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
-    intl = props.intl,
     useStickyToolbar = props.useStickyToolbar,
     pluginHooks = props.pluginHooks,
     featureFlags = props.featureFlags,
@@ -256,5 +255,4 @@ var Editor = function Editor(props) {
     }
   }), customSecondaryToolbarComponents));
 };
-Editor.displayName = 'CommentEditorAppearance';
-var CommentEditorWithIntl = exports.CommentEditorWithIntl = (0, _reactIntlNext.injectIntl)(Editor);
+CommentEditorWithIntl.displayName = 'CommentEditorAppearance';

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

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
-var _context = require("../../../presets/context");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
 var _StyledComponents = require("./StyledComponents");
@@ -61,7 +60,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   }, [props.innerRef]);
   var scrollContentContainerRef = (0, _react.useRef)(null);
   var showKeyline = useShowKeyline(scrollContentContainerRef);
-  var editorAPI = (0, _context.usePresetContext)();
+  var editorAPI = props.editorAPI;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['editorViewMode', 'primaryToolbar']),
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     primaryToolbarState = _useSharedPluginState.primaryToolbarState;
@@ -83,6 +82,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     ref: wrapperElementRef
   }, !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {
     appearance: props.appearance,
+    editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
     collabEdit: props.collabEdit,
     containerElement: (_scrollContentContain2 = (_scrollContentContain3 = scrollContentContainerRef.current) === null || _scrollContentContain3 === void 0 ? void 0 : _scrollContentContain3.scrollContainer) !== null && _scrollContentContain2 !== void 0 ? _scrollContentContain2 : null,

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

@@ -14,7 +14,6 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _context = require("../../../presets/context");
 var _Toolbar = _interopRequireDefault(require("../../Toolbar"));
 var _BeforeWrapper = require("./BeforeWrapper");
 var _MainToolbar = require("./MainToolbar");
@@ -33,7 +32,7 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     shouldSplitToolbar = _useState2[0],
     setShouldSplitToolbar = _useState2[1];
-  var editorAPI = (0, _context.usePresetContext)();
+  var editorAPI = props.editorAPI;
 
   // When primary toolbar components is undefined, do not show two line editor toolbar
   var twoLineEditorToolbar = !!props.customPrimaryToolbarComponents && !!((_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar);

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

@@ -23,9 +23,10 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _types = require("@atlaskit/editor-plugins/table/types");
 var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t> :not(style):first-child,\n\t\t\t\t\t> style:first-child + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px ", "px ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t> :not(style):first-child,\n\t\t\t\t\t> style:first-child + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_element_padding_changes_gate') ? 8 : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_element_padding_changes_gate') ? 8 : 0), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 };

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

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

@@ -93,13 +93,15 @@ export const EditorInternal = /*#__PURE__*/memo(({
       eventDispatcher,
       config,
       dispatchAnalyticsEvent,
-      editorRef
+      editorRef,
+      editorAPI
     }) => {
       var _props$featureFlags, _props$featureFlags2;
       return jsx(BaseTheme, {
         baseFontSize: getBaseFontSize(props.appearance)
       }, jsx(Component, {
         innerRef: editorRef,
+        editorAPI: editorAPI,
         appearance: props.appearance,
         disabled: props.disabled,
         editorActions: editorActions,

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

@@ -13,6 +13,7 @@ import { analyticsEventKey, browser, countNodes, findChangedNodesFromTransaction
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
+import { EditorAPIContext } from '../presets/context';
 import { getNodesCount } from '../utils/document';
 import { isFullPage } from '../utils/is-full-page';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
@@ -730,14 +731,20 @@ export class ReactEditorView extends React.Component {
       actionSubject: ACTION_SUBJECT.REACT_EDITOR_VIEW,
       handleAnalyticsEvent: this.handleAnalyticsEvent,
       useShallow: useShallow
-    }), this.props.render ? this.props.render({
-      editor: this.editor,
-      view: this.view,
-      config: this.config,
-      eventDispatcher: this.eventDispatcher,
-      transformer: this.contentTransformer,
-      dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-      editorRef: this.editorRef
+    }), 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, {
+        editor: this.editor,
+        view: this.view,
+        config: this.config,
+        eventDispatcher: this.eventDispatcher,
+        transformer: this.contentTransformer,
+        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+        editorRef: this.editorRef,
+        editorAPI: editorApi
+      })) !== null && _this$props$render !== void 0 ? _this$props$render : this.editor;
     }) : this.editor);
   }
 }

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

@@ -9,7 +9,6 @@ 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 { usePresetContext } from '../../presets/context';
 import { createEditorContentStyle } from '../ContentStyles';
 import PluginSlot from '../PluginSlot';
 import WithFlash from '../WithFlash';
@@ -106,18 +105,19 @@ export default class Editor extends React.Component {
   }
   render() {
     return jsx(RenderWithPluginState, {
+      editorAPI: this.props.editorAPI,
       renderChrome: this.renderChrome
     });
   }
 }
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
 function RenderWithPluginState({
-  renderChrome
+  renderChrome,
+  editorAPI
 }) {
-  const api = usePresetContext();
   const {
     maxContentSizeState
-  } = useSharedPluginState(api, ['maxContentSize']);
+  } = useSharedPluginState(editorAPI, ['maxContentSize']);
   return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState
   }));

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

@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useMemo, 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 classnames from 'classnames';
-import { injectIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -20,7 +20,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { N100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import messages from '../../../messages';
-import { usePresetContext } from '../../../presets/context';
 import { ClickAreaBlock } from '../../Addon';
 import { createEditorContentStyle } from '../../ContentStyles';
 import PluginSlot from '../../PluginSlot';
@@ -74,13 +73,16 @@ const secondaryToolbarStyles = css({
   padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-025, 2px)"}`
 });
 const appearance = 'comment';
-const Editor = props => {
-  const api = usePresetContext();
+export const CommentEditorWithIntl = props => {
+  const {
+    editorAPI
+  } = props;
   const {
     mediaState,
     maxContentSizeState,
     primaryToolbarState
-  } = useSharedPluginState(api, ['media', 'maxContentSize', 'primaryToolbar']);
+  } = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar']);
+  const intl = useIntl();
   const {
     editorDOMElement,
     editorView,
@@ -101,7 +103,6 @@ const Editor = props => {
     onCancel,
     disabled,
     dispatchAnalyticsEvent,
-    intl,
     useStickyToolbar,
     pluginHooks,
     featureFlags,
@@ -240,5 +241,4 @@ const Editor = props => {
     }
   }), customSecondaryToolbarComponents));
 };
-Editor.displayName = 'CommentEditorAppearance';
-export const CommentEditorWithIntl = injectIntl(Editor);
+CommentEditorWithIntl.displayName = 'CommentEditorAppearance';

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

@@ -9,7 +9,6 @@ import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { usePresetContext } from '../../../presets/context';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 import { fullPageEditorWrapper } from './StyledComponents';
@@ -42,7 +41,7 @@ export const FullPageEditor = props => {
   const wrapperElementRef = useMemo(() => props.innerRef, [props.innerRef]);
   const scrollContentContainerRef = useRef(null);
   const showKeyline = useShowKeyline(scrollContentContainerRef);
-  const editorAPI = usePresetContext();
+  const editorAPI = props.editorAPI;
   const {
     editorViewModeState,
     primaryToolbarState
@@ -65,6 +64,7 @@ export const FullPageEditor = props => {
     ref: wrapperElementRef
   }, !isEditorToolbarHidden && jsx(FullPageToolbar, {
     appearance: props.appearance,
+    editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
     collabEdit: props.collabEdit,
     containerElement: (_scrollContentContain2 = (_scrollContentContain3 = scrollContentContainerRef.current) === null || _scrollContentContain3 === void 0 ? void 0 : _scrollContentContain3.scrollContainer) !== null && _scrollContentContain2 !== void 0 ? _scrollContentContain2 : null,

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

@@ -12,14 +12,15 @@ import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { usePresetContext } from '../../../presets/context';
 import Toolbar from '../../Toolbar';
 import { BeforePrimaryToolbarWrapper } from './BeforeWrapper';
 import { customToolbarWrapperStyle, mainToolbarFirstChildStyle, mainToolbarIconBeforeStyle, mainToolbarSecondChildStyle, mainToolbarStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, nonCustomToolbarWrapperStyle } from './MainToolbar';
 export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$featureFlags, _props$customPrimaryT, _props$featureFlags2, _props$featureFlags3, _editorAPI$avatarGrou, _props$collabEdit, _props$collabEdit2, _props$collabEdit3;
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
-  const editorAPI = usePresetContext();
+  const {
+    editorAPI
+  } = props;
 
   // When primary toolbar components is undefined, do not show two line editor toolbar
   const twoLineEditorToolbar = !!props.customPrimaryToolbarComponents && !!((_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar);

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

@@ -4,6 +4,7 @@ import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN }
 import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N40A, N50A } from '@atlaskit/theme/colors';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
 
@@ -13,7 +14,7 @@ export const layoutStyles = viewMode => css`
 		${columnLayoutSharedStyle} [data-layout-section] {
 			// TODO: Migrate away from gridSize
 			// Recommendation: Replace directly with 7px
-			margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset}px 0;
+			margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_element_padding_changes_gate') ? 8 : 0)}px 0;
 			transition: border-color 0.3s ${akEditorSwoopCubicBezier};
 			cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
 
@@ -24,7 +25,8 @@ export const layoutStyles = viewMode => css`
 				border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
 					${`var(--ds-border, ${N40A})`};
 				border-radius: 4px;
-				padding: ${LAYOUT_COLUMN_PADDING}px;
+				padding: ${LAYOUT_COLUMN_PADDING}px ${LAYOUT_COLUMN_PADDING}px ${LAYOUT_COLUMN_PADDING}px
+					${LAYOUT_COLUMN_PADDING + (fg('platform_editor_element_padding_changes_gate') ? 8 : 0)}px;
 				box-sizing: border-box;
 
 				> div {

package/dist/es2019/version-wrapper.js

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

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

@@ -99,11 +99,13 @@ export var EditorInternal = /*#__PURE__*/memo(function (_ref) {
         eventDispatcher = _ref2.eventDispatcher,
         config = _ref2.config,
         dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-        editorRef = _ref2.editorRef;
+        editorRef = _ref2.editorRef,
+        editorAPI = _ref2.editorAPI;
       return jsx(BaseTheme, {
         baseFontSize: getBaseFontSize(props.appearance)
       }, jsx(Component, {
         innerRef: editorRef,
+        editorAPI: editorAPI,
         appearance: props.appearance,
         disabled: props.disabled,
         editorActions: editorActions,

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

@@ -24,6 +24,7 @@ import { analyticsEventKey, browser, countNodes as _countNodes, findChangedNodes
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
+import { EditorAPIContext } from '../presets/context';
 import { getNodesCount } from '../utils/document';
 import { isFullPage } from '../utils/is-full-page';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
@@ -766,7 +767,8 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$editorPro8;
+      var _this$props$editorPro8,
+        _this3 = this;
       var renderTracking = (_this$props$editorPro8 = this.props.editorProps.performanceTracking) === null || _this$props$editorPro8 === void 0 || (_this$props$editorPro8 = _this$props$editorPro8.renderTracking) === null || _this$props$editorPro8 === void 0 ? void 0 : _this$props$editorPro8.reactEditorView;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
@@ -782,14 +784,19 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         actionSubject: ACTION_SUBJECT.REACT_EDITOR_VIEW,
         handleAnalyticsEvent: this.handleAnalyticsEvent,
         useShallow: useShallow
-      }), this.props.render ? this.props.render({
-        editor: this.editor,
-        view: this.view,
-        config: this.config,
-        eventDispatcher: this.eventDispatcher,
-        transformer: this.contentTransformer,
-        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-        editorRef: this.editorRef
+      }), this.props.render ? /*#__PURE__*/React.createElement(EditorAPIContext.Consumer, null, function (_ref4) {
+        var _this3$props$render, _this3$props$render2, _this3$props;
+        var editorApi = _ref4.editorApi;
+        return (_this3$props$render = (_this3$props$render2 = (_this3$props = _this3.props).render) === null || _this3$props$render2 === void 0 ? void 0 : _this3$props$render2.call(_this3$props, {
+          editor: _this3.editor,
+          view: _this3.view,
+          config: _this3.config,
+          eventDispatcher: _this3.eventDispatcher,
+          transformer: _this3.contentTransformer,
+          dispatchAnalyticsEvent: _this3.dispatchAnalyticsEvent,
+          editorRef: _this3.editorRef,
+          editorAPI: editorApi
+        })) !== null && _this3$props$render !== void 0 ? _this3$props$render : _this3.editor;
       }) : this.editor);
     }
   }]);

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

@@ -17,7 +17,6 @@ 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 { usePresetContext } from '../../presets/context';
 import { createEditorContentStyle } from '../ContentStyles';
 import PluginSlot from '../PluginSlot';
 import WithFlash from '../WithFlash';
@@ -125,6 +124,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return jsx(RenderWithPluginState, {
+        editorAPI: this.props.editorAPI,
         renderChrome: this.renderChrome
       });
     }
@@ -134,9 +134,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
 export { Editor as default };
 function RenderWithPluginState(_ref3) {
-  var renderChrome = _ref3.renderChrome;
-  var api = usePresetContext();
-  var _useSharedPluginState = useSharedPluginState(api, ['maxContentSize']),
+  var renderChrome = _ref3.renderChrome,
+    editorAPI = _ref3.editorAPI;
+  var _useSharedPluginState = useSharedPluginState(editorAPI, ['maxContentSize']),
     maxContentSizeState = _useSharedPluginState.maxContentSizeState;
   return jsx(Fragment, null, renderChrome({
     maxContentSize: maxContentSizeState

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

@@ -8,7 +8,7 @@ import React, { useCallback, useEffect, useMemo, 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 classnames from 'classnames';
-import { injectIntl } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -21,7 +21,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { N100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import messages from '../../../messages';
-import { usePresetContext } from '../../../presets/context';
 import { ClickAreaBlock } from '../../Addon';
 import { createEditorContentStyle } from '../../ContentStyles';
 import PluginSlot from '../../PluginSlot';
@@ -75,12 +74,13 @@ var secondaryToolbarStyles = css({
   padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-025, 2px)")
 });
 var appearance = 'comment';
-var Editor = function Editor(props) {
-  var api = usePresetContext();
-  var _useSharedPluginState = useSharedPluginState(api, ['media', 'maxContentSize', 'primaryToolbar']),
+export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
+  var editorAPI = props.editorAPI;
+  var _useSharedPluginState = useSharedPluginState(editorAPI, ['media', 'maxContentSize', 'primaryToolbar']),
     mediaState = _useSharedPluginState.mediaState,
     maxContentSizeState = _useSharedPluginState.maxContentSizeState,
     primaryToolbarState = _useSharedPluginState.primaryToolbarState;
+  var intl = useIntl();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,
     editorActions = props.editorActions,
@@ -101,7 +101,6 @@ var Editor = function Editor(props) {
     onCancel = props.onCancel,
     disabled = props.disabled,
     dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
-    intl = props.intl,
     useStickyToolbar = props.useStickyToolbar,
     pluginHooks = props.pluginHooks,
     featureFlags = props.featureFlags,
@@ -245,5 +244,4 @@ var Editor = function Editor(props) {
     }
   }), customSecondaryToolbarComponents));
 };
-Editor.displayName = 'CommentEditorAppearance';
-export var CommentEditorWithIntl = injectIntl(Editor);
+CommentEditorWithIntl.displayName = 'CommentEditorAppearance';

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

@@ -10,7 +10,6 @@ import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { usePresetContext } from '../../../presets/context';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
 import { fullPageEditorWrapper } from './StyledComponents';
@@ -50,7 +49,7 @@ export var FullPageEditor = function FullPageEditor(props) {
   }, [props.innerRef]);
   var scrollContentContainerRef = useRef(null);
   var showKeyline = useShowKeyline(scrollContentContainerRef);
-  var editorAPI = usePresetContext();
+  var editorAPI = props.editorAPI;
   var _useSharedPluginState = useSharedPluginState(editorAPI, ['editorViewMode', 'primaryToolbar']),
     editorViewModeState = _useSharedPluginState.editorViewModeState,
     primaryToolbarState = _useSharedPluginState.primaryToolbarState;
@@ -72,6 +71,7 @@ export var FullPageEditor = function FullPageEditor(props) {
     ref: wrapperElementRef
   }, !isEditorToolbarHidden && jsx(FullPageToolbar, {
     appearance: props.appearance,
+    editorAPI: editorAPI,
     beforeIcon: props.primaryToolbarIconBefore,
     collabEdit: props.collabEdit,
     containerElement: (_scrollContentContain2 = (_scrollContentContain3 = scrollContentContainerRef.current) === null || _scrollContentContain3 === void 0 ? void 0 : _scrollContentContain3.scrollContainer) !== null && _scrollContentContain2 !== void 0 ? _scrollContentContain2 : null,

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

@@ -13,7 +13,6 @@ import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { usePresetContext } from '../../../presets/context';
 import Toolbar from '../../Toolbar';
 import { BeforePrimaryToolbarWrapper } from './BeforeWrapper';
 import { customToolbarWrapperStyle, mainToolbarFirstChildStyle, mainToolbarIconBeforeStyle, mainToolbarSecondChildStyle, mainToolbarStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, nonCustomToolbarWrapperStyle } from './MainToolbar';
@@ -23,7 +22,7 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldSplitToolbar = _useState2[0],
     setShouldSplitToolbar = _useState2[1];
-  var editorAPI = usePresetContext();
+  var editorAPI = props.editorAPI;
 
   // When primary toolbar components is undefined, do not show two line editor toolbar
   var twoLineEditorToolbar = !!props.customPrimaryToolbarComponents && !!((_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar);

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

@@ -6,10 +6,11 @@ import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN }
 import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N40A, N50A } from '@atlaskit/theme/colors';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export var layoutStyles = function layoutStyles(viewMode) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t> :not(style):first-child,\n\t\t\t\t\t> style:first-child + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), columnLayoutSharedStyle, "var(--ds-space-100, 8px)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px ", "px ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t> :not(style):first-child,\n\t\t\t\t\t> style:first-child + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), columnLayoutSharedStyle, "var(--ds-space-100, 8px)", akLayoutGutterOffset + (fg('platform_editor_element_padding_changes_gate') ? 8 : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (fg('platform_editor_element_padding_changes_gate') ? 8 : 0), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
 };

package/dist/esm/version-wrapper.js

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

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

@@ -7,7 +7,7 @@ import type { AnalyticsEventPayload, DispatchAnalyticsEvent, FireAnalyticsCallba
 import type { AllEditorPresetPluginTypes, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
-import type { Transformer } from '@atlaskit/editor-common/types';
+import type { PublicPluginAPI, Transformer } from '@atlaskit/editor-common/types';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
 import type { ErrorReporter, SEVERITY } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -38,6 +38,7 @@ export interface EditorViewProps {
         transformer?: Transformer<string>;
         dispatchAnalyticsEvent: DispatchAnalyticsEvent;
         editorRef: React.RefObject<HTMLDivElement>;
+        editorAPI: PublicPluginAPI<any> | undefined;
     }) => JSX.Element;
     onEditorCreated: (instance: {
         view: EditorView;

package/dist/types/create-editor/get-ui-component.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import type { EditorAppearance, EditorAppearanceComponentProps } from '../types';
-export default function getUiComponent(appearance: EditorAppearance): React.ComponentType<React.PropsWithChildren<EditorAppearanceComponentProps>>;
+type ReturnType = React.ComponentType<React.PropsWithChildren<EditorAppearanceComponentProps<any[]>>>;
+export default function getUiComponent(appearance: EditorAppearance): ReturnType;
+export {};

package/dist/types/types/editor-appearance-component.d.ts

@@ -3,7 +3,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { ReactHookFactory } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, PublicPluginAPI, ReactHookFactory } from '@atlaskit/editor-common/types';
 import type { UseStickyToolbarType } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -14,7 +14,8 @@ import type { UIComponentFactory } from '../types/ui-components';
 import type { ToolbarUIComponentFactory } from '../ui/Toolbar/types';
 import type { EditorAppearance } from './editor-appearance';
 import type { FeatureFlags } from './feature-flags';
-export interface EditorAppearanceComponentProps {
+export interface EditorAppearanceComponentProps<Plugins extends NextEditorPlugin<any, any>[]> {
+    editorAPI: PublicPluginAPI<Plugins> | undefined;
     appearance?: EditorAppearance;
     onSave?: (editorView: EditorView) => void;
     onCancel?: (editorView: EditorView) => void;

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

@@ -4,11 +4,15 @@
  */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import { type OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
 import type { EditorAppearanceComponentProps } from '../../types';
-export default class Editor extends React.Component<EditorAppearanceComponentProps, any> {
+type AppearanceProps = EditorAppearanceComponentProps<[OptionalPlugin<MaxContentSizePlugin>]>;
+export default class Editor extends React.Component<AppearanceProps, any> {
     static displayName: string;
     private appearance;
     private containerElement;
     private renderChrome;
     render(): jsx.JSX.Element;
 }
+export {};

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

@@ -1,10 +1,16 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
+import type { MediaPlugin } from '@atlaskit/editor-plugins/media';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
 import type { EditorAppearanceComponentProps } from '../../../types';
-export declare const CommentEditorWithIntl: React.FC<import("react-intl-next").WithIntlProps<EditorAppearanceComponentProps & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<EditorAppearanceComponentProps & WrappedComponentProps>;
+type ComponentProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<MediaPlugin>,
+    OptionalPlugin<MaxContentSizePlugin>,
+    OptionalPlugin<PrimaryToolbarPlugin>
+]>;
+export declare const CommentEditorWithIntl: {
+    (props: ComponentProps): jsx.JSX.Element;
+    displayName: string;
 };
+export {};

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

@@ -1,3 +1,13 @@
 import { jsx } from '@emotion/react';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugins/editor-viewmode';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
 import type { EditorAppearanceComponentProps } from '../../../types';
-export declare const FullPageEditor: (props: EditorAppearanceComponentProps) => jsx.JSX.Element;
+import type { ToolbarEditorPlugins } from './FullPageToolbar';
+type ComponentProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<EditorViewModePlugin>,
+    OptionalPlugin<PrimaryToolbarPlugin>,
+    ...ToolbarEditorPlugins
+]>;
+export declare const FullPageEditor: (props: ComponentProps) => jsx.JSX.Element;
+export {};

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

@@ -10,10 +10,25 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugins/analytics';
+import type { AvatarGroupPlugin } from '@atlaskit/editor-plugins/avatar-group';
+import type { BeforePrimaryToolbarPlugin } from '@atlaskit/editor-plugins/before-primary-toolbar';
+import type { CollabEditPlugin } from '@atlaskit/editor-plugins/collab-edit';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugins/feature-flags';
+import type { FindReplacePlugin } from '@atlaskit/editor-plugins/find-replace';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EditorActions } from '../../../index';
 import type { EditorAppearance, PrimaryToolbarComponents, ToolbarUIComponentFactory } from '../../../types';
 import type { FeatureFlags } from '../../../types/feature-flags';
+export type ToolbarEditorPlugins = [
+    OptionalPlugin<AnalyticsPlugin>,
+    OptionalPlugin<FindReplacePlugin>,
+    OptionalPlugin<FeatureFlagsPlugin>,
+    OptionalPlugin<CollabEditPlugin>,
+    OptionalPlugin<AvatarGroupPlugin>,
+    OptionalPlugin<BeforePrimaryToolbarPlugin>
+];
 export interface FullPageToolbarProps {
     appearance?: EditorAppearance;
     providerFactory: ProviderFactory;
@@ -35,6 +50,7 @@ export interface FullPageToolbarProps {
     hasMinWidth?: boolean;
     featureFlags: FeatureFlags;
     hideAvatarGroup?: boolean;
+    editorAPI: PublicPluginAPI<ToolbarEditorPlugins> | undefined;
 }
 export declare const EditorToolbar: React.MemoExoticComponent<(props: FullPageToolbarProps & WrappedComponentProps) => jsx.JSX.Element>;
 export declare const FullPageToolbar: React.FC<import("react-intl-next").WithIntlProps<FullPageToolbarProps & WrappedComponentProps>> & {

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { EditorAppearanceComponentProps } from '../../types';
-export default function Mobile({ editorView, maxHeight, persistScrollGutter, editorDOMElement, disabled, contentComponents, editorActions, eventDispatcher, dispatchAnalyticsEvent, providerFactory, appearance, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, innerRef, pluginHooks, featureFlags, }: EditorAppearanceComponentProps): JSX.Element;
+export default function Mobile({ editorView, maxHeight, persistScrollGutter, editorDOMElement, disabled, contentComponents, editorActions, eventDispatcher, dispatchAnalyticsEvent, providerFactory, appearance, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, innerRef, pluginHooks, featureFlags, }: EditorAppearanceComponentProps<any>): JSX.Element;

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

@@ -7,7 +7,7 @@ import type { AnalyticsEventPayload, DispatchAnalyticsEvent, FireAnalyticsCallba
 import type { AllEditorPresetPluginTypes, EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
-import type { Transformer } from '@atlaskit/editor-common/types';
+import type { PublicPluginAPI, Transformer } from '@atlaskit/editor-common/types';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
 import type { ErrorReporter, SEVERITY } from '@atlaskit/editor-common/utils';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -38,6 +38,7 @@ export interface EditorViewProps {
         transformer?: Transformer<string>;
         dispatchAnalyticsEvent: DispatchAnalyticsEvent;
         editorRef: React.RefObject<HTMLDivElement>;
+        editorAPI: PublicPluginAPI<any> | undefined;
     }) => JSX.Element;
     onEditorCreated: (instance: {
         view: EditorView;

package/dist/types-ts4.5/create-editor/get-ui-component.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 import type { EditorAppearance, EditorAppearanceComponentProps } from '../types';
-export default function getUiComponent(appearance: EditorAppearance): React.ComponentType<React.PropsWithChildren<EditorAppearanceComponentProps>>;
+type ReturnType = React.ComponentType<React.PropsWithChildren<EditorAppearanceComponentProps<any[]>>>;
+export default function getUiComponent(appearance: EditorAppearance): ReturnType;
+export {};

package/dist/types-ts4.5/types/editor-appearance-component.d.ts

@@ -3,7 +3,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { ReactHookFactory } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin, PublicPluginAPI, ReactHookFactory } from '@atlaskit/editor-common/types';
 import type { UseStickyToolbarType } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -14,7 +14,8 @@ import type { UIComponentFactory } from '../types/ui-components';
 import type { ToolbarUIComponentFactory } from '../ui/Toolbar/types';
 import type { EditorAppearance } from './editor-appearance';
 import type { FeatureFlags } from './feature-flags';
-export interface EditorAppearanceComponentProps {
+export interface EditorAppearanceComponentProps<Plugins extends NextEditorPlugin<any, any>[]> {
+    editorAPI: PublicPluginAPI<Plugins> | undefined;
     appearance?: EditorAppearance;
     onSave?: (editorView: EditorView) => void;
     onCancel?: (editorView: EditorView) => void;

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

@@ -4,11 +4,17 @@
  */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import { type OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
 import type { EditorAppearanceComponentProps } from '../../types';
-export default class Editor extends React.Component<EditorAppearanceComponentProps, any> {
+type AppearanceProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<MaxContentSizePlugin>
+]>;
+export default class Editor extends React.Component<AppearanceProps, any> {
     static displayName: string;
     private appearance;
     private containerElement;
     private renderChrome;
     render(): jsx.JSX.Element;
 }
+export {};

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

@@ -1,10 +1,16 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { MaxContentSizePlugin } from '@atlaskit/editor-plugins/max-content-size';
+import type { MediaPlugin } from '@atlaskit/editor-plugins/media';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
 import type { EditorAppearanceComponentProps } from '../../../types';
-export declare const CommentEditorWithIntl: React.FC<import("react-intl-next").WithIntlProps<EditorAppearanceComponentProps & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<EditorAppearanceComponentProps & WrappedComponentProps>;
+type ComponentProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<MediaPlugin>,
+    OptionalPlugin<MaxContentSizePlugin>,
+    OptionalPlugin<PrimaryToolbarPlugin>
+]>;
+export declare const CommentEditorWithIntl: {
+    (props: ComponentProps): jsx.JSX.Element;
+    displayName: string;
 };
+export {};

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

@@ -1,3 +1,13 @@
 import { jsx } from '@emotion/react';
+import type { OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugins/editor-viewmode';
+import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugins/primary-toolbar';
 import type { EditorAppearanceComponentProps } from '../../../types';
-export declare const FullPageEditor: (props: EditorAppearanceComponentProps) => jsx.JSX.Element;
+import type { ToolbarEditorPlugins } from './FullPageToolbar';
+type ComponentProps = EditorAppearanceComponentProps<[
+    OptionalPlugin<EditorViewModePlugin>,
+    OptionalPlugin<PrimaryToolbarPlugin>,
+    ...ToolbarEditorPlugins
+]>;
+export declare const FullPageEditor: (props: ComponentProps) => jsx.JSX.Element;
+export {};

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

@@ -10,10 +10,25 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { OptionalPlugin, PublicPluginAPI } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugins/analytics';
+import type { AvatarGroupPlugin } from '@atlaskit/editor-plugins/avatar-group';
+import type { BeforePrimaryToolbarPlugin } from '@atlaskit/editor-plugins/before-primary-toolbar';
+import type { CollabEditPlugin } from '@atlaskit/editor-plugins/collab-edit';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugins/feature-flags';
+import type { FindReplacePlugin } from '@atlaskit/editor-plugins/find-replace';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EditorActions } from '../../../index';
 import type { EditorAppearance, PrimaryToolbarComponents, ToolbarUIComponentFactory } from '../../../types';
 import type { FeatureFlags } from '../../../types/feature-flags';
+export type ToolbarEditorPlugins = [
+    OptionalPlugin<AnalyticsPlugin>,
+    OptionalPlugin<FindReplacePlugin>,
+    OptionalPlugin<FeatureFlagsPlugin>,
+    OptionalPlugin<CollabEditPlugin>,
+    OptionalPlugin<AvatarGroupPlugin>,
+    OptionalPlugin<BeforePrimaryToolbarPlugin>
+];
 export interface FullPageToolbarProps {
     appearance?: EditorAppearance;
     providerFactory: ProviderFactory;
@@ -35,6 +50,7 @@ export interface FullPageToolbarProps {
     hasMinWidth?: boolean;
     featureFlags: FeatureFlags;
     hideAvatarGroup?: boolean;
+    editorAPI: PublicPluginAPI<ToolbarEditorPlugins> | undefined;
 }
 export declare const EditorToolbar: React.MemoExoticComponent<(props: FullPageToolbarProps & WrappedComponentProps) => jsx.JSX.Element>;
 export declare const FullPageToolbar: React.FC<import("react-intl-next").WithIntlProps<FullPageToolbarProps & WrappedComponentProps>> & {

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { EditorAppearanceComponentProps } from '../../types';
-export default function Mobile({ editorView, maxHeight, persistScrollGutter, editorDOMElement, disabled, contentComponents, editorActions, eventDispatcher, dispatchAnalyticsEvent, providerFactory, appearance, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, innerRef, pluginHooks, featureFlags, }: EditorAppearanceComponentProps): JSX.Element;
+export default function Mobile({ editorView, maxHeight, persistScrollGutter, editorDOMElement, disabled, contentComponents, editorActions, eventDispatcher, dispatchAnalyticsEvent, providerFactory, appearance, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, innerRef, pluginHooks, featureFlags, }: EditorAppearanceComponentProps<any>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "195.4.7",
+	"version": "195.4.9",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/analytics-next-stable-react-context": "1.0.1",
 		"@atlaskit/button": "^20.0.0",
-		"@atlaskit/editor-common": "^87.10.0",
+		"@atlaskit/editor-common": "^87.11.0",
 		"@atlaskit/editor-plugins": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
@@ -74,7 +74,7 @@
 	},
 	"peerDependencies": {
 		"@atlaskit/link-provider": "^1.12.0",
-		"@atlaskit/media-core": "^34.2.0",
+		"@atlaskit/media-core": "^34.3.0",
 		"react": "^16.8.0",
 		"react-dom": "^16.8.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -95,12 +95,12 @@
 		"@atlaskit/editor-test-helpers": "*",
 		"@atlaskit/link-provider": "^1.14.0",
 		"@atlaskit/logo": "^14.2.0",
-		"@atlaskit/media-core": "^34.2.0",
-		"@atlaskit/media-integration-test-helpers": "^3.0.0",
+		"@atlaskit/media-core": "^34.3.0",
+		"@atlaskit/media-integration-test-helpers": "^3.1.0",
 		"@atlaskit/media-test-helpers": "^34.0.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/primitives": "^12.0.0",
-		"@atlaskit/renderer": "^109.46.0",
+		"@atlaskit/renderer": "^109.47.0",
 		"@atlaskit/smart-card": "^27.16.0",
 		"@atlaskit/synchrony-test-helpers": "^2.5.0",
 		"@atlaskit/toggle": "^13.3.0",
@@ -108,7 +108,7 @@
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/adf-schema-json": "^1.22.0",
 		"@atlassian/feature-flags-test-utils": "*",
-		"@atlassian/search-provider": "2.4.106",
+		"@atlassian/search-provider": "2.4.107",
 		"@emotion/jest": "^11.8.0",
 		"@storybook/addon-knobs": "^5.3.18",
 		"@testing-library/react": "^12.1.5",
@@ -235,10 +235,6 @@
 			"type": "boolean",
 			"referenceOnly": "true"
 		},
-		"platform.editor.table.live-pages-sorting_4malx": {
-			"type": "boolean",
-			"referenceOnly": "true"
-		},
 		"platform.editor.table.allow-table-alignment": {
 			"type": "boolean"
 		},
@@ -295,6 +291,9 @@
 		},
 		"platform_editor_drag_and_drop_expand_style_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_element_padding_changes_gate": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {