@atlaskit/editor-common 68.0.2 → 69.1.0

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

@@ -0,0 +1,94 @@
+import { css } from '@emotion/react';
+import { akEditorCodeFontFamily, 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';
+import { token } from '@atlaskit/tokens';
+export const CodeBlockSharedCssClassName = {
+  CODEBLOCK_CONTAINER: 'code-block',
+  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
+  CODEBLOCK_CONTENT: 'code-content',
+  DS_CODEBLOCK: '[data-ds--code--code-block]'
+};
+export const codeBlockSharedStyles = props => css`
+  .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
+    position: relative;
+    background-color: ${themed({
+  light: token('color.background.neutral', N20),
+  dark: token('color.background.neutral', DN50)
+})(props)};
+    border-radius: ${borderRadius()}px;
+    counter-reset: line;
+    display: flex;
+    overflow-x: auto;
+
+    background-image: ${overflowShadow({
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  background: themed({
+    light: N20,
+    dark: DN50
+  })(props),
+  width: '8px'
+})};
+
+    --ds--code--bg-color: transparent;
+
+    background-repeat: no-repeat;
+    background-attachment: local, scroll, scroll;
+    background-size: 8px 100%, 8px 100%, 8px 100%;
+    background-position: 100% 0, 100% 0, 0 0;
+    font-family: ${akEditorCodeFontFamily};
+    margin: ${blockNodesVerticalMargin} 0 0 0;
+    min-width: ${akEditorTableCellMinWidth}px;
+    cursor: pointer;
+
+    .${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER} {
+      flex-shrink: 0;
+      text-align: right;
+      background-color: ${themed({
+  light: token('color.background.neutral', N30),
+  dark: token('color.background.neutral', DN20)
+})(props)};
+      padding: ${gridSize()}px;
+
+      span {
+        display: block;
+        line-height: 0;
+        font-size: 0;
+
+        ::before {
+          display: inline-block;
+          content: counter(line);
+          counter-increment: line;
+          color: ${themed({
+  light: token('color.text.subtlest', N400),
+  dark: token('color.text.subtlest', DN400)
+})(props)};
+          font-size: ${relativeFontSizeToBase16(fontSize())};
+          line-height: 1.5rem;
+        }
+      }
+    }
+
+    .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
+      display: flex;
+      flex: 1;
+
+      code {
+        flex-grow: 1;
+        tab-size: 4;
+        cursor: text;
+        color: ${themed({
+  light: token('color.text', N800),
+  dark: token('color.text', DN800)
+})(props)};
+        border-radius: ${borderRadius()}px;
+        margin: ${gridSize()}px;
+        white-space: pre;
+        font-size: ${relativeFontSizeToBase16(fontSize())};
+        line-height: 1.5rem;
+      }
+    }
+  }
+`;

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

@@ -1,7 +1,8 @@
-import { emojiImage, emojiNode, emojiSprite } from '@atlaskit/emoji';
+import { emojiImage, emojiNode, emojiPlaceholder, emojiSprite } from '@atlaskit/emoji';
 export const EmojiSharedCssClassName = {
   EMOJI_CONTAINER: 'emojiView-content-wrap',
   EMOJI_NODE: emojiNode,
   EMOJI_SPRITE: emojiSprite,
-  EMOJI_IMAGE: emojiImage
+  EMOJI_IMAGE: emojiImage,
+  EMOJI_PLACEHOLDER: emojiPlaceholder
 };

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

@@ -138,7 +138,8 @@ export const PanelSharedSelectors = {
   emojiPopup: `[aria-label="Popup"]`,
   searchEmoji: `[aria-label="Search emoji"]`,
   orangeWarningIcon: `[aria-label=":warning:"]`,
-  yellowWarningIcon: `[aria-label=":warning:"]  span:nth-child(1)`
+  yellowWarningIcon: `[aria-label=":warning:"]  span:nth-child(1)`,
+  copyButton: `button[aria-label="Copy"]`
 };
 
 const iconDynamicStyles = panelType => props => {

package/dist/es2019/ui/Mention/mention-with-profilecard.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { ResourcedMention } from '@atlaskit/mention';
-import { ProfileCardTrigger } from '@atlaskit/profilecard';
+import ProfileCardTrigger from '@atlaskit/profilecard/user';
 export default function MentionWithProfileCard({
   id,
   text,

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

@@ -10,6 +10,8 @@ export default class Popup extends React.Component {
 
     super(...args);
 
+    _defineProperty(this, "rafIds", new Set());
+
     _defineProperty(this, "state", {
       validPosition: true
     });
@@ -24,7 +26,27 @@ export default class Popup extends React.Component {
       this.initPopup(popup);
     });
 
-    _defineProperty(this, "scheduledUpdatePosition", rafSchedule(props => this.updatePosition(props)));
+    _defineProperty(this, "cancelRequestAnimationFrames", () => {
+      for (const rafId of this.rafIds) {
+        cancelAnimationFrame(rafId);
+      }
+    });
+
+    _defineProperty(this, "scheduledUpdatePosition", rafSchedule(props => {
+      if (!this.props.waitForExtraLayoutUpdates) {
+        this.updatePosition(this.props);
+      }
+
+      if (this.props.scheduleExtraLayoutUpdates) {
+        // We need two requestAnimationFrame calls to ensure reflow/repaints
+        // are flushed to DOM before our popup position recalculations happen
+        const rafId = requestAnimationFrame(() => {
+          this.updatePosition(this.props);
+          this.rafIds.delete(rafId);
+        });
+        this.rafIds.add(rafId);
+      }
+    }));
 
     _defineProperty(this, "onResize", () => this.scheduledUpdatePosition(this.props));
 
@@ -182,6 +204,7 @@ export default class Popup extends React.Component {
     }
 
     this.scheduledUpdatePosition.cancel();
+    this.cancelRequestAnimationFrames();
   }
 
   renderPopup() {

package/dist/es2019/ui/clear-next-sibling-margin-top.js

@@ -1,7 +1,15 @@
 import { css } from '@emotion/react'; // We use !important to ensure next sibling gets the margin reset no matter what
 
+const marginTopReset = `margin-top: 0 !important;`;
 export const clearNextSiblingMarginTopStyle = css`
   & + * {
-    margin-top: 0 !important;
+    ${marginTopReset}
+  }
+`;
+const textElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const nextSiblingBlockMarkContentSelectors = textElements.map(elem => `+ .fabric-editor-block-mark > ${elem}`).join(',');
+export const clearNextSiblingBlockMarkMarginTopStyle = css`
+  ${nextSiblingBlockMarkContentSelectors} {
+    ${marginTopReset}
   }
 `;

package/dist/es2019/ui/index.js

@@ -14,5 +14,5 @@ export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shado
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
-export { clearNextSiblingMarginTopStyle } from './clear-next-sibling-margin-top';
+export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from './clear-next-sibling-margin-top';
 export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';

package/dist/es2019/utils/browser.js

@@ -3,12 +3,14 @@ const result = {
   ie: false,
   ie_version: 0,
   gecko: false,
+  gecko_version: 0,
   chrome: false,
   chrome_version: 0,
   android: false,
   ios: false,
   webkit: false,
   safari: false,
+  safari_version: 0,
   supportsIntersectionObserver: false,
   supportsResizeObserver: false
 };
@@ -21,12 +23,14 @@ if (typeof navigator !== 'undefined') {
   let ie = result.ie = !!(ieUpTo10 || ie11up || ieEdge);
   result.ie_version = ieUpTo10 ? document.documentMode || 6 : ie11up ? +ie11up[1] : ieEdge ? +ieEdge[1] : null;
   result.gecko = !ie && /gecko\/\d/i.test(navigator.userAgent);
+  result.gecko_version = parseInt((navigator.userAgent.match(/Firefox\/(\d+)/) || [])[1], 10);
   result.chrome = !ie && /Chrome\//.test(navigator.userAgent);
   result.chrome_version = parseInt((navigator.userAgent.match(/Chrome\/(\d+)/) || [])[1], 10);
   result.android = /Android \d/.test(navigator.userAgent);
   result.ios = !ie && /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
   result.webkit = !ie && !!document.documentElement && 'WebkitAppearance' in document.documentElement.style;
   result.safari = Boolean(navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') === -1 && navigator.userAgent.indexOf('FxiOS') === -1);
+  result.safari_version = parseInt((navigator.userAgent.match(/Version\/([0-9\._]+).*Safari/) || [])[1], 10);
   result.supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
   result.supportsResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window && 'ResizeObserverEntry' in window;
 }

package/dist/es2019/utils/index.js

@@ -1,6 +1,5 @@
 export { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from './annotation';
 export { getExtensionLozengeData } from './macro';
-export { getMarksByOrder, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, isSameMark, isSubSupType, markOrder } from './validator';
 export { default as browser } from './browser';
 export { default as ErrorReporter } from './error-reporter';
 export { isPastDate, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC } from './date';

package/dist/es2019/utils/performance/measure-render.js

@@ -13,7 +13,23 @@ import { isPerformanceAPIAvailable } from './is-performance-api-available';
  *  | startMark + scheduling rAF |                                                       | rAF callback, endMark
  */
 
-export function measureRender(measureName, onMeasureComplete) {
+export function measureRender(
+/**
+ * Unique name for the measurement
+ *
+ * Important: if multiple measureRender events are fired at the same time
+ * with the same measure name -- the result will not be correct.
+ */
+measureName,
+/**
+ * Call back fired when the measurement completes.
+ *
+ * Note: when this function is called when the Document.visibilityState is not
+ * visible -- the duration is likely to be misleading/inaccurate. This is due
+ * to the measurements use of the `requestAnimationFrame` api which only fires
+ * when the Document.visibilityState is visible.
+ */
+onMeasureComplete) {
   if (!isPerformanceAPIAvailable()) {
     return;
   }
@@ -21,10 +37,29 @@ export function measureRender(measureName, onMeasureComplete) {
   const startMark = `[START]: ${measureName}`;
   const endMark = `[END]: ${measureName}`;
   const startTime = performance.now();
-  performance.mark(startMark);
+  performance.mark(startMark); // If an editor is rendered when the document is not visible -- the callback passed to
+  // requestAnimationFrame will not fire until the document becomes visible again.
+  //
+  // For the purposes of using performance measurement -- this behaviour means the events
+  // which have been fired in the background are not useful -- and lead to other events
+  // being hard to draw conclusions from.
+  //
+  // To mitigate this -- we detect this state -- and fire a seperate callback when the
+  // measurement has occured when the render was in the backgroun
+
+  let distortedDuration = document.visibilityState !== 'visible';
+
+  function handleVisibilityChange() {
+    if (document.visibilityState !== 'visible') {
+      distortedDuration = true;
+    }
+  }
+
+  document.addEventListener('visibilitychange', handleVisibilityChange);
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       performance.mark(endMark);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
       const duration = performance.now() - startTime;
 
       try {
@@ -32,12 +67,24 @@ export function measureRender(measureName, onMeasureComplete) {
         const entry = performance.getEntriesByName(measureName).pop();
 
         if (!entry) {
-          onMeasureComplete(duration, startTime);
+          onMeasureComplete({
+            duration,
+            startTime,
+            distortedDuration
+          });
         } else {
-          onMeasureComplete(entry.duration, entry.startTime);
+          onMeasureComplete({
+            duration: entry.duration,
+            startTime: entry.startTime,
+            distortedDuration
+          });
         }
       } catch (e) {
-        onMeasureComplete(duration, startTime);
+        onMeasureComplete({
+          duration,
+          startTime,
+          distortedDuration
+        });
       }
 
       performance.clearMeasures(measureName);

package/dist/es2019/validator.js

@@ -1 +1 @@
-export { getMarksByOrder, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, isSameMark, isSubSupType, markOrder } from './utils/validator';
+export { getMarksByOrder, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, isSameMark, isSubSupType, markOrder, ADFStages } from './utils/validator';

package/dist/es2019/version.json

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

package/dist/esm/styles/index.js

@@ -17,4 +17,5 @@ export { shadowSharedStyle } from './shared/shadow';
 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 { smartCardSharedStyles, SmartCardSharedCssClassName } from './shared/smart-card';
+export { CodeBlockSharedCssClassName, codeBlockSharedStyles } from './shared/code-block';

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

@@ -0,0 +1,39 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { akEditorCodeFontFamily, 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';
+import { token } from '@atlaskit/tokens';
+export var CodeBlockSharedCssClassName = {
+  CODEBLOCK_CONTAINER: 'code-block',
+  CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
+  CODEBLOCK_CONTENT: 'code-content',
+  DS_CODEBLOCK: '[data-ds--code--code-block]'
+};
+export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    counter-reset: line;\n    display: flex;\n    overflow-x: auto;\n\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    margin: ", " 0 0 0;\n    min-width: ", "px;\n    cursor: pointer;\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        ::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, themed({
+    light: token('color.background.neutral', N20),
+    dark: token('color.background.neutral', DN50)
+  })(props), borderRadius(), overflowShadow({
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    background: themed({
+      light: N20,
+      dark: DN50
+    })(props),
+    width: '8px'
+  }), akEditorCodeFontFamily, blockNodesVerticalMargin, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
+    light: token('color.background.neutral', N30),
+    dark: token('color.background.neutral', DN20)
+  })(props), gridSize(), themed({
+    light: token('color.text.subtlest', N400),
+    dark: token('color.text.subtlest', DN400)
+  })(props), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, themed({
+    light: token('color.text', N800),
+    dark: token('color.text', DN800)
+  })(props), borderRadius(), gridSize(), relativeFontSizeToBase16(fontSize()));
+};

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

@@ -1,7 +1,8 @@
-import { emojiImage, emojiNode, emojiSprite } from '@atlaskit/emoji';
+import { emojiImage, emojiNode, emojiPlaceholder, emojiSprite } from '@atlaskit/emoji';
 export var EmojiSharedCssClassName = {
   EMOJI_CONTAINER: 'emojiView-content-wrap',
   EMOJI_NODE: emojiNode,
   EMOJI_SPRITE: emojiSprite,
-  EMOJI_IMAGE: emojiImage
+  EMOJI_IMAGE: emojiImage,
+  EMOJI_PLACEHOLDER: emojiPlaceholder
 };

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

@@ -146,7 +146,8 @@ export var PanelSharedSelectors = {
   emojiPopup: "[aria-label=\"Popup\"]",
   searchEmoji: "[aria-label=\"Search emoji\"]",
   orangeWarningIcon: "[aria-label=\":warning:\"]",
-  yellowWarningIcon: "[aria-label=\":warning:\"]  span:nth-child(1)"
+  yellowWarningIcon: "[aria-label=\":warning:\"]  span:nth-child(1)",
+  copyButton: "button[aria-label=\"Copy\"]"
 };
 
 var iconDynamicStyles = function iconDynamicStyles(panelType) {

package/dist/esm/ui/Mention/mention-with-profilecard.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { ResourcedMention } from '@atlaskit/mention';
-import { ProfileCardTrigger } from '@atlaskit/profilecard';
+import ProfileCardTrigger from '@atlaskit/profilecard/user';
 export default function MentionWithProfileCard(_ref) {
   var id = _ref.id,
       text = _ref.text,

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

@@ -10,6 +10,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 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; } }
@@ -38,6 +44,8 @@ var Popup = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "rafIds", new Set());
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       validPosition: true
     });
@@ -52,8 +60,38 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       _this.initPopup(popup);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "cancelRequestAnimationFrames", function () {
+      var _iterator = _createForOfIteratorHelper(_this.rafIds),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var rafId = _step.value;
+          cancelAnimationFrame(rafId);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "scheduledUpdatePosition", rafSchedule(function (props) {
-      return _this.updatePosition(props);
+      if (!_this.props.waitForExtraLayoutUpdates) {
+        _this.updatePosition(_this.props);
+      }
+
+      if (_this.props.scheduleExtraLayoutUpdates) {
+        // We need two requestAnimationFrame calls to ensure reflow/repaints
+        // are flushed to DOM before our popup position recalculations happen
+        var rafId = requestAnimationFrame(function () {
+          _this.updatePosition(_this.props);
+
+          _this.rafIds.delete(rafId);
+        });
+
+        _this.rafIds.add(rafId);
+      }
     }));
 
     _defineProperty(_assertThisInitialized(_this), "onResize", function () {
@@ -220,6 +258,7 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       }
 
       this.scheduledUpdatePosition.cancel();
+      this.cancelRequestAnimationFrames();
     }
   }, {
     key: "renderPopup",

package/dist/esm/ui/clear-next-sibling-margin-top.js

@@ -1,7 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import { css } from '@emotion/react'; // We use !important to ensure next sibling gets the margin reset no matter what
 
-export var clearNextSiblingMarginTopStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & + * {\n    margin-top: 0 !important;\n  }\n"])));
+var marginTopReset = "margin-top: 0 !important;";
+export var clearNextSiblingMarginTopStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & + * {\n    ", "\n  }\n"])), marginTopReset);
+var textElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+var nextSiblingBlockMarkContentSelectors = textElements.map(function (elem) {
+  return "+ .fabric-editor-block-mark > ".concat(elem);
+}).join(',');
+export var clearNextSiblingBlockMarkMarginTopStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " {\n    ", "\n  }\n"])), nextSiblingBlockMarkContentSelectors, marginTopReset);

