@atlaskit/editor-common 67.0.0 → 68.0.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-common
 
+## 68.0.1
+
+### Patch Changes
+
+- [`559b6610a0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/559b6610a0e) - Modified some CSS rules to ensure Emotion is compatible with server side rendering.
+- Updated dependencies
+
+## 68.0.0
+
+### Major Changes
+
+- [`b7b72b61dca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7b72b61dca) - ED-10337 Refactor overflow shadows using intersection observer to improve renderer performance on initial load and when scrolling contents of the tables and extensions horizontally.
+  This is affecting vertical shadows inside tables and extensions in renderer.
+  On the OverflowShadowOptions interface of the shadows component exported from editor-common we are also removing scrollableSelector option which is no longer used.
+
+### Minor Changes
+
+- [`8949731bc6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8949731bc6a) - ED-14608: Migrate adf-utils imports in atlassian-frontend to new child entry points to improve treeshaking
+
+### Patch Changes
+
+- [`789b211a5e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/789b211a5e5) - Removed the use of :first-child and nth-child selectors in CSS
+- [`1e5c33f7598`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e5c33f7598) - [ux] ED-14198 fix safari selection for layout
+- [`d8b3bc73330`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8b3bc73330) - [ED-14507] Deprecate the allowDynamicTextSizing editor prop and remove all code related to it. This feature has been unused since 2020.
+- Updated dependencies
+
+## 67.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 67.0.0
 
 ### Minor Changes

package/dist/cjs/styles/shared/block-marks.js

@@ -13,5 +13,5 @@ var _react = require("@emotion/react");
 
 var _templateObject;
 
-var blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+var blockMarksSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
 exports.blockMarksSharedStyles = blockMarksSharedStyles;

package/dist/cjs/styles/shared/column-layout.js

@@ -15,5 +15,5 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var columnLayoutSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-layout-section] {\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), _editorSharedStyles.gridMediumMaxWidth);
+var columnLayoutSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [data-layout-section] {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), _editorSharedStyles.gridMediumMaxWidth);
 exports.columnLayoutSharedStyle = columnLayoutSharedStyle;

package/dist/cjs/styles/shared/shadow.js

@@ -17,6 +17,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _OverflowShadow = require("../../ui/OverflowShadow");
 
+var _shadowObserver = require("../../ui/OverflowShadow/shadowObserver");
+
 var _templateObject;
 
 var shadowWidth = 8;
@@ -34,5 +36,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _colors.N40A, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _colors.N40A, shadowWidth);
+var shadowSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _editorSharedStyles.akEditorShadowZIndex, shadowWidth, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _OverflowShadow.shadowClassNames.LEFT_SHADOW, _colors.N40A, _OverflowShadow.shadowClassNames.RIGHT_SHADOW, _colors.N40A, shadowWidth, _shadowObserver.shadowObserverClassNames.SENTINEL_LEFT, _shadowObserver.shadowObserverClassNames.SENTINEL_RIGHT);
 exports.shadowSharedStyle = shadowSharedStyle;

package/dist/cjs/styles/shared/table.js

