@atlaskit/editor-core 197.2.7 → 197.4.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @atlaskit/editor-core
 
+## 197.4.0
+
+### Minor Changes
+
+- [#137822](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137822)
+  [`202cf9b609302`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/202cf9b609302) -
+  [ux] Deprecating toolbar component that is unused.
+- [#138305](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138305)
+  [`c79d9c18032b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c79d9c18032b6) -
+  Passing task local ID from editor mentions plugin
+
+### Patch Changes
+
+- [#138245](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138245)
+  [`e3913201044c6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e3913201044c6) -
+  Cleanup internal workaround with editor actions.
+- [#138136](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138136)
+  [`35938ecf46ba7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35938ecf46ba7) -
+  [ED-24755] Implement insert functionality of element templates and fire document inserted event
+  with template IDs
+- [`749c8b3e5bd5d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/749c8b3e5bd5d) -
+  Cleanup feature flag for removing the hide avatar group prop.
+- Updated dependencies
+
+## 197.3.0
+
+### Minor Changes
+
+- [#136891](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136891)
+  [`388780c6348e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/388780c6348e9) -
+  Pass emoji provider via preset
+- [#137755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137755)
+  [`f3d004d4e3a3e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3d004d4e3a3e) -
+  ED-24650 fix nested node jittering issue
+
+### Patch Changes
+
+- [#137404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137404)
+  [`ca03548656c8e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ca03548656c8e) -
+  ED-24744 Align padding of layout and expand when nested dnd is enabled
+- [#137736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137736)
+  [`2a88fdd213838`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2a88fdd213838) -
+  Introducing new smaller refined entry-points for editor-common to reduce bundle size.
+- [#137404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137404)
+  [`adae1f3dc8fca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/adae1f3dc8fca) -
+  Switches Support Table in Comment features to use Statsig experiment instead of a Feature Gate.
+- [#137800](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137800)
+  [`62a2ca89af70c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62a2ca89af70c) -
+  Fix toolbar not showing up in SSR env
+- Updated dependencies
+
 ## 197.2.7
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -55,9 +55,6 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
-        {
-            "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
-        },
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -54,9 +54,6 @@
     {
       "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
     },
-    {
-      "path": "../../../design-system/spinner/afm-jira/tsconfig.json"
-    },
     {
       "path": "../../../elements/task-decision/afm-jira/tsconfig.json"
     },

package/dist/cjs/actions/index.js

@@ -10,6 +10,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _utils = require("@atlaskit/editor-common/utils");
 var _analytics = require("@atlaskit/editor-common/utils/analytics");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -18,8 +19,8 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _eventDispatcher = require("../event-dispatcher");
 var _action = require("../utils/action");
 var _deprecationWarnings = _interopRequireDefault(require("../utils/deprecation-warnings"));
-var _document = require("../utils/document");
 var _nodesByLocalIds = require("../utils/nodes-by-localIds");
+var _processRawFragmentValue = require("../utils/processRawFragmentValue");
 // TODO: ED-21786
 // Please, do not copy or use this kind of code below
 // @ts-ignore
@@ -201,34 +202,7 @@ var EditorActions = exports.default = /*#__PURE__*/function () {
       editorView.dispatch(tr);
       return true;
     }
-  }, {
-    key: "__temporaryFixForConfigPanel",
-    value: function () {
-      var _temporaryFixForConfigPanel2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var editorView, __EDITOR_INTERNALS_DO_NOT_USE__API;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              // @ts-ignore Internal API not for use, just to unblock extracting extension plugin
-              editorView = this.editorView, __EDITOR_INTERNALS_DO_NOT_USE__API = this.__EDITOR_INTERNALS_DO_NOT_USE__API;
-              if (!(!editorView || !__EDITOR_INTERNALS_DO_NOT_USE__API)) {
-                _context2.next = 3;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 3:
-              (0, _action.__temporaryFixForConfigPanel)(editorView, __EDITOR_INTERNALS_DO_NOT_USE__API);
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function __temporaryFixForConfigPanel() {
-        return _temporaryFixForConfigPanel2.apply(this, arguments);
-      }
-      return __temporaryFixForConfigPanel;
-    }()
+
     /**
      * @deprecated This is deprecated and is no longer maintained.
      *
@@ -242,36 +216,36 @@ var EditorActions = exports.default = /*#__PURE__*/function () {
   }, {
     key: "getValue",
     value: (function () {
-      var _getValue = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var _getValue = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
         var editorView, doc, json, nodeSanitized;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               editorView = this.editorView;
               if (editorView) {
-                _context3.next = 3;
+                _context2.next = 3;
                 break;
               }
-              return _context3.abrupt("return");
+              return _context2.abrupt("return");
             case 3:
-              _context3.next = 5;
+              _context2.next = 5;
               return (0, _action.getEditorValueWithMedia)(editorView);
             case 5:
-              doc = _context3.sent;
+              doc = _context2.sent;
               json = (0, _utils.toJSON)(doc);
               if (this.contentEncode) {
-                _context3.next = 9;
+                _context2.next = 9;
                 break;
               }
-              return _context3.abrupt("return", json);
+              return _context2.abrupt("return", json);
             case 9:
               nodeSanitized = _model.Node.fromJSON(this.editorView.state.schema, json);
-              return _context3.abrupt("return", this.contentEncode(nodeSanitized));
+              return _context2.abrupt("return", this.contentEncode(nodeSanitized));
             case 11:
             case "end":
-              return _context3.stop();
+              return _context2.stop();
           }
-        }, _callee3, this);
+        }, _callee2, this);
       }));
       function getValue() {
         return _getValue.apply(this, arguments);
@@ -367,7 +341,7 @@ var EditorActions = exports.default = /*#__PURE__*/function () {
         return true;
       }
       var schema = state.schema;
-      var content = Array.isArray(rawValue) ? (0, _document.processRawFragmentValue)(schema, rawValue) : (0, _utils.processRawValue)(schema, rawValue);
+      var content = Array.isArray(rawValue) ? (0, _processRawFragmentValue.processRawFragmentValue)(schema, rawValue) : (0, _processRawValue.processRawValue)(schema, rawValue);
       if (!content) {
         return false;
       }

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

@@ -54,10 +54,12 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
   var setEditorApi = (0, _react.useCallback)(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function (api) {
-    // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
-    // We may clean up this code when EditorActions deprecation process starts
-    // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
-    editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_remove_editor_actions_workaround')) {
+      // This is an workaround to unblock Editor Lego Decoupling project, if you have questions ping us #cc-editor-lego
+      // We may clean up this code when EditorActions deprecation process starts
+      // @ts-expect-error 2339: Property '__EDITOR_INTERNALS_DO_NOT_USE__API' does not exist on type 'EditorActions<any>'.
+      editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = api;
+    }
   }, [editorActions]);
   var overriddenEditorProps = _objectSpread(_objectSpread({}, props), {}, {
     onSave: props.onSave ? handleSave : undefined,
@@ -145,8 +147,7 @@ var EditorInternal = exports.EditorInternal = /*#__PURE__*/(0, _react.memo)(func
         enableToolbarMinWidth: ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.toolbarMinWidthOverflow) != null ? !!((_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.toolbarMinWidthOverflow) : props.allowUndoRedoButtons,
         useStickyToolbar: props.useStickyToolbar,
         featureFlags: featureFlags,
-        pluginHooks: config.pluginHooks,
-        hideAvatarGroup: (0, _platformFeatureFlags.fg)('platform_editor_remove_hide_avatar_group_prop') ? undefined : props.hideAvatarGroup
+        pluginHooks: config.pluginHooks
       }));
     }
   }), (0, _react2.jsx)(PortalRenderer, null))))))));
@@ -177,7 +178,8 @@ function ReactEditorViewContextWrapper(props) {
   (0, _useProviders.useProviders)({
     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
+    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,
+    emojiProvider: props.editorProps.emojiProvider
   });
   return (0, _react2.jsx)(_ReactEditorView.default, (0, _extends2.default)({}, props, {
     setEditorApi: setEditorAPI

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

@@ -8,6 +8,7 @@ exports.useProviders = void 0;
 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`.
@@ -20,7 +21,8 @@ var _context2 = require("../../presets/context");
 var useProviders = exports.useProviders = function useProviders(_ref) {
   var contextIdentifierProvider = _ref.contextIdentifierProvider,
     mediaProvider = _ref.mediaProvider,
-    cardProvider = _ref.cardProvider;
+    cardProvider = _ref.cardProvider,
+    emojiProvider = _ref.emojiProvider;
   var editorApi = (0, _context2.usePresetContext)();
   (0, _react.useEffect)(function () {
     function setProvider() {
@@ -68,4 +70,12 @@ var useProviders = exports.useProviders = function useProviders(_ref) {
       editorApi === null || editorApi === void 0 || (_editorApi$card = editorApi.card) === null || _editorApi$card === void 0 || _editorApi$card.actions.setProvider(cardProvider);
     }
   }, [cardProvider, editorApi]);
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_get_emoji_provider_from_config')) {
+      if (emojiProvider) {
+        var _editorApi$emoji;
+        editorApi === null || editorApi === void 0 || (_editorApi$emoji = editorApi.emoji) === null || _editorApi$emoji === void 0 || _editorApi$emoji.actions.setProvider(emojiProvider);
+      }
+    }
+  }, [emojiProvider, editorApi]);
 };

package/dist/cjs/composable-editor/utils/handleProviders.js

@@ -28,7 +28,9 @@ function handleProviders(providerFactory, _ref, extensionProvider, quickInsertPr
     autoformattingProvider = _ref.autoformattingProvider,
     searchProvider = _ref.searchProvider,
     cardProvider = _ref.cardProvider;
-  providerFactory.setProvider('emojiProvider', emojiProvider);
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_get_emoji_provider_from_config')) {
+    providerFactory.setProvider('emojiProvider', emojiProvider);
+  }
   providerFactory.setProvider('mentionProvider', mentionProvider);
   providerFactory.setProvider('taskDecisionProvider', taskDecisionProvider);
   providerFactory.setProvider('contextIdentifierProvider', contextIdentifierProvider);

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

@@ -19,18 +19,22 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _countNodes2 = require("@atlaskit/editor-common/count-nodes");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
+var _measureRender = require("@atlaskit/editor-common/performance/measure-render");
+var _navigation = require("@atlaskit/editor-common/performance/navigation");
 var _preset = require("@atlaskit/editor-common/preset");
+var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _ufo = require("@atlaskit/editor-common/ufo");
-var _utils = require("@atlaskit/editor-common/utils");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _eventDispatcher = require("../event-dispatcher");
 var _context = require("../presets/context");
-var _document = require("../utils/document");
 var _findChangedNodesFromTransaction = require("../utils/findChangedNodesFromTransaction");
+var _getNodesCount = require("../utils/getNodesCount");
 var _isFullPage = require("../utils/is-full-page");
 var _RenderTracking = require("../utils/performance/components/RenderTracking");
 var _measureEnum = _interopRequireDefault(require("../utils/performance/measure-enum"));
@@ -215,7 +219,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
       _this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       var doc;
       if (options.doc) {
-        doc = (0, _utils.processRawValue)(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+        doc = (0, _processRawValue.processRawValue)(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
       }
       var api = _this.pluginInjectionAPI.api();
       var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
@@ -406,18 +410,18 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createEditorView", function (node) {
-      (0, _utils.measureRender)(_measureEnum.default.PROSEMIRROR_RENDERED, function (_ref3) {
+      (0, _measureRender.measureRender)(_measureEnum.default.PROSEMIRROR_RENDERED, function (_ref3) {
         var _this$props$editorPro4, _proseMirrorRenderedT, _proseMirrorRenderedT2;
         var duration = _ref3.duration,
           startTime = _ref3.startTime,
           distortedDuration = _ref3.distortedDuration;
         var proseMirrorRenderedTracking = (_this$props$editorPro4 = _this.props.editorProps) === null || _this$props$editorPro4 === void 0 || (_this$props$editorPro4 = _this$props$editorPro4.performanceTracking) === null || _this$props$editorPro4 === void 0 ? void 0 : _this$props$editorPro4.proseMirrorRenderedTracking;
-        var forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined' && (0, _utils.shouldForceTracking)();
+        var forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined';
         _this.proseMirrorRenderedSeverity = !!forceSeverityTracking || proseMirrorRenderedTracking !== null && proseMirrorRenderedTracking !== void 0 && proseMirrorRenderedTracking.trackSeverity ? (0, _analytics2.getAnalyticsEventSeverity)(duration, (_proseMirrorRenderedT = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityNormalThreshold) !== null && _proseMirrorRenderedT !== void 0 ? _proseMirrorRenderedT : _consts.PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, (_proseMirrorRenderedT2 = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityDegradedThreshold) !== null && _proseMirrorRenderedT2 !== void 0 ? _proseMirrorRenderedT2 : _consts.PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD) : undefined;
         if (_this.view) {
           var _this$pluginInjection2, _this$experienceStore10;
-          var nodes = (0, _document.getNodesCount)(_this.view.state.doc);
-          var ttfb = (0, _utils.getResponseEndTime)();
+          var nodes = (0, _getNodesCount.getNodesCount)(_this.view.state.doc);
+          var ttfb = (0, _navigation.getResponseEndTime)();
           var contextIdentifier = (_this$pluginInjection2 = _this.pluginInjectionAPI.api().base) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.sharedState.currentState();
           _this.dispatchAnalyticsEvent({
             action: _analytics.ACTION.PROSEMIRROR_RENDERED,
@@ -554,7 +558,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
     });
     var _api = _this.pluginInjectionAPI.api();
     (_props$setEditorApi = props.setEditorApi) === null || _props$setEditorApi === void 0 || _props$setEditorApi.call(props, _api);
-    if (props.editorProps.editorActions) {
+    if (props.editorProps.editorActions && !(0, _platformFeatureFlags.fg)('platform_editor_remove_editor_actions_workaround')) {
       // @ts-expect-error
       props.editorProps.editorActions.__EDITOR_INTERNALS_DO_NOT_USE__API = _api;
     }
@@ -624,7 +628,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
   }, {
     key: "countNodes",
     value: function countNodes() {
-      return (0, _utils.countNodes)(this.editorState);
+      return (0, _countNodes2.countNodes)(this.editorState);
     }
   }, {
     key: "isTransactionTrackingExplicitlyDisabled",

package/dist/cjs/presets/universal.js

@@ -56,6 +56,7 @@ var _tasksAndDecisions = require("@atlaskit/editor-plugins/tasks-and-decisions")
 var _textColor = require("@atlaskit/editor-plugins/text-color");
 var _toolbarListsIndentation = require("@atlaskit/editor-plugins/toolbar-lists-indentation");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _isFullPage = require("../utils/is-full-page");
 var _versionWrapper = require("../version-wrapper");
 var _default = require("./default");
@@ -143,11 +144,16 @@ function createUniversalPresetInternal(_ref) {
     HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
     profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd([_emoji.emojiPlugin, {
+    emojiProvider: props.emojiProvider,
     emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
   }], Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, _objectSpread({
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
-    dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment')),
-    isTableScalingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tablePreserveWidth) && (isFullPage || isComment && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment')),
+    dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+      exposure: true
+    })),
+    isTableScalingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tablePreserveWidth) && (isFullPage || isComment && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+      exposure: true
+    })),
     allowContextualMenu: !isMobile,
     fullWidthEnabled: appearance === 'full-width',
     wasFullWidthEnabled: prevAppearance && prevAppearance === 'full-width',
@@ -218,7 +224,11 @@ function createUniversalPresetInternal(_ref) {
     tableSelectorSupported: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableSelector) && isFullPage,
     nativeStatusSupported: !statusMenuDisabled,
     showElementBrowserLink: props.elementBrowser && props.elementBrowser.showModal || false,
-    replacePlusMenuWithElementBrowser: props.elementBrowser && props.elementBrowser.replacePlusMenu || false
+    replacePlusMenuWithElementBrowser: props.elementBrowser && props.elementBrowser.replacePlusMenu || false,
+    // @ts-ignore
+    // For platform_editor_element_level_templates experiment only
+    // clean up ticket ED-24873
+    UNSAFE_editorAppearance: appearance
   }]).maybeAdd([_beforePrimaryToolbar.beforePrimaryToolbarPlugin, {
     beforePrimaryToolbarComponents: // @ts-expect-error 2339: Property 'before' does not exist on type 'PrimaryToolbarComponents'.
     (_props$primaryToolbar = props.primaryToolbarComponents) === null || _props$primaryToolbar === void 0 ? void 0 : _props$primaryToolbar.before
@@ -229,15 +239,9 @@ function createUniversalPresetInternal(_ref) {
     // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
     collabEdit: props.collabEdit,
     takeFullWidth: !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
-    showAvatarGroup:
-    // Cleanup: `platform_editor_remove_hide_avatar_group_prop`
-    // Remove `!props.hideAvatarGroup`
-    !props.hideAvatarGroup && featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
+    showAvatarGroup: featureFlags.showAvatarGroupAsPlugin === true && !featureFlags.twoLineEditorToolbar
   }]).maybeAdd([_findReplace.findReplacePlugin, {
-    takeFullWidth:
-    // Cleanup: `platform_editor_remove_hide_avatar_group_prop`
-    // Remove `!props.hideAvatarGroup`
-    !props.hideAvatarGroup && !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
+    takeFullWidth: !!featureFlags.showAvatarGroupAsPlugin === false && !hasBeforePrimaryToolbar(props.primaryToolbarComponents),
     twoLineEditorToolbar: !!props.primaryToolbarComponents && !!featureFlags.twoLineEditorToolbar
   }], Boolean(props.allowFindReplace)).maybeAdd(_border.borderPlugin, Boolean(props.allowBorderMark || props.UNSAFE_allowBorderMark)).maybeAdd(_fragment.fragmentPlugin, Boolean(props.allowFragmentMark)).add(_pasteOptionsToolbar.pasteOptionsToolbarPlugin).add([_codeBidiWarning.codeBidiWarningPlugin, {
     appearance: appearance

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

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _browser = require("@atlaskit/editor-common/browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _FullPageContentArea = require("./FullPageContentArea");
 var _FullPageToolbar = require("./FullPageToolbar");
 var _StyledComponents = require("./StyledComponents");
@@ -98,8 +97,7 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
     primaryToolbarComponents: primaryToolbarComponents,
     providerFactory: props.providerFactory,
     showKeyline: showKeyline,
-    featureFlags: props.featureFlags,
-    hideAvatarGroup: (0, _platformFeatureFlags.fg)('platform_editor_remove_hide_avatar_group_prop') ? undefined : props.hideAvatarGroup
+    featureFlags: props.featureFlags
   }), (0, _react2.jsx)(_FullPageContentArea.FullPageContentArea, {
     editorAPI: editorAPI,
     ref: scrollContentContainerRef,

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(function (props) {
-  var _props$featureFlags, _props$customPrimaryT, _props$featureFlags2, _props$featureFlags3, _editorAPI$avatarGrou, _props$collabEdit, _props$collabEdit2, _props$collabEdit3;
+  var _props$featureFlags, _props$customPrimaryT;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     shouldSplitToolbar = _useState2[0],
@@ -64,14 +64,6 @@ var EditorToolbar = exports.EditorToolbar = /*#__PURE__*/_react.default.memo(fun
     css: _MainToolbar.customToolbarWrapperStyle
   }, twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? (0, _react2.jsx)(_BeforeWrapper.BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: (_props$customPrimaryT = props.customPrimaryToolbarComponents) === null || _props$customPrimaryT === void 0 ? void 0 : _props$customPrimaryT.before
-  }) : null, !(0, _platformFeatureFlags.fg)('platform_editor_remove_hide_avatar_group_prop') ? props.hideAvatarGroup || (props === null || props === void 0 || (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : // Avatars are moved to Confluence codebase for Edit in Context
-  // When Edit in Context is enabled customPrimaryToolbarComponents is undefined
-  // For more details please check
-  // https://hello.atlassian.net/wiki/spaces/PCG/pages/2851572180/Editor+toolbar+for+live+pages+and+edit+in+context+projects
-  editorAPI === null || editorAPI === void 0 || (_editorAPI$avatarGrou = editorAPI.avatarGroup) === null || _editorAPI$avatarGrou === void 0 ? void 0 : _editorAPI$avatarGrou.actions.getToolbarItem({
-    inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
-    inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
-    isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
   }) : null, editorAPI !== null && editorAPI !== void 0 && editorAPI.findReplace && twoLineEditorToolbar ? editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.findReplace.actions.getToolbarButton({
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,

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

@@ -11,7 +11,8 @@ var _styles = require("@atlaskit/editor-common/styles");
 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
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
 var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
   return (0, _react.css)({
@@ -20,15 +21,19 @@ var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
 };
 var DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, ".concat(_colors.R50, ")");
 var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, ".concat(_colors.R300, ")");
+var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
+  return (0, _experiments.editorExperiment)('nested-dnd', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> div.ak-editor-expand[data-node-type='nestedExpand'] {\n\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-space-050, 0.25rem)") : '';
+};
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var expandStyles = exports.expandStyles = function expandStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
     expanded: false,
     focused: false
-  })(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
+  })(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
     expanded: false,
     focused: false
-  })(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.expandClassNames.content, "var(--ds-space-100, 8px)", _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
+  })(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
 };

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

@@ -25,8 +25,14 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
+  return (0, _experiments.editorExperiment)('nested-dnd', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :not(style):first-child,\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
+};
+
 // 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 ", "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, _experiments.editorExperiment)('nested-dnd', true) ? 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, _experiments.editorExperiment)('nested-dnd', true) ? 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);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (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\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\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, _experiments.editorExperiment)('nested-dnd', true) ? 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 + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), _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/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _widthDetector = require("@atlaskit/width-detector");
 var _isFullPage = require("../../utils/is-full-page");
@@ -45,7 +46,8 @@ var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function Toolbar
   var elementWidth = (0, _hooks.useElementWidth)(ref, {
     skip: typeof width !== 'undefined'
   });
-  var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
+  var defaultToolbarSize = (0, _coreUtils.isSSR)() && (0, _isFullPage.isFullPage)(props.appearance) ? _types.ToolbarSize.XXL : undefined;
+  var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize : (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
   var toolbarStyle = (0, _react.useMemo)(function () {
     var toolbarWidth = (0, _isFullPage.isFullPage)(props.appearance) && props.twoLineEditorToolbar ? _types.ToolbarSize.S : _types.ToolbarSize.M;
     var toolbarMinWidth = (0, _toolbarSize.toolbarSizeToWidth)(toolbarWidth, props.appearance);