@atlaskit/editor-common 70.1.3 → 70.2.0

package/dist/esm/react-node-view/index.js

@@ -6,11 +6,8 @@ import React from 'react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { createDispatch } from '../event-dispatcher';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
-import { analyticsEventKey } from '../utils/analytics'; //import {
-//  getPerformanceOptions,
-//  startMeasureReactNodeViewRendered,
-//  stopMeasureReactNodeViewRendered,
-//} from './get-performance-options';
+import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
+import { analyticsEventKey } from '../utils/analytics';
 
 var ReactNodeView = /*#__PURE__*/function () {
   function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
@@ -82,26 +79,26 @@ var ReactNodeView = /*#__PURE__*/function () {
       // difference between them and it kills the nodeView
 
 
-      this.domRef.classList.add("".concat(this.node.type.name, "View-content-wrap")); // TODO: ED-15580
-      //const {
-      //  samplingRate,
-      //  slowThreshold,
-      //  trackingEnabled,
-      //} = getPerformanceOptions(this.view);
-      //trackingEnabled &&
-      //  startMeasureReactNodeViewRendered({ nodeTypeName: this.node.type.name });
+      this.domRef.classList.add("".concat(this.node.type.name, "View-content-wrap"));
 
+      var _getPerformanceOption = getPerformanceOptions(this.view),
+          samplingRate = _getPerformanceOption.samplingRate,
+          slowThreshold = _getPerformanceOption.slowThreshold,
+          trackingEnabled = _getPerformanceOption.trackingEnabled;
+
+      trackingEnabled && startMeasureReactNodeViewRendered({
+        nodeTypeName: this.node.type.name
+      });
       this.renderReactComponent(function () {
         return _this2.render(_this2.reactComponentProps, _this2.handleRef);
-      }); //trackingEnabled &&
-      //  stopMeasureReactNodeViewRendered({
-      //    nodeTypeName: this.node.type.name,
-      //    dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-      //    editorState: this.view.state,
-      //    samplingRate,
-      //    slowThreshold,
-      //  });
-
+      });
+      trackingEnabled && stopMeasureReactNodeViewRendered({
+        nodeTypeName: this.node.type.name,
+        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+        editorState: this.view.state,
+        samplingRate: samplingRate,
+        slowThreshold: slowThreshold
+      });
       return this;
     }
   }, {

package/dist/esm/styles/index.js

@@ -9,7 +9,7 @@ export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';
 export { linkSharedStyle } from './shared/link';
-export { listsSharedStyles } from './shared/lists';
+export { listsSharedStyles, listPaddingLeftMarkerSpace } from './shared/lists';
 export { indentationSharedStyles } from './shared/indentation';
 export { blockMarksSharedStyles } from './shared/block-marks';
 export { codeMarkSharedStyles } from './shared/code-mark';
@@ -18,6 +18,6 @@ export { dateSharedStyle, DateSharedCssClassName } from './shared/date';
 export { tasksAndDecisionsStyles, TaskDecisionSharedCssClassName } from './shared/task-decision';
 export { StatusSharedCssClassName } from './shared/status';
 export { smartCardSharedStyles, SmartCardSharedCssClassName } from './shared/smart-card';
-export { CodeBlockSharedCssClassName, codeBlockSharedStyles } from './shared/code-block';
+export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
 export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';

package/dist/esm/styles/shared/code-block.js

@@ -1,9 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import { css } from '@emotion/react';
-import { akEditorCodeFontFamily, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { akEditorCodeFontFamily, akEditorLineHeight, akEditorTableCellMinWidth, blockNodesVerticalMargin, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { DN20, DN400, DN50, DN800, N20, N30, N400, N800 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
@@ -38,4 +38,5 @@ export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
     light: token('color.text', N800),
     dark: token('color.text', DN800)
   })(props), borderRadius(), gridSize(), relativeFontSizeToBase16(fontSize()));
-};
+};
+export var codeBlockInListSafariFix = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), akEditorLineHeight, akEditorLineHeight);

package/dist/esm/styles/shared/lists.js

@@ -5,4 +5,5 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
 import browser from '../../utils/browser';
-export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);
+export var listPaddingLeftMarkerSpace = 24;
+export var listsSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: ", "px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), listPaddingLeftMarkerSpace, browser.gecko ? 'display: inline-block;' : '', orderedListSelector, bulletListSelector);

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

