@atlaskit/renderer 82.2.0 → 83.0.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/renderer
 
+## 83.0.0
+
+### Major Changes
+
+- [`0cf5fa82add`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0cf5fa82add) - CETI-20 Rename custom panel FF from `UNSAFE_allowCustomPanel` to `allowCustomPanel`
+
+### Minor Changes
+
+- [`c890a025f6c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c890a025f6c) - Fix annotations state from being set to null when adding a new inline comment
+- [`23514411f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/23514411f27) - CETI-134 added support to render dark colors for the custom panels in the dark mode
+- [`8bbb96540ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8bbb96540ea) - Add "fragment" mark to stage0 ADF schema
+- [`a3737a9b3aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3737a9b3aa) - CETI-64 Updating the dark mode colors for the standard panels
+- [`d4643be4f2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4643be4f2d) - [ux] AK-551 Add focus outline on code block copy button
+
+### Patch Changes
+
+- [`c6feed82071`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6feed82071) - ED-11632: Bump prosemirror packages;
+
+  - prosmirror-commands 1.1.4 -> 1.1.11,
+  - prosemirror-model 1.11.0 -> 1.14.3,
+  - prosemirror-state 1.3.3 -> 1.3.4,
+  - prosemirror-transform 1.2.8 -> 1.3.2,
+  - prosemirror-view 1.15.4 + 1.18.8 -> 1.20.2.
+
+- [`fc70978492a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc70978492a) - Using type for SSR prop to reduce dependency on media-common
+- [`e741804b52a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e741804b52a) - Fixed media nodes not being built synchronously on SSR
+- [`dd7db18ab6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd7db18ab6a) - ED-13854 Replace url-parser library with native function
+- [`f461edcfd05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f461edcfd05) - Update CardLoader to use react-loadable
+  Add SSR feature prop to be passed in renderer and media card
+- [`577302c5331`](https://bitbucket.org/atlassian/atlassian-frontend/commits/577302c5331) - Column sorting button meets the minimum contrast requirement
+- [`a82305310db`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a82305310db) - [ux] ED-7449: Sort cells in a given table column based on case sensitivity of same letter then on alphabet+ascii code values
+- [`9d43feb1f6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d43feb1f6a) - CETI-167 Remove opacity for panels in dark mode.
+- Updated dependencies
+
 ## 82.2.0
 
 ### Minor Changes

package/dist/cjs/react/index.js

@@ -439,7 +439,8 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaProps",
     value: function getMediaProps(node) {
-      var _this6 = this;
+      var _this6 = this,
+          _this$media;
 
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var link = node.type.schema.marks.link;
@@ -455,7 +456,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         isLinkMark: 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
       });
     }
   }, {
@@ -482,13 +484,14 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {
-      var _this$media;
+      var _this$media2, _this$media3;
 
       return _objectSpread(_objectSpread({}, 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
       });
     }
   }, {

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FragmentMark;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function FragmentMark(props) {
+  var WrapperElement = props.isInline ? 'span' : 'div';
+  return /*#__PURE__*/_react.default.createElement(WrapperElement, (0, _extends2.default)({
+    "data-localId": props.localId,
+    "data-name": props.name,
+    "data-mark-type": "fragment"
+  }, props.dataAttributes), props.children);
+}

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

@@ -79,6 +79,12 @@ Object.defineProperty(exports, "DataConsumer", {
     return _dataConsumer.default;
   }
 });