@@ -59,7 +59,7 @@ var TableSharedCssClassName = {
 exports.TableSharedCssClassName = TableSharedCssClassName;
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-child > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-of-type + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-of-type + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
     light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
     dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
   })(props), (0, _tokens.token)('color.background.neutral.subtle', 'white'), tableCellMinWidth, (0, _components.themed)({

package/dist/cjs/styles/shared/task-decision.js

@@ -19,5 +19,5 @@ var TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'
 };
 exports.TaskDecisionSharedCssClassName = TaskDecisionSharedCssClassName;
-var tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  div[data-task-list-local-id]:first-child {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
+var tasksAndDecisionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  // If task list is first in the document then set margin top to zero.\n  div[data-task-list-local-id]:first-child,\n  style:first-child + div[data-task-list-local-id] {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
 exports.tasksAndDecisionsStyles = tasksAndDecisionsStyles;

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

@@ -29,19 +29,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function mapBreakpointToFontSize(breakpoint) {
-  switch (breakpoint) {
-    case 'M':
-      return (0, _constants.fontSize)() + 2;
-
-    case 'L':
-      return (0, _constants.fontSize)() + 4;
-
-    default:
-      return (0, _constants.fontSize)();
-  }
-}
-
 function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
     case 'M':
@@ -56,9 +43,7 @@ function mapBreakpointToLayoutMaxWidth(breakpoint) {
 }
 
 function BaseThemeWrapper(_ref) {
-  var breakpoint = _ref.breakpoint,
-      dynamicTextSizing = _ref.dynamicTextSizing,
-      baseFontSize = _ref.baseFontSize,
+  var baseFontSize = _ref.baseFontSize,
       children = _ref.children;
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
@@ -66,12 +51,12 @@ function BaseThemeWrapper(_ref) {
 
   var memoizedTheme = (0, _react.useMemo)(function () {
     return (0, _defineProperty2.default)({
-      baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
-      layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : _editorSharedStyles.akEditorDefaultLayoutWidth
+      baseFontSize: baseFontSize || (0, _constants.fontSize)(),
+      layoutMaxWidth: _editorSharedStyles.akEditorDefaultLayoutWidth
     }, _constants.CHANNEL, {
       mode: mode
     });
-  }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
+  }, [baseFontSize, mode]);
   return /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
     theme: memoizedTheme
   }, children);
@@ -79,12 +64,10 @@ function BaseThemeWrapper(_ref) {
 
 function BaseTheme(_ref3) {
   var children = _ref3.children,
-      dynamicTextSizing = _ref3.dynamicTextSizing,
       baseFontSize = _ref3.baseFontSize;
   return /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthConsumer, null, function (_ref4) {
     var breakpoint = _ref4.breakpoint;
     return /*#__PURE__*/_react.default.createElement(BaseThemeWrapper, {
-      dynamicTextSizing: dynamicTextSizing,
       breakpoint: breakpoint,
       baseFontSize: baseFontSize
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children));

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

@@ -118,7 +118,7 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4152\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > &:first-child {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4152\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
       light: (0, _tokens.token)('color.border', colors.N50A),
       dark: (0, _tokens.token)('color.border', colors.DN50)
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));

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

@@ -26,7 +26,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _browser = _interopRequireDefault(require("../../utils/browser"));
+var _shadowObserver = require("./shadowObserver");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -37,7 +37,6 @@ var shadowClassNames = {
   LEFT_SHADOW: 'left-shadow'
 };
 exports.shadowClassNames = shadowClassNames;
-var isIE11 = _browser.default.ie_version === 11;
 
 function overflowShadow(Component, options) {
   return /*#__PURE__*/function (_React$Component) {
@@ -55,18 +54,23 @@ function overflowShadow(Component, options) {
       }
 
       _this = _super.call.apply(_super, [this].concat(args));
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "overflowContainerWidth", 0);
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
         showLeftShadow: false,
         showRightShadow: false
       });
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleScroll", function (event) {
-        if (!_this.overflowContainer || event.target !== _this.overflowContainer) {
+        if (!_this.overflowContainer || event.target !== _this.overflowContainer || options.useShadowObserver) {
           return;
         }
 
         _this.updateShadows();
       });
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateShadows", function () {
+        if (options.useShadowObserver) {
+          return;
+        }
+
         _this.setState(function (prevState) {
           if (!_this.overflowContainer) {
             return;
@@ -129,15 +133,15 @@ function overflowShadow(Component, options) {
           _this.overflowContainer = container;
         }
 
-        if (options.scrollableSelector) {
-          _this.scrollable = container.querySelectorAll(options.scrollableSelector);
+        if (options.useShadowObserver) {
+          _this.initShadowObserver();
+
+          return;
         }
 
         _this.updateShadows();
 
-        if (!isIE11) {
-          _this.overflowContainer.addEventListener('scroll', _this.handleScroll);
-        }
+        _this.overflowContainer.addEventListener('scroll', _this.handleScroll);
       });
       return _this;
     }
@@ -145,7 +149,11 @@ function overflowShadow(Component, options) {
     (0, _createClass2.default)(OverflowShadow, [{
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
-        if (this.overflowContainer && !isIE11) {
+        if (options.useShadowObserver) {
+          return this.shadowObserver && this.shadowObserver.dispose();
+        }
+
+        if (this.overflowContainer) {
           this.overflowContainer.removeEventListener('scroll', this.handleScroll);
         }
 
@@ -154,7 +162,37 @@ function overflowShadow(Component, options) {
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate() {
-        this.updateShadows();
+        if (!options.useShadowObserver) {
+          this.updateShadows();
+        }
+      }
+    }, {
+      key: "initShadowObserver",
+      value: function initShadowObserver() {
+        var _this2 = this;
+
+        if (this.shadowObserver || !this.overflowContainer) {
+          return;
+        }
+
+        this.shadowObserver = new _shadowObserver.ShadowObserver({
+          scrollContainer: this.overflowContainer,
+          onUpdateShadows: function onUpdateShadows(shadowStates) {
+            _this2.setState(function (prevState) {
+              var showLeftShadow = shadowStates.showLeftShadow,
+                  showRightShadow = shadowStates.showRightShadow;
+
+              if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== prevState.showRightShadow) {
+                return {
+                  showLeftShadow: showLeftShadow,
+                  showRightShadow: showRightShadow
+                };
+              }
+
+              return null;
+            });
+          }
+        });
       }
     }, {
       key: "render",
@@ -162,7 +200,7 @@ function overflowShadow(Component, options) {
         var _this$state = this.state,
             showLeftShadow = _this$state.showLeftShadow,
             showRightShadow = _this$state.showRightShadow;
-        var classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW].filter(Boolean).join(' ');
+        var classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && _shadowObserver.shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
         return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
           handleRef: this.handleContainer,
           shadowClassNames: classNames

package/dist/cjs/ui/OverflowShadow/shadowObserver.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shadowObserverClassNames = exports.ShadowObserver = exports.ShadowKeys = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var ShadowKeys;
+exports.ShadowKeys = ShadowKeys;
+
+(function (ShadowKeys) {
+  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
+  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
+})(ShadowKeys || (exports.ShadowKeys = ShadowKeys = {}));
+
+var shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+exports.shadowObserverClassNames = shadowObserverClassNames;
+
+var requestIdleCallback = function requestIdleCallback(fn) {
+  return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
+};
+
+var cancelIdleCallback = function cancelIdleCallback(id) {
+  return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
+};
+
+var ShadowObserver = /*#__PURE__*/function () {
+  function ShadowObserver(_ref) {
+    var _defineProperty2,
+        _this = this;
+
+    var scrollContainer = _ref.scrollContainer,
+        onUpdateShadows = _ref.onUpdateShadows;
+    (0, _classCallCheck2.default)(this, ShadowObserver);
+    (0, _defineProperty3.default)(this, "sentinels", {});
+    (0, _defineProperty3.default)(this, "shadowStates", (_defineProperty2 = {}, (0, _defineProperty3.default)(_defineProperty2, ShadowKeys.SHOW_LEFT_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, ShadowKeys.SHOW_RIGHT_SHADOW, false), _defineProperty2));
+    (0, _defineProperty3.default)(this, "init", function () {
+      if (!_this.scrollContainer || _this.intersectionObserver) {
+        return;
+      }
+
+      _this.sentinels.right = document.createElement('div');
+
+      _this.sentinels.right.classList.add(shadowObserverClassNames.SENTINEL_RIGHT);
+
+      _this.scrollContainer.appendChild(_this.sentinels.right);
+
+      _this.sentinels.left = document.createElement('div');
+
+      _this.sentinels.left.classList.add(shadowObserverClassNames.SENTINEL_LEFT);
+
+      _this.scrollContainer.prepend(_this.sentinels.left);
+
+      _this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+        entries.forEach(_this.onIntersect);
+      }, {
+        root: _this.scrollContainer
+      });
+
+      _this.intersectionObserver.observe(_this.sentinels.left);
+
+      _this.intersectionObserver.observe(_this.sentinels.right);
+    });
+    (0, _defineProperty3.default)(this, "onIntersect", function (entry) {
+      _this.requestCallbackId = requestIdleCallback(function () {
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_LEFT)) {
+          _this.shadowStates[ShadowKeys.SHOW_LEFT_SHADOW] = !entry.isIntersecting;
+        }
+
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_RIGHT)) {
+          _this.shadowStates[ShadowKeys.SHOW_RIGHT_SHADOW] = !entry.isIntersecting;
+        }
+
+        _this.onUpdateShadows(_this.shadowStates);
+      });
+    });
+    this.scrollContainer = scrollContainer;
+    this.onUpdateShadows = onUpdateShadows;
+    this.init();
+  }
+
+  (0, _createClass2.default)(ShadowObserver, [{
+    key: "dispose",
+    value: function dispose() {
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+        this.intersectionObserver = undefined;
+        this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
+      }
+    }
+  }]);
+  return ShadowObserver;
+}();
+
+exports.ShadowObserver = ShadowObserver;

