@atlaskit/renderer 103.0.1 → 104.0.0

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "103.0.1",
+	"version": "104.0.0",
 	"sideEffects": false
 }

package/dist/esm/react/marks/textColor.js

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useMemo } from 'react';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 export default function TextColor(props) {
+  // Note -- while there is no way to create custom colors using default tooling
+  // the editor does supported ad hoc color values -- and there may be content
+  // which has been migrated or created via apis which use such values.
+  var paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
   var style = useMemo(function () {
-    return _defineProperty({}, '--custom-text-color', props.color);
-  }, [props.color]);
+    return _defineProperty({}, '--custom-palette-color', paletteColorValue);
+  }, [paletteColorValue]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
     "data-text-custom-color": props.color,
     className: "fabric-text-color-mark",

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -10,15 +10,16 @@ import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CopyButton from '../../codeBlockCopyButton';
+import { token } from '@atlaskit/tokens'; // TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
 
-// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n    }\n  "])), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    background-color: ", ";\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;\n    }\n  "])), themed({
+    light: token('elevation.surface.raised', N20),
+    dark: token('elevation.surface.raised', DN50)
+  })(props), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
     background: themed({
-      light: N20,
-      dark: DN50
+      light: token('color.background.neutral', N20),
+      dark: token('color.background.neutral', DN50)
     })(props),
     width: "".concat(gridSize(), "px")
   }));

package/dist/esm/react/nodes/codeBlockCopyButton.js