+Object.defineProperty(exports, "FragmentMark", {
+  enumerable: true,
+  get: function get() {
+    return _fragment.default;
+  }
+});
 Object.defineProperty(exports, "Annotation", {
   enumerable: true,
   get: function get() {
@@ -121,6 +127,8 @@ var _unsupportedNodeAttribute = _interopRequireDefault(require("./unsupportedNod
 
 var _dataConsumer = _interopRequireDefault(require("./data-consumer"));
 
+var _fragment = _interopRequireDefault(require("./fragment"));
+
 var _annotation = _interopRequireWildcard(require("./annotation"));
 
 var _confluenceInlineComment = _interopRequireDefault(require("./confluence-inline-comment"));
@@ -147,7 +155,8 @@ var markToReact = {
   indentation: _indentation.default,
   unsupportedMark: _unsupportedMark.default,
   unsupportedNodeAttribute: _unsupportedNodeAttribute.default,
-  dataConsumer: _dataConsumer.default
+  dataConsumer: _dataConsumer.default,
+  fragment: _fragment.default
 };
 exports.markToReact = markToReact;
 

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

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _headingAnchor = _interopRequireDefault(require("./heading-anchor"));
 
-var _urlParse = _interopRequireDefault(require("url-parse"));
-
 var _enums = require("../../analytics/enums");
 
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
@@ -23,8 +21,8 @@ var _copyTextProvider = require("./copy-text-provider");
 
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var url = new _urlParse.default(window.location.href);
-  url.set('hash', encodeURIComponent(hash));
+  var url = new URL(window.location.href);
+  url.hash = encodeURIComponent(hash);
   return url.href;
 };
 

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

@@ -69,7 +69,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           alt = _this$props.alt,
           featureFlags = _this$props.featureFlags,
           allowMediaViewer = _this$props.shouldOpenMediaViewer,
-          enableDownloadButton = _this$props.enableDownloadButton;
+          enableDownloadButton = _this$props.enableDownloadButton,
+          ssr = _this$props.ssr;
 
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
 
@@ -85,7 +86,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         eventHandlers: eventHandlers,
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: enableDownloadButton
+        shouldEnableDownloadButton: enableDownloadButton,
+        ssr: ssr
       }));
 
       return linkHref ? /*#__PURE__*/_react.default.createElement(_editorCommon.MediaLink, {

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

@@ -40,14 +40,12 @@ var _templateObject;
 var PanelStyled = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
   if (props['data-panel-type'] !== _adfSchema.PanelType.CUSTOM || !props.backgroundColor) {
     return '';
-  }
+  } // Similar to mainDynamicStyles()
 
-  var border = (0, _theme.themed)({
-    light: 'none',
-    dark: "1px solid rgba(255, 255, 255, 0.4)"
-  })(props); // Similar to mainDynamicStyles()
 
-  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        border: ").concat(border, ";\n      }\n    ");
+  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat((0, _theme.themed)({
+    dark: _editorCommon.getPanelBackgroundDarkModeColors
+  }), ";\n      }\n    ");
 });
 
 var panelIcons = {

package/dist/cjs/ui/MediaCard.js

@@ -290,7 +290,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
           imageStatus = _this$props4.imageStatus,
           disableOverlay = _this$props4.disableOverlay,
           alt = _this$props4.alt,
-          featureFlags = _this$props4.featureFlags;
+          featureFlags = _this$props4.featureFlags,
+          ssr = _this$props4.ssr;
 
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
@@ -315,7 +316,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         mediaViewerDataSource: {
           list: Array.from(mediaIdentifierMap.values())
         },
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
       });
     }
     /**
@@ -330,7 +332,7 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$state = this.state,
           contextIdentifierProvider = _this$state.contextIdentifierProvider,
-          mediaClientConfig = _this$state.mediaClientConfig,
+          mediaClientConfigInState = _this$state.mediaClientConfig,
           fileState = _this$state.fileState;
       var _this$props5 = this.props,
           id = _this$props5.id,
@@ -346,7 +348,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
           originalDimensions = _this$props5.originalDimensions,
           forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
           featureFlags = _this$props5.featureFlags,
-          shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton;
+          shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
+          ssr = _this$props5.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -361,6 +364,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
         return null;
       }
 
+      var mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+
       if (!mediaClientConfig || !id) {
         return this.renderLoadingCard();
       }
@@ -402,7 +407,8 @@ var MediaCardInternal = /*#__PURE__*/function (_Component) {
           list: Array.from(mediaIdentifierMap.values())
         },
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: shouldEnableDownloadButton
+        shouldEnableDownloadButton: shouldEnableDownloadButton,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
       }));
     }
   }]);

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

@@ -223,7 +223,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
 
-      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowCustomPanels !== this.props.allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new _.ReactSerializer(this.deriveSerializerProps(nextProps));
       }
     }
@@ -257,7 +257,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
         media: props.media,
         allowCopyToClipboard: props.allowCopyToClipboard,
-        allowCustomPanels: props.UNSAFE_allowCustomPanels,
+        allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,
         allowSelectAllTrap: props.allowSelectAllTrap,
         allowPlaceholderText: props.allowPlaceholderText
