@atlaskit/editor-core 192.4.5 → 192.5.0

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

@@ -7,151 +7,126 @@ import { createEditorContentStyle } from '../../ContentStyles';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const TOTAL_PADDING = akEditorGutterPadding * 2;
-export const fullPageEditorWrapper = css`
-  min-width: 340px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-`;
-const scrollStyles = css`
-  flex-grow: 1;
-  height: 100%;
-  overflow-y: scroll;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  scroll-behavior: smooth;
-  ${scrollbarStyles};
-`;
+export const fullPageEditorWrapper = css({
+  minWidth: '340px',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box'
+});
+const scrollStyles = css({
+  flexGrow: 1,
+  height: '100%',
+  overflowY: 'scroll',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  scrollBehavior: 'smooth'
+}, scrollbarStyles);
 export const ScrollContainer = createEditorContentStyle(scrollStyles);
 ScrollContainer.displayName = 'ScrollContainer';
 
 // transition used to match scrollbar with config panel opening animation
 // only use animation when opening as there is a bug with floating toolbars.
-export const positionedOverEditorStyle = css`
-  padding-right: ${akEditorContextPanelWidth}px;
-  transition: padding 500ms ${akEditorSwoopCubicBezier};
-
-  .fabric-editor-popup-scroll-parent {
-    padding-left: ${akEditorContextPanelWidth}px;
-    transition: padding 500ms ${akEditorSwoopCubicBezier};
+export const positionedOverEditorStyle = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  paddingRight: `${akEditorContextPanelWidth}px`,
+  transition: `padding 500ms ${akEditorSwoopCubicBezier}`,
+  '.fabric-editor-popup-scroll-parent': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    paddingLeft: `${akEditorContextPanelWidth}px`,
+    transition: `padding 500ms ${akEditorSwoopCubicBezier}`
   }
-`;
-export const contentArea = css`
-  display: flex;
-  flex-direction: row;
-  height: calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT});
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  transition: padding 0ms ${akEditorSwoopCubicBezier};
-`;
-export const sidebarArea = css`
-  height: 100%;
-  box-sizing: border-box;
-  align-self: flex-end;
-`;
+});
+export const contentArea = css({
+  display: 'flex',
+  flexDirection: 'row',
+  height: `calc(100% - ${ATLASSIAN_NAVIGATION_HEIGHT})`,
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  transition: `padding 0ms ${akEditorSwoopCubicBezier}`
+});
+export const sidebarArea = css({
+  height: '100%',
+  boxSizing: 'border-box',
+  alignSelf: 'flex-end'
+});
 
 // initially hide until we have a containerWidth and can properly size them,
 // otherwise they can cause the editor width to extend which is non-recoverable
-export const editorContentAreaHideContainer = css`
-  .fabric-editor--full-width-mode {
-    .pm-table-container,
-    .code-block,
-    .extension-container {
-      display: none;
-    }
-    .multiBodiedExtension--container {
-      display: none;
+export const editorContentAreaHideContainer = css({
+  '.fabric-editor--full-width-mode': {
+    '.pm-table-container, .code-block, .extension-container': {
+      display: 'none'
+    },
+    '.multiBodiedExtension--container': {
+      display: 'none'
     }
   }
-`;
+});
 
 /* Prevent horizontal scroll on page in full width mode */
