@atlaskit/renderer 93.0.4 → 95.0.1

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

@@ -81,17 +81,13 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSchema", function () {
-      var _this$props = _this.props,
-          schema = _this$props.schema,
-          adfStage = _this$props.adfStage;
-
+    _defineProperty(_assertThisInitialized(_this), "getSchema", memoizeOne(function (schema, adfStage) {
       if (schema) {
         return schema;
       }
 
       return getSchemaBasedOnStage(adfStage);
-    });
+    }));
 
     _defineProperty(_assertThisInitialized(_this), "onMouseDownEditView", function () {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
@@ -244,22 +240,22 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this3 = this;
 
-      var _this$props2 = this.props,
-          document = _this$props2.document,
-          onComplete = _this$props2.onComplete,
-          onError = _this$props2.onError,
-          appearance = _this$props2.appearance,
-          adfStage = _this$props2.adfStage,
-          allowDynamicTextSizing = _this$props2.allowDynamicTextSizing,
-          truncated = _this$props2.truncated,
-          maxHeight = _this$props2.maxHeight,
-          fadeOutHeight = _this$props2.fadeOutHeight,
-          enableSsrInlineScripts = _this$props2.enableSsrInlineScripts,
-          allowHeadingAnchorLinks = _this$props2.allowHeadingAnchorLinks,
-          allowPlaceholderText = _this$props2.allowPlaceholderText,
-          allowColumnSorting = _this$props2.allowColumnSorting,
-          allowCopyToClipboard = _this$props2.allowCopyToClipboard,
-          allowCustomPanels = _this$props2.allowCustomPanels;
+      var _this$props = this.props,
+          document = _this$props.document,
+          onComplete = _this$props.onComplete,
+          onError = _this$props.onError,
+          appearance = _this$props.appearance,
+          adfStage = _this$props.adfStage,
+          allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
+          truncated = _this$props.truncated,
+          maxHeight = _this$props.maxHeight,
+          fadeOutHeight = _this$props.fadeOutHeight,
+          enableSsrInlineScripts = _this$props.enableSsrInlineScripts,
+          allowHeadingAnchorLinks = _this$props.allowHeadingAnchorLinks,
+          allowPlaceholderText = _this$props.allowPlaceholderText,
+          allowColumnSorting = _this$props.allowColumnSorting,
+          allowCopyToClipboard = _this$props.allowCopyToClipboard,
+          allowCustomPanels = _this$props.allowCustomPanels;
       var allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -309,7 +305,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       try {
         var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
 
-        var schema = this.getSchema();
+        var schema = this.getSchema(this.props.schema, this.props.adfStage);
 
         var _renderDocument = renderDocument(document, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
             result = _renderDocument.result,

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

@@ -7,6 +7,7 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -67,7 +68,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      &.", "\n        .", " {\n        cursor: default;\n      }\n\n      .", " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .", " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .", " {\n          opacity: 1;\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_BUTTON, tableCellPadding, colors.B300, headingsCss, RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, RendererCssClassName.SORTABLE_COLUMN_BUTTON, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      &.", "\n        .", " {\n        cursor: default;\n      }\n\n      .", " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .", " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .", " {\n          opacity: 1;\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_BUTTON, tableCellPadding, token('color.border.focused', colors.B300), headingsCss, RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, RendererCssClassName.SORTABLE_COLUMN_BUTTON, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
 };
 
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
@@ -97,42 +98,42 @@ 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\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\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     * 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-child {\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    & [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  "])), editorFontSize(themeProps), themed({
-      light: colors.N800,
-      dark: '#B8C7E0'
-    })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
-      light: colors.N30A,
-      dark: colors.DN70
+    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\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     * 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-child {\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    & [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  "])), 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({
+      light: token('color.background.neutral', colors.N30A),
+      dark: token('color.background.neutral', colors.DN70)
     })(themeProps), borderRadius(), themed({
-      light: colors.N800,
-      dark: colors.DN600
-    })(themeProps), colors.R50, colors.R500, gridSize() * 3, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
-      light: akEditorTableToolbar,
-      dark: akEditorTableToolbarDark
+      light: token('color.text', colors.N800),
+      dark: token('color.text', colors.DN600)
+    })(themeProps), token('color.background.danger', colors.R50), token('color.text.danger', colors.R500), gridSize() * 3, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
+      light: token('color.background.neutral', akEditorTableToolbar),
+      dark: token('color.background.neutral', akEditorTableToolbarDark)
     })(themeProps), themed({
-      light: akEditorTableBorder,
-      dark: akEditorTableBorderDark
+      light: token('color.border', akEditorTableBorder),
+      dark: token('color.border', akEditorTableBorderDark)
     })(themeProps), akEditorTableNumberColumnWidth, themed({
-      light: colors.N200,
-      dark: colors.DN400
+      light: token('color.text.subtlest', colors.N200),
+      dark: token('color.text.subtlest', colors.DN400)
     })(themeProps), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, themed({
-      light: akEditorTableBorder,
-      dark: akEditorTableBorderDark
+      light: token('color.border', akEditorTableBorder),
+      dark: token('color.border', akEditorTableBorderDark)
     })(themeProps), themed({
-      light: akEditorTableBorder,
-      dark: akEditorTableBorderDark
+      light: token('color.border', akEditorTableBorder),
+      dark: token('color.border', akEditorTableBorderDark)
     })(themeProps), akEditorStickyHeaderZIndex, themed({
-      light: akEditorTableBorder,
-      dark: akEditorTableBorderDark
+      light: token('color.border', akEditorTableBorder),
+      dark: token('color.border', akEditorTableBorderDark)
     })(themeProps), themed({
-      light: akEditorTableBorder,
-      dark: akEditorTableBorderDark
+      light: token('color.border', akEditorTableBorder),
+      dark: token('color.border', akEditorTableBorderDark)
     })(themeProps), themed({
-      light: akEditorTableToolbar,
-      dark: akEditorTableToolbarDark
+      light: token('color.border', akEditorTableToolbar),
+      dark: token('color.border', akEditorTableToolbarDark)
     })(themeProps), themed({
-      light: akEditorTableToolbar,
-      dark: akEditorTableToolbarDark
+      light: token('color.border', akEditorTableToolbar),
+      dark: token('color.border', akEditorTableToolbarDark)
     })(themeProps), borderRadius(), blockNodesVerticalMargin, columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth);
   };
 };