@@ -8,13 +8,13 @@ import { css, jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { copyTextToClipboard } from '../utils/clipboard';
 import { codeBlockCopyButtonMessages } from '@atlaskit/editor-common/messages';
 import { token } from '@atlaskit/tokens';
-var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n"])), token('color.border.inverse', '#fff'), token('color.background.neutral.subtle', N20), token('color.icon', 'rgb(66, 82, 110)'), token('color.background.neutral.hovered', N30), token('color.background.neutral.bold.pressed', N700), token('color.icon.inverse', '#fff'));
+var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", " !important;\n  }\n\n  button:hover {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button:active {\n    border: 2px solid ", ";\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n  button.clicked:hover {\n    background-color: ", ";\n  }\n"])), token('color.border', '#fff'), token('elevation.surface.overlay', N20), token('color.text', 'rgb(66, 82, 110)'), token('color.border', 'transparent'), token('elevation.surface.overlay.hovered', N30), token('color.border', 'transparent'), token('elevation.surface.overlay.pressed', N30), token('elevation.surface.overlay', N700), token('color.text', '#fff'), token('elevation.surface.overlay.hovered', N700));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

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

@@ -23,7 +23,7 @@ import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
-import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, browser } from '@atlaskit/editor-common/utils';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
@@ -50,12 +50,16 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "103.0.1";
+var packageVersion = "104.0.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
 
   var _super = _createSuper(Renderer);
 
+  /**
+   * This is used in measuring the Renderer Mount time and is then
+   * deleted once that measurement occurs.
+   */
   function Renderer(props) {
     var _this;
 
@@ -63,6 +67,8 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "renderedMeasurementDistortedDurationMonitor", getDistortedDurationMonitor());
+
     _defineProperty(_assertThisInitialized(_this), "featureFlags", memoizeOne(function (featureFlags) {
       var normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -231,6 +237,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
             attributes: {
               platform: PLATFORM.WEB,
               duration: duration,
+              distortedDuration: _this2.renderedMeasurementDistortedDurationMonitor.distortedDuration,
               ttfb: getResponseEndTime(),
               nodes: reduce(_this2.props.document, function (acc, node) {
                 acc[node.type] = (acc[node.type] || 0) + 1;
@@ -240,6 +247,10 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
             },
             eventType: EVENT_TYPE.OPERATIONAL
           });
+
+          _this2.renderedMeasurementDistortedDurationMonitor.cleanup();
+
+          delete _this2.renderedMeasurementDistortedDurationMonitor;
         });
 
         _this2.anchorLinkAnalytics();

package/dist/esm/ui/Renderer/style.js

@@ -101,7 +101,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n    line-height: 1.5rem;\n    color: ", ";\n\n    .", "::after {\n      // we add a clearfix after ak-renderer-document in order to\n      // contain internal floats (such as media images that are \"wrap-left\")\n      // to just the renderer (and not spill outside of it)\n      content: '';\n      visibility: hidden;\n      display: block;\n      height: 0;\n      clear: both;\n    }\n\n    ", "\n    ", "\n\n    & h1 {\n      ", "\n    }\n\n    & h2 {\n      ", "\n    }\n\n    & h3 {\n      ", "\n    }\n\n    & h4 {\n      ", "\n    }\n\n    & h5 {\n      ", "\n    }\n\n    & h6 {\n      ", "\n    }\n\n    & span.akActionMark {\n      color: ", ";\n      text-decoration: none;\n\n      &:hover {\n        color: ", ";\n        text-decoration: underline;\n      }\n\n      &:active {\n        color: ", ";\n      }\n    }\n\n    & span.akActionMark {\n      cursor: pointer;\n    }\n\n    & span[data-placeholder] {\n      color: ", ";\n    }\n\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", "\n\n    & .UnknownBlock {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: 400;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    & span.date-node {\n      background: ", ";\n      border-radius: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\n      + .", ":not(.rich-media-wrapped) {\n      clear: both;\n    }\n\n    & .code-block,\n    & blockquote,\n    & hr,\n    & > div > div:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped\n      + .rich-media-wrapped\n      + *:not(.rich-media-wrapped),\n    .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n    .", ".image-align-start,\n      .", ".image-center,\n      .", ".image-align-end {\n      clear: both;\n    }\n\n    & .rich-media-wrapped {\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        margin-top: 8px;\n      }\n    }\n\n    ", "\n    /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    /* Breakout for tables and extensions */\n    .", " > {\n      * .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\n        margin-top: ", ";\n      }\n\n      .", " {\n        margin-left: 50%;\n        transform: translateX(-50%);\n      }\n\n      .", " {\n        overflow-x: auto;\n      }\n\n      .", "\n        .", " {\n        display: flex;\n      }\n    }\n\n    ", "\n\n    .", " .", " {\n      z-index: 0;\n      transition: all 0.1s linear;\n      display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n      /** Shadow overrides */\n      &.", "::after,\n        &.", "::before {\n        top: ", "px;\n        height: calc(100% - ", "px);\n        z-index: ", ";\n      }\n\n      &\n        .", ",\n        &\n        .", " {\n        height: calc(100% - ", "px);\n      }\n\n      /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n      table {\n        height: 1px; /* will be ignored */\n        ", ";\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      table tr:first-of-type {\n        height: 100%;\n\n        td,\n        th {\n          position: relative;\n        }\n      }\n\n      table[data-number-column='true'] {\n        .", " {\n          background-color: ", ";\n          border-right: 1px solid\n            ", ";\n          width: ", "px;\n          text-align: center;\n          color: ", ";\n          font-size: ", ";\n        }\n\n        .fixed .", " {\n          border-right: 0px none;\n        }\n      }\n    }\n\n    tr[data-header-row].fixed {\n      position: fixed !important;\n      display: flex;\n      overflow: hidden;\n      z-index: ", ";\n\n      border-right: 1px solid\n        ", ";\n      border-bottom: 1px solid\n        ", ";\n\n      /* this is to compensate for the table border */\n      transform: translateX(-1px);\n    }\n\n    .sticky > th {\n      z-index: ", ";\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* Make the number column header sticky */\n    .sticky > td {\n      position: sticky !important;\n      top: 0;\n    }\n\n    /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n    .sticky th,\n    .sticky td {\n      box-shadow: 0px 1px\n          ", ",\n        0px -0.5px ", ",\n        inset -1px 0px ", ",\n        0px -1px ", ";\n    }\n\n    /* this will remove jumpiness caused in Chrome for sticky headers */\n    .fixed + tr {\n      min-height: 0px;\n    }\n\n    /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n    & .code-block {\n      max-width: 100%;\n      /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n      /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n      display: -ms-grid;\n      display: grid;\n      -ms-grid-columns: auto 1fr;\n      /* stylelint-enable */\n\n      grid-template-columns: minmax(0, 1fr);\n      position: relative;\n      border-radius: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", "\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n\n    & li {\n      > .code-block {\n        margin: ", " 0 0 0;\n      }\n      > .code-block:first-child {\n        margin-top: 0;\n      }\n\n      > div:last-of-type.code-block {\n        margin-bottom: ", ";\n      }\n\n      ", "\n    }\n  "])), editorFontSize(themeProps), themed({
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n\n        ", "\n      }\n    "])), editorFontSize(themeProps), themed({
       light: token('color.text', colors.N800),
       dark: token('color.text', '#B8C7E0')
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), token('color.link', colors.B400), token('color.link', colors.B300), token('color.link.pressed', colors.B500), colors.placeholderText(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "103.0.1",
+	"version": "104.0.0",
 	"sideEffects": false
 }

package/dist/types/analytics/events.d.ts

@@ -17,6 +17,7 @@ declare type RendererStartAEP = AEP<ACTION.STARTED, ACTION_SUBJECT.RENDERER, und
 declare type RendererRenderedAEP = AEP<ACTION.RENDERED, ACTION_SUBJECT.RENDERER, undefined, {
     platform: PLATFORM.WEB;
     duration: number;
+    distortedDuration: boolean;
     ttfb?: number;
     nodes: Record<string, number>;
     severity?: SEVERITY;

package/dist/types/ui/Renderer/index.d.ts

@@ -16,6 +16,11 @@ export declare class Renderer extends PureComponent<RendererProps> {
     private editorRef;
     private mouseDownSelection?;
     private id?;
+    /**
+     * This is used in measuring the Renderer Mount time and is then
+     * deleted once that measurement occurs.
+     */
+    private renderedMeasurementDistortedDurationMonitor?;
     constructor(props: RendererProps);
     private anchorLinkAnalytics;
     componentDidMount(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "103.0.1",
+  "version": "104.0.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
@@ -37,23 +29,24 @@
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/code": "^14.4.0",
-    "@atlaskit/editor-common": "^70.2.0",
+    "@atlaskit/editor-common": "^71.0.0",
     "@atlaskit/editor-json-transformer": "^8.8.0",
+    "@atlaskit/editor-palette": "0.1.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-card": "^74.2.0",
-    "@atlaskit/media-client": "^18.1.0",
+    "@atlaskit/media-card": "^74.3.0",
+    "@atlaskit/media-client": "^19.0.0",
     "@atlaskit/media-common": "^2.17.0",
-    "@atlaskit/media-filmstrip": "^46.0.0",
-    "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^47.1.0",
-    "@atlaskit/smart-card": "^23.1.0",
+    "@atlaskit/media-filmstrip": "^46.1.0",
+    "@atlaskit/media-ui": "^22.2.0",
+    "@atlaskit/media-viewer": "^47.2.0",
+    "@atlaskit/smart-card": "^23.7.0",
     "@atlaskit/status": "^1.2.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -67,7 +60,7 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/link-provider": "^1.3.0",
+    "@atlaskit/link-provider": "^1.3.4",
     "@atlaskit/media-core": "^34.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
@@ -77,7 +70,7 @@
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^175.0.0",
+    "@atlaskit/editor-core": "^176.0.0",
     "@atlaskit/editor-test-helpers": "^17.2.0",
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",
@@ -86,11 +79,11 @@
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^17.2.0",
+    "@atlaskit/profilecard": "^17.3.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.5.0",
+    "@atlaskit/util-data-test": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/renderer"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
 
-<!--
-	Generated API Report version: 2.0
--->
+### Main Entry Types
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -139,28 +144,28 @@ type AEP<Action, ActionSubject, ActionSubjectID, Attributes, EventType> = {
 
 // @public (undocumented)
 type AnalyticsEventPayload<T = void> =
-  | RendererStartAEP
-  | RendererRenderedAEP
-  | RendererReRenderedAEP<T>
+  | AnchorLinkAEP
+  | AnnotationAEP
+  | AnnotationDeleteAEP
   | ComponentCrashErrorAEP
-  | RendererUnsupportedContentLevelsTrackingSucceeded
-  | RendererUnsupportedContentLevelsTrackingErrored
+  | ExpandAEP
+  | HeadingAnchorLinkButtonAEP
+  | InvalidProsemirrorDocumentErrorAEP
+  | MediaLnkTransformedAEP
+  | RendererReRenderedAEP<T>
+  | RendererRenderedAEP
   | RendererSelectAllCaughtAEP
   | RendererSelectAllEscapedAEP
-  | HeadingAnchorLinkButtonAEP
-  | AnchorLinkAEP
-  | TableSortColumnNotAllowedAEP
+  | RendererStartAEP
+  | RendererTTIAEP
+  | RendererUnsupportedContentLevelsTrackingErrored
+  | RendererUnsupportedContentLevelsTrackingSucceeded
   | TableSortColumnAEP
-  | VisitLinkAEP
-  | VisitMediaLinkAEP
-  | ExpandAEP
+  | TableSortColumnNotAllowedAEP
   | UnsupportedContentPayload
   | UnsupportedContentTooltipPayload
-  | AnnotationAEP
-  | AnnotationDeleteAEP
-  | MediaLnkTransformedAEP
-  | InvalidProsemirrorDocumentErrorAEP
-  | RendererTTIAEP;
+  | VisitLinkAEP
+  | VisitMediaLinkAEP;
 
 // @public (undocumented)
 type AnchorLinkAEP = UIAEP<
@@ -175,14 +180,14 @@ type AnchorLinkAEP = UIAEP<
 
 // @public (undocumented)
 type AnnotationActionType =
-  | ACTION.INSERTED
   | ACTION.CLOSED
-  | ACTION.EDITED
+  | ACTION.CREATE_NOT_ALLOWED
   | ACTION.DELETED
+  | ACTION.EDITED
+  | ACTION.INSERTED
   | ACTION.OPENED
   | ACTION.RESOLVED
-  | ACTION.VIEWED
-  | ACTION.CREATE_NOT_ALLOWED;
+  | ACTION.VIEWED;
 
 // @public (undocumented)
 type AnnotationAEP = AEP<
@@ -281,7 +286,7 @@ type HeadingAnchorLinksConfig = {
 };
 
 // @public (undocumented)
-export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
+export type HeadingAnchorLinksProps = HeadingAnchorLinksConfig | boolean;
 
 // @public (undocumented)
 type InvalidProsemirrorDocumentErrorAEP = AEP<
@@ -525,10 +530,10 @@ export interface RendererProps {
   // (undocumented)
   fadeOutHeight?: number;
   featureFlags?:
+    | Partial<RawObjectFeatureFlags>
     | {
         [featureFlag: string]: boolean;
-      }
-    | Partial<RawObjectFeatureFlags>;
+      };
   // (undocumented)
   innerRef?: React.RefObject<HTMLDivElement>;
   // (undocumented)
@@ -569,6 +574,7 @@ type RendererRenderedAEP = AEP<
   {
     platform: PLATFORM.WEB;
     duration: number;
+    distortedDuration: boolean;
     ttfb?: number;
     nodes: Record<string, number>;
     severity?: SEVERITY;
@@ -717,10 +723,10 @@ type StickyHeaderConfig = {
 
 // @public (undocumented)
 type StickyHeaderProps =
-  | boolean
   | ({
       show?: boolean;
-    } & StickyHeaderConfig);
+    } & StickyHeaderConfig)
+  | boolean;
 
 // @public (undocumented)
 type TableSortColumnAEP = AEP<
@@ -807,3 +813,5 @@ type VisitMediaLinkAEP = AEP<
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/types-ts4.0/actions/index.d.ts

@@ -1,61 +0,0 @@
-/// <reference types="react" />
-import { JSONDocNode } from '@atlaskit/editor-json-transformer';
-import type { AnnotationActionResult, AnnotationByMatches } from '@atlaskit/editor-common/types';
-import { AnnotationTypes } from '@atlaskit/adf-schema';
-import { Node, Schema, Mark } from 'prosemirror-model';
-import { Step, RemoveMarkStep } from 'prosemirror-transform';
-import { AnalyticsEventPayload } from '../analytics/events';
-declare type ActionResult = {
-    step: Step;
-    doc: JSONDocNode;
-} | false;
-declare type Position = {
-    from: number;
-    to: number;
-};
-declare type Annotation = {
-    annotationId: string;
-    annotationType: AnnotationTypes;
-};
-export interface RendererActionsOptions {
-    annotate: (range: Range, annotationId: string, annotationType: 'inlineComment') => ActionResult;
-    deleteAnnotation: (annotationId: string, annotationType: 'inlineComment') => ActionResult;
-    isValidAnnotationRange: (range: Range) => boolean;
-}
-export declare type ApplyAnnotation = (pos: Position, annotation: Annotation) => AnnotationActionResult;
-export interface AnnotationsRendererActionsOptions {
-    isValidAnnotationPosition: (pos: Position) => boolean;
-    applyAnnotation: ApplyAnnotation;
-    getAnnotationMarks: () => Mark[];
-}
-export interface PositionRendererActionsOptions {
-    getPositionFromRange: (range: Range) => Position | false;
-}
-export default class RendererActions implements RendererActionsOptions, AnnotationsRendererActionsOptions, PositionRendererActionsOptions {
-    private initFromContext;
-    private transformer;
-    private doc?;
-    private schema?;
-    private ref?;
-    private onAnalyticsEvent?;
-    constructor(initFromContext?: boolean);
-    _privateRegisterRenderer(ref: React.MutableRefObject<null>, doc: Node, schema: Schema, onAnalyticsEvent?: (event: AnalyticsEventPayload) => void): void;
-    _privateUnregisterRenderer(): void;
-    /**
-     * Validate whether we can create an annotation between two positions
-     */
-    _privateValidatePositionsForAnnotation(from: number, to: number): boolean;
-    deleteAnnotation(annotationId: string, annotationType: 'inlineComment'): false | {
-        step: RemoveMarkStep<Schema<any, any>>;
-        doc: JSONDocNode;
-    };
-    annotate(range: Range, annotationId: string, annotationType: 'inlineComment'): AnnotationActionResult;
-    isValidAnnotationRange(range: Range): boolean;
-    isValidAnnotationPosition(pos: Position): boolean;
-    getPositionFromRange(range: Range): Position | false;
-    getAnnotationMarks(): Mark<any>[];
-    getAnnotationsByPosition(range: Range): string[];
-    applyAnnotation(pos: Position, annotation: Annotation): AnnotationActionResult;
-    generateAnnotationIndexMatch(pos: Position): AnnotationByMatches | false;
-}
-export {};

package/dist/types-ts4.0/actions/matches-utils.d.ts

@@ -1,7 +0,0 @@
-import { Node, Schema } from 'prosemirror-model';
-export declare function getIndexMatch(doc: Node, schema: Schema, selectedText: string, startIndex: number): {
-    numMatches: number;
-    matchIndex: number;
-    textContent: string;
-};
-export declare function countMatches(searchString: string, query: string): number;

package/dist/types-ts4.0/actions.d.ts

@@ -1,3 +0,0 @@
-import { RendererActionsContext, RendererActionsContextConsumer } from './ui/RendererActionsContext';
-import { WithRendererActions } from './ui/RendererActionsContext/WithRendererActions';
-export { RendererActionsContext, RendererActionsContextConsumer, WithRendererActions, };

package/dist/types-ts4.0/analytics/analyticsContext.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { AnalyticsEventPayload } from './events';
-declare const AnalyticsContext: React.Context<{
-    fireAnalyticsEvent: (event: AnalyticsEventPayload) => void;
-}>;
-export default AnalyticsContext;

package/dist/types-ts4.0/analytics/enums.d.ts

@@ -1,56 +0,0 @@
-export declare enum EVENT_TYPE {
-    OPERATIONAL = "operational",
-    SCREEN = "screen",
-    TRACK = "track",
-    UI = "ui"
-}
-export declare enum ACTION {
-    STARTED = "started",
-    RENDERED = "rendered",
-    RE_RENDERED = "reRendered",
-    RENDERER_TTI = "tti",
-    CRASHED = "unhandledErrorCaught",
-    INVALID_PROSEMIRROR_DOCUMENT = "invalidProsemirrorDocument",
-    SELECT_ALL_CAUGHT = "selectAllCaught",
-    SELECT_ALL_ESCAPED = "selectAllEscaped",
-    CLICKED = "clicked",
-    VIEWED = "viewed",
-    VISITED = "visited",
-    SORT_COLUMN = "sortedColumn",
-    SORT_COLUMN_NOT_ALLOWED = "sortColumnNotAllowed",
-    TOGGLE_EXPAND = "toggleExpand",
-    INSERTED = "inserted",
-    OPENED = "opened",
-    CLOSED = "closed",
-    DELETED = "deleted",
-    EDITED = "edited",
-    RESOLVED = "resolved",
-    CREATE_NOT_ALLOWED = "createNotAllowed",
-    UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED = "unsupportedContentLevelsTrackingSucceeded",
-    UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED = "unsupportedContentLevelsTrackingErrored",
-    MEDIA_LINK_TRANSFORMED = "mediaLinkTransformed"
-}
-export declare enum ACTION_SUBJECT {
-    RENDERER = "renderer",
-    BUTTON = "button",
-    ANCHOR_LINK = "anchorLink",
-    TABLE = "table",
-    EXPAND = "expand",
-    NESTED_EXPAND = "nestedExpand",
-    MEDIA_SINGLE = "mediaSingle",
-    LINK = "link",
-    ANNOTATION = "annotation",
-    MEDIA = "media"
-}
-export declare enum ACTION_SUBJECT_ID {
-    HEADING_ANCHOR_LINK = "headingAnchorLink",
-    LINK = "link",
-    INLINE_COMMENT = "inlineComment"
-}
-export declare type AEP<Action, ActionSubject, ActionSubjectID, Attributes, EventType> = {
-    action: Action;
-    actionSubject: ActionSubject;
-    actionSubjectId?: ActionSubjectID;
-    attributes?: Attributes;
-    eventType: EventType;
-};