@atlaskit/renderer 84.0.0 → 86.0.0

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

@@ -1,12 +1,11 @@
 import React from 'react';
 import { PureComponent } from 'react';
-import { Mention } from '@atlaskit/editor-common';
+import { Mention } from '@atlaskit/editor-common/mention';
 export default class MentionItem extends PureComponent {
   render() {
     const {
       eventHandlers,
       id,
-      portal,
       providers,
       text,
       accessLevel
@@ -16,7 +15,6 @@ export default class MentionItem extends PureComponent {
       text: text,
       accessLevel: accessLevel,
       providers: providers,
-      portal: portal,
       eventHandlers: eventHandlers && eventHandlers.mention
     });
   }

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

@@ -1,19 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
-import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
-import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
-import NoteIcon from '@atlaskit/icon/glyph/editor/note';
-import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
-import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common';
+import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common/styles';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 const PanelStyled = styled.div`
   ${props => {
   if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
@@ -32,12 +28,12 @@ const PanelStyled = styled.div`
 }}
 `;
 const panelIcons = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  note: NoteIcon,
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
   tip: TipIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
   custom: EmojiIcon
 };
 
@@ -47,6 +43,8 @@ const Panel = props => {
     panelType: type,
     panelColor,
     panelIcon,
+    panelIconId,
+    panelIconText,
     providers,
     children
   } = props; // only allow custom panel type if flag is set
@@ -58,6 +56,8 @@ const Panel = props => {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
         return /*#__PURE__*/React.createElement(EmojiItem, {
+          id: panelIconId,
+          text: panelIconText,
           shortName: panelIcon,
           providers: providers
         });
@@ -87,6 +87,8 @@ const Panel = props => {
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
     "data-panel-icon": panelIcon,
+    "data-panel-icon-id": panelIconId,
+    "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
     className: PanelSharedCssClassName.content

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

@@ -16,7 +16,8 @@ export default class Status extends PureComponent {
     }, /*#__PURE__*/React.createElement(AkStatus, {
       text: text,
       color: color,
-      localId: localId
+      localId: localId,
+      role: "presentation"
     }));
   }
 

package/dist/es2019/react/nodes/table/colgroup.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common';
+import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { calcLineLength } from '../../../ui/Renderer/breakout-ssr';
 // we allow scaling down column widths by no more than 15%

package/dist/es2019/react/nodes/table/sticky.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { TableSharedCssClassName } from '@atlaskit/editor-common';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
 const {

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

@@ -2,7 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import styled from 'styled-components';
-import { calcTableWidth, WidthConsumer, TableSharedCssClassName, overflowShadow, createCompareNodes, SortOrder, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose, tableMarginTop } from '@atlaskit/editor-common';
+import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
+import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';

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

@@ -2,11 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
-import { compose, SortOrder } from '@atlaskit/editor-common';
+import { compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
 import SortingIcon from '../../ui/SortingIcon';
 import { MODE, PLATFORM } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { RendererCssClassName } from '../../consts';
+import { injectIntl } from 'react-intl-next';
+import { tableCellMessages } from '../../messages';
 const IgnoreSorting = ['LABEL', 'INPUT'];
 
 const nextStatusOrder = currentSortOrder => {
@@ -24,19 +27,25 @@ const nextStatusOrder = currentSortOrder => {
   return SortOrder.NO_ORDER;
 };
 
-const getSortOrderLabel = currentSortOrder => {
+const getSortOrderLabel = (intl, currentSortOrder) => {
+  const {
+    noneSortingLabel,
+    ascSortingLabel,
+    descSortingLabel
+  } = tableCellMessages;
+
   switch (currentSortOrder) {
     case SortOrder.NO_ORDER:
-      return 'none';
+      return intl.formatMessage(noneSortingLabel);
 
     case SortOrder.ASC:
-      return 'ascending';
+      return intl.formatMessage(ascSortingLabel);
 
     case SortOrder.DESC:
-      return 'descending';
+      return intl.formatMessage(descSortingLabel);
 
     default:
-      return 'none';
+      return intl.formatMessage(noneSortingLabel);
   }
 };
 
@@ -101,7 +110,7 @@ const withCellProps = WrapperComponent => {
 };
 
 export const withSortableColumn = WrapperComponent => {
-  return class WithSortableColumn extends React.Component {
+  class WithSortableColumn extends React.Component {
     constructor(props) {
       super(props);
 
@@ -165,7 +174,8 @@ export const withSortableColumn = WrapperComponent => {
         onSorting,
         children,
         sortOrdered,
-        isHeaderRow
+        isHeaderRow,
+        intl
       } = this.props;
       const sortOrderedClassName = sortOrdered === SortOrder.NO_ORDER ? RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
 
@@ -181,7 +191,7 @@ export const withSortableColumn = WrapperComponent => {
 
       return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, this.props, {
         className: className,
-        ariaSort: getSortOrderLabel(sortOrdered)
+        ariaSort: getSortOrderLabel(intl, sortOrdered)
       }), /*#__PURE__*/React.createElement("div", {
         className: RendererCssClassName.SORTABLE_COLUMN_BUTTON,
         role: "button",
@@ -198,7 +208,9 @@ export const withSortableColumn = WrapperComponent => {
       }))));
     }
 
-  };
+  }
+
+  return injectIntl(WithSortableColumn);
 };
 export const TableHeader = compose(withSortableColumn, withCellProps)('th');
 export const TableCell = withCellProps('td');

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { SortOrder, compose } from '@atlaskit/editor-common';
+import { compose } from '@atlaskit/editor-common/utils';
+import { SortOrder } from '@atlaskit/editor-common/types';
 import { RendererCssClassName } from '../../consts';
 export default class TableRow extends React.Component {
   constructor(...args) {

package/dist/es2019/react/nodes/task-item-with-providers.js

@@ -45,11 +45,13 @@ export default class TaskItemWithProviders extends Component {
     const {
       contextIdentifierProvider,
       objectAri,
+      isRenderer,
       ...otherProps
     } = this.props;
     const resolvedObjectId = this.state.resolvedContextProvider && this.state.resolvedContextProvider.objectId || objectAri;
     return /*#__PURE__*/React.createElement(ResourcedTaskItem, _extends({}, otherProps, {
-      objectAri: resolvedObjectId
+      objectAri: resolvedObjectId,
+      isRenderer: isRenderer
     }));
   }
 

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 import TaskItemWithProviders from './task-item-with-providers';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 export default class TaskItem extends PureComponent {
@@ -35,6 +35,7 @@ export default class TaskItem extends PureComponent {
         objectAri: objectAri,
         taskId: localId,
         isDone: state === 'DONE',
+        isRenderer: true,
         disabled: disabled,
         taskDecisionProvider: taskDecisionProvider,
         contextIdentifierProvider: contextIdentifierProvider,

package/dist/es2019/render-document.js

@@ -1,7 +1,10 @@
 import { defaultSchema } from '@atlaskit/adf-schema';
 import { getValidDocument } from '@atlaskit/editor-common/validator';
-import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common';
+import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';
+import { PLATFORM } from './analytics/events';
 import { trackUnsupportedContentLevels } from './analytics/unsupported-content';
+import { transformMediaLinkMarks } from '@atlaskit/adf-utils';
 const SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
 
 const withStopwatch = cb => {
@@ -24,7 +27,22 @@ export const renderDocument = (doc, serializer, schema = defaultSchema, adfStage
     time: sanitizeTime
   } = withStopwatch(() => {
     if (useSpecBasedValidator) {
-      return validateADFEntity(schema, doc, dispatchAnalyticsEvent);
+      // link mark on mediaSingle is deprecated, need to move link mark to child media node
+      // https://product-fabric.atlassian.net/browse/ED-14043
+      const {
+        transformedAdf,
+        isTransformed
+      } = transformMediaLinkMarks(doc);
+
+      if (isTransformed && dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: ACTION.MEDIA_LINK_TRANSFORMED,
+          actionSubject: ACTION_SUBJECT.RENDERER,
+          eventType: EVENT_TYPE.OPERATIONAL
+        });
+      }
+
+      return validateADFEntity(schema, transformedAdf || doc, dispatchAnalyticsEvent);
     }
 
     return getValidDocument(doc, schema, adfStage);
@@ -59,7 +77,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/text/nodes/date.js

@@ -1,4 +1,4 @@
-import { timestampToIsoFormat } from '@atlaskit/editor-common';
+import { timestampToIsoFormat } from '@atlaskit/editor-common/utils';
 import { getText } from '../../utils';
 
 const date = (node, schema) => {

package/dist/es2019/types/smartLinksOptions.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/Expand.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
-import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, ClearNextSiblingMarginTop } from '@atlaskit/editor-common';
+import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { PLATFORM, MODE } from '../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics/enums';

package/dist/es2019/ui/ExtensionRenderer.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import memoizeOne from 'memoize-one';
-import { getExtensionRenderer, WithProviders, getNodeRenderer } from '@atlaskit/editor-common';
+import { getNodeRenderer } from '@atlaskit/editor-common/extensions';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { getExtensionRenderer } from '@atlaskit/editor-common/utils';
 export default class ExtensionRenderer extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/ui/MediaCard.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { filter } from '@atlaskit/adf-utils';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
-import { withImageLoader } from '@atlaskit/editor-common';
+import { withImageLoader } from '@atlaskit/editor-common/utils';
 import styled from 'styled-components';
 const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { breakoutConsts } from '@atlaskit/editor-common';
+import { breakoutConsts } from '@atlaskit/editor-common/utils';
 /**
  * Inline Script that updates breakout node width on client side,
  * before main JavaScript bundle is ready.
@@ -45,13 +45,16 @@ export const breakoutInlineScriptContext = `
 `;
 
 function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
-  function findUp(element, selector) {
+  const MEDIA_NODE_TYPE = 'mediaSingle';
+  const WIDE_LAYOUT_MODES = ['full-width', 'wide'];
+
+  function findUp(element, condition) {
     if (!element) {
       return;
     }
 
     while (element.parentElement) {
-      if (element.parentElement.classList.contains(selector)) {
+      if (condition(element)) {
         return element.parentElement;
       }
 
@@ -59,7 +62,11 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
     }
   }
 
-  const renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), 'ak-renderer-wrapper');
+  const renderer = findUp(document.querySelector('[data-breakout-script-id="' + id + '"]'), elem => {
+    var _elem$parentElement;
+
+    return !!((_elem$parentElement = elem.parentElement) !== null && _elem$parentElement !== void 0 && _elem$parentElement.classList.contains('ak-renderer-wrapper'));
+  });
 
   if (!renderer) {
     return;
@@ -76,7 +83,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
           const node = maybeNode;
           const mode = node.dataset.mode || node.dataset.layout || '';
 
-          if (!mode || !['full-width', 'wide'].includes(mode)) {
+          if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
 
@@ -99,9 +106,43 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
             }
           }
         });
+      } else if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not availabe in the above conditional.
+       * Thus adding this conditional to deal with all meida elements directly.
+       */
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        applyMediaBreakout(item.target);
       }
     });
   });
+
+  const applyMediaBreakout = card => {
+    // width was already set by another breakout script
+    if (card.style.width) {
+      return;
+    }
+
+    const tableParent = findUp(card, elem => elem instanceof HTMLTableCellElement); // only apply the breakout to media elements not nested inside table
+    // table sizing is not based on percentage width
+
+    if (tableParent) {
+      return;
+    }
+
+    const mode = card.dataset.mode || card.dataset.layout || '';
+    const width = card.dataset.width;
+
+    if (WIDE_LAYOUT_MODES.includes(mode)) {
+      card.style.width = '100%';
+    } else if (width) {
+      card.style.width = `${width}%`;
+    }
+  };
+
   observer.observe(renderer, {
     childList: true,
     subtree: true

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

@@ -4,7 +4,9 @@ import React, { useContext, useLayoutEffect, useRef } from 'react';
 import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema';
 import { reduce } from '@atlaskit/adf-utils';
-import { UnsupportedBlock, ProviderFactory, BaseTheme, WidthProvider, getAnalyticsAppearance, getAnalyticsEventSeverity, WithCreateAnalyticsEvent, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, IntlNextErrorBoundary, LegacyToNextIntlProvider, IntlLegacyFallbackProvider } from '@atlaskit/editor-common';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, LegacyToNextIntlProvider, IntlLegacyFallbackProvider, IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
+import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
 import { IframeWidthObserverFallbackWrapper, IframeWrapperConsumer } from '@atlaskit/width-detector';
@@ -181,6 +183,7 @@ export class Renderer extends PureComponent {
       allowMediaLinking: props.media && props.media.allowLinking,
       surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
       media: props.media,
+      smartLinks: props.smartLinks,
       allowCopyToClipboard: props.allowCopyToClipboard,
       allowCustomPanels: props.allowCustomPanels,
       allowAnnotations: props.allowAnnotations,

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}
 

package/dist/es2019/ui/SortingIcon.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
-import { SortOrder } from '@atlaskit/editor-common';
 import Tooltip from '@atlaskit/tooltip';
 import { gridSize } from '@atlaskit/theme/constants';
-import { N20, N30 } from '@atlaskit/theme/colors'; // We use data url here because of this issue:
+import { N20, N30 } from '@atlaskit/theme/colors';
+import { SortOrder } from '@atlaskit/editor-common/types';
+import { sortingIconMessages } from '../messages';
+import { injectIntl } from 'react-intl-next'; // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
 
@@ -69,30 +71,40 @@ const getClassName = status => {
   }
 };
 
-const getTooltipTitle = status => {
+const getTooltipTitle = (intl, isSortingAllowed, status) => {
+  const {
+    noOrderLabel,
+    ascOrderLabel,
+    descOrderLabel,
+    invalidLabel
+  } = sortingIconMessages;
+
+  if (!isSortingAllowed) {
+    return intl.formatMessage(invalidLabel);
+  }
+
   switch (status) {
     case SortOrder.NO_ORDER:
-      return 'Sort column A to Z';
+      return intl.formatMessage(noOrderLabel);
 
     case SortOrder.ASC:
-      return 'Sort column Z to A';
+      return intl.formatMessage(ascOrderLabel);
 
     case SortOrder.DESC:
-      return 'Clear sorting';
+      return intl.formatMessage(descOrderLabel);
   }
 
   return '';
 };
 
-const notAllowedTooltip = `⚠️  You can't sort a table with merged cell`;
-
 const SortingIcon = ({
   isSortingAllowed,
-  sortOrdered
+  sortOrdered,
+  intl
 }) => {
   const activated = sortOrdered !== SortOrder.NO_ORDER;
   const wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
-  const content = isSortingAllowed ? getTooltipTitle(sortOrdered) : notAllowedTooltip;
+  const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
   return /*#__PURE__*/React.createElement(Tooltip, {
     delay: 0,
     content: content,
@@ -104,4 +116,4 @@ const SortingIcon = ({
   })));
 };
 
-export default SortingIcon;
+export default injectIntl(SortingIcon);

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

@@ -6,7 +6,7 @@ import { splitText, calcTextSplitOffset } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
 import styled from 'styled-components';
-import { AnnotationSharedCSSByState } from '@atlaskit/editor-common';
+import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 const DraftAnnotation = styled.mark`
   color: inherit;
   background-color: unset;

package/dist/es2019/ui/annotations/element/index.js

@@ -3,7 +3,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { MarkComponent } from './mark';
 import { useInlineCommentSubscriberContext, useHasFocusEvent, useInlineCommentsFilter } from '../hooks';
 import { InlineCommentsStateContext } from '../context';
-import { AnnotationUpdateEvent } from '@atlaskit/editor-common';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 
 const MarkElement = ({
   annotationParentIds,

package/dist/es2019/ui/annotations/element/mark.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, useCallback } from 'react';
-import { AnnotationSharedCSSByState } from '@atlaskit/editor-common';
+import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import styled from 'styled-components';
 const MarkStyled = styled.mark`

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

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
-import { AnnotationUpdateEvent } from '@atlaskit/editor-common';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../../analytics/enums';
 import { FabricChannel } from '@atlaskit/analytics-listeners';

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

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react';
-import { AnnotationUpdateEvent } from '@atlaskit/editor-common';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { ProvidersContext } from '../context';
 import { RendererContext as ActionsContext } from '../../RendererActionsContext';
 export const useLoadAnnotations = ({

package/dist/es2019/version.json

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

package/dist/esm/actions/index.js

@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
-import { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from '@atlaskit/editor-common';
+import { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from '@atlaskit/editor-common/utils';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { RemoveMarkStep } from 'prosemirror-transform';
 import { createAnnotationStep, getPosFromRange } from '../steps';

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";
@@ -30,6 +31,7 @@ export var ACTION;
   ACTION["CREATE_NOT_ALLOWED"] = "createNotAllowed";
   ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED"] = "unsupportedContentLevelsTrackingSucceeded";
   ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED"] = "unsupportedContentLevelsTrackingErrored";
+  ACTION["MEDIA_LINK_TRANSFORMED"] = "mediaLinkTransformed";
 })(ACTION || (ACTION = {}));
 
 export var ACTION_SUBJECT;