@atlaskit/renderer 82.1.0 → 84.1.0

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.headingSizes = exports.FullPagePadding = void 0;
+exports.headingSizes = exports.Wrapper = exports.FullPagePadding = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,9 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _typography = require("@atlaskit/theme/typography");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -92,7 +94,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(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
-  return "\n    .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(_editorCommon.tableCellPadding, "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: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
+  return "\n    .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(_styles.tableCellPadding, "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: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
 };
 
 var fullPageStyles = function fullPageStyles(_ref3) {
@@ -117,16 +119,16 @@ var fullWidthStyles = function fullWidthStyles(_ref4) {
 }; // prettier-ignore
 
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\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 + .", ":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 + .rich-media-wrapped + *: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\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    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    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, &.", "::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, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\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    border-bottom: 1px solid ", ";\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, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 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      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"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\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\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 + .", ":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 + .rich-media-wrapped + *: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\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    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    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, &.", "::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, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\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    border-bottom: 1px solid ", ";\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, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 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, .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"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
   light: colors.N800,
   dark: '#B8C7E0'
-}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _editorCommon.whitespaceSharedStyles, _editorCommon.blockquoteSharedStyles, _editorCommon.headingsSharedStyles, _editorCommon.panelSharedStyles, _editorCommon.ruleSharedStyles, _editorCommon.paragraphSharedStyles, _editorCommon.listsSharedStyles, _editorCommon.indentationSharedStyles, _editorCommon.blockMarksSharedStyles, _editorCommon.codeMarkSharedStyles, _editorCommon.shadowSharedStyle, _editorCommon.dateSharedStyle, _editorCommon.tasksAndDecisionsStyles, _editorCommon.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, _styles.headingsSharedStyles, _styles.panelSharedStyles, _styles.ruleSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, _styles.codeMarkSharedStyles, _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
   light: colors.N30A,
   dark: colors.DN70
 }), (0, _constants.borderRadius)(), (0, _components.themed)({
   light: colors.N800,
   dark: colors.DN600
-}), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, _editorCommon.richMediaClassName, alignedHeadingAnchorStyle, _editorCommon.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _editorCommon.TableSharedCssClassName.TABLE_NODE_WRAPPER, _editorCommon.tableSharedStyle, _editorCommon.TableSharedCssClassName.TABLE_CONTAINER, _editorCommon.shadowClassNames.RIGHT_SHADOW, _editorCommon.shadowClassNames.LEFT_SHADOW, _editorCommon.tableMarginTop - 1, _editorCommon.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle, _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+}), colors.R50, colors.R500, (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle, _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _styles.tableSharedStyle, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, tableSortableColumnStyle, _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
   light: _editorSharedStyles.akEditorTableToolbar,
   dark: _editorSharedStyles.akEditorTableToolbarDark
 }), (0, _components.themed)({
@@ -153,6 +155,6 @@ var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject
 }), (0, _components.themed)({
   light: _editorSharedStyles.akEditorTableToolbar,
   dark: _editorSharedStyles.akEditorTableToolbarDark
-}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorCommon.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
+}), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
 
 exports.Wrapper = Wrapper;

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RendererActionsContext = RendererActionsContext;
-exports.RendererActionsContextConsumer = exports.RendererContext = void 0;
+exports.RendererContext = exports.RendererActionsContextConsumer = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 

package/dist/cjs/ui/SortingIcon.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StatusClassNames = exports.TableSortIconDataUrl = void 0;
+exports.default = exports.TableSortIconDataUrl = exports.StatusClassNames = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -41,7 +41,7 @@ exports.StatusClassNames = StatusClassNames;
 
 var Wrapper = _styledComponents.default.figure(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.gridSize)() / 2, _colors.N20, _colors.N30, StatusClassNames.SORTING_NOT_ALLOWED);
 