package/dist/esm/ui/Renderer/truncated-wrapper.js

@@ -14,9 +14,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
+import { token } from '@atlaskit/tokens';
 
 var fadeOutStyles = function fadeOutStyles(maxHeight, top, backgroundColor) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      rgba(255, 255, 255, 0),\n      ", "\n    );\n  }\n"])), maxHeight, top, backgroundColor);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow-y: hidden;\n  max-height: ", "px;\n  &::after {\n    content: '';\n    position: absolute;\n    top: ", "px;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: linear-gradient(\n      ", ",\n      ", "\n    );\n  }\n"])), maxHeight, top, token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)'), backgroundColor);
 };
 
 var FadeOut = function FadeOut(props) {
@@ -40,7 +41,8 @@ export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, TruncatedWrapper);
 
     return _super.call(this, props);
-  }
+  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+
 
   _createClass(TruncatedWrapper, [{
     key: "render",
@@ -51,7 +53,7 @@ export var TruncatedWrapper = /*#__PURE__*/function (_Component) {
           _this$props$fadeHeigh = _this$props.fadeHeight,
           fadeHeight = _this$props$fadeHeigh === void 0 ? 24 : _this$props$fadeHeigh,
           _this$props$backgroun = _this$props.backgroundColor,
-          backgroundColor = _this$props$backgroun === void 0 ? 'white' : _this$props$backgroun,
+          backgroundColor = _this$props$backgroun === void 0 ? token('elevation.surface', 'white') : _this$props$backgroun,
           children = _this$props.children;
       return jsx(FadeOut, {
         height: height,

package/dist/esm/ui/SortingIcon.js

@@ -9,13 +9,15 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
-import { injectIntl } from 'react-intl-next'; // We use data url here because of this issue:
+import { injectIntl } from 'react-intl-next';
+import { token } from '@atlaskit/tokens'; // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
+// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
 
 export var TableSortIconDataUrl = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M-8-6h24v24H-8z\"></path><path d=\"M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z\" fill=\"#42526E\"></path></g></svg>"));
 var TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-export var StatusClassNames;
+export var StatusClassNames; // TODO: get design to check border
 
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -24,7 +26,7 @@ export var StatusClassNames;
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (StatusClassNames = {}));
 
-var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid #fff;\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), gridSize() / 2, N20, N30, StatusClassNames.SORTING_NOT_ALLOWED);
+var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &.", " {\n    cursor: not-allowed;\n  }\n"])), token('color.border.inverse', '#fff'), gridSize() / 2, token('color.background.neutral.subtle', N20), token('color.background.neutral.subtle.hovered', N30), StatusClassNames.SORTING_NOT_ALLOWED);
 var tableSortingIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  background-image: url(", ");\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
 
 var getClassName = function getClassName(status) {

package/dist/esm/ui/annotations/draft/component.js

@@ -14,7 +14,7 @@ import { dataAttributes } from './dom';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 
 var markStyles = function markStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  ", ";\n"])), AnnotationSharedCSSByState(props).focus);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  ", ";\n"])), AnnotationSharedCSSByState(props).focus);
 };
 
 export var AnnotationDraft = function AnnotationDraft(_ref) {

package/dist/esm/ui/annotations/element/mark.js

@@ -16,7 +16,7 @@ import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 
 var markStyles = function markStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: inherit;\n  background-color: unset;\n  -webkit-tap-highlight-color: transparent;\n\n  &[data-mark-annotation-state='", "'] {\n    ", ";\n\n    &:focus,\n    &[data-has-focus='true'] {\n      ", ";\n    }\n  }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState({
     theme: props
   }).blur, AnnotationSharedCSSByState({
     theme: props

package/dist/esm/version.json

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

package/dist/types/render-document.d.ts

@@ -1,5 +1,5 @@
 import { Serializer } from './serializer';
-import { ADFStage } from '@atlaskit/editor-common/validator';
+import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/utils';
 import { Node as PMNode, Schema } from 'prosemirror-model';
 import { AnalyticsEventPayload } from './analytics/events';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "93.0.4",
+  "version": "95.0.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,18 +31,19 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/code": "^14.3.0",
-    "@atlaskit/editor-common": "^66.0.0",
+    "@atlaskit/editor-common": "^67.0.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
-    "@atlaskit/editor-shared-styles": "^2.0.0",
+    "@atlaskit/editor-shared-styles": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-card": "^73.5.0",
-    "@atlaskit/media-client": "^15.1.0",
-    "@atlaskit/media-common": "^2.12.0",
-    "@atlaskit/media-filmstrip": "^43.0.0",
-    "@atlaskit/media-viewer": "^46.2.0",
+    "@atlaskit/media-card": "^73.6.0",
+    "@atlaskit/media-client": "^16.0.0",
+    "@atlaskit/media-common": "^2.13.0",
+    "@atlaskit/media-filmstrip": "^44.0.0",
+    "@atlaskit/media-viewer": "^46.3.0",
     "@atlaskit/status": "^1.1.0",
     "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -56,8 +57,8 @@
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
-    "@atlaskit/media-core": "^32.3.1",
-    "@atlaskit/smart-card": "^18.0.18",
+    "@atlaskit/media-core": "^33.0.0",
+    "@atlaskit/smart-card": "^19.1.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
@@ -66,18 +67,18 @@
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^164.0.0",
+    "@atlaskit/editor-core": "^166.0.0",
     "@atlaskit/editor-test-helpers": "^17.0.0",
-    "@atlaskit/logo": "^13.5.0",
-    "@atlaskit/media-core": "^32.3.0",
+    "@atlaskit/logo": "^13.6.0",
+    "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
-    "@atlaskit/media-test-helpers": "^29.4.0",
+    "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
     "@atlaskit/profilecard": "^16.4.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/smart-card": "^18.0.0",
+    "@atlaskit/smart-card": "^19.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlaskit/visual-regression": "*",
@@ -101,5 +102,10 @@
     "typescript": "4.2.4",
     "worker-plugin": "^4.0.2"
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  }
 }