@@ -38,7 +38,7 @@ export var TableSharedCssClassName = {
 };
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, 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, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + 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, 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, themed({
     light: token('color.border', akEditorTableBorder),
     dark: token('color.border', akEditorTableBorderDark)
   })(props), token('color.background.neutral.subtle', 'white'), tableCellMinWidth, themed({

package/dist/esm/types/copy-button.js

@@ -0,0 +1 @@
+export {};

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

@@ -23,7 +23,7 @@ import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "70.1.3";
+var packageVersion = "70.2.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 

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

@@ -88,7 +88,7 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\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, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
       light: token('color.border', colors.N50A),
       dark: token('color.border', colors.DN50)
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
@@ -97,7 +97,7 @@ var containerStyles = function containerStyles(styleProps) {
 
 var contentStyles = function contentStyles(styleProps) {
   return function (themeProps) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding-top: ", "px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n  display: flow-root;\n\n  // The follow rules inside @supports block are added as a part of ED-8893\n  // The fix is targeting mobile bridge on iOS 12 or below,\n  // We should consider remove this fix when we no longer support iOS 12\n  @supports not (display: flow-root) {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  ", "\n"])), styleProps.expanded ? gridSize() : 0, gridSize(), gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? gridSize() : 0, gridSize(), gridSize() * 4 - gridSize() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
   };
 };
 

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

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { IntlContext, IntlProvider } from 'react-intl-next';
+
+var useCheckIntlContext = function useCheckIntlContext() {
+  return useContext(IntlContext) === null;
+};
+
+export default function IntlProviderIfMissingWrapper(_ref) {
+  var children = _ref.children;
+  var missingIntlContext = useCheckIntlContext();
+
+  if (missingIntlContext) {
+    return /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  }
+
+  return children;
+}

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

@@ -235,10 +235,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/React.createElement("div", {
         ref: this.handleRef,
-        style: _objectSpread({
+        style: _objectSpread(_objectSpread({
           position: 'absolute',
           zIndex: this.props.zIndex || akEditorFloatingPanelZIndex
-        }, position),
+        }, position), this.props.style),
         "aria-label": this.props.ariaLabel || 'Popup' // Indicates component is an editor pop. Required for focus handling in Message.tsx
         ,
         "data-editor-popup": true

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

@@ -7,17 +7,21 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+var _class;
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';
 import { injectIntl, RawIntlProvider, useIntl } from 'react-intl-next';
 import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { EventDispatcher } from '../../event-dispatcher';
+import IntlProviderIfMissingWrapper from '../IntlProviderIfMissingWrapper';
 import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
 export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   _inherits(PortalProviderAPI, _EventDispatcher);
@@ -47,8 +51,6 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   _createClass(PortalProviderAPI, [{
     key: "render",
     value: function render(children, container) {
-      var _this2 = this;
-
       var hasAnalyticsContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var hasIntlContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       this.portals.set(container, {
@@ -56,14 +58,10 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
         hasAnalyticsContext: hasAnalyticsContext,
         hasIntlContext: hasIntlContext
       });
-
-      var childrenWithThemeProviders = function childrenWithThemeProviders() {
-        return /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-          mode: _this2.themeMode
-        }, children());
-      };
-
-      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+      var childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+        mode: this.themeMode
+      }, children());
+      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
 
       if (hasIntlContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
@@ -79,36 +77,33 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   }, {
     key: "forceUpdate",
     value: function forceUpdate(_ref) {
-      var _this3 = this;
+      var _this2 = this;
 
       var intl = _ref.intl,
           themeMode = _ref.themeMode;
       this.intl = intl;
       this.themeMode = themeMode;
       this.portals.forEach(function (portal, container) {
-        if (!portal.hasAnalyticsContext && !_this3.useAnalyticsContext && !portal.hasIntlContext) {
+        if (!portal.hasAnalyticsContext && !_this2.useAnalyticsContext && !portal.hasIntlContext) {
           return;
         }
 
         var wrappedChildren = portal.children();
+        var childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+          mode: themeMode
+        }, wrappedChildren);
 
-        var childrenWithThemeProviders = function childrenWithThemeProviders() {
-          return /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
-            mode: themeMode
-          }, wrappedChildren);
-        };
-
-        if (portal.hasAnalyticsContext && _this3.useAnalyticsContext) {
-          wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders());
+        if (portal.hasAnalyticsContext && _this2.useAnalyticsContext) {
+          wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
         }
 
         if (portal.hasIntlContext) {
           wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
-            value: _this3.intl
-          }, childrenWithThemeProviders());
+            value: _this2.intl
+          }, childrenWithThemeProviders);
         }
 
-        unstable_renderSubtreeIntoContainer(_this3.context, wrappedChildren, container);
+        unstable_renderSubtreeIntoContainer(_this2.context, wrappedChildren, container);
       });
     }
   }, {
@@ -155,13 +150,13 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
   var _super2 = _createSuper(BasePortalProvider);
 
   function BasePortalProvider(props) {
-    var _this4;
+    var _this3;
 
     _classCallCheck(this, BasePortalProvider);
 
-    _this4 = _super2.call(this, props);
-    _this4.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
-    return _this4;
+    _this3 = _super2.call(this, props);
+    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    return _this3;
   }
 
   _createClass(BasePortalProvider, [{
@@ -185,51 +180,66 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
 _defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
 
 export var PortalProvider = injectIntl(BasePortalProvider);
-export var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(props) {
+export var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(_ref2) {
+  var onAnalyticsEvent = _ref2.onAnalyticsEvent,
+      useAnalyticsContext = _ref2.useAnalyticsContext,
+      render = _ref2.render;
+  return /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(PortalProviderWithThemeAndIntlProviders, {
+    onAnalyticsEvent: onAnalyticsEvent,
+    useAnalyticsContext: useAnalyticsContext,
+    render: render
+  }));
+};
+
+var PortalProviderWithThemeAndIntlProviders = function PortalProviderWithThemeAndIntlProviders(_ref3) {
+  var onAnalyticsEvent = _ref3.onAnalyticsEvent,
+      useAnalyticsContext = _ref3.useAnalyticsContext,
+      render = _ref3.render;
   var intl = useIntl();
   var globalTheme = useGlobalTheme();
   return /*#__PURE__*/React.createElement(BasePortalProvider, {
     intl: intl,
     themeMode: globalTheme.mode,
-    onAnalyticsEvent: props.onAnalyticsEvent,
-    useAnalyticsContext: props.useAnalyticsContext,
-    render: props.render
+    onAnalyticsEvent: onAnalyticsEvent,
+    useAnalyticsContext: useAnalyticsContext,
+    render: render
   });
 };
+
 export var PortalRenderer = /*#__PURE__*/function (_React$Component2) {
   _inherits(PortalRenderer, _React$Component2);
 
   var _super3 = _createSuper(PortalRenderer);
 
   function PortalRenderer(props) {
-    var _this5;
+    var _this4;
 
     _classCallCheck(this, PortalRenderer);
 
-    _this5 = _super3.call(this, props);
+    _this4 = _super3.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this5), "handleUpdate", function (portals) {
-      return _this5.setState({
+    _defineProperty(_assertThisInitialized(_this4), "handleUpdate", function (portals) {
+      return _this4.setState({
         portals: portals
       });
     });
 
-    props.portalProviderAPI.setContext(_assertThisInitialized(_this5));
-    props.portalProviderAPI.on('update', _this5.handleUpdate);
-    _this5.state = {
+    props.portalProviderAPI.setContext(_assertThisInitialized(_this4));
+    props.portalProviderAPI.on('update', _this4.handleUpdate);
+    _this4.state = {
       portals: new Map()
     };
-    return _this5;
+    return _this4;
   }
 
   _createClass(PortalRenderer, [{
     key: "render",
     value: function render() {
       var portals = this.state.portals;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(portals.entries()).map(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            container = _ref3[0],
-            children = _ref3[1];
+      return /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(portals.entries()).map(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+            container = _ref5[0],
+            children = _ref5[1];
 
         return /*#__PURE__*/createPortal(children, container);
       }));
@@ -246,8 +256,7 @@ var dummyAnalyticsContext = {
   getAtlaskitAnalyticsContext: function getAtlaskitAnalyticsContext() {},
   getAtlaskitAnalyticsEventHandlers: function getAtlaskitAnalyticsEventHandlers() {}
 };
-
-var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
+var AnalyticsContextWrapper = (_class = /*#__PURE__*/function (_React$Component3) {
   _inherits(AnalyticsContextWrapper, _React$Component3);
 
   var _super4 = _createSuper(AnalyticsContextWrapper);
@@ -261,10 +270,10 @@ var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
   _createClass(AnalyticsContextWrapper, [{
     key: "render",
     value: function render() {
-      var _ref4 = this.context.contextAdapter.analytics || {
+      var _ref6 = this.context.contextAdapter.analytics || {
         value: dummyAnalyticsContext
       },
-          value = _ref4.value;
+          value = _ref6.value;
 
       return /*#__PURE__*/React.createElement(AnalyticsReactContext.Provider, {
         value: value
@@ -273,4 +282,6 @@ var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
   }]);
 
   return AnalyticsContextWrapper;
-}(React.Component);
+}(React.Component), _defineProperty(_class, "contextTypes", {
+  contextAdapter: PropTypes.object
+}), _class);

package/dist/esm/ui/index.js

@@ -15,4 +15,5 @@ export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from './clear-next-sibling-margin-top';
-export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
+export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
+export { default as IntlProviderIfMissingWrapper } from './IntlProviderIfMissingWrapper';

package/dist/esm/utils/breakout.js

@@ -1,6 +1,7 @@
 import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 import { mapBreakpointToLayoutMaxWidth } from '../ui/BaseTheme';
 import { getBreakpoint } from '../ui/WidthProvider';
+import { parsePx } from './dom';
 /**
  * Variables required to construct a context for breakout ssr inline script.
  *
@@ -15,6 +16,11 @@ var breakoutConsts = {
   wideLayoutWidth: akEditorWideLayoutWidth,
   mapBreakpointToLayoutMaxWidth: mapBreakpointToLayoutMaxWidth,
   getBreakpoint: getBreakpoint,
+
+  /**
+   * Consumers are opinionated that this will always return a string ending in
+   * `px` when called with `full-width` or `wide` as the layout parameter.
+   */
   calcBreakoutWidth: function calcBreakoutWidth(layout, containerWidth) {
     var effectiveFullWidth = containerWidth - breakoutConsts.padding;
 
@@ -62,4 +68,43 @@ export var absoluteBreakoutWidth = function absoluteBreakoutWidth(layout, contai
 };
 export { breakoutConsts };
 export var calcWideWidth = breakoutConsts.calcWideWidth;
-export var calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
+export var calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
+export function calculateBreakoutStyles(_ref) {
+  var mode = _ref.mode,
+      widthStateLineLength = _ref.widthStateLineLength,
+      widthStateWidth = _ref.widthStateWidth;
+  var breakoutWidth = calcBreakoutWidth(mode, widthStateWidth);
+  var breakoutWidthPx = parsePx(breakoutWidth);
+
+  if (!widthStateLineLength) {
+    // lineLength is not normally undefined when this is run for,
+    // consumers but can be in SSR, initial render or test (jsdom)
+    // environments.
+    //
+    // this approach doesn't work well with position: fixed, so
+    // it breaks things like sticky headers.
+    //
+    // It can also cause bluriness for some child content (such as iframes)
+    return {
+      type: 'line-length-unknown',
+      width: breakoutWidth,
+      transform: 'translateX(-50%)',
+      marginLeft: '50%'
+    };
+  } // NOTE
+  // At time of writing -- when toggling between full-width and
+  // full-page appearance modes. There is a slight delay before
+  // the widthState is updated.
+  // During this period -- the marginLeftPx will be incorrect.
+
+
+  var marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
+  return {
+    type: 'line-length-known',
+    width: breakoutWidth,
+    marginLeft: "".concat(marginLeftPx, "px")
+  };
+}
+export function calcBreakoutWidthPx(mode, widthStateWidth) {
+  return parsePx(calcBreakoutWidth(mode, widthStateWidth));
+}

package/dist/esm/utils/collab.js

@@ -0,0 +1,13 @@
+export var getParticipantsCount = function getParticipantsCount(editorState) {
+  var _collabEditPlugin$$pa, _collabEditPlugin$$pa2;
+
+  // TODO: ED-15663
+  // Please, do not copy or use this kind of code below
+  // @ts-ignore
+  if (!editorState || !editorState['collabEditPlugin$']) {
+    return 1;
+  }
+
+  var participantsCount = (_collabEditPlugin$$pa = (_collabEditPlugin$$pa2 = editorState['collabEditPlugin$'].participants) === null || _collabEditPlugin$$pa2 === void 0 ? void 0 : _collabEditPlugin$$pa2.size()) !== null && _collabEditPlugin$$pa !== void 0 ? _collabEditPlugin$$pa : 1;
+  return participantsCount;
+};

package/dist/esm/utils/dom.js

@@ -90,6 +90,22 @@ export function closest(node, s) {
 export function closestElement(node, s) {
   return closest(node, s);
 }
+/**
+ * Util for converting a css pixel size value to a number (of pixels).
+ *
+ * ie.
+ * ```ts
+ * const pixels = parsePx('10px')
+ * //    ^$ const pixels: number
+ * ```
+ * * ```ts
+ * const pixels = parsePx('10')
+ * //    ^$ const pixels: number | undefined
+ * ```
+ */
+// At time of writting prettier would strip the extend here.
+// prettier-ignore
+
 export function parsePx(pxStr) {
   if (!pxStr.endsWith('px')) {
     return undefined;

package/dist/esm/utils/get-performance-options.js

@@ -0,0 +1,55 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { getParticipantsCount } from './collab';
+import { startMeasure, stopMeasure } from './performance/measure'; // This was existing logic when converting from ReactNodeView
+// our current sampling for this event is not bound by node.type
+
+var nodeViewRenderedEventsCounter = 0;
+var DEFAULT_SAMPLING_RATE = 100;
+var DEFAULT_SLOW_THRESHOLD = 7;
+export function getPerformanceOptions(view) {
+  var _nodeViewTracking$sam, _nodeViewTracking$slo;
+
+  // TODO: ED-15663
+  // Please, do not copy or use this kind of code below
+  // @ts-ignore
+  var fakePluginKey = {
+    key: 'analyticsPlugin$',
+    getState: function getState(state) {
+      return state['analyticsPlugin$'];
+    }
+  };
+  var pluginState = fakePluginKey.getState(view.state);
+  var nodeViewTracking = pluginState && pluginState.performanceTracking ? pluginState.performanceTracking.nodeViewTracking || {} : {};
+  var samplingRate = (_nodeViewTracking$sam = nodeViewTracking.samplingRate) !== null && _nodeViewTracking$sam !== void 0 ? _nodeViewTracking$sam : DEFAULT_SAMPLING_RATE;
+  var slowThreshold = (_nodeViewTracking$slo = nodeViewTracking.slowThreshold) !== null && _nodeViewTracking$slo !== void 0 ? _nodeViewTracking$slo : DEFAULT_SLOW_THRESHOLD;
+  return {
+    trackingEnabled: !!nodeViewTracking.enabled,
+    samplingRate: samplingRate,
+    slowThreshold: slowThreshold
+  };
+}
+export function startMeasureReactNodeViewRendered(_ref) {
+  var nodeTypeName = _ref.nodeTypeName;
+  startMeasure("\uD83E\uDD89".concat(nodeTypeName, "::ReactNodeView"));
+}
+export function stopMeasureReactNodeViewRendered(_ref2) {
+  var nodeTypeName = _ref2.nodeTypeName,
+      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+      editorState = _ref2.editorState,
+      samplingRate = _ref2.samplingRate,
+      slowThreshold = _ref2.slowThreshold;
+  stopMeasure("\uD83E\uDD89".concat(nodeTypeName, "::ReactNodeView"), function (duration) {
+    if (++nodeViewRenderedEventsCounter % samplingRate === 0 && duration > slowThreshold) {
+      dispatchAnalyticsEvent({
+        action: ACTION.REACT_NODEVIEW_RENDERED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          node: nodeTypeName,
+          duration: duration,
+          participants: getParticipantsCount(editorState)
+        }
+      });
+    }
+  });
+}

package/dist/esm/utils/index.js

@@ -5,7 +5,7 @@ export { default as ErrorReporter } from './error-reporter';
 export { isPastDate, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC } from './date';
 export { isElementInTableCell, isTextSelection, isLastItemMediaGroup, setNodeSelection, setTextSelection, nonNullable, stepAddsOneOf, stepHasSlice, extractSliceFromStep, isValidPosition } from './editor-core-utils';
 export { withImageLoader } from './imageLoader';
-export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts } from './breakout';
+export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts, calculateBreakoutStyles, calcBreakoutWidthPx } from './breakout';
 export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent } from './nodes';
 export { pluginFactory } from './plugin-state-factory';
 export { getFragmentBackingArray, mapFragment, mapSlice, flatmap, mapChildren } from './slice';
@@ -26,8 +26,12 @@ export { isTextInput } from './is-text-input';
 export { ZERO_WIDTH_SPACE, ZERO_WIDTH_JOINER } from './whitespace';
 export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
+export { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from './get-performance-options';
 export { sniffUserBrowserExtensions } from './browser-extensions';
 export { RenderCountProfiler } from './profiler/render-count';
 export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
 export { getShallowPropsDifference, getPropsDifference } from './compare-props';
-export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';
+export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';
+export { isOutdatedBrowser } from './outdated-browsers';
+export { isReferencedSource } from './referentiality';
+export { sendLogs } from './sendLogs';