-var TableSortingIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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.5;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
+var TableSortingIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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) {
   switch (status) {

package/dist/cjs/ui/active-header-id-provider.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ActiveHeaderIdConsumer = exports.ActiveHeaderIdProvider = void 0;
+exports.ActiveHeaderIdProvider = exports.ActiveHeaderIdConsumer = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/dist/cjs/ui/annotations/context.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnnotationsDraftContextWrapper = exports.InlineCommentsStateContext = exports.ProvidersContext = exports.AnnotationsDraftContext = void 0;
+exports.ProvidersContext = exports.InlineCommentsStateContext = exports.AnnotationsDraftContextWrapper = exports.AnnotationsDraftContext = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextWithAnnotationDraft = exports.applyAnnotationOnText = exports.getAnnotationIndex = exports.AnnotationDraft = void 0;
+exports.getAnnotationIndex = exports.applyAnnotationOnText = exports.TextWithAnnotationDraft = exports.AnnotationDraft = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -83,7 +83,7 @@ exports.applyAnnotationOnText = applyAnnotationOnText;
 var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var startPos = _ref3.startPos,
       endPos = _ref3.endPos,
-      text = _ref3.text;
+      children = _ref3.children;
 
   var textPosition = _react.default.useMemo(function () {
     return {
@@ -103,21 +103,21 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, text);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === _types.InsertDraftPosition.AROUND_TEXT) {
     return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
-    }, text);
+    }, children);
   }
 