package/dist/cjs/ui/index.js

@@ -85,6 +85,12 @@ Object.defineProperty(exports, "REACT_INTL_ERROR_MESSAGE", {
     return _IntlErrorBoundary.REACT_INTL_ERROR_MESSAGE;
   }
 });
+Object.defineProperty(exports, "ShadowObserver", {
+  enumerable: true,
+  get: function get() {
+    return _shadowObserver.ShadowObserver;
+  }
+});
 Object.defineProperty(exports, "UnsupportedBlock", {
   enumerable: true,
   get: function get() {
@@ -205,6 +211,12 @@ Object.defineProperty(exports, "shadowClassNames", {
     return _OverflowShadow.shadowClassNames;
   }
 });
+Object.defineProperty(exports, "shadowObserverClassNames", {
+  enumerable: true,
+  get: function get() {
+    return _shadowObserver.shadowObserverClassNames;
+  }
+});
 Object.defineProperty(exports, "sharedExpandStyles", {
   enumerable: true,
   get: function get() {
@@ -260,6 +272,8 @@ var _WidthProvider = require("./WidthProvider");
 
 var _OverflowShadow = _interopRequireWildcard(require("./OverflowShadow"));
 
+var _shadowObserver = require("./OverflowShadow/shadowObserver");
+
 var _WithCreateAnalyticsEvent = require("./WithCreateAnalyticsEvent");
 
 var _Expand = require("./Expand");

package/dist/cjs/utils/breakout.js

@@ -38,8 +38,8 @@ var breakoutConsts = {
         return '100%';
     }
   },
-  calcLineLength: function calcLineLength(containerWidth, allowDynamicTextSizing) {
-    return allowDynamicTextSizing && containerWidth ? breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth)) : breakoutConsts.defaultLayoutWidth;
+  calcLineLength: function calcLineLength() {
+    return breakoutConsts.defaultLayoutWidth;
   },
   calcWideWidth: function calcWideWidth() {
     var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;

package/dist/cjs/utils/unsupportedContent/get-unsupported-content-level-data.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getUnsupportedContentLevelData = exports.UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS = exports.UNSUPPORTED_CONTENT_LEVEL_SEVERITY = void 0;
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _traverse = require("@atlaskit/adf-utils/traverse");
 
 var UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
 exports.UNSUPPORTED_CONTENT_LEVEL_SEVERITY = UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
@@ -32,7 +32,7 @@ var buildUnsupportedContentLevelThresholds = function buildUnsupportedContentLev
 var countSupportedUnsupportedNodes = function countSupportedUnsupportedNodes(validDocument) {
   var unsupportedNodes = 0;
   var supportedNodes = 0;
-  (0, _adfUtils.traverse)(validDocument, {
+  (0, _traverse.traverse)(validDocument, {
     any: function any(node) {
       var unsupportedNodeTypes = ['unsupportedInline', 'unsupportedBlock', 'confluenceUnsupportedInline', 'confluenceUnsupportedBlock'];
 
@@ -45,7 +45,7 @@ var countSupportedUnsupportedNodes = function countSupportedUnsupportedNodes(val
           // start an independent traversal for the purpose of counting
           // unsupported content nodes (with nested children contributing towards
           // that count)
-          (0, _adfUtils.traverse)(originalNode, {
+          (0, _traverse.traverse)(originalNode, {
             any: function any() {
               unsupportedNodes++;
             }

package/dist/cjs/utils/validate-using-spec.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.validationErrorHandler = exports.validateADFEntity = exports.UNSUPPORTED_NODE_ATTRIBUTE = void 0;
 exports.wrapWithUnsupported = wrapWithUnsupported;
 
-var _adfUtils = require("@atlaskit/adf-utils");
+var _validator = require("@atlaskit/adf-utils/validator");
 
 var _analytics = require("./analytics");
 
@@ -126,7 +126,7 @@ function trackValidationError(dispatchAnalyticsEvent, error, entity) {
 var validateADFEntity = function validateADFEntity(schema, node, dispatchAnalyticsEvent) {
   var nodes = Object.keys(schema.nodes);
   var marks = Object.keys(schema.marks);
-  var validate = (0, _adfUtils.validator)(nodes, marks, {
+  var validate = (0, _validator.validator)(nodes, marks, {
     allowPrivateAttributes: true
   });
   var emptyDoc = {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "67.0.0",
+	"version": "68.0.1",
 	"sideEffects": false
 }

package/dist/es2019/styles/shared/block-marks.js

@@ -6,7 +6,7 @@ export const blockMarksSharedStyles = css`
    */
   *:not(.fabric-editor-block-mark) >,
   /* For nested block marks */
-  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {
+  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type {
     p,
     h1,
     h2,
@@ -15,7 +15,8 @@ export const blockMarksSharedStyles = css`
     h5,
     h6,
     .heading-wrapper {
-      &:first-child {
+      :first-child:not(style),
+      style:first-child + * {
         margin-top: 0;
       }
     }

package/dist/es2019/styles/shared/column-layout.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 const columnLayoutSharedStyle = css`
   [data-layout-section] {
+    position: relative;
     display: flex;
     flex-direction: row;
     & > * {

package/dist/es2019/styles/shared/shadow.js

@@ -4,6 +4,7 @@ import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { shadowClassNames } from '../../ui/OverflowShadow';
+import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 const shadowWidth = 8;
 /**
  * TODO: This is close to working and removes a tone of JS from OverflowShadow component
@@ -56,5 +57,16 @@ const shadowSharedStyle = css`
     top: 0px;
     display: block;
   }
+  & .${shadowObserverClassNames.SENTINEL_LEFT} {
+    height: 100%;
+    width: 0px;
+    min-width: 0px;
+  }
+
+  & .${shadowObserverClassNames.SENTINEL_RIGHT} {
+    height: 100%;
+    width: 0px;
+    min-width: 0px;
+  }
 `;
 export { shadowSharedStyle };

package/dist/es2019/styles/shared/table.js

@@ -40,7 +40,7 @@ const tableSharedStyle = props => css`
     /**
      * Fix block top alignment inside table cells.
      */
-    .decisionItemView-content-wrap:first-child > div {
+    .decisionItemView-content-wrap:first-of-type > div {
       margin-top: 0;
     }
   }
@@ -109,15 +109,16 @@ const tableSharedStyle = props => css`
   dark: getTableCellBackgroundDarkModeColors
 })(props)};
 
-        > *:first-child {
+        > :first-child:not(style),
+        > style:first-child + * {
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor.-right:first-child + * {
+        > .ProseMirror-gapcursor.-right:first-of-type + * {
           margin-top: 0;
         }
 
-        > .ProseMirror-gapcursor:first-child + span + * {
+        > .ProseMirror-gapcursor:first-of-type + span + * {
           margin-top: 0;
         }
 

package/dist/es2019/styles/shared/task-decision.js

@@ -20,7 +20,9 @@ export const tasksAndDecisionsStyles = css`
     margin: 12px 0 0 0;
   }
 
-  div[data-task-list-local-id]:first-child {
+  // If task list is first in the document then set margin top to zero.
+  div[data-task-list-local-id]:first-child,
+  style:first-child + div[data-task-list-local-id] {
     margin-top: 0;
   }