@atlaskit/renderer 82.2.0 → 84.1.1

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

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

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextWithAnnotationDraft = exports.applyAnnotationOnText = exports.getAnnotationIndex = exports.AnnotationDraft = void 0;
+exports.getAnnotationIndex = exports.applyAnnotationOnText = exports.TextWithAnnotationDraft = exports.AnnotationDraft = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/utils.js

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

package/dist/cjs/version.json

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

package/dist/es2019/analytics/enums.js

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

package/dist/es2019/messages.js

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

package/dist/es2019/react/index.js

@@ -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/code.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import AkCode from '@atlaskit/code/inline';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';

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

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

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

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

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

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

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

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

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

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

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

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

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/render-document.js

@@ -1,6 +1,8 @@
 import { defaultSchema } from '@atlaskit/adf-schema';
 import { getValidDocument } from '@atlaskit/editor-common/validator';
 import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';
+import { PLATFORM } from './analytics/events';
 import { trackUnsupportedContentLevels } from './analytics/unsupported-content';
 const SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
@@ -59,7 +61,23 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
     time: buildTreeTime
   } = withStopwatch(() => {
     const pmNode = schema.nodeFromJSON(validDoc);
-    pmNode.check();
+
+    try {
+      pmNode.check();
+    } catch (err) {
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          attributes: {
+            platform: PLATFORM.WEB,
+            error: err === null || err === void 0 ? void 0 : err.toString()
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
+    }
+
     return pmNode;
   }); // save build tree time to stats
 

package/dist/es2019/ui/Expand.js

@@ -8,7 +8,7 @@ import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, E
 import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { PLATFORM, MODE } from '../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics/enums';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
 const Title = styled.span`

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

@@ -2,10 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -147,7 +146,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 +182,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 +205,7 @@ export class Renderer extends PureComponent {
       allowPlaceholderText,
       allowColumnSorting,
       allowCopyToClipboard,
-      UNSAFE_allowCustomPanels
+      allowCustomPanels
     } = this.props;
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
     /**
@@ -270,7 +269,7 @@ export class Renderer extends 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: event => this.fireAnalyticsEvent(event)
         }
@@ -280,7 +279,7 @@ export class Renderer extends PureComponent {
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
-        allowCustomPanels: UNSAFE_allowCustomPanels,
+        allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
@@ -291,7 +290,7 @@ export class Renderer extends PureComponent {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
-      }, result))))))));
+      }, result)))))))));
       return truncated ? /*#__PURE__*/React.createElement(TruncatedWrapper, {
         height: maxHeight,
         fadeHeight: fadeOutHeight
@@ -340,14 +339,15 @@ const RendererWithAnalytics = /*#__PURE__*/React.memo(props => /*#__PURE__*/Reac
   }
 }, /*#__PURE__*/React.createElement(WithCreateAnalyticsEvent, {
   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
-    })));
+    }))));
   }
 })));
 const RendererWithIframeFallbackWrapper = /*#__PURE__*/React.memo(props => {

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

@@ -3,7 +3,8 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
-import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, panelSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, shadowClassNames, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding } from '@atlaskit/editor-common';
+import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, panelSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles } from '@atlaskit/editor-common/styles';
+import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
@@ -333,6 +334,7 @@ export const Wrapper = styled.div`
   ${codeMarkSharedStyles};
   ${shadowSharedStyle};
   ${dateSharedStyle};
+  ${textColorStyles};
   ${tasksAndDecisionsStyles};
   ${smartCardSharedStyles}
 
@@ -589,7 +591,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": "84.1.1",
 	"sideEffects": false
 }

package/dist/esm/analytics/enums.js

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