@atlaskit/renderer 103.0.1 → 104.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/renderer
 
+## 104.0.0
+
+### Major Changes
+
+- [`2df5ab17c10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2df5ab17c10) - DSP-6459: Adds a background to code blocks in the editor to remove transparency. E.g. prevents table cell background colors from affecting code blocks. Also modifies code blocks in table headers to have a border instead of a different color when design tokens are enabled.
+
+### Patch Changes
+
+- [`c472a1eed2f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c472a1eed2f) - DSP-3443 Updates tokens used for floating buttons; updated appearances only visible in applications configured to use the new Tokens API (currently in alpha).
+- [`34f8542468b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34f8542468b) - [ED-12592] Updates the renderer rendered measurement to indicate when the measurement is distorted. Re uses distorted measurement identification logic from other render measurements.
+- [`977ac74443c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/977ac74443c) - DSP-7235: Fixes issue with overflow shadows on code blocks due to layered transparent colors.
+- [`c2510fa261f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2510fa261f) - [ux] ED-15961 [ux] Updates the presentation of text color to use dark and light mode colors when those modes are enabled
+- Updated dependencies
+
+## 103.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 103.0.1
 
 ### Patch Changes

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

@@ -15,14 +15,20 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _editorPalette = require("@atlaskit/editor-palette");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function 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 = (0, _editorPalette.hexToEditorTextPaletteColor)(props.color) || props.color;
   var style = (0, _react.useMemo)(function () {
-    return (0, _defineProperty2.default)({}, '--custom-text-color', props.color);
-  }, [props.color]);
+    return (0, _defineProperty2.default)({}, '--custom-palette-color', paletteColorValue);
+  }, [paletteColorValue]);
   return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, props.dataAttributes, {
     "data-text-custom-color": props.color,
     className: "fabric-text-color-mark",

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

@@ -23,16 +23,19 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _codeBlockCopyButton = _interopRequireDefault(require("../../codeBlockCopyButton"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 // 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 (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _components.themed)({
+    light: (0, _tokens.token)('elevation.surface.raised', _colors.N20),
+    dark: (0, _tokens.token)('elevation.surface.raised', _colors.DN50)
+  })(props), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
     background: (0, _components.themed)({
-      light: _colors.N20,
-      dark: _colors.DN50
+      light: (0, _tokens.token)('color.background.neutral', _colors.N20),
+      dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
     })(props),
     width: "".concat((0, _constants.gridSize)(), "px")
   }));

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

@@ -21,7 +21,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
 
 var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
 
@@ -39,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _tokens.token)('color.border.inverse', '#fff'), (0, _tokens.token)('color.background.neutral.subtle', _colors.N20), (0, _tokens.token)('color.icon', 'rgb(66, 82, 110)'), (0, _tokens.token)('color.background.neutral.hovered', _colors.N30), (0, _tokens.token)('color.background.neutral.bold.pressed', _colors.N700), (0, _tokens.token)('color.icon.inverse', '#fff'));
+var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _tokens.token)('color.border', '#fff'), (0, _tokens.token)('elevation.surface.overlay', _colors.N20), (0, _tokens.token)('color.text', 'rgb(66, 82, 110)'), (0, _tokens.token)('color.border', 'transparent'), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N30), (0, _tokens.token)('color.border', 'transparent'), (0, _tokens.token)('elevation.surface.overlay.pressed', _colors.N30), (0, _tokens.token)('elevation.surface.overlay', _colors.N700), (0, _tokens.token)('color.text', '#fff'), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N700));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,
@@ -68,7 +68,7 @@ var CopyButton = function CopyButton(_ref) {
     position: "top"
   }, (0, _react.jsx)("div", {
     onMouseLeave: onMouseLeave
-  }, (0, _react.jsx)(_customThemeButton.default, {
+  }, (0, _react.jsx)(_button.default, {
     className: className,
     "aria-label": tooltip,
     spacing: "compact",

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

@@ -102,18 +102,23 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "103.0.1";
+var packageVersion = "104.0.0";
 
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(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;
 
     (0, _classCallCheck2.default)(this, Renderer);
     _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderedMeasurementDistortedDurationMonitor", (0, _utils.getDistortedDurationMonitor)());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "featureFlags", (0, _memoizeOne.default)(function (featureFlags) {
       var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -277,6 +282,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
             attributes: {
               platform: _events.PLATFORM.WEB,
               duration: duration,
+              distortedDuration: _this2.renderedMeasurementDistortedDurationMonitor.distortedDuration,
               ttfb: (0, _utils.getResponseEndTime)(),
               nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
                 acc[node.type] = (acc[node.type] || 0) + 1;
@@ -286,6 +292,10 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
             },
             eventType: _enums.EVENT_TYPE.OPERATIONAL
           });
+
+          _this2.renderedMeasurementDistortedDurationMonitor.cleanup();
+
+          delete _this2.renderedMeasurementDistortedDurationMonitor;
         });
 
         _this2.anchorLinkAnalytics();

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

@@ -130,7 +130,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: (0, _tokens.token)('color.text', colors.N800),
       dark: (0, _tokens.token)('color.text', '#B8C7E0')
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), (0, _tokens.token)('color.link', colors.B400), (0, _tokens.token)('color.link', colors.B300), (0, _tokens.token)('color.link.pressed', colors.B500), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({

package/dist/cjs/version.json

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

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

@@ -1,9 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 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.
+  const paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
   const style = useMemo(() => ({
-    ['--custom-text-color']: props.color
-  }), [props.color]);
+    ['--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/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -6,24 +6,27 @@ 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 */
 const codeBlockStyleOverrides = props => css`
     tab-size: 4;
+    background-color: ${themed({
+  light: token('elevation.surface.raised', N20),
+  dark: token('elevation.surface.raised', DN50)
+})(props)};
+
     ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
       font-size: ${relativeFontSizeToBase16(fontSize())};
       line-height: 1.5rem;
       background-image: ${overflowShadow({
   background: themed({
-    light: N20,
-    dark: DN50
+    light: token('color.background.neutral', N20),
+    dark: token('color.background.neutral', DN50)
   })(props),
   width: `${gridSize()}px`
 })};
-      background-attachment: local, scroll, scroll;
-      background-position: 100% 0, 100% 0, 0 0;
+      background-attachment: local, local, local, local, scroll, scroll;
+      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;
     }
   `;
 

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

@@ -3,7 +3,7 @@ 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';
@@ -26,19 +26,28 @@ const copyButtonWrapperStyles = css`
     padding: 2px;
     opacity: 0;
     transition: opacity 0.2s ease 0s;
