@atlaskit/renderer 82.0.0 → 84.0.0

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

@@ -17,10 +17,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { useContext, useLayoutEffect, useRef } from 'react';
 import { PureComponent } from 'react';
-import { IntlProvider } from 'react-intl';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema';
 import { reduce } from '@atlaskit/adf-utils';
-import { UnsupportedBlock, ProviderFactory, BaseTheme, WidthProvider, getAnalyticsAppearance, getAnalyticsEventSeverity, WithCreateAnalyticsEvent, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common';
+import { UnsupportedBlock, ProviderFactory, BaseTheme, WidthProvider, getAnalyticsAppearance, getAnalyticsEventSeverity, WithCreateAnalyticsEvent, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, IntlNextErrorBoundary, LegacyToNextIntlProvider, IntlLegacyFallbackProvider } from '@atlaskit/editor-common';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { IframeWidthObserverFallbackWrapper, IframeWrapperConsumer } from '@atlaskit/width-detector';
@@ -174,7 +173,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 +207,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 +233,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
@@ -297,7 +296,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           value: this.featureFlags(this.props.featureFlags)
         }, /*#__PURE__*/React.createElement(CopyTextProvider, null, /*#__PURE__*/React.createElement(ActiveHeaderIdProvider, {
           value: getActiveHeadingId(allowHeadingAnchorLinks)
-        }, /*#__PURE__*/React.createElement(IntlProvider, null, /*#__PURE__*/React.createElement(AnalyticsContext.Provider, {
+        }, /*#__PURE__*/React.createElement(LegacyToNextIntlProvider, null, /*#__PURE__*/React.createElement(IntlLegacyFallbackProvider, null, /*#__PURE__*/React.createElement(AnalyticsContext.Provider, {
           value: {
             fireAnalyticsEvent: function fireAnalyticsEvent(event) {
               return _this3.fireAnalyticsEvent(event);
@@ -309,7 +308,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,
@@ -320,7 +319,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result))))))));
+        }, result)))))))));
         return truncated ? /*#__PURE__*/React.createElement(TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
@@ -371,14 +370,15 @@ var RendererWithAnalytics = /*#__PURE__*/React.memo(function (props) {
     }
   }, /*#__PURE__*/React.createElement(WithCreateAnalyticsEvent, {
     render: function render(createAnalyticsEvent) {
+      // `IntlNextErrorBoundary` only captures Internationalisation errors, leaving others for `ErrorBoundary`.
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.RENDERER,
         rethrowError: true,
         fallbackComponent: null,
         createAnalyticsEvent: createAnalyticsEvent
-      }, /*#__PURE__*/React.createElement(Renderer, _extends({}, props, {
+      }, /*#__PURE__*/React.createElement(IntlNextErrorBoundary, null, /*#__PURE__*/React.createElement(Renderer, _extends({}, props, {
         createAnalyticsEvent: createAnalyticsEvent
-      })));
+      }))));
     }
   }));
 });

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/draft/component.js

@@ -55,7 +55,7 @@ export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
 export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var startPos = _ref3.startPos,
       endPos = _ref3.endPos,
-      text = _ref3.text;
+      children = _ref3.children;
   var textPosition = React.useMemo(function () {
     return {
       start: startPos,
@@ -72,21 +72,21 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
     return /*#__PURE__*/React.createElement(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
-    }, text);
+    }, children);
   }
 
-  var offsets = calcTextSplitOffset(nextDraftPosition, textPosition, text);
-  var texts = splitText(text, offsets);
+  var offsets = calcTextSplitOffset(nextDraftPosition, textPosition, children);
+  var texts = splitText(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
 
   var components = applyAnnotationOnText({

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.0.0",
+	"version": "84.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/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Fragment, Mark, Node } from 'prosemirror-model';
 import { Serializer } from '../';
 import { RendererAppearance, StickyHeaderConfig, HeadingAnchorLinksProps } from '../ui/Renderer/types';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AlignmentAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
 export default function Alignment(props: MarkProps<AlignmentAttributes>): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MarkProps, AnnotationMarkMeta } from '../types';
 import { Mark } from 'prosemirror-model';
 export declare const isAnnotationMark: (mark: Mark) => boolean;

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

@@ -1,2 +1,16 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+import { Mark } from 'prosemirror-model';
 import type { MarkProps } from '../types';
-export default function Code(props: MarkProps): JSX.Element;
+export declare const isCodeMark: (mark: Mark) => boolean;
+export declare function CodeWithIntl(props: MarkProps<{
+    codeBidiWarningTooltipEnabled: boolean;
+}> & WrappedComponentProps): JSX.Element;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<{
+    codeBidiWarningTooltipEnabled: boolean;
+} & import("../types").MarkMeta & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<{
+        codeBidiWarningTooltipEnabled: boolean;
+    } & import("../types").MarkMeta & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/react/marks/data-consumer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataConsumerAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
 export default function DataConsumer(props: MarkProps<DataConsumerAttributes>): JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MarkProps } from '../types';
 export default function Em(props: MarkProps): JSX.Element;

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

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IndentationMarkAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
 export default function Indentation(props: MarkProps<IndentationMarkAttributes>): 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/react/marks/link.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LinkAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
 interface LinkProps extends LinkAttributes {

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MarkProps } from '../types';
 export default function Strike(props: MarkProps): JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MarkProps } from '../types';
 export default function Strong(props: MarkProps): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SubSupAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
 export default function SubSup(props: MarkProps<SubSupAttributes>): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TextColorAttributes } from '@atlaskit/adf-schema';
 import { MarkProps } from '../types';
 export default function TextColor(props: MarkProps<TextColorAttributes>): JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MarkProps } from '../types';
 export default function Underline(props: MarkProps): JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MarkProps } from '../types';
 export default function UnsupportedMark(props: MarkProps): JSX.Element;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MarkProps } from '../types';
 export default function UnsupportedNodeAttribute(props: MarkProps): JSX.Element;