-const editorContentAreaContainerStyle = containerWidth => css`
-  .fabric-editor--full-width-mode {
-    .pm-table-container,
-    .code-block,
-    .extension-container {
-      max-width: ${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px;
-    }
-    .multiBodiedExtension--container {
-      max-width: ${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px;
-    }
-
-    [data-layout-section] {
-      max-width: ${containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2}px;
+const editorContentAreaContainerStyle = containerWidth => css({
+  '.fabric-editor--full-width-mode': {
+    '.pm-table-container, .code-block, .extension-container': {
+      maxWidth: `${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px`
+    },
+    '.multiBodiedExtension--container': {
+      maxWidth: `${containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2}px`
+    },
+    '[data-layout-section]': {
+      maxWidth: `${containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2}px`
     }
   }
-`;
+});
 export const editorContentAreaStyle = ({
   layoutMaxWidth,
   fullWidthMode,
   containerWidth
 }) => [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
-const editorContentAreaWithLayoutWith = layoutMaxWidth => css`
-  max-width: ${layoutMaxWidth + TOTAL_PADDING}px;
-`;
-const editorContentArea = css`
-  line-height: 24px;
-  padding-top: 50px;
-  padding-bottom: 55px;
-  height: calc(
-    100% - 105px
-  ); /* fill the viewport: 100% - (padding top & bottom) */
-  width: 100%;
-  margin: auto;
-  flex-direction: column;
-  flex-grow: 1;
-
-  max-width: ${akEditorFullWidthLayoutWidth + TOTAL_PADDING}px;
-  transition: max-width ${SWOOP_ANIMATION};
-  & .ProseMirror {
-    flex-grow: 1;
-    box-sizing: border-box;
-  }
-
-  & .ProseMirror {
-    & > * {
-      /* pre-emptively clear all direct descendant content, just in case any are adjacent floated content */
-      clear: both;
-    }
-    > p,
-    > ul,
-    > ol:not(${taskListSelector}):not(${decisionListSelector}),
-    > h1,
-    > h2,
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      /* deliberately allow wrapping of text based nodes, just in case any are adjacent floated content */
-      clear: none;
-    }
-
-    > p:last-child {
-      margin-bottom: ${"var(--ds-space-300, 24px)"};
+const editorContentAreaWithLayoutWith = layoutMaxWidth => css({
+  maxWidth: `${layoutMaxWidth + TOTAL_PADDING}px`
+});
+const editorContentArea = css({
+  lineHeight: '24px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  paddingTop: '50px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  paddingBottom: '55px',
+  height: 'calc( 100% - 105px )',
+  width: '100%',
+  margin: 'auto',
+  flexDirection: 'column',
+  flexGrow: 1,
+  maxWidth: `${akEditorFullWidthLayoutWidth + TOTAL_PADDING}px`,
+  transition: `max-width ${SWOOP_ANIMATION}`,
+  '& .ProseMirror': {
+    flexGrow: 1,
+    boxSizing: 'border-box',
+    '& > *': {
+      clear: 'both'
+    },
+    [`> p, > ul, > ol:not(${taskListSelector}):not(${decisionListSelector}), > h1, > h2, > h3, > h4, > h5, > h6`]: {
+      clear: 'none'
+    },
+    '> p:last-child': {
+      marginBottom: "var(--ds-space-300, 24px)"
     }
   }
-
-  ${tableFullPageEditorStyles};
-
-  .fabric-editor--full-width-mode {
-    /* Full Width Mode styles for ignoring breakout sizes */
-    .fabric-editor-breakout-mark,
-    .extension-container.block,
-    .pm-table-container {
-      width: 100% !important;
-    }
-
-    .fabric-editor-breakout-mark {
-      margin-left: unset !important;
-      transform: none !important;
+}, tableFullPageEditorStyles, {
+  '.fabric-editor--full-width-mode': {
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      width: '100% !important'
+    },
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: 'unset !important',
+      transform: 'none !important'
     }
   }
-`;
-export const editorContentGutterStyle = css`
-  box-sizing: border-box;
-  padding: 0 ${akEditorGutterPadding}px;
-`;
+});
+export const editorContentGutterStyle = css({
+  boxSizing: 'border-box',
+  padding: `0 ${"var(--ds-space-400, 32px)"}`
+});

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

