@atlaskit/renderer 82.1.0 → 84.1.0

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/react/nodes/text-wrapper.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { TextWithAnnotationDraft } from '../../ui/annotations';
-const TextWrapper = /*#__PURE__*/React.memo(props => {
+
+const TextWrapper = props => {
   const {
     startPos,
     endPos
   } = props;
   const {
-    text
+    children
   } = props;
 
-  if (!text) {
+  if (!children) {
     return null;
   }
 
   return /*#__PURE__*/React.createElement(TextWithAnnotationDraft, {
-    text: text,
     startPos: startPos,
     endPos: endPos
-  });
-});
+  }, children);
+};
+
 export default TextWrapper;

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

@@ -59,7 +59,7 @@ export const applyAnnotationOnText = ({
 export const TextWithAnnotationDraft = ({
   startPos,
   endPos,
-  text
+  children
 }) => {
   const textPosition = React.useMemo(() => ({
     start: startPos,
@@ -75,21 +75,21 @@ export const TextWithAnnotationDraft = ({
   }, [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);
   }
 
-  const offsets = calcTextSplitOffset(nextDraftPosition, textPosition, text);
-  const texts = splitText(text, offsets);
+  const offsets = calcTextSplitOffset(nextDraftPosition, textPosition, children);
+  const texts = splitText(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, text);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
 
   const components = applyAnnotationOnText({

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.1.0",
+	"version": "84.1.0",
 	"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";

package/dist/esm/messages.js

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

package/dist/esm/react/index.js

@@ -19,6 +19,7 @@ import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/ed
 import { getText } from '../utils';
 import { findChildrenByType } from 'prosemirror-utils';
 import { insideBreakoutLayout } from './renderer-node';
+import { isCodeMark } from './marks/code';
 
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
@@ -144,13 +145,22 @@ var ReactSerializer = /*#__PURE__*/function () {
 
       var extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
-      };
-
-      var props = _objectSpread(_objectSpread(_objectSpread({
+      }; // currently the only mark which has custom props is the code mark
+
+      var markSpecificProps = isCodeMark(mark) ? {
+        // The appearance being mobile indicates we are in an renderer being
+        // rendered by mobile bridge in a web view.
+        // The tooltip is likely to have unexpected behaviour there, with being cut
+        // off, so we disable it. This is also to keep the behaviour consistent with
+        // the rendering in the mobile Native Renderer.
+        codeBidiWarningTooltipEnabled: _this.appearance !== 'mobile'
+      } : {};
+
+      var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         eventHandlers: _this.eventHandlers,
         fireAnalyticsEvent: _this.fireAnalyticsEvent,
         markKey: key
-      }, otherAttrs), extraProps), {}, {
+      }, otherAttrs), extraProps), markSpecificProps), {}, {
         dataAttributes: {
           'data-renderer-mark': true
         }
@@ -334,9 +344,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         return /*#__PURE__*/React.createElement(TextWrapperComponent, {
           key: textKey,
           startPos: startPos + parentDepth,
-          endPos: endPos + parentDepth,
-          text: mark.text
-        });
+          endPos: endPos + parentDepth
+        }, mark.text);
       }
 
       return mark.text || '';
@@ -421,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;
@@ -437,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
       });
     }
   }, {
@@ -464,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
       });
     }
   }, {
@@ -504,8 +516,15 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getCodeBlockProps",
     value: function getCodeBlockProps(node) {
+      // The appearance being mobile indicates we are in an renderer being
+      // rendered by mobile bridge in a web view.
+      // The tooltip is likely to have unexpected behaviour there, with being cut
+      // off, so we disable it. This is also to keep the behaviour consistent with
+      // the rendering in the mobile Native Renderer.
+      var codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        text: node.textContent
+        text: node.textContent,
+        codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
       });
     }
   }, {

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

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

package/dist/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/marks/textColor.js

@@ -1,9 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { useMemo } from 'react';
 export default function TextColor(props) {
+  var style = useMemo(function () {
+    return _defineProperty({}, '--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/esm/react/nodes/codeBlock.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 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';
@@ -18,7 +18,8 @@ function CodeBlock(props) {
   var text = props.text,
       language = props.language,
       _props$allowCopyToCli = props.allowCopyToClipboard,
-      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli;
+      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
+      codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
   var featureFlags = useFeatureFlags();
   var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
@@ -30,7 +31,8 @@ function CodeBlock(props) {
     language: language,
     text: text,
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
-    codeBidiWarningLabel: codeBidiWarningLabel
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));
 }
 

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

@@ -4,7 +4,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 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/esm/react/nodes/date.js

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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';
 
 var Date = /*#__PURE__*/function (_PureComponent) {
   _inherits(Date, _PureComponent);

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

@@ -22,7 +22,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 var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {

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/mediaSingle/index.js

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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';