package/dist/types/react/nodes/blockCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EventHandlers } from '@atlaskit/editor-common';
 import { RendererAppearance } from '../../ui/Renderer/types';
 export default function BlockCard(props: {

package/dist/types/react/nodes/caption.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NodeProps } from '../types';
 declare const RenderCaption: ({ children, dataAttributes }: NodeProps) => JSX.Element;
 export default RenderCaption;

package/dist/types/react/nodes/codeBlock.d.ts

@@ -1,15 +1,24 @@
+import React from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
 import { SupportedLanguages } from '@atlaskit/code';
 export interface Props {
     text: string;
     language: SupportedLanguages;
     allowCopyToClipboard?: boolean;
+    codeBidiWarningTooltipEnabled: boolean;
     className?: string;
 }
-declare const _default: import("styled-components").StyledComponentClass<(Props & import("@atlaskit/theme").AtlaskitThemeProps) | (Props & import("@atlaskit/theme").CustomThemeProps) | (Props & import("@atlaskit/theme").NoThemeProps), any, (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+declare const _default: import("styled-components").StyledComponentClass<(Pick<Props & WrappedComponentProps<"intl">, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
+    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<Props & WrappedComponentProps<"intl">, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
+    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+} & import("@atlaskit/theme").CustomThemeProps) | (Pick<Props & WrappedComponentProps<"intl">, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
+    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+} & import("@atlaskit/theme").NoThemeProps), any, (Pick<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
-} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
-} & import("@atlaskit/theme").CustomThemeProps) | (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
 } & import("@atlaskit/theme").NoThemeProps)>;
 export default _default;

package/dist/types/react/nodes/codeBlockCopyButton.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 declare type Props = {
     content: string;
 };
-declare const _default: React.ComponentClass<Props, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<Props & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/react/nodes/date.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     timestamp: string;
     parentIsIncompleteTask?: boolean;
 }
-declare const _default: React.ComponentClass<Props, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<Props & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/react/nodes/decisionItem.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { NodeProps } from '../types';
 export default function DecisionItem({ children, dataAttributes }: NodeProps): JSX.Element;

package/dist/types/react/nodes/doc.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export default function Doc(props: any): JSX.Element;
 export declare function DocWithSelectAllTrap(props: any): JSX.Element;

package/dist/types/react/nodes/embedCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EventHandlers } from '@atlaskit/editor-common';
 import { RichMediaLayout } from '@atlaskit/adf-schema';
 import { RendererAppearance } from '../../ui/Renderer/types';

package/dist/types/react/nodes/heading-anchor.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 export declare const HeadingAnchorWrapperClassName = "heading-anchor-wrapper";
 declare type Props = {
     onCopyText: () => Promise<void>;
     enableNestedHeaderLinks?: boolean;
     level: number;
 };
-declare type HeadingAnchorProps = Props & React.Props<any> & InjectedIntlProps;
-declare const _default: React.ComponentClass<Props & React.Props<any>, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<HeadingAnchorProps>;
+declare type HeadingAnchorProps = Props & React.Props<any> & WrappedComponentProps;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<HeadingAnchorProps>> & {
+    WrappedComponent: React.ComponentType<HeadingAnchorProps>;
 };
 export default _default;

package/dist/types/react/nodes/heading.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Node as PMNode } from 'prosemirror-model';
 import { NodeProps } from '../types';
 import { HeadingAnchorLinksProps } from '../../ui/Renderer/types';

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

@@ -26,22 +26,22 @@ import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
 import Loadable from 'react-loadable';
 import EmbedCard from './embedCard';