@@ -14,7 +14,7 @@ import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles'
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
 import { tableStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { codeBlockStyles } from './code-block';
@@ -38,7 +38,7 @@ const ruleStyles = () => css`
     hr {
       cursor: pointer;
       padding: ${"var(--ds-space-050, 4px)"} 0;
-      margin: calc(${akEditorLineHeight}em - 4px) 0;
+      margin: ${"var(--ds-space-300, 24px)"} 0;
       background-clip: content-box;
 
       &.${akEditorSelectedNodeClassName} {

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

@@ -10,7 +10,7 @@ export const layoutStyles = css`
     ${columnLayoutSharedStyle} [data-layout-section] {
       // TODO: Migrate away from gridSize
       // Recommendation: Replace directly with 7px
-      margin: ${8 - 1}px -${akLayoutGutterOffset}px 0;
+      margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset}px 0;
       transition: border-color 0.3s ${akEditorSwoopCubicBezier};
       cursor: pointer;
 

package/dist/es2019/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -9,16 +9,16 @@ import { useElementWidth } from './hooks';
 import { Toolbar } from './Toolbar';
 import { toolbarSizeToWidth, widthToToolbarSize } from './toolbar-size';
 import { ToolbarSize } from './types';
-const toolbar = css`
-  width: 100%;
-  position: relative;
-  @media (max-width: ${akEditorMobileMaxWidth}px) {
-    grid-column: 1 / 2;
-    grid-row: 2;
-    width: calc(100% - 30px);
-    margin: 0 15px;
+const toolbar = css({
+  width: '100%',
+  position: 'relative',
+  [`@media (max-width: ${akEditorMobileMaxWidth}px)`]: {
+    gridColumn: '1 / 2',
+    gridRow: 2,
+    width: 'calc(100% - 30px)',
+    margin: `0 ${"var(--ds-space-200, 16px)"}`
   }
-`;
+});
 export const ToolbarWithSizeDetector = props => {
   const ref = /*#__PURE__*/React.createRef();
   const [width, setWidth] = React.useState(undefined);

package/dist/es2019/ui/ToolbarFeedback/styles.js

@@ -2,53 +2,53 @@ import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N400, N60A, P400 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
-export const buttonContent = css`
-  display: flex;
-  height: 24px;
-  line-height: 24px;
-  min-width: 70px;
-`;
-export const wrapper = css`
-  display: flex;
-  margin-right: 0;
-`;
-export const confirmationPopup = css`
-  background: ${"var(--ds-surface-overlay, #fff)"};
-  border-radius: ${borderRadius()}px;
-  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  overflow: auto;
-  max-height: none;
-  height: 410px;
-  width: 280px;
-`;
-export const confirmationText = css`
-  font-size: ${relativeFontSizeToBase16(14)};
-  word-spacing: 4px;
-  line-height: 22px;
-  color: ${`var(--ds-text-subtle, ${N400})`};
-  margin-top: 30px;
-  padding: ${"var(--ds-space-250, 20px)"};
-  & > div {
-    width: 240px;
+export const buttonContent = css({
+  display: 'flex',
+  height: '24px',
+  lineHeight: '24px',
+  minWidth: '70px'
+});
+export const wrapper = css({
+  display: 'flex',
+  marginRight: 0
+});
+export const confirmationPopup = css({
+  background: "var(--ds-surface-overlay, #fff)",
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`,
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box',
+  overflow: 'auto',
+  maxHeight: 'none',
+  height: '410px',
+  width: '280px'
+});
+export const confirmationText = css({
+  fontSize: relativeFontSizeToBase16(14),
+  wordSpacing: '4px',
+  lineHeight: '22px',
+  color: `var(--ds-text-subtle, ${N400})`,
+  marginTop: "var(--ds-space-400, 32px)",
+  padding: "var(--ds-space-250, 20px)",
+  '& > div': {
+    width: '240px'
+  },
+  '& > div:first-of-type': {
+    marginBottom: "var(--ds-space-150, 12px)"
+  },
+  '& > div:nth-of-type(2)': {
+    marginBottom: "var(--ds-space-250, 20px)"
   }
-  & > div:first-of-type {
-    margin-bottom: ${"var(--ds-space-150, 12px)"};
-  }
-  & > div:nth-of-type(2) {
-    margin-bottom: ${"var(--ds-space-250, 20px)"};
-  }
-`;
-export const confirmationHeader = css`
-  background-color: ${`var(--ds-background-discovery-bold, ${P400})`};
-  height: 100px;
-  width: 100%;
-  display: inline-block;
-`;
-export const confirmationImg = css`
-  width: 100px;
-  display: block;
-  margin: 25px auto 0 auto;
-`;
+});
+export const confirmationHeader = css({
+  backgroundColor: `var(--ds-background-discovery-bold, ${P400})`,
+  height: '100px',
+  width: '100%',
+  display: 'inline-block'
+});
+export const confirmationImg = css({
+  width: '100px',
+  display: 'block',
+  margin: `${"var(--ds-space-250, 24px)"} auto 0 auto`
+});

package/dist/es2019/version-wrapper.js

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

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

@@ -32,12 +32,12 @@ import { createEditorContentStyle } from '../../ContentStyles';
 import PluginSlot from '../../PluginSlot';
 import Toolbar from '../../Toolbar';
 import WithFlash from '../../WithFlash';
-import { MainToolbar, mainToolbarCustomComponentsSlotStyle, TableControlsPadding } from './Toolbar';
+import { MainToolbar, mainToolbarCustomComponentsSlotStyle } from './Toolbar';
 var CommentEditorMargin = 14;
 var commentEditorStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: ", " ", "\n      ", ";\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Paragraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n\n  height: auto;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-background-input, white)", "var(--ds-border, ".concat(N40, ")"), borderRadius());
-var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: ", ";\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: ", " ", "px\n      ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), getBooleanFF('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden', "var(--ds-space-150, 12px)", CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles));
+var ContentArea = createEditorContentStyle(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: ", ";\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for table controls. Otherwise margin collapse and controls are misplaced. **/\n  .ProseMirror {\n    margin: ", ";\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", ";\n\n  ", ";\n"])), getBooleanFF('platform.editor.table-sticky-scrollbar') ? 'clip' : 'hidden', "var(--ds-space-150, 12px)", CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, "var(--ds-space-250, 20px)", tableCommentEditorStyles));
 ContentArea.displayName = 'ContentArea';
-var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: ", " 1px;\n"])), "var(--ds-space-150, 12px)");
+var secondaryToolbarStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-025, 2px)");
 var Editor = /*#__PURE__*/function (_React$Component) {
   _inherits(Editor, _React$Component);
   var _super = _createSuper(Editor);

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

@@ -8,7 +8,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React, { useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
-export var TableControlsPadding = 20;
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 var mainToolbarWrapperStyle = function mainToolbarWrapperStyle() {
   var isTwoLineEditorToolbar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

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

@@ -1,5 +1,5 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _ProseMirror;
 import { css } from '@emotion/react';
 import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
 import { tableFullPageEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
@@ -9,24 +9,80 @@ import { createEditorContentStyle } from '../../ContentStyles';
 import { scrollbarStyles } from '../../styles';
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
 var TOTAL_PADDING = akEditorGutterPadding * 2;
-export var fullPageEditorWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-var scrollStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), scrollbarStyles);
+export var fullPageEditorWrapper = css({
+  minWidth: '340px',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  boxSizing: 'border-box'
+});
+var scrollStyles = css({
+  flexGrow: 1,
+  height: '100%',
+  overflowY: 'scroll',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  scrollBehavior: 'smooth'
+}, scrollbarStyles);
 export var ScrollContainer = createEditorContentStyle(scrollStyles);
 ScrollContainer.displayName = 'ScrollContainer';
 
 // transition used to match scrollbar with config panel opening animation
 // only use animation when opening as there is a bug with floating toolbars.
-export var positionedOverEditorStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-right: ", "px;\n  transition: padding 500ms ", ";\n\n  .fabric-editor-popup-scroll-parent {\n    padding-left: ", "px;\n    transition: padding 500ms ", ";\n  }\n"])), akEditorContextPanelWidth, akEditorSwoopCubicBezier, akEditorContextPanelWidth, akEditorSwoopCubicBezier);
-export var contentArea = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: calc(100% - ", ");\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  transition: padding 0ms ", ";\n"])), ATLASSIAN_NAVIGATION_HEIGHT, akEditorSwoopCubicBezier);
-export var sidebarArea = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"])));
+export var positionedOverEditorStyle = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  paddingRight: "".concat(akEditorContextPanelWidth, "px"),
+  transition: "padding 500ms ".concat(akEditorSwoopCubicBezier),
+  '.fabric-editor-popup-scroll-parent': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    paddingLeft: "".concat(akEditorContextPanelWidth, "px"),
+    transition: "padding 500ms ".concat(akEditorSwoopCubicBezier)
+  }
+});
+export var contentArea = css({
+  display: 'flex',
+  flexDirection: 'row',
+  height: "calc(100% - ".concat(ATLASSIAN_NAVIGATION_HEIGHT, ")"),
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
+});
+export var sidebarArea = css({
+  height: '100%',
+  boxSizing: 'border-box',
+  alignSelf: 'flex-end'
+});
 
 // initially hide until we have a containerWidth and can properly size them,
 // otherwise they can cause the editor width to extend which is non-recoverable
-export var editorContentAreaHideContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      display: none;\n    }\n    .multiBodiedExtension--container {\n      display: none;\n    }\n  }\n"])));
+export var editorContentAreaHideContainer = css({
+  '.fabric-editor--full-width-mode': {
+    '.pm-table-container, .code-block, .extension-container': {
+      display: 'none'
+    },
+    '.multiBodiedExtension--container': {
+      display: 'none'
+    }
+  }
+});
 
 /* Prevent horizontal scroll on page in full width mode */
 var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      max-width: ", "px;\n    }\n    .multiBodiedExtension--container {\n      max-width: ", "px;\n    }\n\n    [data-layout-section] {\n      max-width: ", "px;\n    }\n  }\n"])), containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2, containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2, containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2);
+  return css({
+    '.fabric-editor--full-width-mode': {
+      '.pm-table-container, .code-block, .extension-container': {
+        maxWidth: "".concat(containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2, "px")
+      },
+      '.multiBodiedExtension--container': {
+        maxWidth: "".concat(containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2, "px")
+      },
+      '[data-layout-section]': {
+        maxWidth: "".concat(containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2, "px")
+      }
+    }
+  });
 };
 export var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
   var layoutMaxWidth = _ref.layoutMaxWidth,
@@ -35,7 +91,47 @@ export var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
   return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
 };
 var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
-  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), layoutMaxWidth + TOTAL_PADDING);
+  return css({
+    maxWidth: "".concat(layoutMaxWidth + TOTAL_PADDING, "px")
+  });
 };
-var editorContentArea = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  padding-top: 50px;\n  padding-bottom: 55px;\n  height: calc(\n    100% - 105px\n  ); /* fill the viewport: 100% - (padding top & bottom) */\n  width: 100%;\n  margin: auto;\n  flex-direction: column;\n  flex-grow: 1;\n\n  max-width: ", "px;\n  transition: max-width ", ";\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  & .ProseMirror {\n    & > * {\n      /* pre-emptively clear all direct descendant content, just in case any are adjacent floated content */\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol:not(", "):not(", "),\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      /* deliberately allow wrapping of text based nodes, just in case any are adjacent floated content */\n      clear: none;\n    }\n\n    > p:last-child {\n      margin-bottom: ", ";\n    }\n  }\n\n  ", ";\n\n  .fabric-editor--full-width-mode {\n    /* Full Width Mode styles for ignoring breakout sizes */\n    .fabric-editor-breakout-mark,\n    .extension-container.block,\n    .pm-table-container {\n      width: 100% !important;\n    }\n\n    .fabric-editor-breakout-mark {\n      margin-left: unset !important;\n      transform: none !important;\n    }\n  }\n"])), akEditorFullWidthLayoutWidth + TOTAL_PADDING, SWOOP_ANIMATION, taskListSelector, decisionListSelector, "var(--ds-space-300, 24px)", tableFullPageEditorStyles);
-export var editorContentGutterStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  padding: 0 ", "px;\n"])), akEditorGutterPadding);
+var editorContentArea = css({
+  lineHeight: '24px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  paddingTop: '50px',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  paddingBottom: '55px',
+  height: 'calc( 100% - 105px )',
+  width: '100%',
+  margin: 'auto',
+  flexDirection: 'column',
+  flexGrow: 1,
+  maxWidth: "".concat(akEditorFullWidthLayoutWidth + TOTAL_PADDING, "px"),
+  transition: "max-width ".concat(SWOOP_ANIMATION),
+  '& .ProseMirror': (_ProseMirror = {
+    flexGrow: 1,
+    boxSizing: 'border-box',
+    '& > *': {
+      clear: 'both'
+    }
+  }, _defineProperty(_ProseMirror, "> p, > ul, > ol:not(".concat(taskListSelector, "):not(").concat(decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
+    clear: 'none'
+  }), _defineProperty(_ProseMirror, '> p:last-child', {
+    marginBottom: "var(--ds-space-300, 24px)"
+  }), _ProseMirror)
+}, tableFullPageEditorStyles, {
+  '.fabric-editor--full-width-mode': {
+    '.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
+      width: '100% !important'
+    },
+    '.fabric-editor-breakout-mark': {
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      marginLeft: 'unset !important',
+      transform: 'none !important'
+    }
+  }
+});
+export var editorContentGutterStyle = css({
+  boxSizing: 'border-box',
+  padding: "0 ".concat("var(--ds-space-400, 32px)")
+});

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

@@ -16,7 +16,7 @@ import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles'
 import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
 import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
 import { tableStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
-import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { N200, N30A, N500 } from '@atlaskit/theme/colors';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { codeBlockStyles } from './code-block';
@@ -30,7 +30,7 @@ import { statusStyles } from './status';
 import { taskDecisionStyles } from './tasks-and-decisions';
 export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n"])), linkSharedStyle);
 var ruleStyles = function ruleStyles() {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: ", " 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(), "var(--ds-space-050, 4px)", akEditorLineHeight, akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: ", " 0;\n      margin: ", " 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), ruleSharedStyles(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
 };
 var mentionsStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(N500, ")"), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(N30A, ")"), "var(--ds-text-subtle, ".concat(N500, ")"));
 var listsStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    li {\n      position: relative;\n\n      > p:not(:first-child) {\n        margin: ", " 0 0 0;\n      }\n\n      // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n      // The following rule resets the first p tag back to its original margin\n      // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n      > style:first-child + p {\n        margin-top: ", ";\n      }\n    }\n\n    &:not([data-node-type='decisionList']) > li,\n    // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n    &:not(.", ") > li {\n      ", "\n    }\n  }\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');