@atlaskit/editor-core 201.4.0 → 201.5.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-core
 
+## 201.5.1
+
+### Patch Changes
+
+- [#163126](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163126)
+  [`bae044582a28f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bae044582a28f) -
+  [ux] ED-25055: Updated layout to use separator
+
+## 201.5.0
+
+### Minor Changes
+
+- [#163532](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163532)
+  [`b80779d45e179`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b80779d45e179) -
+  moved processRawFragmentValue to editor-common
+
+### Patch Changes
+
+- [#165273](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165273)
+  [`665190aa04bde`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/665190aa04bde) -
+  Fix setting up editorApi with usePreset for react strict mode by adding new apiResolver for
+  preset.
+- Updated dependencies
+
 ## 201.4.0
 
 ### Minor Changes

package/dist/cjs/actions/index.js

@@ -19,7 +19,6 @@ var _eventDispatcher = require("../event-dispatcher");
 var _action = require("../utils/action");
 var _deprecationWarnings = _interopRequireDefault(require("../utils/deprecation-warnings"));
 var _nodesByLocalIds = require("../utils/nodes-by-localIds");
-var _processRawFragmentValue = require("../utils/processRawFragmentValue");
 var _tempIsEmptyDocument = require("./temp-is-empty-document");
 var _tempNodesByLocalids = require("./temp-nodes-by-localids");
 var _tempToJson = require("./temp-to-json");
@@ -343,7 +342,7 @@ var EditorActions = exports.default = /*#__PURE__*/function () {
         return true;
       }
       var schema = state.schema;
-      var content = Array.isArray(rawValue) ? (0, _processRawFragmentValue.processRawFragmentValue)(schema, rawValue) : (0, _processRawValue.processRawValue)(schema, rawValue);
+      var content = Array.isArray(rawValue) ? (0, _processRawValue.processRawFragmentValue)(schema, rawValue) : (0, _processRawValue.processRawValue)(schema, rawValue);
       if (!content) {
         return false;
       }

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

@@ -25,7 +25,7 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var isPreRelease2 = function isPreRelease2() {
   return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
 };
@@ -38,7 +38,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
 // TODO handle responsive
 var layoutColumnStyles = function layoutColumnStyles() {
   return isPreRelease2() ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder: ", ";\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorder) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\ttop: 12px;\n\t\t\t\t\t\theight: calc(100% - 24px);\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket])) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth);
 };
 var layoutSectionStyles = function layoutSectionStyles() {
@@ -49,14 +49,24 @@ var layoutSectionStyles = function layoutSectionStyles() {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 var layoutBorderStyles = function layoutBorderStyles(viewMode) {
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, isPreRelease2() ?
-  /* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
-  see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
-  */
-  "border: ".concat(_editorSharedStyles.akEditorSelectedBorder, ";\n\t\t\t").concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket])) : "\n\t\t\t\t".concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket])));
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "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]));
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+};
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
+  return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
+  return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.selected.danger\n\t\t", " {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t&.", ":not(.danger)\n\t\t", " {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: ", ";\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\tborder: 0px;\n\t\t\t::before {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode));
 };
 
 // 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)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\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\t", "\n\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", "\n\t\t}\n\n\t\t// styles to support borders for layout\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\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\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), layoutBorderStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('nested-dnd', true) && !(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\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\t", "\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\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", "\n\t\t}\n\n\t\t// styles to support borders for layout\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\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\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('nested-dnd', true) && !(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
 };

package/dist/cjs/use-preset.js

@@ -8,6 +8,7 @@ exports.usePreset = usePreset;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _preset = require("@atlaskit/editor-common/preset");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 /**
@@ -55,9 +56,20 @@ function usePreset(createPreset) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   dependencies);
   (0, _react.useLayoutEffect)(function () {
-    preset.apiPromise.then(function (api) {
-      setAPI(api);
-    });
+    if ((0, _platformFeatureFlags.fg)('platform_editor_fix_api_strict_mode')) {
+      return preset.apiResolver.on(function (api) {
+        setAPI(api);
+      });
+    }
+  }, [preset.apiResolver]);
+
+  // Deprecated approach (not compatible with strict mode)
+  (0, _react.useLayoutEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_fix_api_strict_mode')) {
+      preset.apiPromise.then(function (api) {
+        setAPI(api);
+      });
+    }
   }, [preset.apiPromise]);
   return {
     editorApi: editorApi,

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "201.4.0";
+var version = exports.version = "201.5.1";

package/dist/es2019/actions/index.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { processRawFragmentValue, processRawValue } from '@atlaskit/editor-common/process-raw-value';
 import { analyticsEventKey } from '@atlaskit/editor-common/utils/analytics';
 import { Node } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -8,7 +8,6 @@ import { createDispatch } from '../event-dispatcher';
 import { getEditorValueWithMedia } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
 import { findNodePosByFragmentLocalIds } from '../utils/nodes-by-localIds';
-import { processRawFragmentValue } from '../utils/processRawFragmentValue';
 import { isEmptyDocument } from './temp-is-empty-document';
 import { findNodePosByLocalIds } from './temp-nodes-by-localids';
 import { toJSON } from './temp-to-json';

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

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
 import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, layoutBreakpointWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
@@ -58,7 +58,13 @@ css`
 
 				> [data-layout-column].${akEditorSelectedNodeClassName}:not(.danger) {
 					${getSelectionStyles([SelectionStyle.Blanket])};
-					border: ${akEditorSelectedBorder};
+					/* layout column selection shorter after layout border has been removed */
+					::before {
+						top: 12px;
+						height: calc(100% - 24px);
+						width: calc(100% - 8px);
+						left: 4px;
+					}
 				}
 			` :
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
@@ -128,13 +134,86 @@ const layoutBorderStyles = viewMode => css`
 
 	&.${akEditorSelectedNodeClassName}:not(.danger) {
 		[data-layout-column] {
-			${isPreRelease2() ?
-/* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
-see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
-*/
-`border: ${akEditorSelectedBorder};
-			${getSelectionStyles([SelectionStyle.Blanket])}` : `
-				${getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])}`}
+			${getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])}
+			::after {
+				background-color: transparent;
+			}
+		}
+	}
+`;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+const columnSeparatorStyles = viewMode => css`
+	[data-layout-content]::before {
+		content: '';
+		border-left: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
+			${"var(--ds-border, #091E4224)"};
+		position: absolute;
+		height: calc(100% - 24px);
+		margin-left: -25px;
+	}
+`;
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+const rowSeparatorStyles = viewMode => css`
+	[data-layout-content]::before {
+		content: '';
+		border-top: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
+			${"var(--ds-border, #091E4224)"};
+		position: absolute;
+		width: calc(100% - 32px);
+		margin-top: -13px;
+	}
+`;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+const layoutWithSeparatorBorderStyles = viewMode => css`
+	&.selected [data-layout-column]:not(:first-of-type),
+	&:hover [data-layout-column]:not(:first-of-type) {
+		${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (min-width:${layoutBreakpointWidth.MEDIUM}px)` : `	@media screen and (min-width: ${gridMediumMaxWidth}px)`} {
+			${columnSeparatorStyles(viewMode)}
+		}
+		${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
+			${rowSeparatorStyles(viewMode)}
+		}
+	}
+
+	&.selected.danger
+		${fg('platform_editor_advanced_layouts_breakout_resizing') ? `[data-layout-section]` : ``} {
+		background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+
+		box-shadow: 0 0 0 ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px
+			${akEditorDeleteBorder};
+		border-radius: 4px;
+		[data-layout-column]:not(:first-of-type) {
+			${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (min-width:${layoutBreakpointWidth.MEDIUM}px)` : `	@media screen and (min-width: ${gridMediumMaxWidth}px)`} {
+				${columnSeparatorStyles(viewMode)}
+			}
+			${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
+				${rowSeparatorStyles(viewMode)}
+			}
+		}
+	}
+
+	&.${akEditorSelectedNodeClassName}:not(.danger)
+		${fg('platform_editor_advanced_layouts_breakout_resizing') ? `[data-layout-section]` : ``} {
+		box-shadow: 0 0 0 ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px
+			${"var(--ds-border-selected, #0C66E4)"};
+		border-radius: 4px;
+		background-color: ${"var(--ds-background-selected, #E9F2FF)"};
+		[data-layout-column] {
+			${getSelectionStyles([SelectionStyle.Blanket])}
+			border: 0px;
+			::before {
+				background-color: transparent;
+			}
+		}
+		[data-layout-column]:not(:first-of-type) {
+			${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (min-width:${layoutBreakpointWidth.MEDIUM}px)` : `	@media screen and (min-width: ${gridMediumMaxWidth}px)`} {
+				${columnSeparatorStyles(viewMode)}
+			}
+			${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
+				${rowSeparatorStyles(viewMode)}
+			}
 		}
 	}
 `;
@@ -156,8 +235,9 @@ export const layoutStyles = viewMode => css`
 				${fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : ''}
 
 				min-width: 0;
-				border: ${viewMode === 'view' ? 0 : akEditorSelectedBorderSize}px solid
-					${"var(--ds-border, #091E4224)"};
+				/* disable 4 borders when in view mode and advanced layouts is on */
+				border: ${viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize}px
+					solid ${"var(--ds-border, #091E4224)"};
 				border-radius: 4px;
 				padding: ${LAYOUT_COLUMN_PADDING}px
 					${LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0)}px;
@@ -225,7 +305,7 @@ export const layoutStyles = viewMode => css`
 		// styles to support borders for layout
 		[data-layout-section],
 		.layoutSectionView-content-wrap {
-			${layoutBorderStyles(viewMode)}
+			${editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode)}
 		}
 	}
 

package/dist/es2019/use-preset.js

@@ -1,5 +1,6 @@
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -42,9 +43,20 @@ export function usePreset(createPreset, dependencies = []) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   dependencies);
   useLayoutEffect(() => {
-    preset.apiPromise.then(api => {
-      setAPI(api);
-    });
+    if (fg('platform_editor_fix_api_strict_mode')) {
+      return preset.apiResolver.on(api => {
+        setAPI(api);
+      });
+    }
+  }, [preset.apiResolver]);
+
+  // Deprecated approach (not compatible with strict mode)
+  useLayoutEffect(() => {
+    if (!fg('platform_editor_fix_api_strict_mode')) {
+      preset.apiPromise.then(api => {
+        setAPI(api);
+      });
+    }
   }, [preset.apiPromise]);
   return {
     editorApi,

package/dist/es2019/version-wrapper.js

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

package/dist/esm/actions/index.js

@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { processRawFragmentValue, processRawValue } from '@atlaskit/editor-common/process-raw-value';
 import { analyticsEventKey } from '@atlaskit/editor-common/utils/analytics';
 import { Node } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -12,7 +12,6 @@ import { createDispatch } from '../event-dispatcher';
 import { getEditorValueWithMedia } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
 import { findNodePosByFragmentLocalIds } from '../utils/nodes-by-localIds';
-import { processRawFragmentValue } from '../utils/processRawFragmentValue';
 import { isEmptyDocument } from './temp-is-empty-document';
 import { findNodePosByLocalIds } from './temp-nodes-by-localids';
 import { toJSON } from './temp-to-json';

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

@@ -1,11 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
 import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, layoutBreakpointWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
@@ -21,7 +21,7 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
 // TODO handle responsive
 var layoutColumnStyles = function layoutColumnStyles() {
   return isPreRelease2() ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder: ", ";\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket]), akEditorSelectedBorder) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\ttop: 12px;\n\t\t\t\t\t\theight: calc(100% - 24px);\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN / 2, gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket])) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth);
 };
 var layoutSectionStyles = function layoutSectionStyles() {
@@ -32,14 +32,24 @@ var layoutSectionStyles = function layoutSectionStyles() {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
 var layoutBorderStyles = function layoutBorderStyles(viewMode) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, isPreRelease2() ?
-  /* SelectionStyle.Border adds extra ::after content which clashes with hover zone for layout columns and is not needed for layout anyway
-  see platform/packages/editor/editor-shared-styles/src/selection/utils.ts(~L43)
-  */
-  "border: ".concat(akEditorSelectedBorder, ";\n\t\t\t").concat(getSelectionStyles([SelectionStyle.Blanket])) : "\n\t\t\t\t".concat(getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket])));
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]));
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+};
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
+};
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
+  return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t\t", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.selected.danger\n\t\t", " {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t&.", ":not(.danger)\n\t\t", " {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: ", ";\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\tborder: 0px;\n\t\t\t::before {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, akEditorDeleteBorder, fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode), akEditorSelectedNodeClassName, fg('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (min-width:".concat(layoutBreakpointWidth.MEDIUM, "px)") : "\t@media screen and (min-width: ".concat(gridMediumMaxWidth, "px)"), columnSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)") : "@media screen and (max-width: ".concat(gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode));
 };
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export var layoutStyles = function layoutStyles(viewMode) {
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\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\t", "\n\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", "\n\t\t}\n\n\t\t// styles to support borders for layout\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\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\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), layoutBorderStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\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\t", "\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\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", "\n\t\t}\n\n\t\t// styles to support borders for layout\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\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\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
 };

package/dist/esm/use-preset.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -49,9 +50,20 @@ export function usePreset(createPreset) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   dependencies);
   useLayoutEffect(function () {
-    preset.apiPromise.then(function (api) {
-      setAPI(api);
-    });
+    if (fg('platform_editor_fix_api_strict_mode')) {
+      return preset.apiResolver.on(function (api) {
+        setAPI(api);
+      });
+    }
+  }, [preset.apiResolver]);
+
+  // Deprecated approach (not compatible with strict mode)
+  useLayoutEffect(function () {
+    if (!fg('platform_editor_fix_api_strict_mode')) {
+      preset.apiPromise.then(function (api) {
+        setAPI(api);
+      });
+    }
   }, [preset.apiPromise]);
   return {
     editorApi: editorApi,

package/dist/esm/version-wrapper.js

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