package/dist/esm/ui/index.js

@@ -14,5 +14,5 @@ export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shado
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
-export { clearNextSiblingMarginTopStyle } from './clear-next-sibling-margin-top';
+export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from './clear-next-sibling-margin-top';
 export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';

package/dist/esm/utils/browser.js

@@ -3,12 +3,14 @@ var result = {
   ie: false,
   ie_version: 0,
   gecko: false,
+  gecko_version: 0,
   chrome: false,
   chrome_version: 0,
   android: false,
   ios: false,
   webkit: false,
   safari: false,
+  safari_version: 0,
   supportsIntersectionObserver: false,
   supportsResizeObserver: false
 };
@@ -21,12 +23,14 @@ if (typeof navigator !== 'undefined') {
   var ie = result.ie = !!(ieUpTo10 || ie11up || ieEdge);
   result.ie_version = ieUpTo10 ? document.documentMode || 6 : ie11up ? +ie11up[1] : ieEdge ? +ieEdge[1] : null;
   result.gecko = !ie && /gecko\/\d/i.test(navigator.userAgent);
+  result.gecko_version = parseInt((navigator.userAgent.match(/Firefox\/(\d+)/) || [])[1], 10);
   result.chrome = !ie && /Chrome\//.test(navigator.userAgent);
   result.chrome_version = parseInt((navigator.userAgent.match(/Chrome\/(\d+)/) || [])[1], 10);
   result.android = /Android \d/.test(navigator.userAgent);
   result.ios = !ie && /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
   result.webkit = !ie && !!document.documentElement && 'WebkitAppearance' in document.documentElement.style;
   result.safari = Boolean(navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') === -1 && navigator.userAgent.indexOf('FxiOS') === -1);
+  result.safari_version = parseInt((navigator.userAgent.match(/Version\/([0-9\._]+).*Safari/) || [])[1], 10);
   result.supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
   result.supportsResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window && 'ResizeObserverEntry' in window;
 }

package/dist/esm/utils/index.js

@@ -1,6 +1,5 @@
 export { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from './annotation';
 export { getExtensionLozengeData } from './macro';
-export { getMarksByOrder, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, isSameMark, isSubSupType, markOrder } from './validator';
 export { default as browser } from './browser';
 export { default as ErrorReporter } from './error-reporter';
 export { isPastDate, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC } from './date';

package/dist/esm/utils/performance/measure-render.js

@@ -13,7 +13,23 @@ import { isPerformanceAPIAvailable } from './is-performance-api-available';
  *  | startMark + scheduling rAF |                                                       | rAF callback, endMark
  */
 
-export function measureRender(measureName, onMeasureComplete) {
+export function measureRender(
+/**
+ * Unique name for the measurement
+ *
+ * Important: if multiple measureRender events are fired at the same time
+ * with the same measure name -- the result will not be correct.
+ */
+measureName,
+/**
+ * Call back fired when the measurement completes.
+ *
+ * Note: when this function is called when the Document.visibilityState is not
+ * visible -- the duration is likely to be misleading/inaccurate. This is due
+ * to the measurements use of the `requestAnimationFrame` api which only fires
+ * when the Document.visibilityState is visible.
+ */
+onMeasureComplete) {
   if (!isPerformanceAPIAvailable()) {
     return;
   }
@@ -21,10 +37,29 @@ export function measureRender(measureName, onMeasureComplete) {
   var startMark = "[START]: ".concat(measureName);
   var endMark = "[END]: ".concat(measureName);
   var startTime = performance.now();
-  performance.mark(startMark);
+  performance.mark(startMark); // If an editor is rendered when the document is not visible -- the callback passed to
+  // requestAnimationFrame will not fire until the document becomes visible again.
+  //
+  // For the purposes of using performance measurement -- this behaviour means the events
+  // which have been fired in the background are not useful -- and lead to other events
+  // being hard to draw conclusions from.
+  //
+  // To mitigate this -- we detect this state -- and fire a seperate callback when the
+  // measurement has occured when the render was in the backgroun
+
+  var distortedDuration = document.visibilityState !== 'visible';
+
+  function handleVisibilityChange() {
+    if (document.visibilityState !== 'visible') {
+      distortedDuration = true;
+    }
+  }
+
+  document.addEventListener('visibilitychange', handleVisibilityChange);
   requestAnimationFrame(function () {
     requestAnimationFrame(function () {
       performance.mark(endMark);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
       var duration = performance.now() - startTime;
 
       try {
@@ -32,12 +67,24 @@ export function measureRender(measureName, onMeasureComplete) {
         var entry = performance.getEntriesByName(measureName).pop();
 
         if (!entry) {
-          onMeasureComplete(duration, startTime);
+          onMeasureComplete({
+            duration: duration,
+            startTime: startTime,
+            distortedDuration: distortedDuration
+          });
         } else {
-          onMeasureComplete(entry.duration, entry.startTime);
+          onMeasureComplete({
+            duration: entry.duration,
+            startTime: entry.startTime,
+            distortedDuration: distortedDuration
+          });
         }
       } catch (e) {
-        onMeasureComplete(duration, startTime);
+        onMeasureComplete({
+          duration: duration,
+          startTime: startTime,
+          distortedDuration: distortedDuration
+        });
       }
 
       performance.clearMeasures(measureName);

package/dist/esm/validator.js

@@ -1 +1 @@
-export { getMarksByOrder, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, isSameMark, isSubSupType, markOrder } from './utils/validator';
+export { getMarksByOrder, getValidContent, getValidDocument, getValidMark, getValidNode, getValidUnknownNode, isSameMark, isSubSupType, markOrder, ADFStages } from './utils/validator';

package/dist/esm/version.json

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