@atlaskit/editor-core 193.18.0 → 193.18.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-core
 
+## 193.18.1
+
+### Patch Changes
+
+-   [#98803](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98803)
+    [`b9d6c4c4f418`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9d6c4c4f418) -
+    Added new FULL_PAGE_EDITOR_TOOLBAR_HEIGHT constant to editor-shared-styles.
+-   Updated dependencies
+
 ## 193.18.0
 
 ### Patch Changes

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

@@ -8,25 +8,26 @@ exports.nonCustomToolbarWrapperStyle = exports.mainToolbarStyle = exports.mainTo
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = exports.MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
-var toolbarLineHeight = 56;
 
 // box-shadow is overriden by the mainToolbar
 var mainToolbarWithKeyline = (0, _react.css)({
-  boxShadow: "0 ".concat(_editorSharedStyles.akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
+  boxShadow: (0, _platformFeatureFlags.getBooleanFF)('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)" : "0 ".concat(_editorSharedStyles.akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
 });
 var mainToolbarTwoLineStyle = (0, _react.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
   flexWrap: 'wrap',
-  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+  height: "calc(".concat((0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), " * 2)")
 }));
 var mainToolbar = (0, _react.css)((0, _defineProperty2.default)({
   position: 'relative',
   alignItems: 'center',
   boxShadow: 'none',
+  borderBottom: (0, _platformFeatureFlags.getBooleanFF)('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "1px solid ".concat("var(--ds-border, #091E4224)") : undefined,
   transition: "box-shadow 200ms ".concat(_editorSharedStyles.akEditorSwoopCubicBezier),
   zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
   display: 'flex',
-  height: "".concat(toolbarLineHeight, "px"),
+  height: (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(),
   flexShrink: 0,
   backgroundColor: "var(--ds-surface, white)",
   '& object': {
@@ -34,7 +35,7 @@ var mainToolbar = (0, _react.css)((0, _defineProperty2.default)({
   }
 }, "@media (max-width: ".concat(_editorSharedStyles.akEditorMobileMaxWidth, "px)"), {
   display: 'grid',
-  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+  height: "calc(".concat((0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), " * 2)")
 }));
 var mainToolbarStyle = exports.mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
@@ -56,7 +57,7 @@ var mainToolbarFirstChild = (0, _react.css)((0, _defineProperty2.default)({
 }));
 var mainToolbarFirstChildTowLine = (0, _react.css)((0, _defineProperty2.default)({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
   flex: '1 1 100%',
-  height: "".concat(toolbarLineHeight, "px"),
+  height: (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(),
   justifyContent: 'flex-end',
   minWidth: 'fit-content'
 }));
@@ -71,7 +72,7 @@ var mainToolbarSecondChildTwoLine = (0, _react.css)((0, _defineProperty2.default
   flexGrow: 1,
   flex: '1 1 100%',
   margin: 'auto',
-  height: "".concat(toolbarLineHeight, "px"),
+  height: (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(),
   minWidth: 0
 }));
 var mainToolbarSecondChildStyle = exports.mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {

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

@@ -50,7 +50,7 @@ var positionedOverEditorStyle = exports.positionedOverEditorStyle = (0, _react.c
 var contentArea = exports.contentArea = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
-  height: "calc(100% - ".concat(_editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT, ")"),
+  height: "calc(100% - ".concat((0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), ")"),
   boxSizing: 'border-box',
   margin: 0,
   padding: 0,

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

@@ -42,7 +42,7 @@ var WIDE_MODE = 'wide';
 var absolutePanelStyles = (0, _react2.css)({
   position: 'absolute',
   right: 0,
-  height: "calc(100% - ".concat(_editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT, ")")
+  height: "calc(100% - ".concat((0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), ")")
 });
 var checkTableExistsInDoc = function checkTableExistsInDoc(editorView) {
   var tableNodeSchema = editorView.state.schema.nodes.table;

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

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

@@ -1,26 +1,27 @@
 import { css } from '@emotion/react';
-import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
+import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
-const toolbarLineHeight = 56;
 
 // box-shadow is overriden by the mainToolbar
 const mainToolbarWithKeyline = css({
-  boxShadow: `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"}`
+  boxShadow: getBooleanFF('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? `${"var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)"}` : `0 ${akEditorToolbarKeylineHeight}px 0 0 ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"}`
 });
 const mainToolbarTwoLineStyle = css({
   [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
     flexWrap: 'wrap',
-    height: `calc(${toolbarLineHeight}px * 2)`
+    height: `calc(${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()} * 2)`
   }
 });
 const mainToolbar = css({
   position: 'relative',
   alignItems: 'center',
   boxShadow: 'none',
+  borderBottom: getBooleanFF('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? `1px solid ${"var(--ds-border, #091E4224)"}` : undefined,
   transition: `box-shadow 200ms ${akEditorSwoopCubicBezier}`,
   zIndex: akEditorFloatingDialogZIndex,
   display: 'flex',
-  height: `${toolbarLineHeight}px`,
+  height: FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(),
   flexShrink: 0,
   backgroundColor: "var(--ds-surface, white)",
   '& object': {
@@ -28,7 +29,7 @@ const mainToolbar = css({
   },
   [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
     display: 'grid',
-    height: `calc(${toolbarLineHeight}px * 2)`
+    height: `calc(${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()} * 2)`
   }
 });
 export const mainToolbarStyle = (showKeyline, twoLineEditorToolbar) => [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
@@ -52,7 +53,7 @@ const mainToolbarFirstChild = css({
 const mainToolbarFirstChildTowLine = css({
   [`@media (max-width: ${MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT}px)`]: {
     flex: '1 1 100%',
-    height: `${toolbarLineHeight}px`,
+    height: FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(),
     justifyContent: 'flex-end',
     minWidth: 'fit-content'
   }
@@ -67,7 +68,7 @@ const mainToolbarSecondChildTwoLine = css({
     flexGrow: 1,
     flex: '1 1 100%',
     margin: 'auto',
-    height: `${toolbarLineHeight}px`,
+    height: FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(),
     minWidth: 0
   }
 });

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
-import { akEditorContextPanelWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { akEditorContextPanelWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { createEditorContentStyle } from '../../ContentStyles';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
@@ -41,7 +41,7 @@ export const positionedOverEditorStyle = css({
 export const contentArea = css({
   display: 'flex',
   flexDirection: 'row',
-  height: `calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT})`,
+  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()})`,
   boxSizing: 'border-box',
   margin: 0,
   padding: 0,

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

@@ -6,7 +6,7 @@ import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
 import { ContextPanelConsumer, WidthContext } from '@atlaskit/editor-common/ui';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorBreakoutPadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { N30 } from '@atlaskit/theme/colors';
 import { getChildBreakoutModes } from '../../utils/document';
 import WithEditorActions from '../WithEditorActions';
@@ -19,7 +19,7 @@ const WIDE_MODE = 'wide';
 const absolutePanelStyles = css({
   position: 'absolute',
   right: 0,
-  height: `calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT})`
+  height: `calc(100% - ${FULL_PAGE_EDITOR_TOOLBAR_HEIGHT()})`
 });
 const checkTableExistsInDoc = editorView => {
   const tableNodeSchema = editorView.state.schema.nodes.table;

package/dist/es2019/version-wrapper.js

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

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

@@ -1,25 +1,26 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { css } from '@emotion/react';
-import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
+import { akEditorFloatingDialogZIndex, akEditorMobileMaxWidth, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
-var toolbarLineHeight = 56;
 
 // box-shadow is overriden by the mainToolbar
 var mainToolbarWithKeyline = css({
-  boxShadow: "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
+  boxShadow: getBooleanFF('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "var(--ds-shadow-overflow, 0px 0px 8px #091E4228, 0px 0px 1px #091E421e)" : "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ", "var(--ds-background-accent-gray-subtlest, #F1F2F4)")
 });
 var mainToolbarTwoLineStyle = css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
   flexWrap: 'wrap',
-  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+  height: "calc(".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(), " * 2)")
 }));
 var mainToolbar = css(_defineProperty({
   position: 'relative',
   alignItems: 'center',
   boxShadow: 'none',
+  borderBottom: getBooleanFF('platform.confluence.frontend.narrow-full-page-editor-toolbar') ? "1px solid ".concat("var(--ds-border, #091E4224)") : undefined,
   transition: "box-shadow 200ms ".concat(akEditorSwoopCubicBezier),
   zIndex: akEditorFloatingDialogZIndex,
   display: 'flex',
-  height: "".concat(toolbarLineHeight, "px"),
+  height: FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(),
   flexShrink: 0,
   backgroundColor: "var(--ds-surface, white)",
   '& object': {
@@ -27,7 +28,7 @@ var mainToolbar = css(_defineProperty({
   }
 }, "@media (max-width: ".concat(akEditorMobileMaxWidth, "px)"), {
   display: 'grid',
-  height: "calc(".concat(toolbarLineHeight, "px * 2)")
+  height: "calc(".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(), " * 2)")
 }));
 export var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
   return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
@@ -49,7 +50,7 @@ var mainToolbarFirstChild = css(_defineProperty({
 }));
 var mainToolbarFirstChildTowLine = css(_defineProperty({}, "@media (max-width: ".concat(MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, "px)"), {
   flex: '1 1 100%',
-  height: "".concat(toolbarLineHeight, "px"),
+  height: FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(),
   justifyContent: 'flex-end',
   minWidth: 'fit-content'
 }));
@@ -64,7 +65,7 @@ var mainToolbarSecondChildTwoLine = css(_defineProperty({}, "@media (max-width:
   flexGrow: 1,
   flex: '1 1 100%',
   margin: 'auto',
-  height: "".concat(toolbarLineHeight, "px"),
+  height: FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(),
   minWidth: 0
 }));
 export var mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {

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

@@ -4,7 +4,7 @@ import { css } from '@emotion/react';
 import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
-import { akEditorContextPanelWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { akEditorContextPanelWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { createEditorContentStyle } from '../../ContentStyles';
 import { scrollbarStyles } from '../../styles';
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
@@ -43,7 +43,7 @@ export var positionedOverEditorStyle = css({
 export var contentArea = css({
   display: 'flex',
   flexDirection: 'row',
-  height: "calc(100% - ".concat(ATLASSIAN_NAVIGATION_HEIGHT, ")"),
+  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(), ")"),
   boxSizing: 'border-box',
   margin: 0,
   padding: 0,

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

@@ -18,7 +18,7 @@ import { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
 import { ContextPanelConsumer, WidthContext } from '@atlaskit/editor-common/ui';
 import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorBreakoutPadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorContextPanelWidth, akEditorDefaultLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { N30 } from '@atlaskit/theme/colors';
 import { getChildBreakoutModes } from '../../utils/document';
 import WithEditorActions from '../WithEditorActions';
@@ -31,7 +31,7 @@ var WIDE_MODE = 'wide';
 var absolutePanelStyles = css({
   position: 'absolute',
   right: 0,
-  height: "calc(100% - ".concat(ATLASSIAN_NAVIGATION_HEIGHT, ")")
+  height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(), ")")
 });
 var checkTableExistsInDoc = function checkTableExistsInDoc(editorView) {
   var tableNodeSchema = editorView.state.schema.nodes.table;

package/dist/esm/version-wrapper.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "193.18.0",
+  "version": "193.18.1",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
     "@atlaskit/editor-json-transformer": "^8.12.0",
     "@atlaskit/editor-plugins": "^2.5.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
-    "@atlaskit/editor-shared-styles": "^2.10.0",
+    "@atlaskit/editor-shared-styles": "^2.11.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/media-card": "^77.11.0",
@@ -333,6 +333,9 @@
     },
     "platform.editor.table.allow-table-alignment": {
       "type": "boolean"
+    },
+    "platform.confluence.frontend.narrow-full-page-editor-toolbar": {
+      "type": "boolean"
     }
   },
   "stricter": {