@atlaskit/renderer 84.1.1 → 88.0.0

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,9 +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 => {
@@ -26,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);

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/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.1.1",
+	"version": "88.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

@@ -31,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;

package/dist/esm/analytics/unsupported-content.js

@@ -1,4 +1,4 @@
-import { getUnsupportedContentLevelData, getAnalyticsAppearance } from '@atlaskit/editor-common';
+import { getUnsupportedContentLevelData, getAnalyticsAppearance } from '@atlaskit/editor-common/utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './enums';
 import { PLATFORM } from './events';
 var rendersMap = {};

package/dist/esm/messages.js

@@ -14,6 +14,50 @@ export var headingAnchorLinkMessages = defineMessages({
     id: 'fabric.editor.headingLink.failedToCopy',
     defaultMessage: 'Copy failed',
     description: 'failed to copy heading link to clipboard'
+  },
+  copyAriaLabel: {
+    id: 'fabric.editor.headingLink.copyAriaLabel',
+    defaultMessage: 'Copy',
+    description: 'copy aria label for link icon'
+  }
+});
+export var tableCellMessages = defineMessages({
+  noneSortingLabel: {
+    id: 'fabric.editor.headingLink.noneSortingLabel',
+    defaultMessage: 'none',
+    description: 'this table column is not sorted'
+  },
+  ascSortingLabel: {
+    id: 'fabric.editor.headingLink.ascSortingLabel',
+    defaultMessage: 'ascending',
+    description: 'this table column is sorted in ascending order'
+  },
+  descSortingLabel: {
+    id: 'fabric.editor.headingLink.noneSortingLabel',
+    defaultMessage: 'descending',
+    description: 'this table column is sorted in descending order'
+  }
+});
+export var sortingIconMessages = defineMessages({
+  noOrderLabel: {
+    id: 'fabric.editor.headingLink.noOrderLabel',
+    defaultMessage: 'Sort column A to Z',
+    description: 'Sort the column in ascending order'
+  },
+  ascOrderLabel: {
+    id: 'fabric.editor.headingLink.ascOrderLabel',
+    defaultMessage: 'Sort column Z to A',
+    description: 'Sort the column in descending order'
+  },
+  descOrderLabel: {
+    id: 'fabric.editor.headingLink.descOrderLabel',
+    defaultMessage: 'Clear sorting',
+    description: 'clear the sorting from this column'
+  },
+  invalidLabel: {
+    id: 'fabric.editor.headingLink.descOrderLabel',
+    defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cell",
+    description: 'this sort is invalid for merged cells'
   }
 });
 export var codeBlockCopyButtonMessages = defineMessages({

package/dist/esm/react/hooks/use-observed-width.js

@@ -0,0 +1,80 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React from 'react';
+var resizeObserver;
+var nodeToCallback = new WeakMap();
+export var useObservedWidth = function useObservedWidth(node, useObservedWidthFlag) {
+  var _React$useState = React.useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  }),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rect = _React$useState2[0],
+      setRect = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (!node || !useObservedWidthFlag) {
+      return;
+    }
+
+    if (!resizeObserver) {
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = _createForOfIteratorHelper(entries),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+
+            if (nodeToCallback.has(entry.target)) {
+              nodeToCallback.get(entry.target)(entry.contentRect);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+    }
+
+    nodeToCallback.set(node, function (rect) {
+      var x = rect.x,
+          y = rect.y,
+          width = rect.width,
+          height = rect.height,
+          top = rect.top,
+          left = rect.left,
+          bottom = rect.bottom,
+          right = rect.right;
+      return setRect({
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        top: top,
+        left: left,
+        bottom: bottom,
+        right: right
+      });
+    });
+    resizeObserver.observe(node);
+    return function () {
+      resizeObserver.unobserve(node);
+      nodeToCallback.delete(node);
+    };
+  }, [node, useObservedWidthFlag]);
+  return rect;
+};

package/dist/esm/react/index.js

@@ -4,10 +4,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["key"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { MarkType } from 'prosemirror-model';
@@ -15,7 +16,8 @@ import { isNestedHeaderLinksEnabled } from './utils/links';
 import { Doc, DocWithSelectAllTrap, mergeTextNodes, isTextWrapper, isTextNode, toReact } from './nodes';
 import TextWrapperComponent from './nodes/text-wrapper';
 import { toReact as markToReact, isAnnotationMark } from './marks';
-import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/editor-common';
+import { getMarksByOrder, isSameMark } from '@atlaskit/editor-common/validator';
+import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import { getText } from '../utils';
 import { findChildrenByType } from 'prosemirror-utils';
 import { insideBreakoutLayout } from './renderer-node';
@@ -141,7 +143,7 @@ var ReactSerializer = /*#__PURE__*/function () {
 
       var _mark$attrs = mark.attrs,
           key = _mark$attrs.key,
-          otherAttrs = _objectWithoutProperties(_mark$attrs, ["key"]);
+          otherAttrs = _objectWithoutProperties(_mark$attrs, _excluded);
 
       var extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
@@ -191,6 +193,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.allowAnnotations = Boolean(init.allowAnnotations);
     this.surroundTextNodesWithTextWrapper = Boolean(init.surroundTextNodesWithTextWrapper);
     this.media = init.media;
+    this.smartLinks = init.smartLinks;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
   }
 
@@ -555,6 +558,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         nodeType: node.type.name,
         marks: node.marks,
+        smartLinks: this.smartLinks,
         dataAttributes: {
           // We need to account for depth (path.length gives up depth) here
           // but depth doesnt increment the pos, only accounted for.