-declare const CodeBlock: (React.ComponentClass<import("styled-components").ThemedOuterStyledProps<(Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+declare const CodeBlock: (React.ComponentClass<import("styled-components").ThemedOuterStyledProps<(Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
-} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
-} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
-} & import("@atlaskit/theme").NoThemeProps), any>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("styled-components").ThemedOuterStyledProps<(Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+} & import("@atlaskit/theme").NoThemeProps), any>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("styled-components").ThemedOuterStyledProps<(Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
-} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
-} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
+} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("react-intl-next").WithIntlProps<import("./codeBlock").Props & import("react-intl-next").WrappedComponentProps<"intl">>, "text" | "className" | "forwardedRef" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
     theme?: any;
 } & import("@atlaskit/theme").NoThemeProps), any>> & Loadable.LoadableComponent);
 declare const TaskItem: (React.ComponentClass<import("../types").NodeProps<import("./taskItem").Props>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("../types").NodeProps<import("./taskItem").Props>> & Loadable.LoadableComponent);
 declare const DecisionItem: (React.ComponentClass<import("../types").NodeMeta, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("../types").NodeMeta> & Loadable.LoadableComponent);
-declare const Date: (React.ComponentClass<import("./date").Props, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./date").Props> & Loadable.LoadableComponent);
+declare const Date: (React.ComponentClass<import("react-intl-next").WithIntlProps<import("./date").Props & import("react-intl-next").WrappedComponentProps<"intl">>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("react-intl-next").WithIntlProps<import("./date").Props & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent);
 declare const Status: (React.ComponentClass<import("./status").Props, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./status").Props> & Loadable.LoadableComponent);
 declare const Emoji: (React.ComponentClass<import("./emoji").EmojiProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./emoji").EmojiProps> & Loadable.LoadableComponent);
 declare const InlineCard: (React.ComponentClass<Pick<import("./inlineCard").InlineCardProps & import("../../ui/SmartCardStorage").WithSmartCardStorageProps, "data" | "eventHandlers" | "url" | "portal">, any> & Loadable.LoadableComponent) | (React.FunctionComponent<Pick<import("./inlineCard").InlineCardProps & import("../../ui/SmartCardStorage").WithSmartCardStorageProps, "data" | "eventHandlers" | "url" | "portal">> & Loadable.LoadableComponent);
@@ -62,7 +62,7 @@ declare const Media: (React.ComponentClass<import("./media").MediaProps, any> &
 declare const MediaGroup: (React.ComponentClass<import("./mediaGroup").MediaGroupProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent);
 declare const MediaInline: (React.ComponentClass<import("./mediaInline").MediaInlineProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mediaInline").MediaInlineProps> & Loadable.LoadableComponent);
 declare const Mention: (React.ComponentClass<import("./mention").Props, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mention").Props> & Loadable.LoadableComponent);
-declare const Expand: (React.ComponentClass<import("../../ui/Expand").ExpandProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("../../ui/Expand").ExpandProps> & Loadable.LoadableComponent);
+declare const Expand: (React.ComponentClass<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("react-intl-next").WithIntlProps<import("../../ui/Expand").ExpandProps & import("react-intl-next").WrappedComponentProps<"intl">>> & Loadable.LoadableComponent);
 export declare const nodeToReact: {
     [key: string]: React.ComponentType<any>;
 };

package/dist/types/react/nodes/mediaSingle/index.d.ts

@@ -1,7 +1,7 @@
 import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import { EventHandlers } from '@atlaskit/editor-common';
 import { default as React } from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 import { AnalyticsEventPayload } from '../../../analytics/events';
 import { RendererAppearance } from '../../../ui/Renderer/types';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
@@ -21,7 +21,7 @@ export interface State {
     height?: number;
 }
 export declare const getMediaContainerWidth: (currentContainerWidth: number, layout: MediaSingleLayout) => number;
-declare const _default: React.ComponentClass<Props, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<Props & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/react/nodes/paragraph.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { NodeProps } from '../types';
 export default function Paragraph({ children, dataAttributes }: NodeProps): JSX.Element;

package/dist/types/react/nodes/placeholder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface Props {
     text: string;
     allowPlaceholderText?: boolean;

package/dist/types/react/nodes/rule.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export default function Rule(): JSX.Element;

package/dist/types/react/nodes/table/colgroup.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SharedTableProps } from './types';
 export interface ScaleOptions {
     renderWidth: number;

package/dist/types/react/nodes/text-wrapper.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 declare type Props = {
     startPos: number;
     endPos: number;
-    text?: string | null;
+    children?: string | null;
 };
-declare const TextWrapper: React.MemoExoticComponent<(props: Props) => JSX.Element | null>;
+declare const TextWrapper: (props: Props) => JSX.Element | null;
 export default TextWrapper;

package/dist/types/renderer-context.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-export declare type FeatureFlags = {};
+export declare type FeatureFlags = {
+    codeBidiWarnings?: boolean;
+};
 export declare type RendererContextProps = {
     featureFlags?: FeatureFlags;
 };

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/Expand.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnalyticsEventPayload } from '../analytics/events';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 export interface StyleProps {
     expanded?: boolean;
     focused?: boolean;
@@ -14,7 +14,7 @@ export interface ExpandProps {
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     nestedHeaderIds?: Array<string>;
 }
-declare const _default: React.ComponentClass<ExpandProps, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<ExpandProps & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<ExpandProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<ExpandProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

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;