@@ -283,7 +283,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText = _this$props2.allowPlaceholderText,
           allowColumnSorting = _this$props2.allowColumnSorting,
           allowCopyToClipboard = _this$props2.allowCopyToClipboard,
-          UNSAFE_allowCustomPanels = _this$props2.UNSAFE_allowCustomPanels;
+          allowCustomPanels = _this$props2.allowCustomPanels;
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -358,7 +358,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
           allowCopyToClipboard: allowCopyToClipboard,
-          allowCustomPanels: UNSAFE_allowCustomPanels,
+          allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,

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

@@ -117,7 +117,7 @@ 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  & .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)({

package/dist/cjs/ui/SortingIcon.js

@@ -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/annotations/hooks/use-events.js

@@ -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/version.json

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

package/dist/es2019/react/index.js

@@ -379,6 +379,8 @@ export default class ReactSerializer {
   }
 
   getMediaProps(node, path = []) {
+    var _this$media;
+
     const {
       marks: {
         link
@@ -392,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
     };
   }
 
@@ -413,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
     };
   }
 

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/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/panel.js

@@ -13,21 +13,20 @@ import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions be
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
+import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common';
 const PanelStyled = styled.div`
   ${props => {
   if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
     return '';
-  }
+  } // Similar to mainDynamicStyles()
 
-  const border = themed({
-    light: 'none',
-    dark: `1px solid rgba(255, 255, 255, 0.4)`
-  })(props); // Similar to mainDynamicStyles()
 
   return `
       &[data-panel-type=${PanelType.CUSTOM}] {
         background-color: ${props.backgroundColor};
-        border: ${border};
+        ${themed({
+    dark: getPanelBackgroundDarkModeColors
+  })};
       }
     `;
 }}

package/dist/es2019/ui/MediaCard.js

@@ -174,7 +174,8 @@ export class MediaCardInternal extends Component {
       imageStatus,
       disableOverlay,
       alt,
-      featureFlags
+      featureFlags,
+      ssr
     } = this.props;
 
     if (imageStatus === 'loading' || !url) {
@@ -200,7 +201,8 @@ export class MediaCardInternal extends Component {
       mediaViewerDataSource: {
         list: Array.from(mediaIdentifierMap.values())
       },
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     });
   }
   /**
@@ -214,7 +216,7 @@ export class MediaCardInternal extends Component {
   render() {
     const {
       contextIdentifierProvider,
-      mediaClientConfig,
+      mediaClientConfig: mediaClientConfigInState,
       fileState
     } = this.state;
     const {
@@ -231,7 +233,8 @@ export class MediaCardInternal extends Component {
       originalDimensions,
       shouldOpenMediaViewer: forceOpenMediaViewer,
       featureFlags,
-      shouldEnableDownloadButton
+      shouldEnableDownloadButton,
+      ssr
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -247,6 +250,8 @@ export class MediaCardInternal extends Component {
       return null;
     }
 
+    const mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+
     if (!mediaClientConfig || !id) {
       return this.renderLoadingCard();
     }
@@ -288,7 +293,8 @@ export class MediaCardInternal extends Component {
         list: Array.from(mediaIdentifierMap.values())
       },
       featureFlags: featureFlags,
-      shouldEnableDownloadButton: shouldEnableDownloadButton
+      shouldEnableDownloadButton: shouldEnableDownloadButton,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     }));
   }
 

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

@@ -147,7 +147,7 @@ export class Renderer extends PureComponent {
     const nextMedia = nextProps.media || {};
     const media = this.props.media || {};
 
-    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowCustomPanels !== this.props.allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
       this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
     }
   }
@@ -183,7 +183,7 @@ export class Renderer extends PureComponent {
       surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
       media: props.media,
       allowCopyToClipboard: props.allowCopyToClipboard,
-      allowCustomPanels: props.UNSAFE_allowCustomPanels,
+      allowCustomPanels: props.allowCustomPanels,
       allowAnnotations: props.allowAnnotations,
       allowSelectAllTrap: props.allowSelectAllTrap,
       allowPlaceholderText: props.allowPlaceholderText
@@ -206,7 +206,7 @@ export class Renderer extends PureComponent {
       allowPlaceholderText,
       allowColumnSorting,
       allowCopyToClipboard,
-      UNSAFE_allowCustomPanels
+      allowCustomPanels
     } = this.props;
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
     /**
@@ -280,7 +280,7 @@ export class Renderer extends PureComponent {
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
-        allowCustomPanels: UNSAFE_allowCustomPanels,
+        allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,

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

@@ -589,7 +589,7 @@ export const Wrapper = styled.div`
       margin-top: 0;
     }
 