-  var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition, text);
-  var texts = (0, _text.splitText)(text, offsets);
+  var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition, children);
+  var texts = (0, _text.splitText)(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, text);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
   }
 
   var components = applyAnnotationOnText({

package/dist/cjs/ui/annotations/draft/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "updateWindowSelectionAroundDraft", {
+Object.defineProperty(exports, "TextWithAnnotationDraft", {
   enumerable: true,
   get: function get() {
-    return _dom.updateWindowSelectionAroundDraft;
+    return _component.TextWithAnnotationDraft;
   }
 });
-Object.defineProperty(exports, "TextWithAnnotationDraft", {
+Object.defineProperty(exports, "updateWindowSelectionAroundDraft", {
   enumerable: true,
   get: function get() {
-    return _component.TextWithAnnotationDraft;
+    return _dom.updateWindowSelectionAroundDraft;
   }
 });
 

package/dist/cjs/ui/annotations/draft/text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calcTextSplitOffset = exports.splitText = void 0;
+exports.splitText = exports.calcTextSplitOffset = void 0;
 
 var splitText = function splitText(text, _ref) {
   var startOffset = _ref.startOffset,

package/dist/cjs/ui/annotations/hooks/index.js

@@ -3,22 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useHasFocusEvent", {
-  enumerable: true,
-  get: function get() {
-    return _useEvents.useHasFocusEvent;
-  }
-});
 Object.defineProperty(exports, "useAnnotationClickEvent", {
   enumerable: true,
   get: function get() {
     return _useEvents.useAnnotationClickEvent;
   }
 });
-Object.defineProperty(exports, "useInlineCommentsFilter", {
+Object.defineProperty(exports, "useHasFocusEvent", {
   enumerable: true,
   get: function get() {
-    return _useInlineCommentsFilter.useInlineCommentsFilter;
+    return _useEvents.useHasFocusEvent;
   }
 });
 Object.defineProperty(exports, "useInlineCommentSubscriberContext", {
@@ -27,6 +21,12 @@ Object.defineProperty(exports, "useInlineCommentSubscriberContext", {
     return _useInlineCommentSubscriber.useInlineCommentSubscriberContext;
   }
 });
+Object.defineProperty(exports, "useInlineCommentsFilter", {
+  enumerable: true,
+  get: function get() {
+    return _useInlineCommentsFilter.useInlineCommentsFilter;
+  }
+});
 
 var _useEvents = require("./use-events");
 

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useAnnotationClickEvent = exports.useHasFocusEvent = exports.useAnnotationStateByTypeEvent = void 0;
+exports.useHasFocusEvent = exports.useAnnotationStateByTypeEvent = exports.useAnnotationClickEvent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -46,7 +46,9 @@ var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEvent(_ref)
 
       var nextStates = Object.values(payload).reduce(function (acc, curr) {
         if (curr.annotationType === type) {
-          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, curr.state));
+          // Check for empty state to prevent additional renders
+          var isEmpty = curr.state === null || curr.state === undefined;
+          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, !isEmpty ? curr.state : states[curr.id]));
         }
 
         return acc;

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

@@ -5,19 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TextWithAnnotationDraft", {
+Object.defineProperty(exports, "AnnotationMark", {
   enumerable: true,
   get: function get() {
-    return _draft.TextWithAnnotationDraft;
+    return _element.MarkElement;
   }
 });
-Object.defineProperty(exports, "AnnotationMark", {
+exports.AnnotationsWrapper = void 0;
+Object.defineProperty(exports, "TextWithAnnotationDraft", {
   enumerable: true,
   get: function get() {
-    return _element.MarkElement;
+    return _draft.TextWithAnnotationDraft;
   }
 });
-exports.AnnotationsWrapper = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/cjs/utils.js

@@ -5,9 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ADFEncoder = void 0;
 exports.findHorizontalOverflowScrollParent = findHorizontalOverflowScrollParent;
 exports.findInTree = findInTree;
-exports.getPlatform = exports.getEventHandler = exports.getText = exports.ADFEncoder = void 0;
+exports.getText = exports.getPlatform = exports.getEventHandler = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/version.json

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

package/dist/es2019/analytics/enums.js

@@ -13,6 +13,7 @@ export let ACTION;
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
   ACTION["CRASHED"] = "unhandledErrorCaught";
+  ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";
   ACTION["SELECT_ALL_ESCAPED"] = "selectAllEscaped";
   ACTION["CLICKED"] = "clicked";

package/dist/es2019/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const headingAnchorLinkMessages = defineMessages({
   copyHeadingLinkToClipboard: {
     id: 'fabric.editor.headingLink.copyAnchorLink',

package/dist/es2019/react/index.js

@@ -10,6 +10,7 @@ import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/ed
 import { getText } from '../utils';
 import { findChildrenByType } from 'prosemirror-utils';
 import { insideBreakoutLayout } from './renderer-node';
+import { isCodeMark } from './marks/code';
 
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
@@ -128,13 +129,23 @@ export default class ReactSerializer {
       } = mark.attrs;
       const extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
-      };
+      }; // currently the only mark which has custom props is the code mark
+
+      const markSpecificProps = isCodeMark(mark) ? {
+        // The appearance being mobile indicates we are in an renderer being
+        // rendered by mobile bridge in a web view.
+        // The tooltip is likely to have unexpected behaviour there, with being cut
+        // off, so we disable it. This is also to keep the behaviour consistent with
+        // the rendering in the mobile Native Renderer.
+        codeBidiWarningTooltipEnabled: this.appearance !== 'mobile'
+      } : {};
       const props = {
         eventHandlers: this.eventHandlers,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         markKey: key,
         ...otherAttrs,
         ...extraProps,
+        ...markSpecificProps,
         dataAttributes: {
           'data-renderer-mark': true
         }
@@ -299,9 +310,8 @@ export default class ReactSerializer {
       return /*#__PURE__*/React.createElement(TextWrapperComponent, {
         key: textKey,
         startPos: startPos + parentDepth,
-        endPos: endPos + parentDepth,
-        text: mark.text
-      });
+        endPos: endPos + parentDepth
+      }, mark.text);
     }
 
     return mark.text || '';
@@ -369,6 +379,8 @@ export default class ReactSerializer {
   }
 
   getMediaProps(node, path = []) {
+    var _this$media;
+
     const {
       marks: {
         link
@@ -382,7 +394,8 @@ export default class ReactSerializer {
       isLinkMark,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
-      shouldOpenMediaViewer: this.shouldOpenMediaViewer
+      shouldOpenMediaViewer: this.shouldOpenMediaViewer,
+      ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr
     };
   }
 
@@ -403,13 +416,14 @@ export default class ReactSerializer {
   }
 
   getMediaGroupProps(node) {
-    var _this$media;
+    var _this$media2, _this$media3;
 
     return { ...this.getProps(node),
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
-      enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
+      enableDownloadButton: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableDownloadButton,
+      ssr: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.ssr
     };
   }
 
@@ -438,8 +452,15 @@ export default class ReactSerializer {
   }
 
   getCodeBlockProps(node) {
+    // The appearance being mobile indicates we are in an renderer being
+    // rendered by mobile bridge in a web view.
+    // The tooltip is likely to have unexpected behaviour there, with being cut
+    // off, so we disable it. This is also to keep the behaviour consistent with
+    // the rendering in the mobile Native Renderer.
+    const codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
     return { ...this.getProps(node),
-      text: node.textContent
+      text: node.textContent,
+      codeBidiWarningTooltipEnabled
     };
   }
 

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

@@ -1,16 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import AkCode from '@atlaskit/code/inline';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
+export const isCodeMark = mark => {
+  return mark && mark.type && mark.type.name === 'code';
+};
 export function CodeWithIntl(props) {
   const featureFlags = useFeatureFlags();
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   return /*#__PURE__*/React.createElement(AkCode, _extends({
     className: "code",
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
-    codeBidiWarningLabel: codeBidiWarningLabel
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
   }, props.dataAttributes), props.children);
 }
 export default injectIntl(CodeWithIntl);

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

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+export default function FragmentMark(props) {
+  const WrapperElement = props.isInline ? 'span' : 'div';
+  return /*#__PURE__*/React.createElement(WrapperElement, _extends({
+    "data-localId": props.localId,
+    "data-name": props.name,
+    "data-mark-type": "fragment"
+  }, props.dataAttributes), props.children);
+}

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

@@ -12,6 +12,7 @@ import Indentation from './indentation';
 import UnsupportedMark from './unsupportedMark';
 import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
+import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation'; // Stage0
 
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -32,9 +33,10 @@ export const markToReact = {
   indentation: Indentation,
   unsupportedMark: UnsupportedMark,
   unsupportedNodeAttribute: UnsupportedNodeAttribute,
-  dataConsumer: DataConsumer
+  dataConsumer: DataConsumer,
+  fragment: FragmentMark
 };
 export const toReact = mark => {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

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

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 export default function TextColor(props) {
+  const style = useMemo(() => ({
+    ['--custom-text-color']: props.color
+  }), [props.color]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    style: {
-      color: props.color
-    }
+    "data-text-custom-color": props.color,
+    className: "fabric-text-color-mark",
+    style: style
   }), props.children);
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -14,7 +14,8 @@ function CodeBlock(props) {
   const {
     text,
     language,
-    allowCopyToClipboard = false
+    allowCopyToClipboard = false,
+    codeBidiWarningTooltipEnabled
   } = props;
   const featureFlags = useFeatureFlags();
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
@@ -27,7 +28,8 @@ function CodeBlock(props) {
     language: language,
     text: text,
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
-    codeBidiWarningLabel: codeBidiWarningLabel
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));
 }
 

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PureComponent } from 'react';
 import { isPastDate, timestampToString, timestampToTaskContext, DateSharedCssClassName } from '@atlaskit/editor-common';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 
 class Date extends PureComponent {
   render() {

package/dist/es2019/react/nodes/heading-anchor.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { N200, N500, B400 } from '@atlaskit/theme/colors';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
 export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {

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

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import HeadingAnchor from './heading-anchor';
-import Url from 'url-parse';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics/enums';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { CopyTextConsumer } from './copy-text-provider';
 
 const getCurrentUrlWithHash = (hash = '') => {
-  const url = new Url(window.location.href);
-  url.set('hash', encodeURIComponent(hash));
+  const url = new URL(window.location.href);
+  url.hash = encodeURIComponent(hash);
   return url.href;
 };
 

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

@@ -21,7 +21,8 @@ export default class Media extends PureComponent {
         alt,
         featureFlags,
         shouldOpenMediaViewer: allowMediaViewer,
-        enableDownloadButton
+        enableDownloadButton,
+        ssr
       } = this.props;
       const linkMark = this.props.marks.find(this.props.isLinkMark);
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
@@ -35,7 +36,8 @@ export default class Media extends PureComponent {
         eventHandlers: eventHandlers,
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: enableDownloadButton
+        shouldEnableDownloadButton: enableDownloadButton,
+        ssr: ssr
       }));
       return linkHref ? /*#__PURE__*/React.createElement(MediaLink, {
         href: linkHref,

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { mapBreakpointToLayoutMaxWidth, WidthConsumer } from '@atlaskit/editor-common';
 import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { Component, default as React } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { ExtendedUIMediaSingle } from './styles';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';