-    border: 2px solid ${token('color.border.inverse', '#fff')};
+    border: 2px solid ${token('color.border', '#fff')};
     border-radius: 4px;
-    background-color: ${token('color.background.neutral.subtle', N20)};
-    color: ${token('color.icon', 'rgb(66, 82, 110)')};
+    background-color: ${token('elevation.surface.overlay', N20)};
+    color: ${token('color.text', 'rgb(66, 82, 110)')} !important;
   }
 
   button:hover {
-    background-color: ${token('color.background.neutral.hovered', N30)};
+    border: 2px solid ${token('color.border', 'transparent')};
+    background-color: ${token('elevation.surface.overlay.hovered', N30)};
+  }
+
+  button:active {
+    border: 2px solid ${token('color.border', 'transparent')};
+    background-color: ${token('elevation.surface.overlay.pressed', N30)};
   }
 
   button.clicked {
-    background-color: ${token('color.background.neutral.bold.pressed', N700)};
-    color: ${token('color.icon.inverse', '#fff')} !important;
+    background-color: ${token('elevation.surface.overlay', N700)};
+    color: ${token('color.text', '#fff')} !important;
+  }
+  button.clicked:hover {
+    background-color: ${token('elevation.surface.overlay.hovered', N700)};
   }
 `;
 

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

@@ -9,7 +9,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';
@@ -36,11 +36,17 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "103.0.1";
+const packageVersion = "104.0.0";
 export class Renderer extends PureComponent {
+  /**
+   * This is used in measuring the Renderer Mount time and is then
+   * deleted once that measurement occurs.
+   */
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "renderedMeasurementDistortedDurationMonitor", getDistortedDurationMonitor());
+
     _defineProperty(this, "featureFlags", memoizeOne(featureFlags => {
       const normalizedFeatureFlags = normalizeFeatureFlags(featureFlags, {
         objectFlagKeys: ['rendererRenderTracking']
@@ -208,6 +214,7 @@ export class Renderer extends PureComponent {
           attributes: {
             platform: PLATFORM.WEB,
             duration,
+            distortedDuration: this.renderedMeasurementDistortedDurationMonitor.distortedDuration,
             ttfb: getResponseEndTime(),
             nodes: reduce(this.props.document, (acc, node) => {
               acc[node.type] = (acc[node.type] || 0) + 1;
@@ -217,6 +224,8 @@ export class Renderer extends PureComponent {
           },
           eventType: EVENT_TYPE.OPERATIONAL
         });
+        this.renderedMeasurementDistortedDurationMonitor.cleanup();
+        delete this.renderedMeasurementDistortedDurationMonitor;
       });
       this.anchorLinkAnalytics();
     });