-    &:hover button.copy-to-clipboard{
+    &:hover button.copy-to-clipboard, .copy-to-clipboard:focus{
       opacity: 1;
       position: absolute;
       height: 32px;

package/dist/es2019/ui/SortingIcon.js

@@ -52,7 +52,7 @@ const TableSortingIcon = styled.div`
   }
 
   &.${TABLE_SORTING_ICON_CLASS}-inactive {
-    opacity: 0.5;
+    opacity: 0.7;
   }
 `;
 

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

@@ -20,8 +20,10 @@ export const useAnnotationStateByTypeEvent = ({
 
       const nextStates = Object.values(payload).reduce((acc, curr) => {
         if (curr.annotationType === type) {
+          // Check for empty state to prevent additional renders
+          const isEmpty = curr.state === null || curr.state === undefined;
           return { ...acc,
-            [curr.id]: curr.state
+            [curr.id]: !isEmpty ? curr.state : states[curr.id]
           };
         }
 

package/dist/es2019/version.json

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

package/dist/esm/react/index.js

@@ -430,7 +430,8 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaProps",
     value: function getMediaProps(node) {
-      var _this6 = this;
+      var _this6 = this,
+          _this$media;
 
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var link = node.type.schema.marks.link;
@@ -446,7 +447,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         isLinkMark: 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
       });
     }
   }, {
@@ -473,13 +475,14 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {
-      var _this$media;
+      var _this$media2, _this$media3;
 
       return _objectSpread(_objectSpread({}, 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
       });
     }
   }, {

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

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+export default function FragmentMark(props) {
+  var 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/esm/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 var markToReact = {
   indentation: Indentation,
   unsupportedMark: UnsupportedMark,
   unsupportedNodeAttribute: UnsupportedNodeAttribute,
-  dataConsumer: DataConsumer
+  dataConsumer: DataConsumer,
+  fragment: FragmentMark
 };
 export var toReact = function 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/esm/react/nodes/heading.js

@@ -1,15 +1,14 @@
 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';
 
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var url = new Url(window.location.href);
-  url.set('hash', encodeURIComponent(hash));
+  var url = new URL(window.location.href);
+  url.hash = encodeURIComponent(hash);
   return url.href;
 };
 

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

@@ -44,7 +44,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           alt = _this$props.alt,
           featureFlags = _this$props.featureFlags,
           allowMediaViewer = _this$props.shouldOpenMediaViewer,
-          enableDownloadButton = _this$props.enableDownloadButton;
+          enableDownloadButton = _this$props.enableDownloadButton,
+          ssr = _this$props.ssr;
 
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
 
@@ -59,7 +60,8 @@ var Media = /*#__PURE__*/function (_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/esm/react/nodes/panel.js

@@ -17,17 +17,16 @@ import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions be
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
+import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common';
 var PanelStyled = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
   if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
     return '';
-  }
+  } // Similar to mainDynamicStyles()
 
-  var border = themed({
-    light: 'none',
-    dark: "1px solid rgba(255, 255, 255, 0.4)"
-  })(props); // Similar to mainDynamicStyles()
 
-  return "\n      &[data-panel-type=".concat(PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        border: ").concat(border, ";\n      }\n    ");
+  return "\n      &[data-panel-type=".concat(PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat(themed({
+    dark: getPanelBackgroundDarkModeColors
+  }), ";\n      }\n    ");
 });
 var panelIcons = {
   info: InfoIcon,

package/dist/esm/ui/MediaCard.js

@@ -262,7 +262,8 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
           imageStatus = _this$props4.imageStatus,
           disableOverlay = _this$props4.disableOverlay,
           alt = _this$props4.alt,
-          featureFlags = _this$props4.featureFlags;
+          featureFlags = _this$props4.featureFlags,
+          ssr = _this$props4.ssr;
 
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
@@ -287,7 +288,8 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         mediaViewerDataSource: {
           list: Array.from(mediaIdentifierMap.values())
         },
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
       });
     }
     /**
@@ -302,7 +304,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$state = this.state,
           contextIdentifierProvider = _this$state.contextIdentifierProvider,
-          mediaClientConfig = _this$state.mediaClientConfig,
+          mediaClientConfigInState = _this$state.mediaClientConfig,
           fileState = _this$state.fileState;
       var _this$props5 = this.props,
           id = _this$props5.id,
@@ -318,7 +320,8 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
           originalDimensions = _this$props5.originalDimensions,
           forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
           featureFlags = _this$props5.featureFlags,
-          shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton;
+          shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
+          ssr = _this$props5.ssr;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -333,6 +336,8 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         return null;
       }
 
+      var mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+
       if (!mediaClientConfig || !id) {
         return this.renderLoadingCard();
       }
@@ -374,7 +379,8 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
           list: Array.from(mediaIdentifierMap.values())
         },
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: shouldEnableDownloadButton
+        shouldEnableDownloadButton: shouldEnableDownloadButton,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
       }));
     }
   }]);

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

@@ -174,7 +174,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
 
-      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowCustomPanels !== this.props.allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
       }
     }
@@ -208,7 +208,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
         media: props.media,
         allowCopyToClipboard: props.allowCopyToClipboard,
-        allowCustomPanels: props.UNSAFE_allowCustomPanels,
+        allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,
         allowSelectAllTrap: props.allowSelectAllTrap,
         allowPlaceholderText: props.allowPlaceholderText
@@ -234,7 +234,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText = _this$props2.allowPlaceholderText,
           allowColumnSorting = _this$props2.allowColumnSorting,
           allowCopyToClipboard = _this$props2.allowCopyToClipboard,
-          UNSAFE_allowCustomPanels = _this$props2.UNSAFE_allowCustomPanels;
+          allowCustomPanels = _this$props2.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 +309,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
           allowCopyToClipboard: allowCopyToClipboard,
-          allowCustomPanels: UNSAFE_allowCustomPanels,
+          allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,

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

@@ -91,7 +91,7 @@ var fullWidthStyles = function fullWidthStyles(_ref4) {
 }; // prettier-ignore
 
 
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), editorFontSize, themed({
+export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, .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, 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, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, panelSharedStyles, ruleSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({

package/dist/esm/ui/SortingIcon.js

@@ -23,7 +23,7 @@ export var StatusClassNames;
 })(StatusClassNames || (StatusClassNames = {}));
 
 var Wrapper = styled.figure(_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 TableSortingIcon = styled.div(_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.5;\n  }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
+var TableSortingIcon = styled.div(_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) {
   switch (status) {

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

@@ -31,7 +31,9 @@ export var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEven
 
       var nextStates = Object.values(payload).reduce(function (acc, curr) {
         if (curr.annotationType === type) {
-          return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, curr.id, curr.state));
+          // Check for empty state to prevent additional renders
+          var isEmpty = curr.state === null || curr.state === undefined;
+          return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, curr.id, !isEmpty ? curr.state : states[curr.id]));
         }
 
         return acc;

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -8,3 +8,4 @@ export type { RendererContext } from './react/types';
 export { ADFEncoder } from './utils';
 export { renderDocument } from './render-document';
 export type { RenderOutputStat } from './render-document';
+export type { MediaSSR } from './types/mediaOptions';

package/dist/types/react/marks/fragment.d.ts

@@ -0,0 +1,3 @@
+import { FragmentAttributes } from '@atlaskit/adf-schema';
+import { MarkProps } from '../types';
+export default function FragmentMark(props: MarkProps<FragmentAttributes>): JSX.Element;

package/dist/types/react/marks/index.d.ts

@@ -12,9 +12,10 @@ import Breakout from './breakout';
 import UnsupportedMark from './unsupportedMark';
 import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
+import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
 export declare const markToReact: {
     [key: string]: ComponentType<any>;
 };
 export declare const toReact: (mark: Mark) => ComponentType<any>;
-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/types/types/mediaOptions.d.ts

@@ -1,6 +1,12 @@
-import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { MediaClientConfig } from '@atlaskit/media-core';
+import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
+export declare type MediaSSR = {
+    mode: SSR;
+    config: MediaClientConfig;
+};
 export interface MediaOptions {
     allowLinking?: boolean;
     enableDownloadButton?: boolean;
     featureFlags?: MediaFeatureFlags;
+    ssr?: MediaSSR;
 }

package/dist/types/ui/MediaCard.d.ts

@@ -9,6 +9,7 @@ import { ImageStatus, ContextIdentifierProvider } from '@atlaskit/editor-common'
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { RendererAppearance } from './Renderer/types';
 import { RendererContext } from '../react/types';
+import { MediaSSR } from '../types/mediaOptions';
 export declare type MediaProvider = {
     viewMediaClientConfig: MediaClientConfig;
 };
@@ -38,6 +39,7 @@ export interface MediaCardProps {
     alt?: string;
     featureFlags?: MediaFeatureFlags;
     shouldEnableDownloadButton?: boolean;
+    ssr?: MediaSSR;
 }
 export interface State {
     mediaClientConfig?: MediaClientConfig;

package/dist/types/ui/renderer-props.d.ts

@@ -38,7 +38,7 @@ export interface RendererProps {
     innerRef?: React.RefObject<HTMLDivElement>;
     useSpecBasedValidator?: boolean;
     allowCopyToClipboard?: boolean;
-    UNSAFE_allowCustomPanels?: boolean;
+    allowCustomPanels?: boolean;
     analyticsEventSeverityTracking?: {
         enabled: boolean;
         severityNormalThreshold: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "82.2.0",
+  "version": "83.0.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,23 +24,23 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^19.3.0",
-    "@atlaskit/adf-utils": "^14.3.0",
+    "@atlaskit/adf-schema": "^20.0.0",
+    "@atlaskit/adf-utils": "^14.4.0",
     "@atlaskit/analytics-listeners": "^8.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.3.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/code": "^14.3.0",
-    "@atlaskit/editor-common": "^60.3.0",
-    "@atlaskit/editor-json-transformer": "^8.6.0",
+    "@atlaskit/editor-common": "^61.0.0",
+    "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^1.6.0",
     "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/media-card": "^72.0.0",
+    "@atlaskit/media-card": "^72.1.0",
     "@atlaskit/media-client": "^14.3.0",
-    "@atlaskit/media-common": "^2.9.0",
+    "@atlaskit/media-common": "^2.10.0",
     "@atlaskit/media-filmstrip": "^42.1.0",
     "@atlaskit/media-viewer": "^45.8.0",
-    "@atlaskit/status": "^0.11.0",
+    "@atlaskit/status": "^0.12.0",
     "@atlaskit/task-decision": "^17.2.0",
     "@atlaskit/theme": "^12.0.0",
     "@atlaskit/tooltip": "^17.5.0",
@@ -48,17 +48,16 @@
     "@babel/runtime": "^7.0.0",
     "lodash": "^4.17.15",
     "memoize-one": "^6.0.0",
-    "prosemirror-model": "1.11.0",
-    "prosemirror-transform": "1.2.8",
+    "prosemirror-model": "1.14.3",
+    "prosemirror-transform": "1.3.2",
     "prosemirror-utils": "^1.0.0-0",
     "react-intl": "^2.6.0",
     "react-loadable": "^5.1.0",
-    "url-parse": "^1.4.5",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/smart-card": "^16.2.0",
+    "@atlaskit/smart-card": "^16.3.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^3.2.6"
@@ -67,22 +66,22 @@
     "@atlaskit/analytics-gas-types": "^5.0.5",
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/build-utils": "^2.6.2",
-    "@atlaskit/css-reset": "^6.2.0",
+    "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^151.2.0",
-    "@atlaskit/editor-test-helpers": "^15.5.0",
-    "@atlaskit/field-range": "^9.0.0",
+    "@atlaskit/editor-core": "^152.0.0",
+    "@atlaskit/editor-test-helpers": "^15.6.0",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/media-core": "^32.2.0",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^28.8.0",
+    "@atlaskit/media-test-helpers": "^28.9.0",
     "@atlaskit/mention": "^19.7.0",
     "@atlaskit/navigation-next": "^9.0.0",
     "@atlaskit/profilecard": "^15.8.0",
     "@atlaskit/radio": "^5.3.0",
-    "@atlaskit/smart-card": "^16.2.0",
-    "@atlaskit/ssr": "^0.2.0",
-    "@atlaskit/util-data-test": "^16.0.0",
+    "@atlaskit/range": "^5.0.11",
+    "@atlaskit/smart-card": "^16.3.0",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/util-data-test": "^17.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",